genesys-spark-components 4.109.0 → 4.109.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const logError = require('./log-error-7b9d4b57.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);inline-size:100%;min-inline-size:var(--gse-ui-button-iconOnly-width);block-size:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-default-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-default-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-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-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-inline-size:initial}:host([accent=inline]) ::slotted(input[type=button]),:host([accent=inline]) ::slotted(input[type=submit]),:host([accent=inline]) ::slotted(button){block-size:initial;padding:0;color:var(--gse-ui-links-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-links-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-links-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-links-active-foregroundColor);text-decoration:underline;background:none}";
@@ -38,7 +38,7 @@ const GuxButtonSlot = class {
         this.validateSlotContent();
     }
     render() {
-        return (index.h(index.Host, { key: '4699b0c94c1438b438d3d0af3a619eed470d972a', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: 'bbaafbfd06069ef30b06c2e2454a1bd1aa82ce8a' })));
+        return (index.h(index.Host, { key: '7db719be511ad4cebf0f36159ce7c2ccfb89bb13', accent: this.accent, "icon-only": this.iconOnly }, index.h("slot", { key: '274e551e90e870ae178d9f0d241711eca7658653' })));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -0,0 +1,269 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2dd05ef3.js');
+const usage = require('./usage-069a2035.js');
+const randomHtmlId = require('./random-html-id-71c43d5a.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
+const onClickOutside = require('./on-click-outside-bb55ad5e.js');
+const getSlot = require('./get-slot-676aebf2.js');
+const findElementById = require('./find-element-by-id-fde17c92.js');
+
+const guxButtonCss = ":host{display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){inline-size:var(--gse-ui-button-icon-size);block-size:var(--gse-ui-button-icon-size)}::slotted(*){padding-inline-start:8px;vertical-align:middle}::slotted(gux-tooltip),::slotted(gux-tooltip-beta){padding-inline-start:0}::slotted(*:first-child){padding:0}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);inline-size:100%;min-inline-size:var(--gse-ui-button-iconOnly-width);block-size:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-default-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)}button.gux-icon-only{display:inline-flex;padding:var(--gse-ui-button-default-paddingIconOnly)}button[disabled]{pointer-events:none;cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset);border-radius:var(--gse-semantic-focusOutline-sm-borderRadius)}button.gux-primary{color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-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)}button.gux-tertiary.gux-icon-only{padding:calc(var(--gse-ui-button-default-paddingIconOnly) - var(--gse-ui-button-tertiary-default-border-width))}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-inline-size:initial;block-size:initial;padding:0;color:var(--gse-ui-links-default-foregroundColor);background:none;border:none;border-radius:0}button.gux-inline[disabled]{color:var(--gse-ui-links-disabled-foregroundColor)}button.gux-inline:hover:enabled{color:var(--gse-ui-links-hover-foregroundColor);text-decoration:underline;background:none}button.gux-inline:active:enabled{color:var(--gse-ui-links-active-foregroundColor);text-decoration:underline;background:none}";
+const GuxButtonStyle0 = guxButtonCss;
+
+const GuxButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonId = randomHtmlId.randomHTMLId('button');
+        this.type = 'button';
+        this.guxTitle = undefined;
+        this.disabled = false;
+        this.accent = 'secondary';
+        this.iconOnly = undefined;
+    }
+    connectedCallback() {
+        this.slotChanged();
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root, { variant: this.accent });
+    }
+    render() {
+        return [
+            index.h("button", { key: '024641a03e2e31df6a9ad60542eb1332b38e5e87', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+                    [`gux-${this.accent}`]: true,
+                    'gux-icon-only': this.iconOnly
+                }, "aria-label": this.guxTitle }, index.h("slot", { key: '5b4c4fdf1c247faecb93f9b41ffb8984de8e9a53', onSlotchange: this.slotChanged.bind(this) })),
+            this.renderTooltip()
+        ];
+    }
+    renderTooltip() {
+        return this.guxTitle
+            ? (index.h("gux-tooltip-beta", { for: this.buttonId, visualOnly: true }, index.h("div", { slot: "content" }, this.guxTitle)))
+            : '';
+    }
+    stopEventIfDisabled(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    makeSlotContentDisableable() {
+        this.root.shadowRoot.addEventListener('click', (event) => this.stopEventIfDisabled(event));
+        Array.from(this.root.children).forEach(slotElement => {
+            slotElement.addEventListener('click', (event) => this.stopEventIfDisabled(event));
+        });
+    }
+    hasIconOnly() {
+        const children = Array.from(this.root.children);
+        if (children.length === 1) {
+            const child = children[0];
+            if (child.tagName === 'GUX-ICON') {
+                return true;
+            }
+        }
+        else if (children.length === 2 &&
+            children[0].tagName === 'GUX-ICON' &&
+            ['GUX-TOOLTIP', 'GUX-TOOLTIP-BETA'].includes(children[1].tagName)) {
+            return true;
+        }
+        return false;
+    }
+    slotChanged() {
+        this.makeSlotContentDisableable();
+        this.iconOnly = this.hasIconOnly();
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
+};
+GuxButton.style = GuxButtonStyle0;
+
+function ThrottleMethod(duration) {
+    let wait = false;
+    let timeoutRef = null;
+    return (_target, _propertyKey, descriptor) => {
+        const original = descriptor.value;
+        descriptor.value = function (...args) {
+            if (!wait) {
+                original.apply(this, args);
+                wait = true;
+                clearTimeout(timeoutRef);
+                timeoutRef = setTimeout(() => {
+                    wait = false;
+                }, duration);
+            }
+        };
+    };
+}
+
+const guxPopoverCss = ".gux-popover-wrapper{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--gse-semantic-zIndex-popover);display:inline-block;min-inline-size:280px;padding:var(--gse-ui-popover-padding);background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;inline-size:var(--gse-ui-popover-anchor-width);block-size:var(--gse-ui-popover-anchor-height);padding-block-end:4px;overflow:hidden}.gux-popover-wrapper .gux-arrow-caret{inline-size:0;block-size:0;filter:drop-shadow(var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) calc(var(--gse-ui-popover-boxShadow-blur) / 2) var(--gse-ui-popover-boxShadow-color));border-block-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);border-inline-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;border-inline-end:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent}.gux-popover-wrapper .gux-popover-header{display:flex;flex-direction:row;place-content:center space-between;align-items:center;padding-block-end:var(--gse-ui-popover-gap);font-family:var(--gse-ui-popover-title-text-fontFamily);font-size:var(--gse-ui-popover-title-text-fontSize);font-weight:var(--gse-ui-popover-title-text-fontWeight);line-height:var(--gse-ui-popover-title-text-lineHeight);color:var(--gse-ui-popover-headerColor)}.gux-popover-wrapper gux-dismiss-button{float:inline-end}";
+const GuxPopoverStyle0 = guxPopoverCss;
+
+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 GuxPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
+        this.for = undefined;
+        this.position = 'bottom';
+        this.displayDismissButton = undefined;
+        this.closeOnClickOutside = false;
+        this.isOpen = false;
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.dismiss();
+                break;
+        }
+    }
+    onFocusout(event) {
+        if (!this.closeOnClickOutside && this.displayDismissButton) {
+            return;
+        }
+        const focusIsOutsidePopover = event.relatedTarget && !this.root.contains(event.relatedTarget);
+        if (focusIsOutsidePopover) {
+            this.dismiss();
+        }
+    }
+    checkForClickOutside(event) {
+        const clickPath = event.composedPath();
+        const forElement = findElementById.findElementById(this.root, this.for);
+        const clickedForElement = clickPath.includes(forElement);
+        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+            this.isOpen &&
+            !clickedForElement) {
+            this.dismiss();
+        }
+    }
+    get titleSlot() {
+        return getSlot.getSlot(this.root, 'title');
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(findElementById.findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        const forElement = findElementById.findElementById(this.root, this.for);
+        if (this.popupElement && forElement) {
+            void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
+                placement: this.position,
+                middleware: [
+                    floatingUi_dom_esm.offset(7),
+                    floatingUi_dom_esm.flip(),
+                    floatingUi_dom_esm.shift(),
+                    floatingUi_dom_esm.arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                Object.assign(this.popupElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                const arrowRotation = {
+                    top: 0,
+                    right: 90,
+                    bottom: 180,
+                    left: -90
+                }[side];
+                // This is 13 because this makes the arrow look aligned when horizontal
+                // or 15 if vertical due to extra padding needed to show the shadow.
+                const arrowLen = side === 'left' || side === 'right' ? 15 : 13;
+                if (middlewareData.arrow) {
+                    let x = middlewareData.arrow.x;
+                    const y = middlewareData.arrow.y;
+                    if (side === 'left' || side === 'right') {
+                        x = x + 4;
+                    }
+                    this.popupElement.setAttribute('data-placement', placement);
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen}px`,
+                        transform: `rotate(${arrowRotation}deg)`
+                    });
+                }
+            });
+        }
+    }
+    dismiss() {
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.isOpen = false;
+        }
+    }
+    connectedCallback() {
+        usage.trackComponent(this.root, { variant: this.position });
+    }
+    componentDidLoad() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    renderDismissButton() {
+        if (this.displayDismissButton) {
+            return (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'f1af9a89c132c5da87f33ec4026d4c4d56382c78', ref: (el) => (this.popupElement = el), class: {
+                'gux-hidden': !this.isOpen,
+                'gux-popover-wrapper': true
+            }, "data-placement": true }, index.h("div", { key: 'db71e725a05cec245fd459942f6d4f319b7c38de', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '0a96d5e7feb9682d0dd57c29a2337fa663603db3', class: "gux-arrow-caret" })), index.h("div", { key: '39951fd4583b3121691af090034be45ffb968757', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { key: '18ba1b83dd02cb982d4a5f81bcd609880d08b211', name: "title" }), this.renderDismissButton()), index.h("div", { key: '802589f19fb4834534af78a6ce0e44fafc183606', class: "gux-popover-content" }, index.h("slot", { key: '3be1f90ba153724c4de794c20929162cef55b592' }))));
+    }
+    get root() { return index.getElement(this); }
+};
+__decorate([
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPopover.prototype, "checkForClickOutside", null);
+__decorate([
+    ThrottleMethod(100)
+], GuxPopover.prototype, "dismiss", null);
+GuxPopover.style = GuxPopoverStyle0;
+
+exports.gux_button = GuxButton;
+exports.gux_popover = GuxPopover;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const isoDates = require('./iso-dates-2daf4199.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 const capitalizeFirstLetter = require('./capitalize-first-letter-424667dc.js');
 const useRegionalDates = require('./use-regional-dates-fa4353d5.js');
@@ -387,7 +387,7 @@ const GuxCalendar = class {
         return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, index.h("div", { class: "gux-date" }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (index.h("div", { key: '1081675c937bc86f2ac5fc23146305305e1393c5', class: "gux-calendar" }, index.h("div", { key: '47fd67422c1a627c37f48b7053cd7052835378f1', class: "gux-header" }, index.h("button", { key: 'b5e9a93cf23b6834e673d0eaca72820cbf9639e1', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '408ad65782ceb75bfd1917b9cf173eea5129ba79', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), index.h("button", { key: '0c4cbc33ee1318472440c3127f43f4e13d37e317', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '7b1a3691f3047b6fb21e528e41626701a36f9fd9', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), index.h("div", { key: '1d93725fddadd36cc89d28effd2b5d15cfdead8c', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (index.h("div", { key: '9bbc75e2c3765e37a075ce0d2b85dfcc66de6766', class: "gux-calendar" }, index.h("div", { key: '8a23859bd12b81147a126f662b5d7d5c79c0b6a7', class: "gux-header" }, index.h("button", { key: '1a4969d0fa5df455a5a589365e32dc474279ac47', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: 'b81a50a65e47739143c12cbc2bb726f15c9b32eb', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), index.h("button", { key: '60cafb513fb1954760894aa377ea5ac71b1d14df', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '34bce7f7c4a4cf407e59ca6f3dfce3856769ee16', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), index.h("div", { key: '7a3751a545428f2192391f88deb943941f4b822f', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 
 const guxCardCss = ":host{display:block;inline-size:fit-content}.gux-card{box-sizing:border-box;padding:var(--gse-ui-card-padding);background-color:var(--gse-ui-card-backgroundColor);border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color);border-radius:var(--gse-ui-card-borderRadius)}.gux-card.gux-bordered{border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color)}.gux-card.gux-raised{border:var(--gse-ui-card-raised-border-width) var(--gse-ui-card-raised-border-style) var(--gse-ui-card-raised-border-color);box-shadow:var(--gse-ui-card-raised-boxShadow-offsetX) var(--gse-ui-card-raised-boxShadow-offsetY) var(--gse-ui-card-raised-boxShadow-blur) var(--gse-ui-card-raised-boxShadow-spread) var(--gse-ui-card-raised-boxShadow-color)}.gux-card.gux-borderless{border:var(--gse-ui-card-borderless-border-width) var(--gse-ui-card-borderless-border-style) var(--gse-ui-card-borderless-border-color)}";
 const GuxCardStyle0 = guxCardCss;
@@ -17,10 +17,10 @@ const GuxCard = class {
         usage.trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (index.h("div", { key: '10dd232bf731c61aa431999f32a7a8aa68a4f51f', class: {
+        return (index.h("div", { key: '69a40130e9d4f45a97697b76a87b4e3cda072d89', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, index.h("slot", { key: '897f58d36d1f391e54da8098aa6d5fe2e4dd7aa9' })));
+            } }, index.h("slot", { key: '0f8e6dc787edbd827a60ee916c75486b9d09f8ff' })));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-column-manager-item.cjs.entry.js

@@ -158,14 +158,14 @@ const GuxColumnManagerItem = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h(index.Host, { key: '892af3387d4bb3c378206b5e8eaf880787c0fc17', draggable: "true" }, index.h("div", { key: 'efc8b9402edd0683ccbdbf9ea44ef9c2bc2a19a5', class: {
+        return (index.h(index.Host, { key: 'ddc0f601ad1df38bdbac35b0a300bab98a9dfc63', draggable: "true" }, index.h("div", { key: '4f3f5d862a1fb3c2e8b54bee5453f40ad1eba44a', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, index.h("button", { key: '4c21051caa7741bef3485f049f1d4c42cde4dbc7', class: {
+            } }, index.h("button", { key: '1dbcc6575d8b180c2af4efef9df114ea7ce7ae8b', class: {
                 'gux-reorder': true,
                 'gux-reordering': this.isReordering
-            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, index.h("gux-icon", { key: '9ce0c62992afeb0f73117e7b2192681a7eb40712', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), index.h("span", { key: 'edb4f5c83a06ba3ce0f674dc9d9db77217f8852b', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { key: '226952a3f77da5087f0979dba76609f4063e11fa', class: "gux-select" }, index.h("slot", { key: '36710273617251c6e8bfd2cbe83ec2278352ca0e', onSlotchange: () => this.onSlotChange() }), index.h("gux-text-highlight", { key: 'cad46d36bc3e86d0db36e04c05c8c2ef226ce4f5', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, index.h("gux-icon", { key: '521a27ab27504e5255028a2eb1fcb237d29bed83', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), index.h("span", { key: '65f4557165b4a2bca5402b1e8e200878cf6c8fa2', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { key: '40f8e02a76386e4141b46fa8d64935a3b3916a51', class: "gux-select" }, index.h("slot", { key: 'f2e2853f8adc0b8086c6f545b399634a1b9dbf00', onSlotchange: () => this.onSlotChange() }), index.h("gux-text-highlight", { key: '4f3e7757e212ff79c61d92dc49f278853a468def', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-column-manager.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const guxColumnManager_service = require('./gux-column-manager.service-6eaeedb0.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./clamp-e86a226e.js');
@@ -115,7 +115,7 @@ const GuxColumnManager = class {
         return (index.h("div", null, index.h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), index.h("span", { class: "gux-sr-only" }, count === total ? (index.h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (index.h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
     }
     render() {
-        return (index.h("div", { key: 'cab3928e7e032c29aa09bd6d82320685dca6613d', class: "gux-container" }, index.h("div", { key: '6516e2799e02c4b17f614005572efc7f01e4408f', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), index.h("div", { key: '1126784248c21042c9c151a5cdc1b39c4407e97a', class: "gux-search" }, index.h("gux-content-search", { key: 'd1ecd06bc846b16ba5ad772e9f6ca049d9a2ff37', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, index.h("input", { key: 'ace557a59adad774ecb47fbb63374e45d6f58ded', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), index.h("div", { key: '9fbf026de4e479fd5ea4b9bc16cec4ab4913f793', class: "gux-select" }, index.h("gux-form-field-checkbox", { key: '3411d77733038640a7d494babc409ee5a104cf20' }, index.h("input", { key: 'b7aeb9ad3b34d67a22775dd0ced09caed487f24c', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), index.h("label", { key: '66e66bb5873e5c6f5cd67fcceba9827c1ef67f37', slot: "label" }, this.renderSelectedColumnCount()))), index.h("div", { key: '6948b31d070f1e251366451c333820cb7b8b346e', class: "gux-list", onChange: () => this.onListChange() }, index.h("slot", { key: 'eafebaf4eaf4f7ff1210fe6a1bda0ce8bbc0b424', onSlotchange: () => this.onSlotChange() })), index.h("gux-announce-beta", { key: '4c2de44fb81a9acb3b01868918716b1151f15736', ref: el => (this.announceElement = el) })));
+        return (index.h("div", { key: '6b8ad63e16a2b7599ead4bf2b052195a19e9b7ab', class: "gux-container" }, index.h("div", { key: '295a03f07363f34244744570b6c6d1bf0b65f3a6', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), index.h("div", { key: '828b08e835158483f2a2c325feedb88d0ead0a75', class: "gux-search" }, index.h("gux-content-search", { key: 'dc3680ff146935b9ab42d7a02feff242474fbed1', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, index.h("input", { key: 'd9c01975c81ba898814cad001f004bb543920d18', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), index.h("div", { key: 'f857e0301541539ae17b726b765879953b308528', class: "gux-select" }, index.h("gux-form-field-checkbox", { key: 'f5b7c59fabd1f4557f6c443b231dfa99e5bcf7df' }, index.h("input", { key: '2c15b4a4e8af82d5b710370637256040dc6d4998', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), index.h("label", { key: '83b2de5c2f43c31efb8de13651400a9981fd319c', slot: "label" }, this.renderSelectedColumnCount()))), index.h("div", { key: 'b8f75a6f309b4792d12ba9821cc66c4b0dedf9cf', class: "gux-list", onChange: () => this.onListChange() }, index.h("slot", { key: 'bbcb598d15219bd9d07fa7ef678223c8110132ac', onSlotchange: () => this.onSlotChange() })), index.h("gux-announce-beta", { key: '599a4ac3ad97969355ee71fe09d12f955f07fb2c', ref: el => (this.announceElement = el) })));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 const onAttributeChange = require('./on-attribute-change-321d434b.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
@@ -66,10 +66,10 @@ const GuxContentSearch = class {
         }
     }
     render() {
-        return (index.h("div", { key: '5dc7e4559bfa5daf0027cd672fec75bc9e2c2795', class: {
+        return (index.h("div", { key: 'f92c07b3fcc3fde5904db8874d3cd9f2a46cbcb3', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement.focusInputElement(this.inputSlottedElement) }, index.h("div", { key: '432c498645ffda373751954064ca4854091732a6', class: "gux-search-icon" }, index.h("gux-icon", { key: '27b6eda62cbb7363054c761ec65905938ea944f2', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), index.h("slot", { key: '5bf2081b6bf607d80ec599acd6e6e717116f8618' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement.focusInputElement(this.inputSlottedElement) }, index.h("div", { key: '339f115cecc425b8a09826acedc108c306fae865', class: "gux-search-icon" }, index.h("gux-icon", { key: '809dc13d39dcfde0b2f26e0a0317c7307f0c950d', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), index.h("slot", { key: 'd2b0566ab5910055da0ffda28fd890bf9290983c' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
@@ -121,8 +121,8 @@ const GuxContextMenu = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h(index.Host, { key: '30d3effa7f34773087052996e02adc07d613d297' }, index.h("gux-popup", { key: '0199d1690de78d1658bfd4c65a8332ac220d8c96', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, index.h("div", { key: '252cd6f0d516574a62b92578101e3ad0e14bccfb', slot: "target", class: "gux-button-container" }, index.h("gux-button-slot", { key: '2a51266d55cf2f976112b05ceef9406165913992', accent: "ghost" }, index.h("button", { key: 'c4d4460fbd6524b17a97f0afc4d43054cfeacaf0', 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", { key: 'cf2aa92ccb96271392fb176d60fb9abd35a2c11c', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
-                this.i18n('contextMenuScreenreaderText') })))), index.h("div", { key: 'db85b74d05e15961bab03be97cbd784bdb5a93e6', slot: "popup", class: "gux-list-container" }, index.h("gux-list", { key: '447097c037726eea44da16c519219650aadab1b2', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: '7fd25310dc677d9444a229f0ff252b30cb34bac9' }))))));
+        return (index.h(index.Host, { key: 'ffc6e8ca1e45223814cb5e7ff3d53cabd860cdeb' }, index.h("gux-popup", { key: '91439f5aebbcb2c2509b7120633ad79c6e9a9ba0', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, index.h("div", { key: '02afa66639be9de0b32b487c4ad542b337386db4', slot: "target", class: "gux-button-container" }, index.h("gux-button-slot", { key: '4f756627c056ef4423d2354aeb0e1cd794b2f092', accent: "ghost" }, index.h("button", { key: 'c83f00e7819228da19e6a3801e2ae0788e45af31', 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", { key: 'fbc97061fa98ab2eab9169efb0493760e477d7cd', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
+                this.i18n('contextMenuScreenreaderText') })))), index.h("div", { key: '12fc7618ce8a6c5658fc6564c8d52ddd97877839', slot: "popup", class: "gux-list-container" }, index.h("gux-list", { key: 'd08420eb4b2e4ad22068a699a8a1ccf97d05e028', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, index.h("slot", { key: '819b32c1b10b27fd6e898c7b9c99485ea3f320d1' }))))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -66,7 +66,7 @@ const GuxCopyToClipboard = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("button", { key: '6b2eb35c396be1e4e4e91f87d7777cea062639fa', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this) }, index.h("div", { key: 'b575dd3d1bdea5ef122fd4f9d861338a53cbe0e5', class: "gux-copy-content" }, index.h("slot", { key: '926a620cc7d3b10e37419c07284288e2709ddef8', name: "content" }), index.h("gux-icon", { key: 'c54c1d77f0b53864e4dc0aad5d5a68cbdca7154e', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
+        return (index.h("button", { key: '8708931a89e20be48131001c9eb929be1a0f34e9', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this) }, index.h("div", { key: '76460f7bb0d4e1cbc19705530c10929d78fc3c0b', class: "gux-copy-content" }, index.h("slot", { key: 'e647b5368a0a7e00eedac3d5e3850b9750fa3105', name: "content" }), index.h("gux-icon", { key: '2250fa380607b08648574bcc11903a7242144621', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -48,11 +48,11 @@ const GuxCreateOption = class {
         return (index.h("span", { class: "gux-screenreader" }, this.i18n('createCustomOptionInstructions')));
     }
     render() {
-        return (index.h(index.Host, { key: '9d2bc65eddec3d6c02c496e0b50e88f28ab0f08c', role: "option", "aria-selected": false, class: {
+        return (index.h(index.Host, { key: '498e6c7b3021dc8eaa853994e229c1ba8b55e954', role: "option", "aria-selected": false, class: {
                 'gux-active': this.active,
                 'gux-hovered': this.hovered,
                 'gux-filtered': this.filtered
-            } }, index.h("div", { key: 'f4ea0e2d47f0c424a086631a59eb3caec9835755', class: "gux-option" }, index.h("gux-icon", { key: '5329eb17ba8393ceb25ef8c4cb949b9e1e63e7ae', decorative: true, "icon-name": "fa/plus-regular" }), index.h("div", { key: 'cd0b035b37c3cee943205f799f019def6b0d57f4', class: "gux-create-text" }, this.i18n('createOption', {
+            } }, index.h("div", { key: '7f4269e029d55a24e8b949b089fe99b15e8c04ee', class: "gux-option" }, index.h("gux-icon", { key: 'a6b59728db5de21210840e255673529321a5dded', decorative: true, "icon-name": "fa/plus-regular" }), index.h("div", { key: '851f3f717862e042c7f5691ec83b2a2a5c772626', class: "gux-create-text" }, this.i18n('createOption', {
             optionValue: this.value
         })), this.renderCustomOptionInstructions())));
     }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const getValidTimezone = require('./get-valid-timezone-221a0856.js');
 const useRegionalDates = require('./use-regional-dates-fa4353d5.js');
 const index$1 = require('./index-d7208697.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const getValidTimezone = require('./get-valid-timezone-221a0856.js');
 const useRegionalDates = require('./use-regional-dates-fa4353d5.js');
 const index$1 = require('./index-d7208697.js');

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

@@ -8,7 +8,7 @@ const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const isoDates = require('./iso-dates-2daf4199.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 const useRegionalDates = require('./use-regional-dates-fa4353d5.js');
 require('./get-closest-element-9e41d6b9.js');
@@ -650,7 +650,7 @@ const GuxDatepicker = class {
             } }, index.h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (index.h("div", { key: 'b912b4873f671ebdc1256f926092c28df1eee5f2', class: {
+        return (index.h("div", { key: '6d4ebf976b21e17ff568bd205bd77f7bc35250cf', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -50,10 +50,10 @@ const GuxDisclosureButtonLegacy = class {
         this.updateIcon();
     }
     render() {
-        return (index.h("div", { key: '121eb5004265d470d90959c35544124b08e37d86', class: `gux-disclosure-button-container gux-${this.position}` }, index.h("button", { key: 'c71e8cc822865d788150d95468dfba7d2357ac89', 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", { key: 'd37c9c6544f531986ead7cb3cc50d964c6e97ff5', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: 'f91f879967bf1c4207d4fe7a2aa3a3498a026138', id: this.panelId, class: {
+        return (index.h("div", { key: 'b645434ad05b389023a0899d7ef978e788ea1416', class: `gux-disclosure-button-container gux-${this.position}` }, index.h("button", { key: '35bf94deb9b03fd5acfdcaa358cf55ae65591cb8', 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", { key: '62b47ce345b5b96eae415e2858ed6867ff30ee3a', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: 'fdf4ad47994422aa3fc27fdfc386afd119fd52cd', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, index.h("slot", { key: '3ee8faa9f4f5cb02e2c724cab5e176d276b47d0b', name: "panel-content" }))));
+            }, role: "region" }, index.h("slot", { key: '78c10387d9a7106d9390d57243857072e77e1b8c', name: "panel-content" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -26,10 +26,10 @@ const GuxDismissButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("gux-button-slot", { key: '32600b1fc687ea39563ecc88aec4f5c385777827', accent: "ghost", class: {
+        return (index.h("gux-button-slot", { key: 'a54d9fe7d1873b24d2b99899ba228440cb223c09', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, index.h("button", { key: 'c013386d96d15ccc2aaa6f7e41a602414fa57453', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: 'b7905d9d5f95d4aa888ee70d68925fd5d1421a29', class: "gux-icon-container" }, index.h("gux-icon", { key: '3d1647facc518a50c589a99cfe957fa40f64624f', "icon-name": "fa/xmark-large-regular", decorative: true })))));
+            } }, index.h("button", { key: '6fb35f13046effebabe116064b07583ec31ada44', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: 'a8f8ce5b1964f7d9388eb74cb8054a16a72d53b9', class: "gux-icon-container" }, index.h("gux-icon", { key: 'df3c509cd84781826587b712d25fba8d0356af4d', "icon-name": "fa/xmark-large-regular", decorative: true })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -45,7 +45,7 @@ const GuxDropdownMultiTag = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: '635499c202da270d0657b975548e1d22f8a1a655', class: {
+        return (index.h("div", { key: '8bde86b366ab061abcbaca0db6a95b56f080fc3e', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

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

@@ -8,7 +8,7 @@ const index$1 = require('./index-d7208697.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
-const usage = require('./usage-5cabc35e.js');
+const usage = require('./usage-069a2035.js');
 const guxListbox_service = require('./gux-listbox.service-a91f8bd2.js');
 const onMutation = require('./on-mutation-c0879d47.js');
 require('./get-closest-element-9e41d6b9.js');
@@ -397,7 +397,7 @@ const GuxDropdownMulti = class {
     }
     render() {
         return [
-            index.h("div", { key: 'e85394a7eabc1be47706bb296782a3ac679067fc', class: "gux-dropdown-container" }, index.h("gux-popup", { key: '4456949ce752fdcfdb203332a7c8312d09f909c2', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            index.h("div", { key: '630a844bfda376392ac74ad23a88df4f5cc5a665', class: "gux-dropdown-container" }, index.h("gux-popup", { key: 'e9584ef961d006264fdaeb9a66723b4b79131fdb', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get delegatesFocus() { return true; }

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

@@ -68,7 +68,7 @@ const GuxDropdownOption = class {
         };
     }
     __stencil_render() {
-        return (index.h("div", { key: 'f014654cde2859554494c85f46fdb72c89c49dfc', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (index.h("div", { key: '889ab6c9eb5920f4dd8cba42bf598374e79300c6', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {