genesys-spark-components 4.0.0-beta.44 → 4.0.0-beta.45

package/dist/esm/gux-tabs.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a0eec33a.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39e65a0a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 
 const guxTabsCss = ":host(.gux-flex){display:flex;flex-direction:column}:host(.gux-flex) .gux-tabs{display:flex;flex-direction:column;height:100%}:host(.gux-flex) .gux-panel-container{display:flex;flex-direction:column;height:100%}.gux-tabs.gux-vertical{display:flex;height:100%}";
 

package/dist/esm/gux-tag.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a0eec33a.js';
-import { b as buildI18nForComponent } from './index-e5ccc024.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-39e65a0a.js';
+import { b as buildI18nForComponent } from './index-df729b6a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import './get-closest-element-66f63212.js';
 
 const tag = "tag with label: {label}";

package/dist/esm/gux-text-highlight.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-a0eec33a.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 
 const conversion = /[ +]/g;
 const expressions = new Map();

package/dist/esm/gux-time-beta.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a0eec33a.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
-import { D as DateTimeFormatter, g as getValidTimezone } from './get-valid-timezone-3781bfa2.js';
-import { g as getDesiredLocale } from './index-e5ccc024.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-39e65a0a.js';
+import { t as trackComponent } from './usage-82907a65.js';
+import { D as DateTimeFormatter, g as getValidTimezone } from './get-valid-timezone-1cf3a777.js';
+import { g as getDesiredLocale } from './index-df729b6a.js';
 import './get-closest-element-66f63212.js';
 
 const GuxTime = class {

package/dist/esm/gux-time-picker.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-a0eec33a.js';
-import { O as OnClickOutside } from './on-click-outside-e696f632.js';
+import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
+import { O as OnClickOutside } from './on-click-outside-f15c5ac7.js';
 import { s as simulateNativeEvent } from './simulate-native-event-bca7a1c9.js';
 import { b as afterNextRender } from './after-next-render-84ec18ad.js';
-import { g as getDesiredLocale, b as buildI18nForComponent } from './index-e5ccc024.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { g as getDesiredLocale, b as buildI18nForComponent } from './index-df729b6a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import './get-closest-element-66f63212.js';
 
 const am = "AM";

package/dist/esm/gux-time-zone-picker-beta.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-a0eec33a.js';
-import { b as buildI18nForComponent } from './index-e5ccc024.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
+import { b as buildI18nForComponent } from './index-df729b6a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import { s as simulateNativeEvent } from './simulate-native-event-bca7a1c9.js';
 import './get-closest-element-66f63212.js';
 

package/dist/esm/gux-toast.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a0eec33a.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-39e65a0a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import { h as hasSlot } from './has-slot-d06c74d9.js';
 
 const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-gap);align-content:stretch;align-items:flex-start;justify-content:flex-start;width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-toast-gapButton);align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight);line-height:var(--gse-ui-toast-heading-lineHeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);font-size:var(--gse-ui-toast-text-fontSize);line-height:var(--gse-ui-toast-text-lineHeight)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-buttonBar-gap);justify-content:flex-start}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";

package/dist/esm/gux-toggle-slider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-a0eec33a.js';
+import { r as registerInstance, h } from './index-39e65a0a.js';
 
 const guxToggleSliderCss = "gux-toggle-slider{display:flex;align-items:center;padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:var(--gse-ui-toggle-track-width);height:var(--gse-ui-toggle-track-height);border-radius:var(--gse-ui-toggle-track-borderRadius)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider{background-color:var(--gse-ui-toggle-track-error-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider .gux-switch{border:var(--gse-ui-toggle-handle-error-border-width) var(--gse-ui-toggle-handle-error-border-style) var(--gse-ui-toggle-handle-error-border-color)}gux-toggle-slider .gux-toggle-slider.gux-error.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-error-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;background-color:var(--gse-ui-toggle-track-disabled-off-backgroundColor);opacity:var(--gse-ui-toggle-disabled-opacity)}gux-toggle-slider .gux-toggle-slider:focus-visible{border-radius:var(--gse-ui-toggle-focus-borderRadius);outline:var(--gse-ui-toggle-focus-border-width) var(--gse-ui-toggle-focus-border-style) var(--gse-ui-toggle-focus-border-color);outline-offset:var(--gse-ui-toggle-focus-offset)}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:var(--gse-ui-toggle-track-enabled-off-backgroundColor);border-radius:calc(var(--gse-ui-toggle-track-height) / 2);transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);left:calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);width:calc(var(--gse-ui-toggle-handle-width) - 4px);height:calc(var(--gse-ui-toggle-handle-height) - 4px);color:var(--gse-ui-toggle-handle-foregroundColor);content:\"\";background-color:var(--gse-ui-toggle-handle-backgroundColor);border:var(--gse-ui-toggle-handle-enabled-border-width) var(--gse-ui-toggle-handle-enabled-border-style) var(--gse-ui-toggle-handle-enabled-border-color);border-radius:var(--gse-ui-toggle-handle-borderRadius);transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;width:calc(var(--gse-ui-toggle-handle-width) - 2);height:calc(var(--gse-ui-toggle-handle-width) - 2);padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-enabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled{background-color:var(--gse-ui-toggle-track-disabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled .gux-switch{border:var(--gse-ui-toggle-handle-hover-disabled-border-width) var(--gse-ui-toggle-handle-hover-disabled-border-style) var(--gse-ui-toggle-handle-hover-disabled-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover .gux-switch{border:var(--gse-ui-toggle-handle-hover-border-width) var(--gse-ui-toggle-handle-hover-border-style) var(--gse-ui-toggle-handle-hover-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(calc(var(--gse-ui-toggle-track-width) - var(--gse-ui-toggle-track-height)))}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
 

package/dist/esm/gux-toggle.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a0eec33a.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39e65a0a.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import { r as randomHTMLId } from './random-html-id-3354d85c.js';
-import { b as buildI18nForComponent } from './index-e5ccc024.js';
+import { b as buildI18nForComponent } from './index-df729b6a.js';
 import './get-closest-element-66f63212.js';
 
 const defaultAriaLabel = "Toggle Switch";

package/dist/esm/gux-tooltip-title.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-a0eec33a.js';
+import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
 import { a as logWarn } from './log-error-0b15023e.js';
-import { O as OnMutation } from './on-mutation-c1be3c74.js';
+import { O as OnMutation } from './on-mutation-c570b3ed.js';
 import { a as afterNextRenderTimeout } from './after-next-render-84ec18ad.js';
 
 const guxTooltipTitleCss = "gux-tooltip-title{overflow:hidden}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-overflow-hidden .gux-title-container ::slotted(span){overflow:hidden;text-overflow:ellipsis}.gux-overflow-hidden .gux-title-container>*{overflow:hidden;text-overflow:ellipsis}.gux-title-container{display:flex;pointer-events:none}.gux-tooltip-icon-decorative .gux-title-container{position:relative;margin-left:20px}.gux-tooltip-icon-decorative .gux-title-container gux-icon,.gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon){position:absolute;left:-20px;flex-shrink:0;width:16px}";

package/dist/esm/gux-tooltip.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a0eec33a.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-813bb04f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-39e65a0a.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-393a5c50.js';
 import { r as randomHTMLId } from './random-html-id-3354d85c.js';
-import { t as trackComponent } from './usage-bd7f874e.js';
+import { t as trackComponent } from './usage-82907a65.js';
 import { f as findElementById } from './find-element-by-id-a3c82a2d.js';
 import { b as afterNextRender } from './after-next-render-84ec18ad.js';
 

package/dist/esm/gux-truncate.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-a0eec33a.js';
-import { O as OnMutation } from './on-mutation-c1be3c74.js';
-import { O as OnResize } from './on-resize-c9e31879.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-39e65a0a.js';
+import { O as OnMutation } from './on-mutation-c570b3ed.js';
+import { O as OnResize } from './on-resize-e2132936.js';
 
 function getTextContentFromNodes(elements) {
   return elements

package/dist/esm/{index-a0eec33a.js → index-39e65a0a.js}

@@ -657,7 +657,7 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
             parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
             // remove the old original location comment entirely
             // later on the patch function will know what to do
-            // and move this to the correct spot in need be
+            // and move this to the correct spot if need be
             childNode['s-ol'].remove();
             childNode['s-ol'] = undefined;
             checkSlotRelocate = true;
@@ -1043,30 +1043,37 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
+ * are slot fallbacks nodes.
+ *
+ * A slot fallback node should be visible by default. Then, it should be
+ * conditionally hidden if:
+ *
+ * - it has a sibling with a `slot` property set to its slot name or if
+ * - it is a default fallback slot node, in which case we hide if it has any
+ *   content
+ *
+ * @param elm the element of interest
+ */
 const updateFallbackSlotVisibility = (elm) => {
-    // tslint:disable-next-line: prefer-const
     const childNodes = elm.childNodes;
-    let childNode;
-    let i;
-    let ilen;
-    let j;
-    let slotNameAttr;
-    let nodeType;
-    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of childNodes) {
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
             if (childNode['s-sr']) {
                 // this is a slot fallback node
                 // get the slot name for this slot reference node
-                slotNameAttr = childNode['s-sn'];
+                const slotName = childNode['s-sn'];
                 // by default always show a fallback slot node
                 // then hide it if there are other slots in the light dom
                 childNode.hidden = false;
-                for (j = 0; j < ilen; j++) {
-                    nodeType = childNodes[j].nodeType;
-                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
-                        // this sibling node is from a different component OR is a named fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                // we need to check all of its sibling nodes in order to see if
+                // `childNode` should be hidden
+                for (const siblingNode of childNodes) {
+                    if (siblingNode['s-hn'] !== childNode['s-hn'] || slotName !== '') {
+                        // this sibling node is from a different component OR is a named
+                        // fallback slot node
+                        if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && slotName === siblingNode.getAttribute('slot')) {
                             childNode.hidden = true;
                             break;
                         }
@@ -1075,8 +1082,8 @@ const updateFallbackSlotVisibility = (elm) => {
                         // this is a default fallback slot node
                         // any element or text node (with content)
                         // should hide the default fallback slot node
-                        if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
-                            (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                        if (siblingNode.nodeType === 1 /* NODE_TYPE.ElementNode */ ||
+                            (siblingNode.nodeType === 3 /* NODE_TYPE.TextNode */ && siblingNode.textContent.trim() !== '')) {
                             childNode.hidden = true;
                             break;
                         }
@@ -1088,42 +1095,55 @@ const updateFallbackSlotVisibility = (elm) => {
         }
     }
 };
+/**
+ * Component-global information about nodes which are either currently being
+ * relocated or will be shortly.
+ */
 const relocateNodes = [];
-const relocateSlotContent = (elm) => {
+/**
+ * Mark the contents of a slot for relocation via adding references to them to
+ * the {@link relocateNodes} data structure. The actual work of relocating them
+ * will then be handled in {@link renderVdom}.
+ *
+ * @param elm a render node whose child nodes need to be relocated
+ */
+const markSlotContentForRelocation = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNode;
     let node;
     let hostContentNodes;
-    let slotNameAttr;
-    let relocateNodeData;
     let j;
-    let i = 0;
-    const childNodes = elm.childNodes;
-    const ilen = childNodes.length;
-    for (; i < ilen; i++) {
-        childNode = childNodes[i];
+    for (const childNode of elm.childNodes) {
+        // we need to find child nodes which are slot references so we can then try
+        // to match them up with nodes that need to be relocated
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
-            // first got the content reference comment node
-            // then we got it's parent, which is where all the host content is in now
+            // first get the content reference comment node ('s-cr'), then we get
+            // its parent, which is where all the host content is now
             hostContentNodes = node.parentNode.childNodes;
-            slotNameAttr = childNode['s-sn'];
+            const slotName = childNode['s-sn'];
+            // iterate through all the nodes under the location where the host was
+            // originally rendered
             for (j = hostContentNodes.length - 1; j >= 0; j--) {
                 node = hostContentNodes[j];
+                // check that the node is not a content reference node or a node
+                // reference and then check that the host name does not match that of
+                // childNode
                 if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
-                    // let's do some relocating to its new home
-                    // but never relocate a content reference node
-                    // that is suppose to always represent the original content location
-                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
+                    // if `node` is located in the slot that `childNode` refers to (via the
+                    // `'s-sn'` property) then we need to relocate it from it's current spot
+                    // (under the host element parent) to the right slot location
+                    if (isNodeLocatedInSlot(node, slotName)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+                        let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
                         checkSlotFallbackVisibility = true;
-                        node['s-sn'] = node['s-sn'] || slotNameAttr;
+                        // ensure that the slot-name attr is correct
+                        node['s-sn'] = node['s-sn'] || slotName;
                         if (relocateNodeData) {
-                            // previously we never found a slot home for this node
-                            // but turns out we did, so let's remember it now
+                            // we marked this node for relocation previously but didn't find
+                            // out the slot reference node to which it needs to be relocated
+                            // so write it down now!
                             relocateNodeData.$slotRefNode$ = childNode;
                         }
                         else {
@@ -1145,8 +1165,10 @@ const relocateSlotContent = (elm) => {
                         }
                     }
                     else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
-                        // so far this element does not have a slot home, not setting slotRefNode on purpose
-                        // if we never find a home for this element then we'll need to hide it
+                        // the node is not found within the slot (`childNode`) that we're
+                        // currently looking at, so we stick it into `relocateNodes` to
+                        // handle later. If we never find a home for this element then
+                        // we'll need to hide it
                         relocateNodes.push({
                             $nodeToRelocate$: node,
                         });
@@ -1154,30 +1176,41 @@ const relocateSlotContent = (elm) => {
                 }
             }
         }
+        // if we're dealing with any type of element (capable of itself being a
+        // slot reference or containing one) then we recur
         if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-            relocateSlotContent(childNode);
+            markSlotContentForRelocation(childNode);
         }
     }
 };
-const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
+/**
+ * Check whether a node is located in a given named slot.
+ *
+ * @param nodeToRelocate the node of interest
+ * @param slotName the slot name to check
+ * @returns whether the node is located in the slot or not
+ */
+const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
     if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
+        if (nodeToRelocate.getAttribute('slot') === null && slotName === '') {
+            // if the node doesn't have a slot attribute, and the slot we're checking
+            // is not a named slot, then we assume the node should be within the slot
             return true;
         }
-        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
+        if (nodeToRelocate.getAttribute('slot') === slotName) {
             return true;
         }
         return false;
     }
-    if (nodeToRelocate['s-sn'] === slotNameAttr) {
+    if (nodeToRelocate['s-sn'] === slotName) {
         return true;
     }
-    return slotNameAttr === '';
+    return slotName === '';
 };
 /**
- * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
- * calling them with `null`. This signals that the DOM element corresponding to
- * the VDom node has been removed from the DOM.
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
+ * them with `null`. This signals that the DOM element corresponding to the VDom
+ * node has been removed from the DOM.
  *
  * @param vNode a virtual DOM node
  */
@@ -1256,7 +1289,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         // the disconnectCallback from working
         plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
         if (checkSlotRelocate) {
-            relocateSlotContent(rootVnode.$elm$);
+            markSlotContentForRelocation(rootVnode.$elm$);
             let relocateData;
             let nodeToRelocate;
             let orgLocationNode;
@@ -1485,6 +1518,10 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
  */
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1579,6 +1616,16 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -1779,7 +1826,18 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
@@ -2109,13 +2167,40 @@ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !==
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -2124,11 +2209,11 @@ const registerHost = (elm, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-    return hostRefs.set(elm, hostRef);
+    addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);

package/dist/esm/{index-e5ccc024.js → index-df729b6a.js}

@@ -1,4 +1,4 @@
-import { a as getAssetPath } from './index-a0eec33a.js';
+import { a as getAssetPath } from './index-39e65a0a.js';
 import { g as getClosestElement } from './get-closest-element-66f63212.js';
 
 /******************************************************************************
@@ -2069,7 +2069,7 @@ function createLocation(start, end) {
 }
 // #region Ponyfills
 // Consolidate these variables up top for easier toggling during debugging
-var hasNativeStartsWith = !!String.prototype.startsWith;
+var hasNativeStartsWith = !!String.prototype.startsWith && '_a'.startsWith('a', 1);
 var hasNativeFromCodePoint = !!String.fromCodePoint;
 var hasNativeFromEntries = !!Object.fromEntries;
 var hasNativeCodePointAt = !!String.prototype.codePointAt;

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-a0eec33a.js';
-export { s as setNonce } from './index-a0eec33a.js';
+import { b as bootstrapLazy } from './index-39e65a0a.js';
+export { s as setNonce } from './index-39e65a0a.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/{on-click-outside-e696f632.js → on-click-outside-f15c5ac7.js}

@@ -1,4 +1,4 @@
-import { g as getElement } from './index-a0eec33a.js';
+import { g as getElement } from './index-39e65a0a.js';
 
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 const OnClickOutsideOptionsDefaults = {

package/dist/esm/{on-mutation-c1be3c74.js → on-mutation-c570b3ed.js}

@@ -1,4 +1,4 @@
-import { g as getElement } from './index-a0eec33a.js';
+import { g as getElement } from './index-39e65a0a.js';
 
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 function OnMutation(options) {

package/dist/esm/{on-resize-c9e31879.js → on-resize-e2132936.js}

@@ -1,4 +1,4 @@
-import { g as getElement } from './index-a0eec33a.js';
+import { g as getElement } from './index-39e65a0a.js';
 
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 function OnResize() {

package/dist/esm/{usage-bd7f874e.js → usage-82907a65.js}

@@ -1,5 +1,5 @@
 const name = "genesys-spark-components";
-const version = "4.0.0-beta.44";
+const version = "4.0.0-beta.45";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";
@@ -59,35 +59,35 @@ const types = "dist/types/index.d.ts";
 const dependencies = {
 	"@floating-ui/dom": "1.4.3",
 	"@vvo/tzdb": "^6.108.0",
-	"google-libphonenumber": "^3.2.32",
-	"intl-messageformat": "^10.3.5",
+	"google-libphonenumber": "^3.2.33",
+	"intl-messageformat": "^10.5.3",
 	"requestanimationframe-timer": "^3.0.3",
 	sortablejs: "^1.15.0"
 };
 const devDependencies = {
-	"@babel/core": "^7.22.8",
-	"@babel/preset-env": "^7.22.7",
-	"@stencil/core": "^4.3.0",
-	"@stencil/react-output-target": "^0.3.1",
-	"@stencil/sass": "^3.0.3",
+	"@babel/core": "^7.23.2",
+	"@babel/preset-env": "^7.23.2",
+	"@stencil/core": "^4.4.1",
+	"@stencil/react-output-target": "^0.5.3",
+	"@stencil/sass": "^3.0.6",
 	"@stencil/utils": "0.0.5",
-	"@types/google-libphonenumber": "^7.4.23",
+	"@types/google-libphonenumber": "^7.4.28",
 	"@types/jest": "^27.5.2",
 	"@types/new-relic-browser": "^0.1118.2",
 	"@types/puppeteer": "^5.4.7",
-	"@types/resize-observer-browser": "^0.1.7",
-	"@types/sortablejs": "^1.15.1",
-	"@typescript-eslint/eslint-plugin": "^6.0.0",
-	"@typescript-eslint/parser": "^6.0.0",
+	"@types/resize-observer-browser": "^0.1.8",
+	"@types/sortablejs": "^1.15.3",
+	"@typescript-eslint/eslint-plugin": "^6.7.5",
+	"@typescript-eslint/parser": "^6.7.5",
 	"axe-core": "4.4.2",
 	"axe-live": "^1.0.1",
-	eslint: "^8.44.0",
+	eslint: "^8.51.0",
 	"eslint-config-genesys-spark-components": "file:../../shared-configs/eslint-config-genesys-spark-components",
-	"eslint-config-prettier": "^8.8.0",
+	"eslint-config-prettier": "^8.10.0",
 	"file-loader": "^6.2.0",
 	"genesys-spark-tokens": "file:../genesys-spark-tokens",
 	glob: "^10.3.0",
-	handlebars: "^4.7.7",
+	handlebars: "^4.7.8",
 	inquirer: "^9.2.7",
 	jest: "^27.5.1",
 	"jest-cli": "^27.5.1",
@@ -96,31 +96,32 @@ const devDependencies = {
 	"jest-junit": "^13.2.0",
 	"jest-silent-reporter": "^0.5.0",
 	jsdom: "^22.1.0",
-	"lint-staged": "^13.2.3",
+	"lint-staged": "^13.3.0",
 	marked: "^4.3.0",
 	"mutation-observer": "^1.0.3",
-	"node-fetch": "^3.3.1",
+	"node-fetch": "^3.3.2",
 	"npm-run-all": "^4.1.5",
 	"postcss-html": "^1.5.0",
 	"postcss-less": "^6.0.0",
-	"postcss-scss": "^4.0.8",
-	prettier: "^3.0.0",
+	"postcss-scss": "^4.0.9",
+	prettier: "^3.0.3",
 	"prettier-config-genesys-spark-components": "file:../../shared-configs/prettier-config-genesys-spark-components",
 	"prettier-package-json": "^2.8.0",
 	puppeteer: "^14.4.1",
-	"rollup-plugin-copy": "^3.4.0",
+	"resize-observer-polyfill": "^1.5.1",
+	"rollup-plugin-copy": "^3.5.0",
 	"semver-sort": "^1.0.0",
 	"spritesheet-templates": "^10.5.2",
 	spritesmith: "^3.4.1",
-	stylelint: "^15.10.1",
+	stylelint: "^15.10.3",
 	"stylelint-config-genesys-spark-components": "file:../../shared-configs/stylelint-config-genesys-spark-components",
 	"stylelint-config-html": "^1.1.0",
 	"stylelint-config-recess-order": "^4.3.0",
 	"stylelint-config-standard": "^34.0.0",
 	"stylelint-scss": "^5.2.1",
 	svgo: "^3.0.2",
-	"ts-loader": "^9.4.4",
-	typescript: "^4.9.4",
+	"ts-loader": "^9.5.0",
+	typescript: "^4.9.5",
 	weekstart: "^2.0.0",
 	xmldom: "^0.6.0"
 };