genesys-spark-components 4.0.0-beta.8 → 4.0.1

package/dist/cjs/gux-action-toast-legacy.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
-const guxActionToastCss = ".gux-focus-ring-focused:focus{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-within:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-visible:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-small-focused:focus{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-within:focus-within{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-visible:focus-visible{outline:2px solid #aac9ff;outline-offset:0}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(\"./fonts/roboto-v20-latin-300.eot\");src:local(\"Roboto Light\"), local(\"Roboto-Light\"), url(\"./fonts/roboto-v20-latin-300.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-300.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-300.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-300.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-300.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(\"./fonts/roboto-v20-latin-regular.eot\");src:local(\"Roboto\"), local(\"Roboto-Regular\"), url(\"./fonts/roboto-v20-latin-regular.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-regular.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-regular.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-regular.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-regular.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(\"./fonts/roboto-v20-latin-italic.eot\");src:local(\"Roboto Italic\"), local(\"Roboto-Italic\"), url(\"./fonts/roboto-v20-latin-italic.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-italic.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-italic.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-italic.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-italic.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(\"./fonts/roboto-v20-latin-700.eot\");src:local(\"Roboto Bold\"), local(\"Roboto-Bold\"), url(\"./fonts/roboto-v20-latin-700.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-700.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-700.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-700.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-700.svg#Roboto\") format(\"svg\");}body{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}h1{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}h2{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}h3{font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:14px;line-height:20px}h4,h5,h6{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}.gux-icon-anchor gux-icon{padding-right:8px}a{color:#2a60c8;text-decoration:underline;border-radius:2px}a:hover{color:#2754ac}a:active{color:#23478f}a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}table a{color:#2a60c8;text-decoration:underline;border-radius:2px;text-decoration:none}table a:hover{color:#2754ac}table a:active{color:#23478f}table a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}:host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start;width:270px;padding:20px 24px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px fade(#202937, 24%)}.gux-header{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}.gux-header .gux-icon{flex:0 1 auto;align-self:auto;order:0;color:#1da8b3}.gux-header .gux-icon ::slotted(gux-icon){width:32px !important;height:32px !important}.gux-header .gux-title{flex:1 1 auto;align-self:auto;order:0;margin:0 0 0 8px}.gux-message{flex:0 1 auto;align-self:auto;order:0;margin:16px 0;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-message ::slotted(dl){display:flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:0}.gux-action-buttons{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:space-between;order:0}.gux-action-buttons .gux-negative-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons .gux-positive-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:space-between;order:0}.gux-action-buttons .gux-negative-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons .gux-positive-button{flex:0 1 auto;align-self:auto;order:0}";
+const guxActionToastCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch flex-start;align-items:stretch;width:270px;padding:20px 24px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-header{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:center;align-self:auto;order:0;font-family:var(--gse-core-typography-heading-lg-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-lg-fontSize);line-height:var(--gse-core-typography-heading-lg-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}.gux-header .gux-icon{flex:0 1 auto;align-self:auto;order:0;color:#1da8b3}.gux-header .gux-icon ::slotted(gux-icon){width:32px !important;height:32px !important}.gux-header .gux-title{flex:1 1 auto;align-self:auto;order:0;margin:0 0 0 8px}.gux-message{flex:0 1 auto;align-self:auto;order:0;margin:16px 0;font-family:var(--gse-core-typography-body-sm-fontFamily), var(--gse-core-fontFamily-body), sans-serif;font-size:var(--gse-core-typography-body-sm-fontSize);line-height:var(--gse-core-typography-body-sm-lineHeight);font-weight:var(--gse-core-fontWeight-regular)}.gux-message ::slotted(dl){display:flex;flex-direction:row;flex-wrap:wrap;place-content:stretch flex-start;align-items:flex-start;margin:0}.gux-action-buttons{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;place-content:stretch space-between;align-items:flex-start;align-self:auto;order:0}.gux-action-buttons .gux-negative-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons .gux-positive-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;place-content:stretch space-between;align-items:flex-start;align-self:auto;order:0}.gux-action-buttons .gux-negative-button{flex:0 1 auto;align-self:auto;order:0}.gux-action-buttons .gux-positive-button{flex:0 1 auto;align-self:auto;order:0}";
 
 const GuxActionToast = class {
   constructor(hostRef) {

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

@@ -0,0 +1,218 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const onMutation = require('./on-mutation-ef917473.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
+
+const searchAria = "Search";
+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-decoration:none;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{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}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        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 GuxAdvancedDropdownLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.input = index.createEvent(this, "input", 7);
+    this.filter = index.createEvent(this, "filter", 7);
+    this.disabled = false;
+    this.placeholder = undefined;
+    this.noFilter = false;
+    this.filterDebounceTimeout = 500;
+    this.dropdownHeight = '320px';
+    this.srLabelledby = undefined;
+    this.opened = undefined;
+    this.currentlySelectedOption = undefined;
+    this.selectionOptions = undefined;
+  }
+  watchValue(newValue) {
+    if (this.opened && newValue) {
+      this.closeDropdown(false);
+    }
+  }
+  get value() {
+    var _a;
+    return (_a = this.currentlySelectedOption) === null || _a === void 0 ? void 0 : _a.text;
+  }
+  /**
+   * Gets the currently selected values.
+   *
+   * @returns The array of selected values.
+   */
+  getSelectedValues() {
+    // Once multi-select gets added there will
+    // be multiple values selectable.
+    return Promise.resolve([this.value]);
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async setLabeledBy(id) {
+    this.srLabelledby = id;
+  }
+  onClickOutside() {
+    this.closeDropdown(false);
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, advancedDropDownResources);
+    this.handleSelectionChange = this.handleSelectionChange.bind(this);
+    this.updateSelectionState();
+    this.addOptionListener();
+    this.slotObserver = onMutation.onMutation(this.root, () => this.updateSelectionState());
+  }
+  disconnectedCallback() {
+    if (this.slotObserver) {
+      this.slotObserver.disconnect();
+    }
+  }
+  render() {
+    return (index.h("gux-popup", { expanded: this.opened, disabled: this.disabled }, index.h("div", { slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, index.h("a", { ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (index.h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (index.h("span", { class: "gux-select-value", title: this.value }, this.value))), index.h("div", { class: "gux-icon-wrapper" }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" }))), index.h("div", { slot: "popup", class: "gux-advanced-dropdown-menu" }, index.h("div", { class: "gux-dropdown-menu-container" }, index.h("gux-form-field-search", { "label-position": "screenreader" }, index.h("label", { slot: "label" }, this.i18n('searchAria')), index.h("input", { slot: "input", type: "search", onInput: (event) => {
+        this.handleSearchInput(event);
+      }, ref: el => (this.searchInput = el) })), index.h("div", { class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, index.h("slot", null))))));
+  }
+  updateSelectionState() {
+    this.selectionOptions = this.getSelectionOptions();
+    this.currentlySelectedOption = this.selectionOptions.find(option => option.selected);
+  }
+  addOptionListener() {
+    this.root.addEventListener('selectedChanged', (event) => this.handleSelectionChange(event));
+  }
+  handleSelectionChange({ target }) {
+    const option = target;
+    this.closeDropdown(true);
+    if (this.currentlySelectedOption === option) {
+      return;
+    }
+    if (this.currentlySelectedOption) {
+      this.currentlySelectedOption.selected = false;
+    }
+    this.currentlySelectedOption = option;
+    this.input.emit(option.value);
+  }
+  getSelectionOptions() {
+    const options = this.root.querySelectorAll('gux-dropdown-option');
+    return Array.from(options);
+  }
+  inputMouseDown() {
+    if (this.disabled) {
+      return;
+    }
+    if (this.opened) {
+      this.closeDropdown(true);
+    }
+    else {
+      this.openDropdown(false);
+    }
+  }
+  getFocusIndex() {
+    return this.selectionOptions.findIndex(option => {
+      return option.matches(':focus');
+    });
+  }
+  optionsKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp': {
+        event.preventDefault();
+        const focusIndex = this.getFocusIndex();
+        if (focusIndex > 0) {
+          this.selectionOptions[focusIndex - 1].focus();
+        }
+        break;
+      }
+      case 'ArrowDown': {
+        event.preventDefault();
+        const focusIndex = this.getFocusIndex();
+        if (focusIndex < this.selectionOptions.length - 1) {
+          this.selectionOptions[focusIndex + 1].focus();
+        }
+        break;
+      }
+      case 'Home':
+        if (!this.selectionOptions.length) {
+          return;
+        }
+        this.selectionOptions[0].focus();
+        break;
+      case 'End':
+        if (!this.selectionOptions.length) {
+          return;
+        }
+        this.selectionOptions[this.selectionOptions.length - 1].focus();
+        break;
+    }
+  }
+  inputKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case ' ':
+        this.openDropdown(true);
+        break;
+    }
+  }
+  handleSearchInput(event) {
+    event.stopPropagation();
+    clearTimeout(this.filterDebounceTimer);
+    this.filterDebounceTimer = setTimeout(() => this.searchRequested(), this.filterDebounceTimeout);
+  }
+  searchRequested() {
+    const value = this.searchInput.value;
+    this.filter.emit(value);
+    this.setFilteredOptions();
+  }
+  setFilteredOptions() {
+    const value = this.searchInput.value;
+    if (!this.noFilter) {
+      for (const option of this.selectionOptions) {
+        void option.shouldFilter(value).then(isFiltered => {
+          option.filtered = isFiltered;
+        });
+      }
+    }
+  }
+  changeFocusToSearch() {
+    afterNextRender.afterNextRenderTimeout(() => {
+      this.searchInput.focus();
+    });
+  }
+  openDropdown(focusSearch) {
+    this.opened = true;
+    if (focusSearch) {
+      this.changeFocusToSearch();
+    }
+  }
+  closeDropdown(focus) {
+    this.opened = false;
+    this.searchInput.value = '';
+    this.setFilteredOptions();
+    if (focus) {
+      this.inputBox.focus();
+    }
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "disabled": ["watchValue"]
+  }; }
+};
+__decorate([
+  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxAdvancedDropdownLegacy.prototype, "onClickOutside", null);
+GuxAdvancedDropdownLegacy.style = guxAdvancedDropdownCss;
+
+exports.gux_advanced_dropdown_legacy = GuxAdvancedDropdownLegacy;

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

@@ -2,13 +2,13 @@
 
 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');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const en = require('./en-807a354e.js');
+require('./get-closest-element-26894e5a.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{display:flex;flex-direction:row;justify-content:center}";
 
 const GuxAllRowSelect = class {
   constructor(hostRef) {
@@ -16,12 +16,11 @@ const GuxAllRowSelect = class {
     this.internalallrowselectchange = index.createEvent(this, "internalallrowselectchange", 7);
     this.id = randomHtmlId.randomHTMLId('gux-all-row-select');
     this.selected = false;
+    this.disabled = undefined;
   }
   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) {
@@ -31,7 +30,7 @@ const GuxAllRowSelect = class {
     this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources, 'gux-table');
   }
   render() {
-    return (index.h("gux-form-field-checkbox", null, index.h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected }), index.h("label", { slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { class: "gux-label-text" }, this.i18n('selectAllTableRows')))));
+    return (index.h("gux-form-field-checkbox", { "label-position": "screenreader" }, index.h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), index.h("label", { slot: "label", htmlFor: this.id }, "\u200B", index.h("span", null, this.i18n('selectAllTableRows')))));
   }
   get root() { return index.getElement(this); }
 };

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const afterNextRender = require('./after-next-render-a023ef47.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,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.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,
+	"inherit-bold": "badge with label: {label}, bold"
+};
+
+const guxBadgeCss = ":host{display:inline-block;height:fit-content;border-radius:var(--gse-ui-badge-borderRadius)}.gux-badge{display:flex;flex-direction:row;gap:var(--gse-ui-badge-gap);align-items:center;justify-content:center;height:var(--gse-ui-badge-height);padding:2px 12px;font-family:var(--gse-ui-badge-text-fontFamily);font-size:var(--gse-ui-badge-text-fontSize);font-weight:var(--gse-ui-badge-text-fontWeight);line-height:var(--gse-ui-badge-text-lineHeight);border-radius:var(--gse-ui-badge-borderRadius)}.gux-badge gux-tooltip-title{white-space:nowrap}.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,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const onMutation = require('./on-mutation-ec5d23bd.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
+
+const guxBlankStateCss = ":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  color: var(--gse-ui-blankState-foregroundColor);\n  background-color: var(--gse-ui-blankState-backgroundColor);\n  border-radius: var(--gse-ui-blankState-borderRadius);\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  font-family: var(--gse-ui-progressAndLoading-blankState-large-header-fontFamily);\n  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);\n  font-weight: var(--gse-ui-progressAndLoading-blankState-large-header-fontWeight);\n  line-height: var(--gse-ui-progressAndLoading-blankState-large-header-lineHeight);\n  color: var(--gse-ui-blankState-foregroundColor);\n  text-align: center;\n}\n.gux-container slot[name=additional-guidance] {\n  font-family: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontFamily);\n  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);\n  font-weight: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontWeight);\n  line-height: var(--gse-ui-progressAndLoading-blankState-large-subheader-lineHeight);\n  color: var(--gse-ui-blankState-foregroundColor);\n  text-align: center;\n}\n\n@container (width < 570px) {\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-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-blankState-small-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-blankState-small-header-lineHeight);\n  }\n  .gux-container slot[name=additional-guidance] {\n    font-family: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-blankState-small-subheader-lineHeight);\n  }\n}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        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 GuxBlankState = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasCallToAction = false;
+  }
+  onMutation() {
+    this.hasCallToAction = hasSlot.hasSlot(this.root, 'call-to-action');
+  }
+  renderCallToActionSlot() {
+    if (this.hasCallToAction) {
+      return (index.h("gux-button-slot", { accent: "primary" }, index.h("slot", { name: "call-to-action" })));
+    }
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.hasCallToAction = hasSlot.hasSlot(this.root, 'call-to-action');
+  }
+  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" })), this.renderCallToActionSlot()));
+  }
+  get root() { return index.getElement(this); }
+};
+__decorate([
+  onMutation.OnMutation({ childList: true, subtree: true })
+], GuxBlankState.prototype, "onMutation", null);
+GuxBlankState.style = guxBlankStateCss;
+
+exports.gux_blank_state = GuxBlankState;

package/dist/cjs/gux-breadcrumb-item.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const logError = require('./log-error-d46c02b7.js');
+const index = require('./index-75c9f0d9.js');
+const logError = require('./log-error-8a92241e.js');
 
-const guxBreadcrumbItemCss = ".gux-breadcrumb-generation{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start;min-height:var(--gse-ui-breadcrumbs-secondary-height)}.gux-breadcrumb-generation .gux-breadcrumb-content{font-family:var(--gse-ui-link-inLine-small-text-fontFamily);font-size:var(--gse-ui-link-inLine-small-text-fontSize);font-weight:var(--gse-ui-link-inLine-small-text-fontWeight);line-height:var(--gse-ui-link-inLine-small-text-lineHeight);text-decoration:none;color:var(--gse-ui-link-default-color);pointer-events:none}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-active{color:var(--gse-ui-link-active-color)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link{color:var(--gse-ui-link-default-color);pointer-events:initial}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover{font-family:var(--gse-ui-link-inLine-small-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-small-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-small-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-small-underlinedText-lineHeight);text-decoration:var(--gse-ui-link-inLine-small-underlinedText-textDecoration)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:visited{color:var(--gse-ui-link-visited-color)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover{color:var(--gse-ui-link-hover-color)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:active{color:var(--gse-ui-link-active-color)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:focus-visible{outline:2px solid var(--gse-semantic-color-focus);outline-offset:3px;border-radius:1px}.gux-breadcrumb-generation .gux-breadcrumb-separator{font-family:var(--gse-ui-breadcrumbs-separator-secondary-fontFamily);font-weight:var(--gse-ui-breadcrumbs-separator-secondary-fontWeight);line-height:var(--gse-ui-breadcrumbs-separator-secondary-lineHeight);font-size:var(--gse-ui-breadcrumbs-separator-secondary-fontSize);padding:var(--gse-ui-breadcrumbs-separator-padding-secondary);color:var(--gse-ui-breadcrumbs-separator-color)}.gux-breadcrumb-generation.gux-primary{min-height:var(--gse-ui-breadcrumbs-primary-height)}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content{font-family:var(--gse-ui-link-inLine-medium-text-fontFamily);font-size:var(--gse-ui-link-inLine-medium-text-fontSize);font-weight:var(--gse-ui-link-inLine-medium-text-fontWeight);line-height:var(--gse-ui-link-inLine-medium-text-lineHeight);text-decoration:none}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content.gux-link:hover{font-family:var(--gse-ui-link-inLine-medium-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-medium-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-medium-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-medium-underlinedText-lineHeight);text-decoration:var(--gse-ui-link-inLine-medium-underlinedText-textDecoration)}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-separator{font-family:var(--gse-ui-breadcrumbs-separator-primary-fontFamily);font-weight:var(--gse-ui-breadcrumbs-separator-primary-fontWeight);line-height:var(--gse-ui-breadcrumbs-separator-primary-lineHeight);font-size:var(--gse-ui-breadcrumbs-separator-primary-fontSize);padding:var(--gse-ui-breadcrumbs-separator-padding-primary)}";
+const guxBreadcrumbItemCss = ".gux-breadcrumb-generation{display:flex;flex-direction:row;flex-wrap:nowrap;place-content:flex-start flex-start;align-items:center;min-height:var(--gse-ui-breadcrumbs-secondary-height)}.gux-breadcrumb-generation .gux-breadcrumb-content{font-family:var(--gse-ui-link-inLine-small-text-fontFamily);font-size:var(--gse-ui-link-inLine-small-text-fontSize);font-weight:var(--gse-ui-link-inLine-small-text-fontWeight);line-height:var(--gse-ui-link-inLine-small-text-lineHeight);text-decoration:none;color:var(--gse-ui-link-default-foregroundColor);pointer-events:none}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-active{color:var(--gse-ui-link-active-foregroundColor)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link{color:var(--gse-ui-link-default-foregroundColor);pointer-events:initial}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:visited{color:var(--gse-ui-link-visited-foregroundColor)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:hover{font-family:var(--gse-ui-link-inLine-small-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-small-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-small-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-small-underlinedText-lineHeight);text-decoration:var(--gse-ui-link-inLine-small-underlinedText-textDecoration);color:var(--gse-ui-link-hover-foregroundColor)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:active{color:var(--gse-ui-link-active-foregroundColor)}.gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:focus-visible{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset);border-radius:var(--gse-semantic-focusRing-cornerRadius)}.gux-breadcrumb-generation .gux-breadcrumb-separator{padding:var(--gse-ui-breadcrumbs-secondary-separator-padding);font-family:var(--gse-ui-breadcrumbs-secondary-separator-typography-fontFamily);font-size:var(--gse-ui-breadcrumbs-secondary-separator-typography-fontSize);font-weight:var(--gse-ui-breadcrumbs-secondary-separator-typography-fontWeight);line-height:var(--gse-ui-breadcrumbs-secondary-separator-typography-lineHeight);color:var(--gse-ui-breadcrumbs-separator-color)}.gux-breadcrumb-generation.gux-primary{min-height:var(--gse-ui-breadcrumbs-primary-height)}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content{font-family:var(--gse-ui-link-inLine-medium-text-fontFamily);font-size:var(--gse-ui-link-inLine-medium-text-fontSize);font-weight:var(--gse-ui-link-inLine-medium-text-fontWeight);line-height:var(--gse-ui-link-inLine-medium-text-lineHeight);text-decoration:none}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-content.gux-link:hover{font-family:var(--gse-ui-link-inLine-medium-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-medium-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-medium-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-medium-underlinedText-lineHeight);text-decoration:var(--gse-ui-link-inLine-medium-underlinedText-textDecoration)}.gux-breadcrumb-generation.gux-primary .gux-breadcrumb-separator{padding:var(--gse-ui-breadcrumbs-primary-separator-padding);font-family:var(--gse-ui-breadcrumbs-primary-separator-typography-fontFamily);font-size:var(--gse-ui-breadcrumbs-primary-separator-typography-fontSize);font-weight:var(--gse-ui-breadcrumbs-primary-separator-typography-fontWeight);line-height:var(--gse-ui-breadcrumbs-primary-separator-typography-lineHeight)}";
 
 const GuxBreadcrumbItem = class {
   constructor(hostRef) {

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-24342df6.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const usage = require('./usage-bfcc4d96.js');
+require('./get-closest-element-26894e5a.js');
 
 const breadcrumbs = "Breadcrumbs";
 const breadcrumbsResources = {
 	breadcrumbs: breadcrumbs
 };
 
-const guxBreadcrumbsCss = "ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:center;justify-content:flex-start}";
+const guxBreadcrumbsCss = "ol{display:flex;flex-direction:row;flex-wrap:wrap;place-content:flex-start flex-start;align-items:center;padding:0;margin:0;list-style:none}";
 
 const GuxBreadcrumbs = class {
   constructor(hostRef) {

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const whenEventIsFrom = require('./when-event-is-from-20e89254.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const usage = require('./usage-bfcc4d96.js');
 
 const guxButtonMultiAccent = ['primary', 'secondary', 'tertiary'];
 function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
@@ -16,7 +16,7 @@ function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
   return 'secondary';
 }
 
-const guxButtonMultiCss = ":host{display:block;-webkit-user-select:none;user-select:none}.gux-button-multi-container .gux-dropdown-button button{display:inline-flex;align-items:center}.gux-button-multi-container .gux-dropdown-button button gux-icon{width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size);margin-left:var(--gux-spacing-xs)}.gux-list-container{max-width:220px;padding:var(--gux-spacing-xs) 0;margin:0;list-style:none;background-color:var(--gse-ui-menu-wrapper-backgroundColor);border:1px solid var(--gse-ui-menu-wrapper-border);border-radius:4px;box-shadow:0px 4px 6px 1px rgba(35, 57, 92, 0.12)}";
+const guxButtonMultiCss = ":host{display:block;-webkit-user-select:none;user-select:none}.gux-button-multi-container .gux-dropdown-button button{display:inline-flex;align-items:center}.gux-button-multi-container .gux-dropdown-button button gux-icon{width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size);margin-left:var(--gse-ui-button-gap)}.gux-list-container{max-width:220px;margin:0;overflow-y:auto;background:var(--gse-ui-menu-backgroundColor);border-color:var(--gse-ui-menu-border-color);border-style:var(--gse-ui-menu-border-style);border-width:var(--gse-ui-menu-border-width);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-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,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, "exceed-target-width": true }, 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,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const logError = require('./log-error-8a92241e.js');
+
+const guxButtonSlotCss = ":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-size:var(--gse-ui-button-text-fontSize);font-weight:var(--gse-ui-button-text-fontWeight);line-height:var(--gse-ui-button-text-lineHeight);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-padding);overflow:hidden;color:var(--gse-ui-button-secondary-default-foregroundColor);text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none;border-radius:var(--gse-ui-button-borderRadius)}:host([icon-only]) ::slotted(input[type=button]),:host([icon-only]) ::slotted(input[type=submit]),:host([icon-only]) ::slotted(button){padding:var(--gse-ui-button-paddingIconOnly)}::slotted(input[type=button][disabled]),::slotted(input[type=submit][disabled]),::slotted(button[disabled]){cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}::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:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);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-color:var(--gse-ui-button-tertiary-default-border-color);border-style:var(--gse-ui-button-tertiary-default-border-style);border-width:var(--gse-ui-button-tertiary-default-border-width)}: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-foregroundColor);background:none;border:none}:host([accent=inline]) ::slotted(input[type=button][disabled]),:host([accent=inline]) ::slotted(input[type=submit][disabled]),:host([accent=inline]) ::slotted(button[disabled]){color:var(--gse-ui-link-disabled-foregroundColor)}:host([accent=inline]) ::slotted(input[type=button]:hover:enabled),:host([accent=inline]) ::slotted(input[type=submit]:hover:enabled),:host([accent=inline]) ::slotted(button:hover:enabled){color:var(--gse-ui-link-hover-foregroundColor);text-decoration:underline;background:none}:host([accent=inline]) ::slotted(input[type=button]:active:enabled),:host([accent=inline]) ::slotted(input[type=submit]:active:enabled),:host([accent=inline]) ::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}";
+
+const GuxButtonSlot = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accent = 'secondary';
+    this.iconOnly = undefined;
+  }
+  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, "icon-only": this.iconOnly }, index.h("slot", null)));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxButtonSlot.style = guxButtonSlotCss;
+
+exports.gux_button_slot = GuxButtonSlot;