genesys-spark-components 4.154.6 → 4.155.0

package/dist/cjs/{usage-1cc3f37c.js → usage-f9f34ca4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.154.6";
+const version = "4.155.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";
@@ -41,19 +41,19 @@ const scripts = {
 	"stencil.dev": "stencil build --dev --watch --serve --no-open",
 	stylelint: "stylelint --fix \"**/*.{css,html,scss}\"",
 	svgo: "find ./src/components/stable/gux-icon/icons/**/*.svg -type f ! -path '*/legacy/*' ! -path '*/brand/*'  -exec svgo {} +",
-	test: "TZ=UTC stencil test --spec --e2e",
-	"test.ci": "TZ=UTC npm run test.ci.spec",
-	"test.ci.e2e": "TZ=UTC stencil test --e2e --maxWorkers=1 --workerIdleMemoryLimit=500MB",
-	"test.ci.spec": "TZ=UTC stencil test --spec --maxWorkers=1 --workerIdleMemoryLimit=500MB",
-	"test.e2e": "TZ=UTC stencil test --e2e",
-	"test.e2e.update-snapshot": "TZ=UTC stencil test --e2e --updateSnapshot",
+	test: "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --spec --e2e",
+	"test.ci": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC npm run test.ci.spec",
+	"test.ci.e2e": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --e2e --maxWorkers=1",
+	"test.ci.spec": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --spec --maxWorkers=1",
+	"test.e2e": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --e2e",
+	"test.e2e.update-snapshot": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --e2e --updateSnapshot",
 	"test.playwright": "playwright test",
 	"test.playwright.ui": "playwright test --ui",
-	"test.screenshot": "TZ=UTC stencil test --e2e --screenshot",
-	"test.unit": "TZ=UTC stencil build dev && stencil test --spec",
-	"test.unit.update-snapshot": "TZ=UTC stencil test --spec --updateSnapshot",
-	"test.update-snapshot": "TZ=UTC stencil test --spec --e2e --updateSnapshot; playwright test --update-snapshots",
-	"test.watch": "TZ=UTC stencil test --spec --e2e --watch",
+	"test.screenshot": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --e2e --screenshot",
+	"test.unit": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil build dev && stencil test --spec",
+	"test.unit.update-snapshot": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --spec --updateSnapshot",
+	"test.update-snapshot": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --spec --e2e --updateSnapshot; playwright test --update-snapshots",
+	"test.watch": "LANG='C.UTF-8' LC_ALL='C.UTF-8' TZ=UTC stencil test --spec --e2e --watch",
 	"update-en-i18n": "./scripts/update-en-i18n.js",
 	"version-sync": "npm version --no-git-tag-version --allow-same-version"
 };
@@ -88,12 +88,12 @@ const devDependencies = {
 	"@types/sortablejs": "^1.15.8",
 	"axe-core": "^4.10.3",
 	"axe-live": "^1.0.1",
-	eslint: "^9.28.0",
+	eslint: "^9.29.0",
 	"eslint-config-genesys-spark-components": "file:../../shared-configs/eslint-config-genesys-spark-components",
 	"eslint-plugin-playwright": "^2.2.0",
 	"file-loader": "^6.2.0",
 	"genesys-spark-tokens": "file:../genesys-spark-tokens",
-	glob: "^11.0.2",
+	glob: "^11.0.3",
 	globals: "^16.2.0",
 	handlebars: "^4.7.8",
 	inquirer: "^12.6.3",
@@ -108,6 +108,7 @@ const devDependencies = {
 	"mutation-observer": "^1.0.3",
 	"node-fetch": "^3.3.2",
 	"npm-run-all": "^4.1.5",
+	"playwright-core": "1.51.0",
 	"postcss-html": "^1.8.0",
 	"postcss-less": "^6.0.0",
 	"postcss-scss": "^4.0.9",
@@ -120,12 +121,12 @@ const devDependencies = {
 	smob: "^1.5.0",
 	"spritesheet-templates": "^10.5.2",
 	spritesmith: "^3.5.1",
-	stylelint: "^16.20.0",
+	stylelint: "^16.21.0",
 	"stylelint-config-genesys-spark-components": "file:../../shared-configs/stylelint-config-genesys-spark-components",
 	"stylelint-config-html": "^1.1.0",
-	"stylelint-config-recess-order": "^6.0.0",
+	"stylelint-config-recess-order": "^6.1.0",
 	"stylelint-config-standard": "^38.0.0",
-	"stylelint-scss": "^6.12.0",
+	"stylelint-scss": "^6.12.1",
 	"stylelint-use-logical": "^2.1.2",
 	"stylelint-use-logical-spec": "^5.0.1",
 	svgo: "^3.3.2",
@@ -140,7 +141,7 @@ const publishConfig = {
 const collection = "dist/collection/collection-manifest.json";
 const prettier = "prettier-config-genesys-spark-components";
 const volta = {
-	node: "20.9.0"
+	node: "22.14.0"
 };
 const packageInfo = {
 	name: name,

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow.js

@@ -83,6 +83,9 @@ export class GuxAvatarOverflow {
         this.hide();
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(this.overflowButtonElement, this.menuElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -151,10 +154,10 @@ export class GuxAvatarOverflow {
         void nextFocusableElement.focus();
     }
     render() {
-        return (h(Host, { key: '56dc6348cc414fa170fa0ee06fe064f3450882bc', role: "menuitem" }, h("button", { key: '5b73425d77f78fce9d87b33487cea1abef6cb0a3', class: "gux-avatar-overflow", ref: el => (this.overflowButtonElement = el), onClick: () => this.toggleOverflowMenu(), tabIndex: -1, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("span", { key: 'a23023d03fb1b759e35f06dea6be0114ba5873db', class: "gux-avatar-overflow-wrapper" }, h("span", { key: 'ae083e3bbf584b59f5a00eac3585b79fa916a712', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), h("div", { key: 'cab97c98d994f16c09b24f8545b8cd7200388892', class: {
+        return (h(Host, { key: '289b013c9d67271a08acc35a6f61cd90d2e733c5', role: "menuitem" }, h("button", { key: '48465ecf48d5f3a72924b6d4bb6d029550839367', class: "gux-avatar-overflow", ref: el => (this.overflowButtonElement = el), onClick: () => this.toggleOverflowMenu(), tabIndex: -1, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("span", { key: '6743688d97606a5524c9746d2e808c2224106628', class: "gux-avatar-overflow-wrapper" }, h("span", { key: 'c8cf521169d3b6999d70d12bf95f902f7c2910a9', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), h("div", { key: '6c9081633ec976b9fb380ee5c1fd77f2a71b424b', class: {
                 'gux-menu-wrapper': true,
                 'gux-shown': this.expanded
-            }, ref: el => (this.menuElement = el) }, h("div", { key: '715af9beb5866644e7524b641ce2206b6b1b86d3', role: "menu", class: "gux-menu-content" }, h("slot", { key: 'fd5723c2b0f9bb1039e043d505ff7dff3ba70a18' })))));
+            }, ref: el => (this.menuElement = el) }, h("div", { key: 'f99f53607731b8121276ca8f9b1469ef980f2601', role: "menu", class: "gux-menu-content" }, h("slot", { key: 'e82d2ac9cf9f02d0acdbebb29a5dfd8df31e4d72' })))));
     }
     static get is() { return "gux-avatar-overflow-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/tests/gux-form.common.js

@@ -0,0 +1,56 @@
+export const renderConfigs = [
+    {
+        description: 'should render as expected',
+        html: `
+        <gux-form-beta>
+    <form>
+        <header>
+        <gux-form-heading><h1>Form Heading</h1></gux-form-heading>
+        <gux-form-description
+            ><span>
+            This is a simple paragraph to accompany the form header.
+            </span></gux-form-description
+        >
+        </header>
+        <fieldset>
+        <legend>
+            <gux-form-fieldset-heading
+            ><h2>Form Fieldset Header</h2>
+            </gux-form-fieldset-heading>
+            <gux-form-description
+            ><span>
+                This is a simple paragraph to accompany the fieldset header.
+            </span></gux-form-description
+            >
+        </legend>
+        <gux-form-field-text-like label-position="above">
+            <input slot="input" type="text" name="lp-3" />
+            <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+
+        <gux-form-field-phone label-position="above">
+            <gux-phone-input-beta></gux-phone-input-beta>
+            <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-phone>
+
+        <gux-form-field-textarea label-position="above">
+            <textarea slot="input" name="textarea"></textarea>
+            <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-textarea>
+        </fieldset>
+
+        <gux-form-field-text-like label-position="above">
+        <input slot="input" type="text" name="lp-3" />
+        <label slot="label">Fieldset Form field label</label>
+        </gux-form-field-text-like>
+
+        <gux-form-footer placement="page-desktop">
+        <footer>
+            <gux-button accent="primary">Primary</gux-button>
+            <gux-button accent="secondary">Secondary</gux-button>
+        </footer>
+        </gux-form-footer>
+    </form>
+    </gux-form-beta>`
+    }
+];

package/dist/collection/components/beta/gux-popover-beta/gux-popover.js

@@ -96,6 +96,9 @@ export class GuxPopover {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -237,10 +240,10 @@ export class GuxPopover {
         this.disconnect();
     }
     render() {
-        return (h("div", { key: 'b62c7bb78e66d894edf9fa43fb811a2bdcddf250', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'a0b74ae6345d62fd9463885154efc9ca90283cc3', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual", tabindex: "-1" }, h("div", { key: '1d244eb98a653097b583efb2ea02319f0692dc42', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'dfd569f3243bf230c496076ee58db8670a69ea17', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: 'cd5454707fac1dbf43b7683fc0ad30c1054eef47', onClick: this.dismiss.bind(this) })), h("div", { key: '30410be47ab010f1ee883843d6b6fdf101f609c0', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '542624837df7391d4da4b7fae458fb9d6f32ca2b', name: "title" })), h("div", { key: '12ecf5122660da87b15e8aaaaafce3a0d1b4f497', class: "gux-popover-content" }, h("slot", { key: 'aaff051f25493d29b08f8d071e85fd9c9d6ad71a' }))));
+            }, "data-placement": true, popover: "manual", tabindex: "-1" }, h("div", { key: '4fb00cde23c3f8a2ceb12aea22d84d162d5a0af6', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '42c44321cccc9144e9db86f0496add68bd1b07c0', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: '8011f3b71477290c363c95babe66183f75799293', onClick: this.dismiss.bind(this) })), h("div", { key: 'bd59ec9f9ea493f9fbe3e33f62472d04fdedf209', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '4027150cc9c7668540c65adc5147d30cea549698', name: "title" })), h("div", { key: 'e6dd8022e1870c44861c2235c2895510115add37', class: "gux-popover-content" }, h("slot", { key: '2f7f997161cbf3fc2cc0abb4ddd2815ef9440e20' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-popover-list-beta/gux-popover-list.js

@@ -55,6 +55,9 @@ export class GuxPopoverList {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -183,10 +186,10 @@ export class GuxPopoverList {
         this.disconnect();
     }
     render() {
-        return (h("div", { key: 'cd9b2fff6f3e1ef94c9264cc15e5e4a4bd4b9e5e', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '6e8a7aedef7c765741027e160fc33bd742998108', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: 'ce18a01f5a480ba20721f8b66fc23999f0e5bf5b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'ae8652aee94f000e8f3fd11873a58efa671fced2', onClick: this.dismiss.bind(this) })), h("div", { key: '92912743edf979dc23808a584310e1508ffa7393', class: "gux-popover-content" }, h("slot", { key: '66aac2d941ef4194a1e0b2c74baf985a48911f24' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '07052e7958ca90f582d699839c122a46b12da7b6', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'c5559ac16b0a8b48729c5f9c8672ce3c5a25768f', onClick: this.dismiss.bind(this) })), h("div", { key: '34d370a8e31db4884b611471a26eb8f1bf04a166', class: "gux-popover-content" }, h("slot", { key: '2c5a0052e1a764bd615317155f48f998537ce5a3' }))));
     }
     static get is() { return "gux-popover-list-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-text-editor-sub-list/gux-rich-text-editor-sub-list.js

@@ -95,6 +95,9 @@ export class GuxRichTextEditorSubList {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(this.buttonElement, this.subListElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -122,13 +125,13 @@ export class GuxRichTextEditorSubList {
         }
     }
     render() {
-        return (h(Host, { key: '41f07a67b67160e7acb5eba1e44d3cf11c2f0ef5' }, h("button", { key: '2c3f37036a7771a887e80c9b1899109876281120', type: "button", class: {
+        return (h(Host, { key: '6c04828b2b70f3fb9501dc149fccf906666a9b9a' }, h("button", { key: '23cc870a28a4f7ede901e4977ddbe727967c50b0', type: "button", class: {
                 'gux-sub-list-button': true,
                 'gux-sub-list-button-active': this.isShown
-            }, tabIndex: -1, role: "listitem", ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'c746d5bad2bd6f06bdb1b9d2606575550a20f6f6', class: "gux-sub-list-button-text" }, this.label), h("gux-icon", { key: 'edfe4891d782c89740752a5e9ef00ca9e3dbce23', size: "small", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '78190e9338750363b6a604e21658b4859c11aa00', ref: el => (this.subListElement = el), class: {
+            }, tabIndex: -1, role: "listitem", ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'fcb2655ea9302ae41b18712cffdb77705b48f0ff', class: "gux-sub-list-button-text" }, this.label), h("gux-icon", { key: 'a550b458c0afa42304563a328f88640ff90f5450', size: "small", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '440e3e6c1a621789e057905ee827b7a44f5f8822', ref: el => (this.subListElement = el), class: {
                 'gux-sub-list-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '4fc7b3580343a1dc334e38f8e33a000e1e4258eb', role: "list", class: "gux-sub-list-content", ref: el => (this.subListContentElement = el) }, h("slot", { key: 'b9eaacb52a10b22c5f2a5c5d6125367eb48d7378' })))));
+            } }, h("div", { key: '8c754de0755b60681b218b992430bbe48df95928', role: "list", class: "gux-sub-list-content", ref: el => (this.subListContentElement = el) }, h("slot", { key: '78820afe906ef501b240082c6f105cc3f117da81' })))));
     }
     static get is() { return "gux-rich-text-editor-sub-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.common.js

@@ -0,0 +1,15 @@
+export const renderConfigs = [
+    ...['simple', 'descriptive'].map(variant => ({
+        description: `Should render as expected for "${variant}" variant`,
+        html: `
+    <gux-selector-card-beta variant="${variant}">
+      <label slot="label">Card label</label>
+      <input slot="input" type="checkbox" name="food-1[]" value="pizza" />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+    `
+    }))
+];

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -72,6 +72,9 @@ export class GuxTooltipBase {
         this.hide();
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         const ref = this.followMouse && this.refElement ? this.refElement : this.forElement;
         this.cleanupUpdatePosition = autoUpdate(ref, this.root, () => this.updatePosition(ref), {
             ancestorScroll: true,
@@ -170,10 +173,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: 'e7444c6ad95858b6110d80c84926bb1bdd9e0be3', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'c851e4aaee53b6f503e80f866be5bc1472d05f64', class: {
+        return (h(Host, { key: '98c28c32aa5196c39c583bc5fd25fdcc6aeafc5d', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'b6028bb11ee231748feae82bf4c9f2412cfb35c2', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '93f46e29b926180f76b7c4b592990b49ff8403f4', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '41a0004706e0bb1482c3e82f92049edf5cea3eaf', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.css

@@ -1,16 +1,19 @@
-:host:first-child .gux-header {
+:host(:first-child) section {
   border-block-start: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
 
 section.gux-disabled {
   cursor: default;
-  opacity: 0.5;
 }
 section.gux-disabled > * {
   pointer-events: none;
+  opacity: 0.5;
 }
 
-.gux-header {
+section {
+  border-block-end: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
+}
+section .gux-header {
   all: unset;
   box-sizing: border-box;
   display: flex;
@@ -22,20 +25,19 @@ section.gux-disabled > * {
   padding: var(--gse-ui-accordion-header-padding);
   margin: 0;
   cursor: pointer;
-  border-block-end: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
-.gux-header .gux-header-text {
+section .gux-header .gux-header-text {
   flex: 1 1 auto;
   align-self: auto;
   font-weight: var(--gse-ui-accordion-header-label-defaultText-fontWeight);
   color: var(--gse-ui-accordion-header-default-foreground-labelColor);
   text-align: start;
 }
-.gux-header.gux-reverse-headings .gux-header-text {
+section .gux-header.gux-reverse-headings .gux-header-text {
   display: flex;
   flex-direction: column-reverse;
 }
-.gux-header ::slotted([slot=header]) {
+section .gux-header ::slotted([slot=header]) {
   padding: 0;
   margin: 0;
   font-family: var(--gse-ui-accordion-header-label-defaultText-fontFamily) !important;
@@ -44,7 +46,7 @@ section.gux-disabled > * {
   line-height: var(--gse-ui-accordion-header-label-defaultText-lineHeight) !important;
   color: var(--gse-ui-accordion-header-default-foreground-labelColor);
 }
-.gux-header ::slotted([slot=subheader]) {
+section .gux-header ::slotted([slot=subheader]) {
   padding: 0;
   margin-block: var(--gse-core-spacing-5xs) 0;
   margin-inline: 0;
@@ -54,11 +56,11 @@ section.gux-disabled > * {
   line-height: var(--gse-ui-accordion-contentItem-defaultText-lineHeight) !important;
   color: var(--gse-ui-accordion-contentItem-foregroundColor);
 }
-.gux-header ::slotted([slot=subheader]) .gux-reverse-headings {
+section .gux-header ::slotted([slot=subheader]) .gux-reverse-headings {
   margin-block: 0 var(--gse-core-spacing-5xs);
   margin-inline: 0;
 }
-.gux-header ::slotted([slot=icon]) {
+section .gux-header ::slotted([slot=icon]) {
   flex: 0 0 auto;
   align-self: flex-start;
   inline-size: var(--gse-ui-icon-small-size);
@@ -66,10 +68,10 @@ section.gux-disabled > * {
   margin-inline-end: var(--gse-ui-accordion-header-gap);
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
 }
-.gux-header ::slotted([slot=icon]) .gux-reverse-headings {
+section .gux-header ::slotted([slot=icon]) .gux-reverse-headings {
   align-self: flex-end;
 }
-.gux-header .gux-header-icon {
+section .gux-header .gux-header-icon {
   flex: 0 1 auto;
   align-items: center;
   align-self: auto;
@@ -79,34 +81,32 @@ section.gux-disabled > * {
   transform-origin: center;
   transition: transform 0.5s ease;
 }
-.gux-header .gux-header-icon.gux-arrow-position-start {
+section .gux-header .gux-header-icon.gux-arrow-position-start {
   order: -1;
   margin-inline-end: var(--gse-ui-accordion-header-gap);
 }
-.gux-header .gux-header-icon.gux-expanded {
+section .gux-header .gux-header-icon.gux-expanded {
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-open);
   transform: rotate(-180deg);
 }
-.gux-header:focus-visible {
+section .gux-header:focus-visible {
   outline: var(--gse-ui-accordion-focusBorder-width) var(--gse-ui-accordion-focusBorder-style) var(--gse-ui-accordion-focusBorder-color);
   outline-offset: var(--gse-ui-accordion-focus-offset-gap);
   border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
 }
-.gux-header:hover .gux-header-icon {
+section .gux-header:hover .gux-header-icon {
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-hover);
 }
-
-.gux-content {
+section .gux-content {
   box-sizing: border-box;
   display: none;
-  border-block-end: var(--gse-ui-accordion-wrapper-dividerBorder-width) var(--gse-ui-accordion-wrapper-dividerBorder-style) var(--gse-ui-accordion-wrapper-dividerBorder-color);
 }
-.gux-content.gux-expanded {
+section .gux-content.gux-expanded {
   display: block;
 }
-.gux-content.gux-text-content-layout {
+section .gux-content.gux-text-content-layout {
   padding: var(--gse-ui-accordion-contentItem-padding);
 }
-.gux-content ::slotted([slot=content]) {
+section .gux-content ::slotted([slot=content]) {
   margin: 0;
 }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.js

@@ -473,6 +473,9 @@ export class GuxDatepicker {
         this.updateDate();
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         this.cleanupUpdatePosition = autoUpdate(this.datepickerElement, this.calendarElement, () => this.updatePosition(), {
             ancestorScroll: true,
             elementResize: true,
@@ -535,7 +538,7 @@ export class GuxDatepicker {
             } }, h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, 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 (h("div", { key: 'b8ac62b13ada393e6e80482f4e10da8eafd03bb6', class: {
+        return (h("div", { key: '8bf19a961f4cd2d4b66e75d6088b93ea72a13879', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.js

@@ -79,6 +79,9 @@ export class GuxFlyoutMenu {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(this.targetElement, this.menuContentElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -171,10 +174,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'c5c84e99ea3294192a198c02e15c469d462f4513', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '167f018586ec86c5fffcec46d21e7dae68b78857', ref: el => (this.targetElement = el) }, h("slot", { key: 'cb675622f4400180090210192b7159724fb120b8', name: "target" })), h("div", { key: '67e553bafdcb8d3fefbb0f8a6c3fbf4a7029426d', class: {
+        return (h(Host, { key: '2351ad3d650d9d219d7272d1462bc4896b027b12', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: 'a00f3834b35a503a64d4beca6638e9fe34ac0d14', ref: el => (this.targetElement = el) }, h("slot", { key: '53f5b8d5562cd648cabc0ea4860cc1c473796ac5', name: "target" })), h("div", { key: 'a8245bae6e65405ed733d3332ccbe6e0fd994098', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '53ef18570bd6ca8c086f993a5d4901b8619d94d0', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'fd6bafab02455a7f0007cdbbb860dec625b2a5c2', class: "gux-arrow-caret" })), h("slot", { key: 'fe9427b13c803d1cddb97b0f5cbaadbbcfef08c4', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '5972fa797f392f3c300ea50d61c41d2ed747db07', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'c6a1f06a0928b002b0a43f2bec0ea04bac0e96cc', class: "gux-arrow-caret" })), h("slot", { key: '01054f699549e0b63b63d36b0d8f5d6cfa26e752', name: "menu" }))));
     }
     static get is() { return "gux-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -85,6 +85,9 @@ export class GuxSubmenu {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(this.buttonElement, this.submenuElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -139,13 +142,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: '7634739a4d3f51c08717c166facc866713eee2dc' }, h("button", { key: '17328b96f6103fcc7a52c3881fcc91b404f5d521', type: "button", class: {
+        return (h(Host, { key: '1ad11a00e017b984c136796e2ba9dd69130acbfb' }, h("button", { key: 'f038445901d006e5418d0383c1b90007ebc7d0c0', type: "button", class: {
                 'gux-submenu-button': true,
                 'gux-submenu-button-active': this.isShown
-            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '4317bb32b28f96ddfdadaa80dd0b27bc6b0e08d8', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '85fc6ed75d07e86096587525f01bc7539264f5b0', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '18493a4105564036e99417a2bad67b46235a0aac', ref: el => (this.submenuElement = el), class: {
+            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '6df82dc2463debb73e1d6a9012a2693bc0472303', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: 'd133d35ecf42ff9605f29c0eed4510df49470877', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '837cb55663cdc8815aaea972d898848e61be5a67', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: 'f287026af238a24a6479d2a6557ef526d57f8832', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '2c35a489718ca4d33fd6d427d8bfff26e5762ecf' })))));
+            } }, h("div", { key: '23e5beec4ba73ff41118d0b0c2cfbd32a233f6aa', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'df488b3d36386e2a31ac8172c74f801a5adee2af' })))));
     }
     static get is() { return "gux-submenu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-page-loading-spinner/tests/gux-page-loading-spinner.common.js

@@ -0,0 +1,6 @@
+export const renderConfigs = [
+    {
+        description: 'should render as expected',
+        html: `<gux-page-loading-spinner style="border: 1px dashed gainsboro"></gux-page-loading-spinner>`
+    }
+];

package/dist/collection/components/stable/gux-popover/gux-popover.js

@@ -68,6 +68,9 @@ export class GuxPopover {
         return getSlot(this.root, 'title');
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -162,10 +165,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: 'ee1720e19760f914995ad956f05f401cfbd92065', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'd9d6758ec6849807c6e86e6e844807a1967904d6', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: '5519da18954bc746183af5fce4fe38e9c3e11f2b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '593025978df29f4dc891e7555f7d40251a33a670', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: '52ad3b2604ff6fe3c6fea42a26a3fe78b5f90cbd', onClick: this.dismiss.bind(this) })), h("div", { key: 'e41c91e3b727ede0ac0a0f7e80b73623f84abb75', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '4c7276811649348eb49f013029dc17f1f8c76a3a', name: "title" })), h("div", { key: '5d06ed668cab6c8acf176a8c7f08607402b01a6a', class: "gux-popover-content" }, h("slot", { key: '14212f1c9a2256500b492d8112d2dee5bf811ef6' }))));
+            }, "data-placement": true }, h("div", { key: '642e40c2e9d4c9f135d846efe959aa5ad2655b78', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '45ea7fb43641787a6df96214143660ca08d5ea6f', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: 'ffa11bccd411d805d765cee7777ab10834a8a290', onClick: this.dismiss.bind(this) })), h("div", { key: 'e80baa94376cbc8c7723246fe54fbb055d98b51a', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '3c72fe1fd47352473c6d3bcf2cb7261f87dccc5c', name: "title" })), h("div", { key: '62fb74c43e089363fa622ee9d1a96f6213f77968', class: "gux-popover-content" }, h("slot", { key: 'b183e6ccdb37a2bbefc9a867fa1e51adfdbaade7' }))));
     }
     static get is() { return "gux-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -50,6 +50,9 @@ export class GuxPopoverList {
         }
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         if (this.root.isConnected) {
             this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
                 ancestorScroll: true,
@@ -134,10 +137,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: '06027493c41f6307c87a1fbdd356e5b0bb3cd4ef', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '807c8644db8fe84778902414423280fa81de31eb', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: 'bbd4037c60d7d4b83ca8d5ac4a371f0f607f1c1a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '5cc31a0d2193f99acc41136cc86d485f0decff8b', onClick: this.dismiss.bind(this) })), h("div", { key: '8eeb6788c5e65b7c6bd44b8a79d7271532816db4', class: "gux-popover-content" }, h("slot", { key: '272d95c0af2160f0ab06c489cfa91c641451a2c5' }))));
+            }, "data-placement": true }, h("div", { key: '787838d5b1c72de8d3a5cb4789f0f8e6c273a51f', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'c6a3a781d5e5e5707a2d00f434a5ef0bdb314fae', onClick: this.dismiss.bind(this) })), h("div", { key: '6305584cac8c740cee61ef10f23a70700aafa0c2', class: "gux-popover-content" }, h("slot", { key: 'e3d9b45d6ebecd54c8e9db49d3698d388193dd86' }))));
     }
     static get is() { return "gux-popover-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-popup/gux-popup.js

@@ -26,6 +26,9 @@ export class GuxPopup {
         this.inline = false;
     }
     runUpdatePosition() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
         this.cleanupUpdatePosition = autoUpdate(this.targetElementContainer, this.popupElementContainer, () => this.updatePosition(), {
             ancestorScroll: true,
             elementResize: true,
@@ -113,13 +116,13 @@ export class GuxPopup {
         }
     }
     render() {
-        return (h("div", { key: '425c3fe4d308bc7a405c855fd339a079e9d05d06', class: {
+        return (h("div", { key: 'b262551935468f41795301940324d9580d574934', class: {
                 'gux-target-container': true,
                 'gux-disabled': this.disabled
-            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: '538bd99671e2f1a66e6b77f559f284d82353d9ca', name: "target" }), h("div", { key: '9dd4b9ce304c79b243c0e1f0a1a10b6993e7c162', class: {
+            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: '97138c571c2942fb7550d5b235e1ec339a3d185f', name: "target" }), h("div", { key: 'f535d45ef7bf09155d7ebf48f3fb965ea89e72b9', class: {
                 'gux-popup-container': true,
                 'gux-expanded': this.expanded && !this.disabled
-            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: 'bf99c8e91bde2cecb2a86e7baa030fa3b3bcfcb5', name: "popup" }))));
+            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: '7f65620b05398d25749f2ca2de56aaafd9832286', name: "popup" }))));
     }
     static get is() { return "gux-popup"; }
     static get encapsulation() { return "shadow"; }