genesys-spark-components 4.0.0-beta.35 → 4.0.0-beta.36

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

@@ -1,4 +1,14 @@
-/* Tokens
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */ /* Tokens
 @prop $gse-ui-slider-handle-width
 @prop $gse-ui-slider-handle-height
 @prop $gse-ui-slider-handle-default-backgroundColor
@@ -18,60 +28,6 @@
 @prop $gse-ui-slider-gap
 @prop $gse-ui-slider-focusRing-borderRadius
 **/
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-/* Headings */
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
-/* Custom Styles */
-/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
-/* stylelint-disable-next-line selector-class-pattern */
-/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {
   display: flex;
   flex-direction: row;
@@ -159,10 +115,10 @@
 
 ::slotted(label) {
   font-family: var(--gse-ui-formControl-label-text-fontFamily);
-  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   font-size: var(--gse-ui-formControl-label-text-fontSize);
-  color: var(--gse-ui-formControl-label-labelColor);
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
 }
 
 ::slotted(input[type=range]) {
@@ -216,11 +172,11 @@
   align-self: auto;
   order: 0;
   margin: 0 0 0 var(--gux-spacing-medium);
-  line-height: var(--gse-ui-slider-label-text-lineHeight);
-  font-weight: var(--gse-ui-slider-label-text-fontWeight);
-  text-align: right;
   font-family: var(--gse-ui-slider-label-text-fontFamily);
   font-size: var(--gse-ui-slider-label-text-fontSize);
+  font-weight: var(--gse-ui-slider-label-text-fontWeight);
+  line-height: var(--gse-ui-slider-label-text-lineHeight);
+  text-align: right;
 }
 .gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden {
   display: none;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -8,16 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '@utils/decorator/on-mutation';
-import { onRequiredChange } from '@utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
-import { hasSlot } from '@utils/dom/has-slot';
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
-import { getComputedLabelPosition, validateFormIds, getSlottedInput } from '../../gux-form-field.service';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import { calculateInputDisabledState } from "../../../../../utils/dom/calculate-input-disabled-state";
+import { onInputDisabledStateChange } from "../../../../../utils/dom/on-input-disabled-state-change";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
+import { getComputedLabelPosition, validateFormIds, getSlottedInput } from "../../gux-form-field.service";
+import { trackComponent } from "../../../../../utils/tracking/usage";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -196,7 +196,8 @@ export class GuxFormField {
           "references": {
             "GuxFormFieldLabelPosition": {
               "location": "import",
-              "path": "../../gux-form-field.types"
+              "path": "../../gux-form-field.types",
+              "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldLabelPosition"
             }
           }
         },

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

@@ -1,81 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 /*
  * Typography styles and mixins.
  */
@@ -83,10 +5,6 @@
 /* Base typography */
 /* Headings */
 /* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
 /* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */
@@ -178,10 +96,10 @@
 
 ::slotted(label) {
   font-family: var(--gse-ui-formControl-label-text-fontFamily);
-  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   font-size: var(--gse-ui-formControl-label-text-fontSize);
-  color: var(--gse-ui-formControl-label-labelColor);
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
 }
 
 ::slotted(input) {
@@ -217,20 +135,20 @@
   flex: 1 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-input-gap);
   align-content: stretch;
   align-items: center;
   align-self: auto;
   justify-content: center;
-  gap: var(--gse-ui-formControl-input-gap);
   order: 0;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
-  color: var(--gse-ui-formControl-input-populatedColor);
   padding: var(--gse-ui-formControl-input-padding);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
-  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
@@ -248,9 +166,9 @@
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -8,16 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, forceUpdate } from '@stencil/core';
-import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '@utils/decorator/on-mutation';
-import { onRequiredChange } from '@utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
-import { hasSlot } from '@utils/dom/has-slot';
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
-import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, getSlottedInput } from '../../gux-form-field.service';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, forceUpdate } from "@stencil/core";
+import { calculateInputDisabledState } from "../../../../../utils/dom/calculate-input-disabled-state";
+import { onInputDisabledStateChange } from "../../../../../utils/dom/on-input-disabled-state-change";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
+import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, getSlottedInput } from "../../gux-form-field.service";
+import { trackComponent } from "../../../../../utils/tracking/usage";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -121,7 +121,8 @@ export class GuxFormFieldSearch {
           "references": {
             "GuxFormFieldLabelPosition": {
               "location": "import",
-              "path": "../../gux-form-field.types"
+              "path": "../../gux-form-field.types",
+              "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldLabelPosition"
             }
           }
         },
@@ -155,7 +156,8 @@ export class GuxFormFieldSearch {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/tests/gux-form-field-search.e2e.js

@@ -0,0 +1,83 @@
+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-form-field-search', () => {
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        const html = `
+          <gux-form-field-search lang="en" ${componentAttribute}>
+            <input slot="input" type="search" value="Sample search"/>
+            <label slot="label">Label</label>
+          </gux-form-field-search>
+        `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-search');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        const html = `
+          <gux-form-field-search lang="en">
+            <input slot="input" type="search" value="Sample search" ${inputAttribute}/>
+            <label slot="label">Label</label>
+          </gux-form-field-search>
+        `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-search');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('help', () => {
+      const html = `
+      <gux-form-field-search>
+      <input slot="input" type="search" name="e-1" />
+      <label slot="label">Default</label>
+      <span slot="help">This is a help message</span>
+    </gux-form-field-search>
+      `;
+      it('should render component as expected', async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-form-field-search');
+        const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+      it('should be accessible', async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page, axeExclusions);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/tests/gux-form-field-search.spec.js

@@ -0,0 +1,65 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldSearch } from "../gux-form-field-search";
+const components = [GuxFormFieldSearch];
+const language = 'en';
+describe('gux-form-field-search', () => {
+  it('should build', async () => {
+    const html = `
+      <gux-form-field-search>
+        <input slot="input" type="search" value="Sample search"/>
+        <label slot="label">Label</label>
+        <span slot="error">Error message</span>
+      </gux-form-field-search>
+    `;
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxFormFieldSearch);
+  });
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-search ${componentAttribute}>
+              <input slot="input" type="search" value="Sample search"/>
+              <label slot="label">Label</label>
+            </gux-form-field-search>
+          `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-search>
+              <input slot="input" type="search" value="Sample search" ${inputAttribute}/>
+              <label slot="label">Label</label>
+            </gux-form-field-search>
+          `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+    describe('help', () => {
+      it('should render component as expected', async () => {
+        const html = `
+        <gux-form-field-search>
+        <input slot="input" type="search" name="e-1" />
+        <label slot="label">Default</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-search>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -1,42 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
 /*
  * Typography styles and mixins.
  */
@@ -44,10 +5,6 @@
 /* Base typography */
 /* Headings */
 /* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
 /* Custom Styles */
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */
@@ -139,10 +96,10 @@
 
 ::slotted(label) {
   font-family: var(--gse-ui-formControl-label-text-fontFamily);
-  line-height: var(--gse-ui-formControl-label-text-lineHeight);
   font-size: var(--gse-ui-formControl-label-text-fontSize);
-  color: var(--gse-ui-formControl-label-labelColor);
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
 }
 
 ::slotted(select) {
@@ -174,16 +131,16 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-input-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
-  gap: var(--gse-ui-formControl-input-gap);
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
-  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
@@ -204,9 +161,9 @@
   pointer-events: none;
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -8,16 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '@utils/decorator/on-mutation';
-import { onRequiredChange } from '@utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
-import { hasSlot } from '@utils/dom/has-slot';
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
-import { getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { calculateInputDisabledState } from "../../../../../utils/dom/calculate-input-disabled-state";
+import { onInputDisabledStateChange } from "../../../../../utils/dom/on-input-disabled-state-change";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
+import { getComputedLabelPosition, validateFormIds } from "../../gux-form-field.service";
+import { trackComponent } from "../../../../../utils/tracking/usage";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -108,7 +108,8 @@ export class GuxFormFieldSelect {
           "references": {
             "GuxFormFieldLabelPosition": {
               "location": "import",
-              "path": "../../gux-form-field.types"
+              "path": "../../gux-form-field.types",
+              "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldLabelPosition"
             }
           }
         },