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

package/dist/cjs/{gux-advanced-dropdown.cjs.entry.js → gux-advanced-dropdown-legacy.cjs.entry.js}

@@ -6,7 +6,7 @@ const index = require('./index-0d0fdb85.js');
 const onMutation = require('./on-mutation-8f8a4460.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
 
@@ -15,7 +15,7 @@ const advancedDropDownResources = {
 	searchAria: searchAria
 };
 
-const guxAdvancedDropdownCss = ":host{color:#2e394c}gux-popup{display:block;margin:4px 0}gux-popup .gux-select-field{position:relative;width:100%;height:32px}gux-popup .gux-select-field a.gux-select-input{position:absolute;inset:0;padding:6px 24px 6px 12px;overflow:hidden;color:#2e394c;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,gux-popup .gux-select-field a.gux-select-input .gux-select-value{line-height:20px}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:none;box-shadow:0 0 0 3px rgba(117, 168, 255, 0.5)}gux-popup .gux-select-field .gux-icon-wrapper{position:absolute;top:1px;right:8px;bottom:0;display:flex;align-items:center;overflow:hidden;cursor:pointer}gux-popup .gux-select-field .gux-icon-wrapper gux-icon{width:16px;height:16px;color:#596373}gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon{color:#2e394c}gux-popup .gux-advanced-dropdown-menu{width:100%;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 0 2px 0 rgba(32, 41, 55, 0.24);box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search{margin:8px 16px}gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button,gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button,gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}gux-popup .gux-dropdown-options{padding:8px 0;margin:0;overflow-y:auto;color:#2e394c;background:#fdfdfd;border-radius:4px;box-shadow:none}gux-popup::part(gux-popup-container){width:inherit}";
+const guxAdvancedDropdownCss = ".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)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}:host{color:#2e394c}gux-popup{display:block;margin:4px 0}gux-popup .gux-select-field{position:relative;width:100%;height:32px}gux-popup .gux-select-field a.gux-select-input{position:absolute;inset:0;padding:6px 24px 6px 12px;overflow:hidden;color:#2e394c;text-overflow:ellipsis;text-decoration:none;white-space:nowrap;cursor:pointer;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,gux-popup .gux-select-field a.gux-select-input .gux-select-value{line-height:20px}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:none;box-shadow:0 0 0 3px rgba(117, 168, 255, 0.5)}gux-popup .gux-select-field .gux-icon-wrapper{position:absolute;top:1px;right:8px;bottom:0;display:flex;align-items:center;overflow:hidden;cursor:pointer}gux-popup .gux-select-field .gux-icon-wrapper gux-icon{width:16px;height:16px;color:#596373}gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon{color:#2e394c}gux-popup .gux-advanced-dropdown-menu{width:100%;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 0 2px 0 rgba(32, 41, 55, 0.24)}gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search{margin:8px 16px}gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button,gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button,gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}gux-popup .gux-dropdown-options{padding:8px 0;margin:0;overflow-y:auto;color:#2e394c;background:#fdfdfd;border-radius:4px;box-shadow:none}gux-popup::part(gux-popup-container){width:inherit}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -27,7 +27,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const GuxAdvancedDropdown = class {
+const GuxAdvancedDropdownLegacy = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.input = index.createEvent(this, "input", 7);
@@ -212,7 +212,7 @@ const GuxAdvancedDropdown = class {
 };
 __decorate([
   onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxAdvancedDropdown.prototype, "onClickOutside", null);
-GuxAdvancedDropdown.style = guxAdvancedDropdownCss;
+], GuxAdvancedDropdownLegacy.prototype, "onClickOutside", null);
+GuxAdvancedDropdownLegacy.style = guxAdvancedDropdownCss;
 
-exports.gux_advanced_dropdown = GuxAdvancedDropdown;
+exports.gux_advanced_dropdown_legacy = GuxAdvancedDropdownLegacy;

package/dist/cjs/gux-all-row-select.cjs.entry.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const en = require('./en-dc1f49b7.js');
+const en = require('./en-d1b32383.js');
 require('./get-closest-element-ab4b2eee.js');
 
-const guxAllRowSelectCss = "gux-all-row-select .gux-label-text{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxAllRowSelectCss = ":host .gux-label-text{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxAllRowSelect = class {
   constructor(hostRef) {
@@ -19,9 +19,7 @@ const GuxAllRowSelect = class {
   }
   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) {

package/dist/cjs/gux-announce-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 
 const guxAnnounceCss = ":host{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";

package/dist/cjs/gux-badge.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const usage = require('./usage-89e1afa4.js');
+const index$1 = require('./index-9bbde1aa.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const info = "badge with label: {label}, accent: info";
+const success = "badge with label: {label}, accent: success";
+const warning = "badge with label: {label}, accent: warning";
+const error = "badge with label: {label}, accent: error";
+const inherit = "badge with label: {label}";
+const translationResources = {
+	info: info,
+	"info-bold": "badge with label: {label}, accent: info bold",
+	success: success,
+	"success-bold": "badge with label: {label}, accent: success bold",
+	warning: warning,
+	"warning-bold": "badge with label: {label}, accent: warning bold",
+	error: error,
+	"error-bold": "badge with label: {label}, accent: error error",
+	inherit: inherit
+};
+
+const guxBadgeCss = ":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}";
+
+const GuxBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accent = 'info';
+    this.bold = false;
+    this.label = undefined;
+  }
+  onSlotChange(event) {
+    const slotAssignedNodes = event.composedPath()[0].assignedNodes();
+    this.label = slotAssignedNodes
+      .map(nodeItem => nodeItem.textContent)
+      .join('');
+  }
+  renderBadgeTitle() {
+    return (index.h("gux-tooltip-title", null, index.h("span", null, index.h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
+  }
+  renderSrText() {
+    return (index.h("div", { class: "gux-sr-only" }, this.i18n(this.getVariant(), {
+      label: this.label
+    })));
+  }
+  getVariant() {
+    return `${this.accent}${this.bold ? '-bold' : ''}`;
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+  }
+  render() {
+    return (index.h("div", { class: {
+        'gux-badge': true,
+        [`gux-${this.accent}`]: true,
+        'gux-bold': this.bold
+      } }, this.renderBadgeTitle(), this.renderSrText()));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxBadge.style = guxBadgeCss;
+
+exports.gux_badge = GuxBadge;

package/dist/cjs/gux-blank-state.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const usage = require('./usage-89e1afa4.js');
+
+const guxBlankStateCss = "/**\n  * @prop --gse-ui-badge-height\n  * @prop --gse-ui-badge-height\n  * @prop --gse-ui-blankState-backgroundColor\n  * @prop --gse-ui-blankState-borderRadius\n  * @prop --gse-ui-blankState-gapContent\n  * @prop --gse-ui-blankState-gapMain\n  * @prop --gse-ui-blankState-gapMessage\n  * @prop --gse-ui-blankState-icon-size-lg\n  * @prop --gse-ui-blankState-icon-size-sm\n  * @prop --gse-ui-blankState-iconColor\n  * @prop --gse-ui-blankState-large-width : // TODO https://inindca.atlassian.net/browse/COMUI-2242\n  * @prop --gse-ui-blankState-padding\n  * @prop --gse-ui-blankState-small-width : // TODO https://inindca.atlassian.net/browse/COMUI-2242\n  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontFamily\n  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontSize\n  * @prop --gse-ui-progressAndLoading-blankState-large-header-fontWeight\n  * @prop --gse-ui-progressAndLoading-blankState-large-header-lineHeight\n  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontFamily\n  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontSize\n  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-fontWeight\n  * @prop --gse-ui-progressAndLoading-blankState-large-subheader-lineHeight\n  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontFamily\n  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontSize\n  * @prop --gse-ui-progressAndLoading-blankState-small-header-fontWeight\n  * @prop --gse-ui-progressAndLoading-blankState-small-header-lineHeight\n  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontFamily\n  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontSize\n  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-fontWeight\n  * @prop --gse-ui-progressAndLoading-blankState-small-subheader-lineHeight\n  */\n:host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  container-type: inline-size;\n}\n\n.gux-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gse-ui-blankState-padding);\n  border-radius: var(--gse-ui-blankState-borderRadius);\n  color: var(--gse-ui-blankState-foregroundColor);\n  background-color: var(--gse-ui-blankState-backgroundColor);\n}\n.gux-container .gux-image {\n  padding-bottom: var(--gse-ui-blankState-gapMain);\n}\n.gux-container .gux-message {\n  padding-bottom: var(--gse-ui-blankState-gapMessage);\n}\n.gux-container .gux-guidance {\n  padding-bottom: var(--gse-ui-blankState-gapContent);\n}\n.gux-container ::slotted(gux-icon) {\n  width: var(--gse-ui-blankState-icon-size-lg);\n  height: var(--gse-ui-blankState-icon-size-lg);\n  color: var(--gse-ui-blankState-iconColor);\n}\n.gux-container slot[name=primary-message] {\n  color: var(--gse-ui-blankState-foregroundColor);\n  text-align: center;\n  font-family: var(--gse-ui-progressAndLoading-blankState-large-header-fontFamily);\n  font-weight: var(--gse-ui-progressAndLoading-blankState-large-header-fontWeight);\n  line-height: var(--gse-ui-progressAndLoading-blankState-large-header-lineHeight);\n  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);\n}\n.gux-container slot[name=additional-guidance] {\n  color: var(--gse-ui-blankState-foregroundColor);\n  text-align: center;\n  font-family: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontFamily);\n  font-weight: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontWeight);\n  line-height: var(--gse-ui-progressAndLoading-blankState-large-subheader-lineHeight);\n  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);\n}\n\n@container (width <= 250px) {\n  .gux-container ::slotted(gux-icon) {\n    width: var(--gse-ui-blankState-icon-size-sm);\n    height: var(--gse-ui-blankState-icon-size-sm);\n  }\n  .gux-container slot[name=primary-message] {\n    font-family: var(--gse-ui-progressAndLoading-blankState-small-header-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-blankState-small-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-blankState-small-header-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);\n  }\n  .gux-container slot[name=additional-guidance] {\n    font-family: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-blankState-small-subheader-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);\n  }\n}";
+
+const GuxBlankState = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+  }
+  render() {
+    return (index.h("div", { class: "gux-container" }, index.h("div", { class: "gux-image" }, index.h("slot", { name: "image" })), index.h("div", { class: "gux-message" }, index.h("slot", { name: "primary-message" })), index.h("div", { class: "gux-guidance" }, index.h("slot", { name: "additional-guidance" })), index.h("gux-button-slot", { accent: "primary" }, index.h("slot", { name: "call-to-action" }))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxBlankState.style = guxBlankStateCss;
+
+exports.gux_blank_state = GuxBlankState;

package/dist/cjs/gux-breadcrumbs.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const breadcrumbs = "Breadcrumbs";

package/dist/cjs/gux-button-multi.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-0d0fdb85.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
 const guxButtonMultiAccent = ['primary', 'secondary', 'tertiary'];
 function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
@@ -33,7 +33,6 @@ const GuxButtonMulti = class {
     index.registerInstance(this, hostRef);
     this.open = index.createEvent(this, "open", 7);
     this.close = index.createEvent(this, "close", 7);
-    this.text = undefined;
     this.disabled = false;
     this.accent = 'secondary';
     this.isOpen = false;
@@ -118,7 +117,7 @@ const GuxButtonMulti = class {
     usage.trackComponent(this.root, { variant: this.accent });
   }
   render() {
-    return (index.h("gux-popup", { expanded: this.isOpen }, index.h("div", { slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot-beta", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { name: "title" }, this.text), index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", null)))));
+    return (index.h("gux-popup", { expanded: this.isOpen }, index.h("div", { slot: "target", class: "gux-button-multi-container" }, index.h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, index.h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("slot", { name: "title" }), index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", null)))));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gux-button-slot.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const usage = require('./usage-89e1afa4.js');
+const logError = require('./log-error-d46c02b7.js');
+
+const guxButtonSlotCss = ".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}::slotted(input[type=button]),::slotted(input[type=submit]),::slotted(button){font-family:var(--gse-ui-button-text-fontFamily);font-weight:var(--gse-ui-button-text-fontWeight);font-size:var(--gse-ui-button-text-fontSize);line-height:var(--gse-ui-button-text-lineHeight);color:var(--gse-ui-button-secondary-default-foregroundColor);background-color:var(--gse-ui-button-secondary-default-backgroundColor);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-height);padding:var(--gse-ui-button-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;border:none;border-radius:var(--gse-ui-button-borderRadius)}::slotted(input[type=button][disabled]),::slotted(input[type=submit][disabled]),::slotted(button[disabled]){opacity:var(--gse-ui-button-disabled-opacity);cursor:default}::slotted(input[type=button]:focus),::slotted(input[type=submit]:focus),::slotted(button:focus){outline:none}::slotted(input[type=button]:focus-visible:enabled),::slotted(input[type=submit]:focus-visible:enabled),::slotted(button:focus-visible:enabled){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),::slotted(input[type=submit]:hover:enabled),::slotted(button:hover:enabled){color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}::slotted(input[type=button]:active:enabled),::slotted(input[type=submit]:active:enabled),::slotted(button:active:enabled){color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]),:host([accent=primary]) ::slotted(input[type=submit]),:host([accent=primary]) ::slotted(button){color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:hover:enabled),:host([accent=primary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=primary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}:host([accent=primary]) ::slotted(input[type=button]:active:enabled),:host([accent=primary]) ::slotted(input[type=submit]:active:enabled),:host([accent=primary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]),:host([accent=tertiary]) ::slotted(input[type=submit]),:host([accent=tertiary]) ::slotted(button){color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-width:var(--gse-ui-button-tertiary-default-border-width);border-style:var(--gse-ui-button-tertiary-default-border-style);border-color:var(--gse-ui-button-tertiary-default-border-color)}:host([accent=tertiary]) ::slotted(input[type=button]:hover:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:hover:enabled),:host([accent=tertiary]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}:host([accent=tertiary]) ::slotted(input[type=button]:active:enabled),:host([accent=tertiary]) ::slotted(input[type=submit]:active:enabled),:host([accent=tertiary]) ::slotted(button:active:enabled){color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]),:host([accent=ghost]) ::slotted(input[type=submit]),:host([accent=ghost]) ::slotted(button){color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:hover:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:hover:enabled),:host([accent=ghost]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}:host([accent=ghost]) ::slotted(input[type=button]:active:enabled),:host([accent=ghost]) ::slotted(input[type=submit]:active:enabled),:host([accent=ghost]) ::slotted(button:active:enabled){color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]),:host([accent=danger]) ::slotted(input[type=submit]),:host([accent=danger]) ::slotted(button){color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:hover:enabled),:host([accent=danger]) ::slotted(input[type=submit]:hover:enabled),:host([accent=danger]) ::slotted(button:hover:enabled){color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}:host([accent=danger]) ::slotted(input[type=button]:active:enabled),:host([accent=danger]) ::slotted(input[type=submit]:active:enabled),:host([accent=danger]) ::slotted(button:active:enabled){color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}:host([accent=inline]){min-width:initial}:host([accent=inline]) ::slotted(input[type=button]),:host([accent=inline]) ::slotted(input[type=submit]),:host([accent=inline]) ::slotted(button){height:initial;padding:0;color:var(--gse-ui-link-default-color);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-color)}: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){text-decoration:underline;color:var(--gse-ui-link-hover-color);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){text-decoration:underline;color:var(--gse-ui-link-active-color);background:none}";
+
+const GuxButtonSlot = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accent = 'secondary';
+  }
+  validateSlotContent() {
+    let slottedElement = this.root.children[0];
+    let slottedTagName = slottedElement.tagName;
+    if (slottedTagName === 'SLOT') {
+      slottedElement = slottedElement.assignedNodes()[0];
+      slottedTagName = slottedElement.tagName;
+    }
+    if (slottedTagName === 'BUTTON') {
+      return;
+    }
+    else if (slottedTagName === 'INPUT') {
+      const slottedType = slottedElement.getAttribute('type');
+      if (slottedType === 'button' || slottedType === 'submit') {
+        return;
+      }
+    }
+    logError.logError(this.root, 'You must slot a button, input[type="button"] or input[type="submit"] element.');
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.validateSlotContent();
+  }
+  render() {
+    return (index.h(index.Host, { accent: this.accent }, index.h("slot", null)));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxButtonSlot.style = guxButtonSlotCss;
+
+exports.gux_button_slot = GuxButtonSlot;

package/dist/cjs/gux-button.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
-const guxButtonCss = ":host{display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size)}::slotted(*){padding-left:8px;vertical-align:middle}::slotted(*:first-child){padding:0}button{font-family:var(--gse-ui-button-text-fontFamily);font-weight:var(--gse-ui-button-text-fontWeight);font-size:var(--gse-ui-button-text-fontSize);line-height:var(--gse-ui-button-text-lineHeight);color:var(--gse-ui-button-secondary-default-foregroundColor);background-color:var(--gse-ui-button-secondary-default-backgroundColor);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-height);padding:var(--gse-ui-button-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;border:none;border-radius:var(--gse-ui-button-borderRadius)}button[disabled]{opacity:var(--gse-ui-button-disabled-opacity);cursor:default}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{outline:3px solid #7b88f7;outline-offset:1px;border-radius:3px}button.gux-primary{color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-width:var(--gse-ui-button-tertiary-default-border-width);border-style:var(--gse-ui-button-tertiary-default-border-style);border-color:var(--gse-ui-button-tertiary-default-border-color)}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-width:initial;height:initial;padding:0;color:var(--gse-ui-link-default-color);background:none;border:none}button.gux-inline[disabled]{color:var(--gse-ui-link-disabled-color)}button.gux-inline:hover:enabled{text-decoration:underline;color:var(--gse-ui-link-hover-color);background:none}button.gux-inline:active:enabled{text-decoration:underline;color:var(--gse-ui-link-active-color);background:none}";
+const guxButtonCss = ".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;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size)}::slotted(*){padding-left:8px;vertical-align:middle}::slotted(*:first-child){padding:0}button{font-family:var(--gse-ui-button-text-fontFamily);font-weight:var(--gse-ui-button-text-fontWeight);font-size:var(--gse-ui-button-text-fontSize);line-height:var(--gse-ui-button-text-lineHeight);color:var(--gse-ui-button-secondary-default-foregroundColor);background-color:var(--gse-ui-button-secondary-default-backgroundColor);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-height);padding:var(--gse-ui-button-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;border:none;border-radius:var(--gse-ui-button-borderRadius)}button[disabled]{opacity:var(--gse-ui-button-disabled-opacity);cursor:default}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{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);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-width:var(--gse-ui-button-tertiary-default-border-width);border-style:var(--gse-ui-button-tertiary-default-border-style);border-color:var(--gse-ui-button-tertiary-default-border-color)}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-width:initial;height:initial;padding:0;color:var(--gse-ui-link-default-color);background:none;border:none}button.gux-inline[disabled]{color:var(--gse-ui-link-disabled-color)}button.gux-inline:hover:enabled{text-decoration:underline;color:var(--gse-ui-link-hover-color);background:none}button.gux-inline:active:enabled{text-decoration:underline;color:var(--gse-ui-link-active-color);background:none}";
 
 const GuxButton = class {
   constructor(hostRef) {

package/dist/cjs/gux-calendar.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 const isoDates = require('./iso-dates-f78ffb80.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const index$1 = require('./index-9bbde1aa.js');
 const capitalizeFirstLetter = require('./capitalize-first-letter-8e2f04e5.js');
 require('./get-closest-element-ab4b2eee.js');
@@ -54,7 +54,7 @@ function getDateMonthAndYearString(date, locale) {
   return capitalizeFirstLetter.capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
 }
 
-const guxCalendarCss = ":host{display:inline-block}.gux-calendar{margin-top:2px;border:1px solid #b4bccb;border-radius:4px}.gux-calendar .gux-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-calendar .gux-header button{position:absolute;padding:5px;color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-calendar .gux-header button:focus-visible{outline:#75a8ff auto 5px}.gux-calendar .gux-header button.gux-left{left:18px}.gux-calendar .gux-header button.gux-right{right:18px}.gux-calendar .gux-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-calendar .gux-header .gux-month-list{display:flex;justify-content:space-between;width:100%}.gux-calendar .gux-header .gux-month-list label{width:100%;text-align:center;font-size:12px;line-height:20px;font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content{display:flex;align-items:flex-start;padding:20px 24px;color:#2e394c;background-color:#fdfdfd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.gux-calendar .gux-content table{width:168px;text-align:left;table-layout:fixed;border-spacing:0;-ms-user-select:none;user-select:none}.gux-calendar .gux-content table:not(:last-child){padding-right:24px}.gux-calendar .gux-content table tr{height:28px}.gux-calendar .gux-content table tr:empty{display:none}.gux-calendar .gux-content table tr th,.gux-calendar .gux-content table tr td{width:28px;height:28px;padding:0;margin:0;text-align:center;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-calendar .gux-content table tr th{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content table tr td{cursor:pointer}.gux-calendar .gux-content table tr td.gux-hovered{background-color:#deeaff}.gux-calendar .gux-content table tr td.gux-selected{color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-selected.gux-start-date{border-radius:4px 0 0 4px}.gux-calendar .gux-content table tr td.gux-selected.gux-end-date{border-radius:0 4px 4px 0}.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date){color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-disabled{color:rgba(46, 57, 76, 0.5);pointer-events:none}.gux-calendar .gux-content table tr td.gux-not-in-month{color:rgba(107, 117, 133, 0.5)}.gux-calendar .gux-content table tr td.gux-not-in-month:hover{color:#2e394c;background-color:#e2e6ee}.gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden{visibility:hidden}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxCalendarCss = ":host{display:inline-block}.gux-calendar{margin-top:2px;border:1px solid #b4bccb;border-radius:4px}.gux-calendar .gux-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-calendar .gux-header button{position:absolute;padding:5px;color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-calendar .gux-header button:focus-visible{outline:#75a8ff auto 5px}.gux-calendar .gux-header button.gux-left{left:18px}.gux-calendar .gux-header button.gux-right{right:18px}.gux-calendar .gux-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-calendar .gux-header .gux-month-list{display:flex;justify-content:space-between;width:100%}.gux-calendar .gux-header .gux-month-list label{width:100%;text-align:center;font-size:12px;line-height:20px;font-family:sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content{display:flex;align-items:flex-start;padding:20px 24px;color:#2e394c;background-color:#fdfdfd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.gux-calendar .gux-content table{width:168px;text-align:left;table-layout:fixed;border-spacing:0;-ms-user-select:none;user-select:none}.gux-calendar .gux-content table:not(:last-child){padding-right:24px}.gux-calendar .gux-content table tr{height:28px}.gux-calendar .gux-content table tr:empty{display:none}.gux-calendar .gux-content table tr th,.gux-calendar .gux-content table tr td{width:28px;height:28px;padding:0;margin:0;text-align:center;font-family:sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-calendar .gux-content table tr th{font-family:sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content table tr td{cursor:pointer}.gux-calendar .gux-content table tr td.gux-hovered{background-color:#deeaff}.gux-calendar .gux-content table tr td.gux-selected{color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-selected.gux-start-date{border-radius:4px 0 0 4px}.gux-calendar .gux-content table tr td.gux-selected.gux-end-date{border-radius:0 4px 4px 0}.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date){color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-disabled{color:rgba(46, 57, 76, 0.5);pointer-events:none}.gux-calendar .gux-content table tr td.gux-not-in-month{color:rgba(107, 117, 133, 0.5)}.gux-calendar .gux-content table tr td.gux-not-in-month:hover{color:#2e394c;background-color:#e2e6ee}.gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden{visibility:hidden}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxCalendar = class {
   constructor(hostRef) {

package/dist/cjs/gux-card.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
 const guxCardCss = ":host{display:block;width:fit-content}.gux-card{box-sizing:border-box;padding:var(--gse-ui-card-padding);background-color:var(--gse-ui-card-backgroundColor);border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color);border-radius:var(--gse-ui-card-borderRadius)}.gux-card.gux-bordered{border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color)}.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-y) 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/cjs/gux-column-manager-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const guxColumnManager_service = require('./gux-column-manager.service-94f84964.js');
+const guxColumnManager_service = require('./gux-column-manager.service-8a71e1f3.js');
 require('./get-closest-element-ab4b2eee.js');
 require('./clamp-1bb96117.js');
 require('./simulate-native-event-fe3e62da.js');
@@ -27,7 +27,7 @@ const translationResources = {
 	activateReordering: activateReordering
 };
 
-const guxColumnManagerItemCss = ":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:2px solid #aac9ff;outline-offset:0}.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;color:transparent;pointer-events:none;opacity:0.25}.gux-container .gux-select gux-text-highlight.gux-active{opacity:1}.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}";
+const guxColumnManagerItemCss = ".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)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}: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}";
 
 const GuxColumnManagerItem = class {
   constructor(hostRef) {
@@ -165,7 +165,7 @@ const GuxColumnManagerItem = class {
       } }, index.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) }, index.h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), index.h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { class: "gux-select" }, index.h("slot", { onSlotchange: () => this.onSlotChange() }), index.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) }, index.h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), index.h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { class: "gux-select" }, index.h("slot", { onSlotchange: () => this.onSlotChange() }), index.h("gux-text-highlight", { highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/{gux-column-manager-beta.cjs.entry.js → gux-column-manager.cjs.entry.js}

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-1066593d.js');
-const guxColumnManager_service = require('./gux-column-manager.service-94f84964.js');
+const usage = require('./usage-89e1afa4.js');
+const guxColumnManager_service = require('./gux-column-manager.service-8a71e1f3.js');
 require('./get-closest-element-ab4b2eee.js');
 require('./clamp-1bb96117.js');
 require('./simulate-native-event-fe3e62da.js');
 
 const search = "Search column";
+const searchResults = "search results";
 const selectedColumnCount = "{count}/{total} Columns Selected";
 const selectAllColumnsScreenReader = "{count} of {total} columns selected: check checkbox to select all {total} columns";
 const unselectAllColumnsScreenReader = "{count} of {total} columns selected: uncheck checkbox to unselect all {total} columns";
@@ -18,6 +19,7 @@ const movePositionPrompt = "Press space or enter to move the {columnName} column
 const reorderingModeActive = "Reordering mode active. Reposition the {columnName} column using the up arrow key, the down arrow key, the home key and the end key. Press Escape to deactivate reordering mode.";
 const translationResources = {
 	search: search,
+	searchResults: searchResults,
 	selectedColumnCount: selectedColumnCount,
 	selectAllColumnsScreenReader: selectAllColumnsScreenReader,
 	unselectAllColumnsScreenReader: unselectAllColumnsScreenReader,
@@ -25,7 +27,7 @@ const translationResources = {
 	reorderingModeActive: reorderingModeActive
 };
 
-const guxColumnManagerCss = ".gux-container{width:320px;min-width:320px}.gux-container .gux-search gux-content-search{width:100%}.gux-container .gux-select{padding:8px 0 8px 16px;margin:4px 0;color:#596373;background-color:#f6f7f9;border-radius:4px}.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}";
+const guxColumnManagerCss = ".gux-container{width:320px;min-width:320px}.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;color:#596373;background-color:#f6f7f9;border-radius:4px}.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}";
 
 const GuxColumnManager = class {
   constructor(hostRef) {
@@ -112,7 +114,7 @@ const GuxColumnManager = class {
     return (index.h("div", null, index.h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), index.h("span", { class: "gux-sr-only" }, count === total ? (index.h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (index.h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
   }
   render() {
-    return (index.h("div", { class: "gux-container" }, index.h("div", { class: "gux-search" }, index.h("gux-content-search", { "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, index.h("input", { type: "text", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), index.h("div", { class: "gux-select" }, index.h("gux-form-field-checkbox", null, index.h("input", { slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), index.h("label", { slot: "label" }, this.renderSelectedColumnCount()))), index.h("div", { class: "gux-list", onChange: () => this.onListChange() }, index.h("slot", { onSlotchange: () => this.onSlotChange() })), index.h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
+    return (index.h("div", { class: "gux-container" }, index.h("div", { class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), index.h("div", { class: "gux-search" }, index.h("gux-content-search", { "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, index.h("input", { type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), index.h("div", { class: "gux-select" }, index.h("gux-form-field-checkbox", null, index.h("input", { slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), index.h("label", { slot: "label" }, this.renderSelectedColumnCount()))), index.h("div", { class: "gux-list", onChange: () => this.onListChange() }, index.h("slot", { onSlotchange: () => this.onSlotChange() })), index.h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {
@@ -121,4 +123,4 @@ const GuxColumnManager = class {
 };
 GuxColumnManager.style = guxColumnManagerCss;
 
-exports.gux_column_manager_beta = GuxColumnManager;
+exports.gux_column_manager = GuxColumnManager;

package/dist/cjs/gux-content-search.cjs.entry.js

@@ -3,23 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const index$1 = require('./index-9bbde1aa.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 require('./get-closest-element-ab4b2eee.js');
 
-const eraseBtnAria = "Clear";
-const navigateNextBtn = "Next";
-const navigatePreviousBtn = "Previous";
+const eraseBtnAria = "Clear search text";
+const navigateNextBtn = "Highlight next match";
+const navigatePreviousBtn = "Highlight previous match";
 const totalMatches = "{currentMatch, number} of {matchCount, number}";
+const clear = "Clear";
 const contentSearchResources = {
 	eraseBtnAria: eraseBtnAria,
 	navigateNextBtn: navigateNextBtn,
 	navigatePreviousBtn: navigatePreviousBtn,
-	totalMatches: totalMatches
+	totalMatches: totalMatches,
+	clear: clear
 };
 
-const guxContentSearchCss = ":host{display:inline-block;width:300px;min-width:300px;color:#596373}::slotted(input){box-sizing:border-box;width:100%;height:32px;padding:4px 12px;font-family:inherit;font-size:12px;line-height:1.6667;background-color:#fdfdfd;background-image:none;border:1px solid #6b7585;border-radius:2px;flex-basis:100%;flex-shrink:1;min-width:0;height:22px;padding:0;color:#2e394c;background-color:#f6f7f9;border:0;border-radius:0;outline:none}::slotted(input)::placeholder{color:#596373}::slotted(input).gux-focused,::slotted(input):focus-visible{border:1px solid #2a60c8;outline:none;box-shadow:0 0 4px rgba(170, 201, 255, 0.5)}::slotted(input).gux-focused,::slotted(input):focus{border:0;outline:none;box-shadow:none}.gux-content-search{box-sizing:border-box;display:flex;flex-direction:row;width:100%;height:32px;padding:4px 0 4px 0;margin:4px 0;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-content-search.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search:focus-visible,.gux-content-search:focus-within{border:1px solid #2a60c8;outline:none;box-shadow:0 0 4px #75a8ff}.gux-content-search .gux-search-icon{display:flex;flex-shrink:0;align-items:center;padding:0 4px 0 8px}.gux-content-search .gux-search-icon:disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search .gux-search-icon gux-icon{width:16px;height:16px}.gux-content-search .gux-content-control-panel{box-sizing:border-box;display:flex;flex-grow:1;flex-shrink:0;align-content:center;align-items:center;justify-content:flex-end;height:22px;padding:0;line-height:1.6667}.gux-content-search .gux-content-control-panel button{display:block;align-items:center;overflow:hidden;color:#596373;cursor:pointer;background:none;border:none;border-radius:4px;outline:none}.gux-content-search .gux-content-control-panel button:disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search .gux-content-control-panel button:not(:disabled):hover,.gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible{color:#2e394c}.gux-content-search .gux-content-control-panel button:focus-visible:enabled{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-content-search .gux-content-control-panel button gux-icon{width:16px;height:16px}.gux-content-search .gux-content-control-panel .gux-clear-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-right:8px;margin-left:8px}.gux-content-search .gux-content-control-panel .gux-navigation-disabled{pointer-events:auto;cursor:default;opacity:0.5}.gux-content-search .gux-content-control-panel .gux-navigation-panel{display:flex;align-content:center;align-items:center;justify-content:flex-end;border-right:1px solid #596373}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-result{align-items:center;padding-left:8px;font-family:inherit;font-size:12px;white-space:nowrap}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-previous-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-left:4px}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-next-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-right:4px}";
+const guxContentSearchCss = ":host{display:inline-block;width:300px;min-width:300px;color:#596373}::slotted(input){box-sizing:border-box;width:100%;height:32px;padding:4px 12px;font-family:inherit;font-size:12px;line-height:1.6667;background-color:#fdfdfd;background-image:none;border:1px solid #6b7585;border-radius:2px;flex-basis:100%;flex-shrink:1;min-width:0;height:22px;padding:0;color:#2e394c;background-color:#f6f7f9;border:0;border-radius:0;outline:none}::slotted(input)::placeholder{color:#596373}::slotted(input).gux-focused,::slotted(input):focus-visible{border:1px solid #2a60c8;outline:none;box-shadow:0 0 4px rgba(170, 201, 255, 0.5)}::slotted(input).gux-focused,::slotted(input):focus{border:0;outline:none;box-shadow:none}.gux-content-search{box-sizing:border-box;display:flex;flex-direction:row;width:100%;height:32px;padding:4px 0;margin:4px 0;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-content-search.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search:focus-visible,.gux-content-search:focus-within{border:1px solid #2a60c8;outline:none;box-shadow:0 0 4px #75a8ff}.gux-content-search .gux-search-icon{display:flex;flex-shrink:0;align-items:center;padding:0 4px 0 8px}.gux-content-search .gux-search-icon:disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search .gux-search-icon gux-icon{width:16px;height:16px}.gux-content-search .gux-content-control-panel{box-sizing:border-box;display:flex;flex-grow:1;flex-shrink:0;align-content:center;align-items:center;justify-content:flex-end;height:22px;padding:0;line-height:1.6667}.gux-content-search .gux-content-control-panel gux-icon{width:16px;height:16px}.gux-content-search .gux-content-control-panel button{display:block;align-items:center;overflow:hidden;color:#596373;cursor:pointer;background:none;border:none;border-radius:4px;outline:none}.gux-content-search .gux-content-control-panel button:disabled{pointer-events:none;cursor:default;opacity:0.5}.gux-content-search .gux-content-control-panel button:not(:disabled):hover,.gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible{color:#2e394c}.gux-content-search .gux-content-control-panel button:not(.gux-clear-button):focus-visible:enabled{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-content-search .gux-content-control-panel button.gux-clear-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-right:8px;margin-left:8px}.gux-content-search .gux-content-control-panel button.gux-clear-button gux-icon{width:16px;height:16px}.gux-content-search .gux-content-control-panel .gux-navigation-disabled{pointer-events:auto;cursor:default;opacity:0.5}.gux-content-search .gux-content-control-panel .gux-navigation-panel{display:flex;align-content:center;align-items:center;justify-content:flex-end;border-right:1px solid #596373}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-result{align-items:center;padding-left:8px;font-family:inherit;font-size:12px;white-space:nowrap}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-previous-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-left:4px}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-next-button{flex-shrink:0;align-items:center;padding-right:0;padding-left:0;margin-right:4px}";
 
 const GuxContentSearch = class {
   constructor(hostRef) {
@@ -43,6 +45,7 @@ const GuxContentSearch = class {
     this.value = '';
     this.resetInputSlottedElement();
     this.emitCurrentMatchChanged();
+    this.inputSlottedElement.focus();
   }
   async componentWillLoad() {
     usage.trackComponent(this.root);
@@ -72,10 +75,10 @@ const GuxContentSearch = class {
       return (index.h("div", { class: "gux-content-control-panel" }, index.h("div", { class: {
           'gux-navigation-panel': true,
           'gux-navigation-disabled': disableNavigationPanel
-        }, title: this.matchCountResult() }, index.h("span", { class: {
+        } }, index.h("span", { class: {
           'gux-navigation-result': true,
           'gux-navigation-result-disabled': disableNavigationPanel
-        }, "aria-label": this.matchCountResult() }, this.matchCountResult()), index.h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, index.h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), index.h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, index.h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), index.h("button", { type: "button", class: "gux-clear-button", title: this.i18n('eraseBtnAria'), "aria-label": this.i18n('eraseBtnAria'), onClick: () => void this.clear(), disabled: this.disabled }, index.h("gux-icon", { decorative: true, "icon-name": "close" }))));
+        } }, this.matchCountResult()), index.h("button", { type: "button", class: "gux-previous-button", title: this.i18n('navigatePreviousBtn'), "aria-label": this.i18n('navigatePreviousBtn'), onClick: () => this.previousClick(), disabled: disableNavigationPanel }, index.h("gux-icon", { decorative: true, "icon-name": "arrow-solid-up" })), index.h("button", { type: "button", class: "gux-next-button", title: this.i18n('navigateNextBtn'), "aria-label": this.i18n('navigateNextBtn'), onClick: () => this.nextClick(), disabled: disableNavigationPanel }, index.h("gux-icon", { decorative: true, "icon-name": "arrow-solid-down" }))), index.h("button", { class: "gux-clear-button", tabIndex: -1, type: "button", title: this.i18n('clear'), onClick: () => void this.clear() }, index.h("gux-icon", { "icon-name": "close", decorative: true }))));
     }
     return null;
   }

package/dist/cjs/{gux-context-menu-beta.cjs.entry.js → gux-context-menu.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const index$1 = require('./index-9bbde1aa.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
@@ -16,7 +16,7 @@ const translationResources = {
 	contextMenuScreenreaderText: contextMenuScreenreaderText
 };
 
-const guxContextMenuCss = ":host{display:block;max-width:fit-content}gux-icon{width:16px;height:16px;color:#6b7585}.gux-list-container{width:128px;padding:8px 0;margin:0;text-align:left;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
+const guxContextMenuCss = ":host{display:block;max-width:fit-content}gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-contextMenu-states-default-foregroundColor)}button{border-radius:var(--gse-ui-contextMenu-borderRadius);height:var(--gse-ui-contextMenu-button-default);padding:0 8px}button:hover:enabled{background-color:var(--gse-ui-contextMenu-states-hover-backgroundColor)}button:hover:enabled gux-icon{color:var(--gse-ui-contextMenu-states-hover-foregroundColor)}button:active:enabled{background-color:var(--gse-ui-contextMenu-states-active-backgroundColor)}button:active:enabled gux-icon{color:var(--gse-ui-contextMenu-states-active-foregroundColor)}button[disabled]{opacity:var(--gse-ui-contextMenu-disabled-opacity)}.gux-list-container{width:220px;max-height:330px;overflow-y:auto;padding:var(--gse-ui-menu-padding);margin:0;text-align:left;list-style:none;background-color:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -33,6 +33,7 @@ const GuxContextMenu = class {
     index.registerInstance(this, hostRef);
     this.buttonId = randomHtmlId.randomHTMLId();
     this.screenreaderText = '';
+    this.disabled = false;
     this.isOpen = false;
   }
   /**
@@ -118,7 +119,7 @@ const GuxContextMenu = class {
     this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (index.h(index.Host, null, index.h("gux-popup", { expanded: this.isOpen }, index.h("div", { slot: "target", class: "gux-button-container" }, index.h("gux-button-slot-beta", { accent: "ghost" }, index.h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
+    return (index.h(index.Host, null, index.h("gux-popup", { expanded: this.isOpen }, index.h("div", { slot: "target", class: "gux-button-container" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, index.h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
         this.i18n('contextMenuScreenreaderText') })))), index.h("div", { slot: "popup", class: "gux-list-container" }, index.h("gux-list", { onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", null))))));
   }
   static get delegatesFocus() { return true; }
@@ -129,4 +130,4 @@ __decorate([
 ], GuxContextMenu.prototype, "onClickOutside", null);
 GuxContextMenu.style = guxContextMenuCss;
 
-exports.gux_context_menu_beta = GuxContextMenu;
+exports.gux_context_menu = GuxContextMenu;

package/dist/cjs/gux-copy-to-clipboard.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-create-option.cjs.entry.js

@@ -14,7 +14,7 @@ const translationResources = {
 	createOption: createOption
 };
 
-const guxCreateOptionCss = "gux-create-option{font-family:Roboto, sans-serif;font-weight:400;font-weight:700;box-sizing:border-box;display:flex;min-height:32px;padding:6px 12px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-create-option.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-create-option.gux-active,gux-create-option.gux-hovered:not([disabled]){color:#fdfdfd;background:#2a60c8}gux-create-option.gux-filtered{display:none}gux-create-option gux-icon{width:16px;height:100%;padding-right:10px}gux-create-option .gux-option{display:inline-flex}gux-create-option .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxCreateOptionCss = ":host{min-height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);color:var(--gse-ui-menu-option-label-foregroundColor);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;word-wrap:break-word;cursor:pointer}:host:host(.gux-disabled){pointer-events:none;cursor:default;opacity:var(--gse-ui-menu-option-disabled-opacity)}:host:host(.gux-active){outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);border-radius:var(--gse-semantic-focusRing-cornerRadius)}:host:host(.gux-hovered:not([disabled])){background:var(--gse-ui-menu-option-hover-backgroundColor)}:host:host(.gux-filtered){display:none}:host gux-icon{width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height);padding-right:var(--gse-ui-menu-option-gap)}:host .gux-option{display:inline-flex}:host .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxCreateOption = class {
   constructor(hostRef) {