genesys-spark-components 4.80.1 → 4.81.1

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

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-selector-card', () => {
+    describe('#render', () => {
+        [
+            `<gux-selector-card-beta variant="simple">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+      `,
+            `<gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="simple">
+          <label slot="label" for="1-C">First</label>
+          <input slot="input" id="1-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-selector-card-beta');
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+            it(`should be accessible (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+    it('can select and deselect checkbox', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="1-C">First</label>
+          <input slot="input" id="1-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+      `
+        });
+        const element = await page.find('gux-selector-card-beta');
+        const input = await element.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking checkbox');
+        await input.click();
+        await page.waitForChanges();
+        expect(await input.getProperty('checked')).toBe(true);
+        await a11yCheck(page, axeExclusions, 'After checking checkbox');
+        await input.click();
+        await page.waitForChanges();
+        expect(await input.getProperty('checked')).toBe(false);
+        await input.click();
+        await page.waitForChanges();
+        expect(await input.getProperty('checked')).toBe(true);
+    });
+});

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

@@ -132,7 +132,27 @@ describe('gux-form-field-radio', () => {
         />
         <gux-badge slot="badge" bold>Badge</gux-badge>
         <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
-      </gux-selector-card-beta>`
+      </gux-selector-card-beta>`,
+            ` <gux-selector-card-beta variant="descriptive">
+      <label slot="label"
+        >A longer card label example. This can span up to 2 lines.
+      </label>
+      <input slot="input" type="checkbox" name="food-1[]" value="pasta" />
+      <span slot="description"
+        >A description for a sample selector card. Used in Spark WCL.
+        Descriptions can span up to 3 lines before being truncated.
+      </span>
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="simple">
+      <label slot="label">Card label</label>
+      <input slot="input" type="checkbox" name="food-1[]" value="pizza" />
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+    </gux-selector-card-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newSpecPage({ components, html, language });

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

@@ -87,7 +87,58 @@ describe('gux-selector-cards', () => {
           <gux-badge slot="badge" bold>Badge</gux-badge>
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
-      </gux-selector-cards-beta>`
+      </gux-selector-cards-beta>`,
+            `<gux-selector-cards-beta class="example1">
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="1-D">First</label>
+    <input slot="input" id="1-D" type="checkbox" name="example4" value="1-D" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="2-D">Second</label>
+    <input slot="input" id="2-D" type="checkbox" name="example4" value="2-D" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="3-D">Third</label>
+    <input slot="input" id="3-D" type="checkbox" name="example4" value="3-D" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="4-D">Fourth</label>
+    <input slot="input" id="4-D" type="checkbox" name="example4" disabled value="4-D" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="5-D">Fifth</label>
+    <input slot="input" id="5-D" type="checkbox" name="example4" value="5-D" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+</gux-selector-cards-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newNonrandomE2EPage({ html });

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

@@ -115,6 +115,37 @@ describe('gux-selector-cards', () => {
           <gux-badge slot="badge" bold>Badge</gux-badge>
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
+      </gux-selector-cards-beta>`,
+            `<gux-selector-cards-beta class="example1">
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="1-C">First</label>
+          <input slot="input" id="1-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="2-C">Second</label>
+          <input slot="input" id="2-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="3-C">Third</label>
+          <input slot="input" id="3-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="4-C">Fourth</label>
+          <input slot="input" id="4-C" type="checkbox" name="example3" disabled />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="5-C">Fifth</label>
+          <input slot="input" id="5-C" type="checkbox" name="example3" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
       </gux-selector-cards-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {

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

@@ -346,7 +346,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: '610a91692cf932f19e41340589920224ba709631', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled, exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'aacaddf39c6082eb0b074849767eabb8c57ce75d', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -374,7 +374,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: 'c6398fd677209ff273a611b41cedee812bcd9022', class: "gux-dropdown-container" }, h("gux-popup", { key: 'fe1e823052b9c42d0973e9cbc8a490976c7c820c', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled, exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: 'c6398fd677209ff273a611b41cedee812bcd9022', class: "gux-dropdown-container" }, h("gux-popup", { key: '175d711a57687ff35de7778d6318a046d4cb9d24', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.css

@@ -55,24 +55,24 @@
 }
 
 :host(.gux-input-error) ::slotted(input[type=checkbox]:not(:checked))::before {
-  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
 }
 :host(.gux-input-error) ::slotted(input[type=checkbox]:checked)::before {
-  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
 }
 :host(.gux-input-error) ::slotted(input[type=checkbox]:not(:checked):not(:disabled):not(:indeterminate):hover)::before {
-  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
 }
 :host(.gux-input-error) ::slotted(input[type=checkbox]:indeterminate)::before {
-  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-error-foregroundColor);
 }
 
 :host(.gux-disabled) {
@@ -124,39 +124,39 @@
 }
 
 ::slotted(input[type=checkbox]:not(:checked))::before {
-  background: var(--gse-ui-checkbox-icon-default-unselectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-unselectedForegroundColor);
 }
 
 ::slotted(input[type=checkbox]:not(:checked):not(:disabled):not(:indeterminate):hover)::before {
-  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
 }
 
 ::slotted(input[type=checkbox]:checked:not(:disabled):hover) {
-  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
 }
 
 ::slotted(input[type=checkbox]:not(:disabled):indeterminate:hover) {
-  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
 }
 
 ::slotted(input[type=checkbox]:checked)::before {
-  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
 }
 
 ::slotted(input[type=checkbox]:indeterminate)::before {
-  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
 }
 
 ::slotted(input[type=checkbox]:disabled)::before {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.css

@@ -85,14 +85,14 @@
 }
 
 :host(.gux-input-error) input[type=radio]:checked::before {
-  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
 }
 :host(.gux-input-error) ::slotted(input[type=radio]:not(:checked))::before {
-  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
 }
 :host(.gux-input-error) .gux-form-field-error {
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
@@ -141,27 +141,27 @@
 }
 
 ::slotted(input[type=radio]:not(:checked))::before {
-  background: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
 }
 
 ::slotted(input[type=radio]:not(:checked):not(:disabled):hover)::before {
-  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
 }
 
 ::slotted(input[type=radio]:checked:not(:disabled):hover)::before {
-  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
 }
 
 ::slotted(input[type=radio]:checked)::before {
-  background: var(--gse-ui-radioButton-icon-default-selectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-radioButton-icon-default-selectedForegroundColor);
 }
 
 ::slotted(input[type=radio]:disabled)::before {

package/dist/collection/components/stable/gux-table-toolbar/gux-table-toolbar.css

@@ -1,20 +1,16 @@
 :host {
-  position: relative;
-  z-index: var(--gse-semantic-zIndex-sticky);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-height: var(--gse-ui-dataTableItems-tableToolbar-height);
-  opacity: 0;
-  animation-name: show-toolbar;
-  animation-delay: 0.5s;
-  animation-fill-mode: forwards;
+  visibility: hidden;
+  transition: visibility 0s 0.5s; /* Delay visibility of toolbar for 0.5s */
 }
 @keyframes show-toolbar {
   to {
-    opacity: 1;
+    visibility: visible;
   }
 }
 :host .search-filter-container {