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

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

@@ -2,24 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const index$1 = require('./index-9bbde1aa.js');
-const onAttributeChange = require('./on-attribute-change-37556263.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+const onAttributeChange = require('./on-attribute-change-9b2d8c85.js');
+require('./get-closest-element-26894e5a.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}::slotted(input[disabled]){opacity:var(--gse-ui-formControl-input-disabled-opacity)}::slotted(input){box-sizing:border-box;flex-basis:100%;flex-shrink:1;width:100%;overflow:hidden;font-family:var(--gse-ui-search-counter-text-fontFamily);font-size:var(--gse-ui-search-counter-text-fontSize);font-weight:var(--gse-ui-search-counter-text-fontWeight);line-height:var(--gse-ui-search-counter-text-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);text-overflow:ellipsis;white-space:nowrap;background-image:none;border:0;border-radius:0;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-populatedColor)}::slotted(input).gux-focused,::slotted(input):focus,::slotted(input):focus-visible{border:0;outline:none;box-shadow:none}.gux-content-search{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-formControl-input-gap);width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-textarea-padding);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-content-search gux-truncate{display:flex;align-items:center}.gux-content-search.gux-disabled{pointer-events:none;cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-content-search:focus-visible,.gux-content-search:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-content-search:not(:disabled):not(.gux-disabled):hover{border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-content-search .gux-search-icon{display:flex;flex-shrink:0;align-items:center}.gux-content-search .gux-search-icon:disabled{pointer-events:none;cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-content-search .gux-search-icon gux-icon{width:var(--gse-ui-search-counter-icon-width);height:var(--gse-ui-search-counter-icon-height);color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-content-search .gux-content-control-panel{box-sizing:border-box;display:flex;flex-grow:1;flex-shrink:0;gap:var(--gse-ui-formControl-input-gap);place-content:center flex-end;align-items:center;padding:0}.gux-content-search .gux-content-control-panel gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-content-search .gux-content-control-panel button{display:block;align-items:center;height:var(--gse-ui-search-counter-icon-height);padding:0;overflow:hidden;color:var(--gse-ui-search-counter-default-foregroundColor);cursor:pointer;background:none;border:none;border-radius:var(--gse-ui-button-borderRadius);outline:none}.gux-content-search .gux-content-control-panel button:disabled{pointer-events:none;cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-content-search .gux-content-control-panel button:not(:disabled):hover,.gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible{color:var(--gse-ui-search-counter-hover-foregroundColor)}.gux-content-search .gux-content-control-panel button:not(.gux-clear-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)}.gux-content-search .gux-content-control-panel button.gux-clear-button{flex-shrink:0;align-items:center}.gux-content-search .gux-content-control-panel button.gux-clear-button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-content-search .gux-content-control-panel .gux-navigation-disabled{pointer-events:auto;cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-content-search .gux-content-control-panel .gux-navigation-panel{display:flex;gap:var(--gse-ui-search-counter-gap);align-items:center}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-divider{box-sizing:border-box;align-self:center;height:16px;color:var(--gse-ui-search-counter-default-foregroundColor);background-color:#c6c8ce;border:1px var(--gse-ui-search-counter-divider-border-style) var(--gse-ui-search-counter-divider-border-color)}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-buttons{display:flex;flex-direction:row}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-result{align-items:center;color:var(--gse-ui-search-counter-default-foregroundColor);white-space:nowrap}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-previous-button{flex-shrink:0;align-items:center}.gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-next-button{flex-shrink:0;align-items:center}";
 
 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);
@@ -64,7 +67,7 @@ const GuxContentSearch = class {
     return (index.h("div", { class: {
         'gux-content-search': true,
         'gux-disabled': this.disabled
-      } }, index.h("div", { class: "gux-search-icon" }, index.h("gux-icon", { decorative: true, "icon-name": "search" })), index.h("slot", null), this.getNavigationPanel()));
+      } }, index.h("div", { class: "gux-search-icon" }, index.h("gux-icon", { decorative: true, "icon-name": "search" })), index.h("gux-truncate", { "max-lines": "1" }, index.h("slot", null)), this.getNavigationPanel()));
   }
   getNavigationPanel() {
     if (this.showNavigationPanel()) {
@@ -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("div", { class: "gux-navigation-buttons" }, 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("div", { class: "gux-navigation-divider" })), index.h("button", { class: "gux-clear-button", tabIndex: -1, type: "button", title: this.i18n('clear'), onClick: () => void this.clear(), disabled: disableNavigationPanel }, index.h("gux-icon", { "icon-name": "close", decorative: true }))));
     }
     return null;
   }

package/dist/cjs/gux-context-menu.cjs.entry.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const whenEventIsFrom = require('./when-event-is-from-20e89254.js');
+require('./get-closest-element-26894e5a.js');
+
+const contextMenuScreenreaderText = "Context menu";
+const translationResources = {
+	contextMenuScreenreaderText: contextMenuScreenreaderText
+};
+
+const guxContextMenuCss = ":host{display:block;max-width:fit-content;white-space:normal}gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-button-ghost-default-foregroundColor)}button{height:var(--gse-ui-button-default-height);padding:0 8px;border-radius:var(--gse-ui-button-borderRadius)}button.gux-compact{height:var(--gse-ui-contextMenu-button-compact);padding:0 4px}button:hover:enabled{background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button:hover:enabled gux-icon{color:var(--gse-ui-button-ghost-hover-foregroundColor)}button:active:enabled{background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button:active:enabled gux-icon{color:var(--gse-ui-button-ghost-active-foregroundColor)}button[disabled]{opacity:var(--gse-ui-button-disabled-opacity)}.gux-list-container{width:220px;max-height:330px;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;
+  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 GuxContextMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.buttonId = randomHtmlId.randomHTMLId();
+    this.compact = false;
+    this.disabled = false;
+    this.screenreaderText = '';
+    this.isOpen = false;
+  }
+  /**
+   * Updates the state on click outside the element
+   */
+  onClickOutside() {
+    this.isOpen = false;
+  }
+  // Note(E.Yankova): keydown handler
+  // reference: https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-actions-active-descendant
+  // section: "Keyboard Support" and "Menu"
+  handleKeyDown(event) {
+    const isListEvent = event.composedPath().includes(this.listElement);
+    const isButtonEvent = event.composedPath().includes(this.button);
+    switch (event.key) {
+      case 'Escape': {
+        if (isListEvent) {
+          event.preventDefault();
+          this.isOpen = false;
+          this.button.focus();
+        }
+        break;
+      }
+      case 'Tab': {
+        this.isOpen = false;
+        break;
+      }
+      case 'ArrowDown':
+      case 'Enter': {
+        if (isButtonEvent && !this.isOpen) {
+          event.preventDefault();
+          this.isOpen = true;
+          this.focusFirstListItem();
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        if (isButtonEvent && !this.isOpen) {
+          event.preventDefault();
+          this.isOpen = true;
+          this.focusLastListItem();
+        }
+        break;
+      }
+    }
+  }
+  handleKeyup(event) {
+    switch (event.key) {
+      case ' ': {
+        if (event.composedPath().includes(this.button)) {
+          event.preventDefault();
+          this.isOpen = true;
+          this.focusFirstListItem();
+        }
+        break;
+      }
+    }
+  }
+  focusFirstListItem() {
+    afterNextRender.afterNextRender(() => {
+      void this.listElement.guxFocusFirstItem();
+    });
+  }
+  focusLastListItem() {
+    afterNextRender.afterNextRender(() => {
+      void this.listElement.guxFocusLastItem();
+    });
+  }
+  onButtonClick() {
+    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      this.focusFirstListItem();
+    }
+  }
+  onListClick(event) {
+    whenEventIsFrom.whenEventIsFrom('gux-list-item', event, () => {
+      this.isOpen = false;
+      this.button.focus();
+    });
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("gux-popup", { expanded: this.isOpen, offset: 4, "exceed-target-width": true }, 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, class: { 'gux-compact': this.compact }, 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; }
+  get root() { return index.getElement(this); }
+};
+__decorate([
+  onClickOutside.OnClickOutside({ triggerEvents: 'click' })
+], GuxContextMenu.prototype, "onClickOutside", null);
+GuxContextMenu.style = guxContextMenuCss;
+
+exports.gux_context_menu = GuxContextMenu;

package/dist/cjs/gux-copy-to-clipboard.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$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+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 clickToCopy = "Click to Copy";
 const enterToCopy = "Press Enter to Copy";
@@ -18,7 +18,7 @@ const translationResources = {
 	copyFailure: copyFailure
 };
 
-const guxCopyToClipboardCss = "button{all:unset}.gux-copy-to-clipboard-wrapper{display:inline-flex;align-items:center}.gux-copy-to-clipboard-wrapper .gux-copy-content{display:inherit;align-items:inherit;cursor:pointer}.gux-copy-to-clipboard-wrapper .gux-copy-content ::slotted(*){padding:var(--gse-ui-copyToClipboard-label-padding);border-radius:var(--gse-ui-copyToClipboard-label-borderRadius);font-family:var(--gse-ui-copyToClipboard-label-text-fontFamily);font-weight:var(--gse-ui-copyToClipboard-label-text-fontWeight);line-height:var(--gse-ui-copyToClipboard-label-text-lineHeight);font-size:var(--gse-ui-copyToClipboard-label-text-fontSize);text-decoration:var(--gse-ui-copyToClipboard-label-text-textDecoration);color:var(--gse-ui-copyToClipboard-label-foregroundColor)}.gux-copy-to-clipboard-wrapper .gux-copy-content:hover ::slotted(*){background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor)}.gux-copy-to-clipboard-wrapper .gux-copy-content:hover gux-icon[icon-name=copy]{visibility:visible}.gux-copy-to-clipboard-wrapper .gux-copy-content gux-icon[icon-name=copy]{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding:var(--gse-ui-copyToClipboard-iconContainer-padding);margin-left:var(--gse-ui-copyToClipboard-contentContainer-gap);visibility:hidden;background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor);border-radius:var(--gse-ui-copyToClipboard-label-borderRadius)}.gux-copy-to-clipboard-wrapper:focus-visible{outline:none}.gux-copy-to-clipboard-wrapper:focus-visible ::slotted(*){background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor)}.gux-copy-to-clipboard-wrapper:focus-visible gux-icon[icon-name=copy]{visibility:visible}.gux-copy-to-clipboard-wrapper gux-tooltip{display:inline-flex;align-items:center}.gux-copy-to-clipboard-wrapper gux-tooltip .gux-tooltip-content>*{vertical-align:middle}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding:var(--gse-ui-copyToClipboard-iconContainer-padding)}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon[icon-name=badge-check]{color:var(--gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor)}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon[icon-name=badge-x]{color:var(--gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor)}";
+const guxCopyToClipboardCss = "button{all:unset}.gux-copy-to-clipboard-wrapper{display:inline-flex;align-items:center}.gux-copy-to-clipboard-wrapper .gux-copy-content{display:inherit;gap:var(--gse-ui-copyToClipboard-contentContainer-gap);align-items:inherit;cursor:pointer}.gux-copy-to-clipboard-wrapper .gux-copy-content ::slotted(*){padding:var(--gse-ui-copyToClipboard-label-padding);font-family:var(--gse-ui-copyToClipboard-label-text-fontFamily);font-size:var(--gse-ui-copyToClipboard-label-text-fontSize);font-weight:var(--gse-ui-copyToClipboard-label-text-fontWeight);line-height:var(--gse-ui-copyToClipboard-label-text-lineHeight);color:var(--gse-ui-copyToClipboard-label-foregroundColor);text-decoration:var(--gse-ui-copyToClipboard-label-text-textDecoration);border-radius:var(--gse-ui-copyToClipboard-label-borderRadius)}.gux-copy-to-clipboard-wrapper .gux-copy-content:hover ::slotted(*){background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor)}.gux-copy-to-clipboard-wrapper .gux-copy-content:hover gux-icon[icon-name=copy]{visibility:visible}.gux-copy-to-clipboard-wrapper .gux-copy-content gux-icon[icon-name=copy]{flex-shrink:0;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding:var(--gse-ui-copyToClipboard-iconContainer-padding);visibility:hidden;background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor);border-radius:var(--gse-ui-copyToClipboard-label-borderRadius)}.gux-copy-to-clipboard-wrapper:focus-visible{outline:none}.gux-copy-to-clipboard-wrapper:focus-visible ::slotted(*){background-color:var(--gse-ui-copyToClipboard-label-active-backgroundColor)}.gux-copy-to-clipboard-wrapper:focus-visible gux-icon[icon-name=copy]{visibility:visible}.gux-copy-to-clipboard-wrapper gux-tooltip{display:inline-flex;align-items:center}.gux-copy-to-clipboard-wrapper gux-tooltip .gux-tooltip-content>*{vertical-align:middle}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding:var(--gse-ui-copyToClipboard-iconContainer-padding)}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon[icon-name=badge-check]{color:var(--gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor)}.gux-copy-to-clipboard-wrapper gux-tooltip gux-icon[icon-name=badge-x]{color:var(--gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor)}";
 
 const GuxCopyToClipboard = class {
   constructor(hostRef) {
@@ -40,9 +40,9 @@ const GuxCopyToClipboard = class {
   resetTooltip() {
     this.tooltipContent = 'clickToCopy';
   }
-  onCopyToClipboard() {
+  async onCopyToClipboard() {
     const copyText = this.root.innerText;
-    navigator.clipboard
+    return navigator.clipboard
       .writeText(copyText)
       .then(() => {
       this.tooltipContent = 'copySuccess';

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const createCustomOptionInstructions = ", select to create a new custom option";
 const createOption = "Add \"{optionValue}\"";
@@ -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{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;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-size:var(--gse-ui-menu-option-label-default-text-fontSize);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);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){border-radius:var(--gse-semantic-focusRing-cornerRadius);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);outline-offset:-2px}: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) {

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

@@ -2,24 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const DateTimeFormatter = require('./DateTimeFormatter-8deff48e.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const getValidTimezone = require('./get-valid-timezone-6bacb49d.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const GuxDate = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
-    this.formatter = new DateTimeFormatter.DateTimeFormatter(index$1.getDesiredLocale(this.root));
+    this.formatter = new getValidTimezone.DateTimeFormatter(index$1.getDesiredLocale(this.root));
   }
   render() {
-    return (index.h(index.Host, null, this.formatter.formatDate(new Date(this.datetime), this.format)));
+    return (index.h(index.Host, null, this.formatter.formatDate(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone.getValidTimezone(this.timeZone)
+    })));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-date-time-beta.cjs.entry.js

@@ -2,24 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const DateTimeFormatter = require('./DateTimeFormatter-8deff48e.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const getValidTimezone = require('./get-valid-timezone-6bacb49d.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const GuxDateTime = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
-    this.formatter = new DateTimeFormatter.DateTimeFormatter(index$1.getDesiredLocale(this.root));
+    this.formatter = new getValidTimezone.DateTimeFormatter(index$1.getDesiredLocale(this.root));
   }
   render() {
-    return (index.h(index.Host, null, this.formatter.formatDateTime(new Date(this.datetime), this.format)));
+    return (index.h(index.Host, null, this.formatter.formatDateTime(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone.getValidTimezone(this.timeZone)
+    })));
   }
   get root() { return index.getElement(this); }
 };

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-cad0a9cf.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const isoDates = require('./iso-dates-f78ffb80.js');
-const onClickOutside = require('./on-click-outside-428f8bbf.js');
-const usage = require('./usage-24342df6.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-cae393e0.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const isoDates = require('./iso-dates-d0cd4802.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const start = "Start";
 const end = "End";
@@ -144,7 +144,7 @@ function getIntervalRange(format, intervalLetter) {
   return { selectionStart, selectionEnd };
 }
 
-const guxDatepickerCss = ":host{display:block}.gux-datepicker{display:inline-block}.gux-datepicker.gux-disabled{pointer-events:none;cursor:default}.gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input{opacity:0.5}.gux-datepicker .gux-datepicker-field{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start}.gux-datepicker .gux-datepicker-field~.gux-datepicker-field{margin-left:20px}.gux-datepicker .gux-datepicker-field.gux-above{flex-direction:column;align-items:self-start}.gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-input{margin-top:0}.gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-label{margin-right:0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-label{flex:0 1 auto;align-self:auto;order:0;margin-right:8px;font-size:12px;font-weight:bold;line-height:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input{position:relative;flex:0 1 auto;align-self:auto;order:0;margin:4px 0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;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-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input:focus-within{border-color:#2a60c8;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input{flex:1 1 auto;align-self:auto;order:0;width:100px;overflow:hidden;color:#2e394c;background-color:#f6f7f9;border:none;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder{color:#596373;opacity:1}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:2px;color:#596373;background:transparent;border:none;border-radius:4px;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon{width:16px;height:16px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar{position:fixed;z-index:var(--gux-zindex-popup, 1);display:none;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar{display:block}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxDatepickerCss = ":host{display:block}.gux-datepicker{display:inline-block}.gux-datepicker.gux-disabled{pointer-events:none;cursor:default}.gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input{opacity:var(--gse-ui-datePicker-disabled-opacity)}.gux-datepicker .gux-datepicker-field{display:inline-flex;flex-direction:row;flex-wrap:nowrap;place-content:flex-start flex-start;align-items:center}.gux-datepicker .gux-datepicker-field~.gux-datepicker-field{margin-left:20px}.gux-datepicker .gux-datepicker-field.gux-above{flex-direction:column;align-items:self-start}.gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-input{margin-top:0}.gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-label{margin-right:0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-label{flex:0 1 auto;align-self:auto;order:0;margin-right:var(--gse-ui-formControl-label-gap);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);white-space:nowrap;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:hover{border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:2px var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input.gux-active{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:2px var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input{flex:1 1 auto;align-self:auto;order:0;width:var(--gse-ui-calendarMenu-day-input-width);overflow:hidden;color:var(--gse-ui-formControl-input-populatedColor);border:none;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-iconEndColor);background:transparent;border:none;border-radius:var(--gse-ui-actionButton-borderRadius);outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:2px var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);padding:2px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor);cursor:pointer}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar{position:fixed;z-index:var(--gse-semantic-zIndex-popup);display:none}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible,.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar{display:block}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 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;

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
+
+const defaultLabel = "Disclosure button";
+const translationResources = {
+	defaultLabel: defaultLabel
+};
+
+const guxDisclosureButtonCss = ":host{height:100%;color:var(--gse-ui-tabs-item-icon-iconColor)}.gux-disclosure-button-container{display:flex;flex-direction:row;justify-content:flex-start;height:100%}.gux-disclosure-button-container .gux-disclosure-button{width:16px;padding:0;margin:0;color:var(--gse-ui-tabs-item-icon-iconColor);background:transparent;border-top:none;border-right:1px solid var(--gse-ui-tabs-item-divider-dividerColor);border-bottom:none;border-left:1px solid var(--gse-ui-tabs-item-divider-dividerColor)}.gux-disclosure-button-container .gux-disclosure-button gux-icon{width:12px;height:12px}.gux-disclosure-button-container .gux-disclosure-button: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)}.gux-disclosure-button-container .gux-disclosure-panel{display:none;order:-1;width:100%}.gux-disclosure-button-container .gux-disclosure-panel.gux-active{display:block}.gux-disclosure-button-container.gux-right{justify-content:flex-end}.gux-disclosure-button-container.gux-right .gux-disclosure-panel{order:1}";
+
+const GuxDisclosureButtonLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.active = index.createEvent(this, "active", 7);
+    this.panelId = randomHtmlId.randomHTMLId('gux-disclosure-button-panel');
+    this.position = 'left';
+    this.label = undefined;
+    this.isOpen = false;
+    this.icon = 'arrow-solid-right';
+  }
+  watchIsOpen() {
+    this.updateIcon();
+  }
+  changeState() {
+    this.togglePanel();
+    this.active.emit(this.isOpen);
+  }
+  togglePanel() {
+    this.isOpen = !this.isOpen;
+  }
+  updateIcon() {
+    if (this.position === 'right') {
+      this.icon = this.isOpen ? 'arrow-solid-right' : 'arrow-solid-left';
+    }
+    else {
+      this.icon = this.isOpen ? 'arrow-solid-left' : 'arrow-solid-right';
+    }
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root, { variant: this.position });
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+    this.updateIcon();
+  }
+  render() {
+    return (index.h("div", { class: `gux-disclosure-button-container gux-${this.position}` }, index.h("button", { class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel') }, index.h("gux-icon", { "icon-name": `${this.icon}`, decorative: true })), index.h("div", { id: this.panelId, class: {
+        'gux-disclosure-panel': true,
+        'gux-active': this.isOpen
+      }, role: "region" }, index.h("slot", { name: "panel-content" }))));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["watchIsOpen"]
+  }; }
+};
+GuxDisclosureButtonLegacy.style = guxDisclosureButtonCss;
+
+exports.gux_disclosure_button_legacy = GuxDisclosureButtonLegacy;

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+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 dismiss = "Dismiss";
 const translationResources = {
 	dismiss: dismiss
 };
 
-const guxDismissButtonCss = "button{position:absolute;top:0;right:0;padding:2px;color:#596373;background:transparent;border:none;border-radius:4px}button.gux-inherit{position:inherit}button:not(:disabled):focus-visible,button:not(:disabled):hover{color:#2e394c;cursor:pointer}button gux-icon{width:16px;height:16px;margin:4px;border-radius:4px}button:focus{outline:none}button:focus gux-icon{outline:none}button:focus-visible:enabled gux-icon{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}";
+const guxDismissButtonCss = "gux-button-slot{position:absolute;top:var(--gse-ui-modal-dismissButton-paddingTop);right:var(--gse-ui-modal-dismissButton-paddingRight)}gux-button-slot.gux-inherit{position:inherit}gux-button-slot .gux-icon-container{display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch center;align-items:center;width:8px}gux-button-slot .gux-icon-container gux-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;color:var(--gse-ui-dismissButton-foregroundColor)}";
 
 const GuxDismissButton = class {
   constructor(hostRef) {
@@ -24,7 +24,7 @@ const GuxDismissButton = class {
     this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (index.h("button", { class: this.position == 'inherit' ? 'gux-inherit' : undefined, type: "button", title: this.i18n('dismiss') }, index.h("gux-icon", { "icon-name": "close", "screenreader-text": this.i18n('dismiss') })));
+    return (index.h("gux-button-slot", { accent: "ghost", class: this.position == 'inherit' ? 'gux-inherit' : undefined }, index.h("button", { type: "button", title: this.i18n('dismiss') }, index.h("div", { class: "gux-icon-container" }, index.h("gux-icon", { "icon-name": "close", decorative: true })))));
   }
   static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }

package/dist/cjs/gux-dropdown-multi-tag.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+require('./get-closest-element-26894e5a.js');
 
 const clearSelection = "Clear {numberSelected} selected items";
 const translationResources = {
 	clearSelection: clearSelection
 };
 
-const guxDropdownMultiTagCss = ":host{display:inline-block}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;padding:2px 4px 2px 8px;font-size:12px;font-weight:bold;color:#2e394c;background-color:#e2e6ee;border-radius:4px}.gux-tag .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-tag .gux-tag-remove-button{all:unset;display:flex;align-content:center;align-items:center;justify-content:center;margin-left:7px}.gux-tag .gux-tag-remove-button:not(:disabled):hover{cursor:pointer}.gux-tag .gux-tag-remove-button .gux-tag-remove-icon{width:16px;height:16px;border-radius:25%}.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon{outline:2px solid #aac9ff;outline-offset:0}.gux-tag.gux-disabled{color:rgba(46, 57, 76, 0.5);background-color:rgba(226, 230, 238, 0.5)}";
+const guxDropdownMultiTagCss = ":host{display:inline-block}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:center;height:var(--gse-ui-tag-height);padding:var(--gse-ui-tag-removable-padding);font-family:var(--gse-ui-tag-text-fontFamily);font-size:var(--gse-ui-tag-text-fontSize);line-height:var(--gse-ui-tag-text-lineHeight);color:var(--gse-ui-tag-accent1-foregroundColor);background-color:var(--gse-ui-tag-accent1-backgroundColor);border-radius:var(--gse-ui-tag-borderRadius)}.gux-tag .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-tag .gux-tag-remove-button{all:unset;display:flex;place-content:center center;align-items:center;margin-left:var(--gse-ui-tag-removable-gap)}.gux-tag .gux-tag-remove-button:not(:disabled):hover{cursor:pointer}.gux-tag .gux-tag-remove-button .gux-tag-remove-icon{width:var(--gse-ui-tag-button-size);height:var(--gse-ui-tag-button-size)}.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon{outline:var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width)}.gux-tag.gux-disabled{opacity:var(--gse-ui-tag-disabled-opacity)}";
 
 const GuxDropdownMultiTag = class {
   constructor(hostRef) {