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

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export const GuxFormFieldLabel = ({ position, required }, children) => {
   return (h("div", { class: {
       'gux-form-field-label': true,

package/dist/collection/components/stable/gux-form-field/functional-components/gux-form-field-legend-label/gux-form-field-legend-label.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export const GuxFormFieldLegendLabel = ({ position, required }, children) => {
   return (h("legend", { class: {
       'gux-form-field-legend-label': true,

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

@@ -1,7 +1,7 @@
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
-import { logError } from '../../../utils/error/log-error';
-import setInputValue from '../../../utils/dom/set-input-value';
-import { hasSlot } from '@utils/dom/has-slot';
+import { randomHTMLId } from "../../../utils/dom/random-html-id";
+import { logError } from "../../../utils/error/log-error";
+import setInputValue from "../../../utils/dom/set-input-value";
+import { hasSlot } from "../../../utils/dom/has-slot";
 export function clearInput(input) {
   setInputValue(input, '', true);
 }

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.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);
-}
-
 button {
   flex: 0 1 auto;
   align-self: auto;
@@ -60,7 +21,7 @@ button:focus {
   outline: none;
 }
 button:focus-visible:enabled gux-icon {
-  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);
 }

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../../i18n";
+import translationResources from "./i18n/en.json";
 export class Gux {
   async componentWillLoad() {
     trackComponent(this.root);

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

@@ -0,0 +1,19 @@
+import { hasContent } from "../gux-form-field.service";
+describe('gux-form-field.service', () => {
+  describe('#hasContent', () => {
+    [
+      { input: undefined, expectedOutput: false },
+      { input: null, expectedOutput: false },
+      { input: { value: undefined }, expectedOutput: false },
+      { input: { value: null }, expectedOutput: false },
+      { input: { value: '' }, expectedOutput: false },
+      { input: { value: 'test' }, expectedOutput: true },
+      { input: { value: '0' }, expectedOutput: true },
+      { input: { value: 'false' }, expectedOutput: true }
+    ].forEach(({ input, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, async () => {
+        expect(hasContent(input)).toBe(expectedOutput);
+      });
+    });
+  });
+});

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { getBaseSvgHtml } from './gux-icon.service';
-import { logError } from '@utils/error/log-error';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getBaseSvgHtml } from "./gux-icon.service";
+import { logError } from "../../../utils/error/log-error";
 export class GuxIcon {
   constructor() {
     this.iconName = undefined;
@@ -77,11 +77,12 @@ export class GuxIcon {
         "mutable": false,
         "complexType": {
           "original": "GuxIconIconName",
-          "resolved": "\"reset\" | \"8x8\" | \"8x8-alt\" | \"add\" | \"add-circle\" | \"agent\" | \"agent-circle\" | \"agent-group\" | \"alert-info\" | \"alert-success\" | \"alert-warning-octogon\" | \"alert-warning-triangle\" | \"android\" | \"app-chart\" | \"app-generic\" | \"app-layout\" | \"app-table\" | \"apple\" | \"archive\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-solid-down\" | \"arrow-solid-left\" | \"arrow-solid-right\" | \"arrow-solid-up\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"at\" | \"attachment\" | \"backspace\" | \"badge-amount\" | \"badge-check\" | \"badge-edit\" | \"badge-file\" | \"badge-pause\" | \"badge-x\" | \"ban-outline\" | \"bell\" | \"bolt\" | \"bot\" | \"branch\" | \"bug\" | \"bus\" | \"calendar\" | \"calendar-add\" | \"calendar-clock\" | \"campaign\" | \"certificate\" | \"chat\" | \"chat-bell\" | \"chat-close\" | \"chat-disable\" | \"chat-multi\" | \"chat-notification-score\" | \"checkbox\" | \"checkbox-active\" | \"checkbox-partial\" | \"checkmark\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-right\" | \"chevron-double-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-small-down\" | \"chevron-small-left\" | \"chevron-small-right\" | \"chevron-small-up\" | \"chrome\" | \"cjv-badge-file\" | \"cjv-calendar-clock\" | \"cjv-custom-default\" | \"cjv-custom-event\" | \"cjv-custom-session\" | \"cjv-default-event\" | \"cjv-delivery\" | \"cjv-finance-invoice\" | \"cjv-form-abandoned\" | \"cjv-form-submitted\" | \"cjv-generic-application\" | \"cjv-offer-closed\" | \"cjv-offer-ignored\" | \"cjv-offer-offered\" | \"cjv-offer-opened\" | \"cjv-outcome-achieved\" | \"cjv-page-view\" | \"cjv-policy-contract\" | \"cjv-product-added\" | \"cjv-product-purchased\" | \"cjv-product-removed\" | \"cjv-search\" | \"cjv-segment\" | \"cjv-segment-assigned\" | \"cjv-web-session\" | \"cjv-webchat-accepted\" | \"cjv-webchat-error\" | \"cjv-webchat-ignored\" | \"cjv-webchat-offered\" | \"cjv-webchat-rejected\" | \"cjv-webchat-requested\" | \"cjv-webchat-submitted\" | \"cjv-webchat-timeout\" | \"clipboard\" | \"clipboard-error\" | \"clipboard-success\" | \"clock\" | \"clock-outline\" | \"clone\" | \"close\" | \"close-circle\" | \"cloud\" | \"cloud-outline\" | \"coaching\" | \"cobrowse\" | \"collapse\" | \"comments\" | \"comments-disable\" | \"configuration\" | \"control-end\" | \"control-pause\" | \"control-play\" | \"control-skip-left\" | \"control-skip-right\" | \"control-slide-back\" | \"control-slide-forward\" | \"control-start\" | \"control-stop\" | \"copy\" | \"custom/binoculars-slash-regular\" | \"custom/carousel\" | \"custom/clipboard-list-slash-regular\" | \"custom/co-browse\" | \"custom/file-pen-question\" | \"custom/filter-notification\" | \"custom/font-regular-highlight\" | \"custom/list-alphabetical-regular\" | \"custom/list-roman-regular\" | \"custom/one-button\" | \"custom/person-running\" | \"custom/quick-reply\" | \"custom/three-button\" | \"customer-journey\" | \"cut\" | \"dash\" | \"delete\" | \"device-camera\" | \"device-cellphone\" | \"device-headphones\" | \"device-laptop\" | \"device-pc\" | \"device-server\" | \"device-tablet\" | \"download\" | \"edge\" | \"edit\" | \"email-notification-score\" | \"expand\" | \"export\" | \"external-link\" | \"fa/00-solid\" | \"fa/1-regular\" | \"fa/alarm-clock-regular\" | \"fa/alarm-snooze-regular\" | \"fa/align-center-regular\" | \"fa/align-justify-regular\" | \"fa/align-left-regular\" | \"fa/align-right-regular\" | \"fa/arrow-down-wide-short-regular\" | \"fa/arrow-turn-down-right-regular\" | \"fa/arrows-rotate-solid\" | \"fa/arrows-to-circle-regular\" | \"fa/asterix-regular\" | \"fa/award-solid\" | \"fa/backward-step-regular\" | \"fa/ban-regular\" | \"fa/bell-on-regular\" | \"fa/bell-slash-regular\" | \"fa/binoculars-regular\" | \"fa/bold-regular\" | \"fa/book-regular\" | \"fa/briefcase-regular\" | \"fa/bullseye-regular\" | \"fa/calculator-regular\" | \"fa/calendar-days-regular\" | \"fa/circle-check-regular\" | \"fa/circle-check-solid\" | \"fa/circle-info-solid\" | \"fa/circle-play-regular\" | \"fa/circle-plus-solid\" | \"fa/circle-xmark-regular\" | \"fa/clipboard-list-regular\" | \"fa/clock-nine-regular\" | \"fa/clock-rotate-left-regular\" | \"fa/code-branch-regular\" | \"fa/code-regular\" | \"fa/comment-dots-regular\" | \"fa/comments-regular\" | \"fa/crop-simple-regular\" | \"fa/cube-regular\" | \"fa/database-regular\" | \"fa/diagram-nested-regular\" | \"fa/diagram-project-gear-regular\" | \"fa/diagram-project-regular\" | \"fa/diamond-regular\" | \"fa/draw-circle-solid\" | \"fa/face-frown-regular\" | \"fa/face-frown-solid\" | \"fa/face-laugh-regular\" | \"fa/face-laugh-solid\" | \"fa/file-chart-pie-regular\" | \"fa/file-exclamation-regular\" | \"fa/film-solid\" | \"fa/filter-solid\" | \"fa/font-regular\" | \"fa/forward-step-regular\" | \"fa/function-regular\" | \"fa/gears-regular\" | \"fa/gem-regular\" | \"fa/google\" | \"fa/hand-back-point-right-regular\" | \"fa/hand-pointer-regular\" | \"fa/hashtag-regular\" | \"fa/hexagon-exclamation-solid\" | \"fa/highlighter-line-regular\" | \"fa/hourglass-start-regular\" | \"fa/indent-regular\" | \"fa/infinity-regular\" | \"fa/italic-regular\" | \"fa/language-regular\" | \"fa/life-ring-regular\" | \"fa/link-horizontal-slash-regular\" | \"fa/link-horizontal-solid\" | \"fa/list-ol-regular\" | \"fa/list-radio-clean-regular\" | \"fa/list-radio-regular\" | \"fa/list-regular\" | \"fa/list-ul-regular\" | \"fa/map-regular\" | \"fa/map-solid\" | \"fa/memo-circle-check-regular\" | \"fa/message-regular\" | \"fa/microchip-solid\" | \"fa/microsoft\" | \"fa/money-bill-regular\" | \"fa/outdent-regular\" | \"fa/pause-regular\" | \"fa/pen-slash-regular\" | \"fa/play-regular\" | \"fa/puzzle-piece-regular\" | \"fa/question-solid\" | \"fa/ranking-star-regular\" | \"fa/rectangle-list-regular\" | \"fa/regular-user-circle-arrow-left\" | \"fa/reply-regular\" | \"fa/right-to-bracket-regular\" | \"fa/road-regular\" | \"fa/rocket-regular\" | \"fa/route-regular\" | \"fa/share-regular\" | \"fa/shuffle-regular\" | \"fa/sigma-regular\" | \"fa/signs-post-regular\" | \"fa/sitemap-regular\" | \"fa/sliders-solid\" | \"fa/square-dashed-regular\" | \"fa/stop-regular\" | \"fa/strikethrough-regular\" | \"fa/subscript-regular\" | \"fa/superscript-regular\" | \"fa/text-size-regular\" | \"fa/text-slash-regular\" | \"fa/ticket-regular\" | \"fa/triangle-exclamation-solid\" | \"fa/underline-regular\" | \"fa/user-group-solid\" | \"fa/volume-regular\" | \"fa/volume-xmark-regular\" | \"fa/wand-magic-sparkles-regular\" | \"fa/windows\" | \"face-empathy\" | \"face-happy\" | \"face-happy-solid\" | \"face-neutral\" | \"face-neutral-solid\" | \"face-sad\" | \"face-sad-solid\" | \"facebook\" | \"facebook-messenger\" | \"fax\" | \"file\" | \"file-all\" | \"file-audio\" | \"file-image-landscape\" | \"file-image-portrait\" | \"file-pdf\" | \"file-preview\" | \"file-report\" | \"file-text\" | \"file-video\" | \"filter\" | \"fire\" | \"firefox\" | \"flag\" | \"folder\" | \"folder-add\" | \"folder-open\" | \"follow\" | \"generic\" | \"globe\" | \"grab-horizontal\" | \"grab-vertical\" | \"graph-bar-horizontal\" | \"graph-bar-vertical\" | \"graph-bubble\" | \"graph-chart\" | \"graph-line\" | \"graph-pie\" | \"graph-spark\" | \"group-standard\" | \"help\" | \"home\" | \"hourglass\" | \"import\" | \"inbox\" | \"inspect\" | \"inspect-disable\" | \"instagram\" | \"internet-explorer\" | \"key\" | \"lightbulb\" | \"line-messenger\" | \"link\" | \"linkedin\" | \"linux\" | \"lock\" | \"lock-hold\" | \"logout\" | \"low-bandwidth\" | \"lunch\" | \"menu\" | \"menu-kebab-horizontal\" | \"menu-kebab-vertical\" | \"message-email\" | \"message-email-outbound\" | \"message-forward\" | \"message-reply\" | \"message-reply-all\" | \"microphone\" | \"microphone-disable\" | \"microphone-talking\" | \"microsoft\" | \"microsoft-teams\" | \"moon\" | \"music\" | \"notes\" | \"notification\" | \"opera\" | \"operator-pair\" | \"paint\" | \"palette\" | \"parking-sign-regular\" | \"paste\" | \"people\" | \"phone\" | \"phone-bell\" | \"phone-call-directory\" | \"phone-call-history\" | \"phone-callback\" | \"phone-close\" | \"phone-conference\" | \"phone-dialpad\" | \"phone-disable\" | \"phone-forward\" | \"phone-hangup\" | \"phone-hold\" | \"phone-inbound\" | \"phone-missed-call\" | \"phone-notification-score\" | \"phone-outbound\" | \"phone-success\" | \"phone-voice\" | \"pin\" | \"pin-location\" | \"post\" | \"product-logo-beyond\" | \"product-logo-g\" | \"quote-left\" | \"quote-right\" | \"radio\" | \"radio-active\" | \"rating\" | \"rating-active\" | \"rating-partial\" | \"record\" | \"refresh\" | \"resource\" | \"retweet\" | \"roster-chat\" | \"roster-chat-disable\" | \"roster-email\" | \"roster-email-disable\" | \"roster-instagram\" | \"roster-instagram-disable\" | \"roster-line\" | \"roster-line-disable\" | \"roster-message\" | \"roster-message-disable\" | \"roster-messenger\" | \"roster-messenger-disable\" | \"roster-phone\" | \"roster-phone-disable\" | \"roster-sms\" | \"roster-sms-disable\" | \"roster-twitter\" | \"roster-twitter-disable\" | \"roster-wechat\" | \"roster-wechat-disable\" | \"roster-whatsapp\" | \"roster-whatsapp-disable\" | \"rss\" | \"run\" | \"safari\" | \"save\" | \"screen-share-regular\" | \"screen-share-slash\" | \"scripter\" | \"search\" | \"send\" | \"server\" | \"settings\" | \"share\" | \"shield-lock\" | \"shield-outline\" | \"shield-solid\" | \"site\" | \"skills\" | \"slideshare\" | \"sms\" | \"sms-cancel\" | \"sms-close\" | \"stamp\" | \"subtract\" | \"subtract-circle\" | \"sun\" | \"tag\" | \"tag-add\" | \"tag-remove\" | \"telegram\" | \"tenant\" | \"thumbs-down\" | \"thumbs-up\" | \"timeline\" | \"toolbar-apps\" | \"toolbar-apps-disable\" | \"toolbar-assist\" | \"toolbar-assist-disable\" | \"toolbar-chat\" | \"toolbar-chat-disable\" | \"toolbar-favorite\" | \"toolbar-favourite\" | \"toolbar-help\" | \"toolbar-inbox\" | \"toolbar-interactions\" | \"toolbar-interactions-disable\" | \"toolbar-notification\" | \"toolbar-phone\" | \"toolbar-phone-active-1\" | \"toolbar-phone-active-2\" | \"toolbar-phone-active-3\" | \"toolbar-phone-disable\" | \"toolbar-video\" | \"toolbar-video-disable\" | \"trade\" | \"transfer\" | \"twitter\" | \"unknown\" | \"unlink\" | \"unlock\" | \"upload\" | \"user\" | \"user-add\" | \"user-circle\" | \"user-contact-id\" | \"user-directory\" | \"user-group\" | \"user-interactions\" | \"user-interactions-disable\" | \"viber\" | \"video\" | \"video-disable\" | \"view-all\" | \"view-cells\" | \"view-grid\" | \"view-list\" | \"view-lists\" | \"view-roster\" | \"view-stacked\" | \"voicemail\" | \"volume-disable\" | \"volume-down\" | \"volume-none\" | \"volume-up\" | \"web\" | \"webcam\" | \"webcam-disable\" | \"wechat\" | \"whatsapp\" | \"window-actual-size\" | \"window-contract\" | \"window-drag-out\" | \"window-expand\" | \"window-fullscreen\" | \"window-popout\" | \"wordpress\" | \"youtube\" | \"zoom-in\" | \"zoom-out\"",
+          "resolved": "\"reset\" | \"8x8\" | \"8x8-alt\" | \"add\" | \"add-circle\" | \"agent\" | \"agent-circle\" | \"agent-group\" | \"alert-info\" | \"alert-success\" | \"alert-warning-octogon\" | \"alert-warning-triangle\" | \"android\" | \"app-chart\" | \"app-generic\" | \"app-layout\" | \"app-table\" | \"apple\" | \"archive\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-solid-down\" | \"arrow-solid-left\" | \"arrow-solid-right\" | \"arrow-solid-up\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"at\" | \"attachment\" | \"backspace\" | \"badge-amount\" | \"badge-check\" | \"badge-edit\" | \"badge-file\" | \"badge-pause\" | \"badge-x\" | \"ban-outline\" | \"bell\" | \"bolt\" | \"bot\" | \"branch\" | \"bug\" | \"bus\" | \"calendar\" | \"calendar-add\" | \"calendar-clock\" | \"campaign\" | \"certificate\" | \"chat\" | \"chat-bell\" | \"chat-close\" | \"chat-disable\" | \"chat-multi\" | \"chat-notification-score\" | \"checkbox\" | \"checkbox-active\" | \"checkbox-partial\" | \"checkmark\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-right\" | \"chevron-double-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-small-down\" | \"chevron-small-left\" | \"chevron-small-right\" | \"chevron-small-up\" | \"chrome\" | \"cjv-badge-file\" | \"cjv-calendar-clock\" | \"cjv-custom-default\" | \"cjv-custom-event\" | \"cjv-custom-session\" | \"cjv-default-event\" | \"cjv-delivery\" | \"cjv-finance-invoice\" | \"cjv-form-abandoned\" | \"cjv-form-submitted\" | \"cjv-generic-application\" | \"cjv-offer-closed\" | \"cjv-offer-ignored\" | \"cjv-offer-offered\" | \"cjv-offer-opened\" | \"cjv-outcome-achieved\" | \"cjv-page-view\" | \"cjv-policy-contract\" | \"cjv-product-added\" | \"cjv-product-purchased\" | \"cjv-product-removed\" | \"cjv-search\" | \"cjv-segment\" | \"cjv-segment-assigned\" | \"cjv-web-session\" | \"cjv-webchat-accepted\" | \"cjv-webchat-error\" | \"cjv-webchat-ignored\" | \"cjv-webchat-offered\" | \"cjv-webchat-rejected\" | \"cjv-webchat-requested\" | \"cjv-webchat-submitted\" | \"cjv-webchat-timeout\" | \"clipboard\" | \"clipboard-error\" | \"clipboard-success\" | \"clock\" | \"clock-outline\" | \"clone\" | \"close\" | \"close-circle\" | \"cloud\" | \"cloud-outline\" | \"coaching\" | \"cobrowse\" | \"collapse\" | \"comments\" | \"comments-disable\" | \"configuration\" | \"control-end\" | \"control-pause\" | \"control-play\" | \"control-skip-left\" | \"control-skip-right\" | \"control-slide-back\" | \"control-slide-forward\" | \"control-start\" | \"control-stop\" | \"copy\" | \"custom/binoculars-slash-regular\" | \"custom/carousel\" | \"custom/clipboard-list-slash-regular\" | \"custom/co-browse\" | \"custom/face-smile-hearts-regular\" | \"custom/file-pen-question\" | \"custom/filter-notification\" | \"custom/font-regular-highlight\" | \"custom/list-alphabetical-regular\" | \"custom/list-roman-regular\" | \"custom/one-button\" | \"custom/person-running\" | \"custom/quick-reply\" | \"custom/three-button\" | \"customer-journey\" | \"cut\" | \"dash\" | \"delete\" | \"device-camera\" | \"device-cellphone\" | \"device-headphones\" | \"device-laptop\" | \"device-pc\" | \"device-server\" | \"device-tablet\" | \"download\" | \"edge\" | \"edit\" | \"email-notification-score\" | \"expand\" | \"export\" | \"external-link\" | \"fa/00-solid\" | \"fa/1-regular\" | \"fa/alarm-clock-regular\" | \"fa/alarm-snooze-regular\" | \"fa/align-center-regular\" | \"fa/align-justify-regular\" | \"fa/align-left-regular\" | \"fa/align-right-regular\" | \"fa/arrow-down-wide-short-regular\" | \"fa/arrow-turn-down-right-regular\" | \"fa/arrows-rotate-solid\" | \"fa/arrows-to-circle-regular\" | \"fa/asterix-regular\" | \"fa/award-solid\" | \"fa/backward-step-regular\" | \"fa/ban-regular\" | \"fa/bell-on-regular\" | \"fa/bell-slash-regular\" | \"fa/binoculars-regular\" | \"fa/bold-regular\" | \"fa/book-regular\" | \"fa/briefcase-regular\" | \"fa/bullseye-regular\" | \"fa/calculator-regular\" | \"fa/calendar-days-regular\" | \"fa/circle-check-regular\" | \"fa/circle-check-solid\" | \"fa/circle-info-solid\" | \"fa/circle-play-regular\" | \"fa/circle-plus-solid\" | \"fa/circle-xmark-regular\" | \"fa/clipboard-list-regular\" | \"fa/clock-nine-regular\" | \"fa/clock-rotate-left-regular\" | \"fa/code-branch-regular\" | \"fa/code-regular\" | \"fa/comment-dots-regular\" | \"fa/comments-regular\" | \"fa/crop-simple-regular\" | \"fa/cube-regular\" | \"fa/database-regular\" | \"fa/diagram-nested-regular\" | \"fa/diagram-project-gear-regular\" | \"fa/diagram-project-regular\" | \"fa/diamond-regular\" | \"fa/draw-circle-solid\" | \"fa/face-frown-regular\" | \"fa/face-frown-solid\" | \"fa/face-laugh-regular\" | \"fa/face-laugh-solid\" | \"fa/file-chart-pie-regular\" | \"fa/file-exclamation-regular\" | \"fa/film-solid\" | \"fa/filter-solid\" | \"fa/font-regular\" | \"fa/forward-step-regular\" | \"fa/function-regular\" | \"fa/gears-regular\" | \"fa/gem-regular\" | \"fa/google\" | \"fa/hand-back-point-right-regular\" | \"fa/hand-pointer-regular\" | \"fa/hashtag-regular\" | \"fa/hexagon-exclamation-solid\" | \"fa/highlighter-line-regular\" | \"fa/hourglass-start-regular\" | \"fa/indent-regular\" | \"fa/infinity-regular\" | \"fa/italic-regular\" | \"fa/language-regular\" | \"fa/life-ring-regular\" | \"fa/link-horizontal-slash-regular\" | \"fa/link-horizontal-solid\" | \"fa/list-ol-regular\" | \"fa/list-radio-clean-regular\" | \"fa/list-radio-regular\" | \"fa/list-regular\" | \"fa/list-ul-regular\" | \"fa/map-regular\" | \"fa/map-solid\" | \"fa/memo-circle-check-regular\" | \"fa/message-regular\" | \"fa/microchip-solid\" | \"fa/microsoft\" | \"fa/money-bill-regular\" | \"fa/outdent-regular\" | \"fa/pause-regular\" | \"fa/pen-slash-regular\" | \"fa/play-regular\" | \"fa/puzzle-piece-regular\" | \"fa/question-solid\" | \"fa/ranking-star-regular\" | \"fa/rectangle-list-regular\" | \"fa/regular-user-circle-arrow-left\" | \"fa/reply-regular\" | \"fa/right-to-bracket-regular\" | \"fa/road-regular\" | \"fa/rocket-regular\" | \"fa/route-regular\" | \"fa/share-regular\" | \"fa/shuffle-regular\" | \"fa/sigma-regular\" | \"fa/signs-post-regular\" | \"fa/sitemap-regular\" | \"fa/sliders-solid\" | \"fa/square-dashed-regular\" | \"fa/stop-regular\" | \"fa/strikethrough-regular\" | \"fa/subscript-regular\" | \"fa/superscript-regular\" | \"fa/text-size-regular\" | \"fa/text-slash-regular\" | \"fa/ticket-regular\" | \"fa/triangle-exclamation-solid\" | \"fa/underline-regular\" | \"fa/user-group-solid\" | \"fa/volume-regular\" | \"fa/volume-xmark-regular\" | \"fa/wand-magic-sparkles-regular\" | \"fa/windows\" | \"face-empathy\" | \"face-happy\" | \"face-happy-solid\" | \"face-neutral\" | \"face-neutral-solid\" | \"face-sad\" | \"face-sad-solid\" | \"facebook\" | \"facebook-messenger\" | \"fax\" | \"file\" | \"file-all\" | \"file-audio\" | \"file-image-landscape\" | \"file-image-portrait\" | \"file-pdf\" | \"file-preview\" | \"file-report\" | \"file-text\" | \"file-video\" | \"filter\" | \"fire\" | \"firefox\" | \"flag\" | \"folder\" | \"folder-add\" | \"folder-open\" | \"follow\" | \"generic\" | \"globe\" | \"grab-horizontal\" | \"grab-vertical\" | \"graph-bar-horizontal\" | \"graph-bar-vertical\" | \"graph-bubble\" | \"graph-chart\" | \"graph-line\" | \"graph-pie\" | \"graph-spark\" | \"group-standard\" | \"help\" | \"home\" | \"hourglass\" | \"import\" | \"inbox\" | \"inspect\" | \"inspect-disable\" | \"instagram\" | \"internet-explorer\" | \"key\" | \"lightbulb\" | \"line-messenger\" | \"link\" | \"linkedin\" | \"linux\" | \"lock\" | \"lock-hold\" | \"logout\" | \"low-bandwidth\" | \"lunch\" | \"menu\" | \"menu-kebab-horizontal\" | \"menu-kebab-vertical\" | \"message-email\" | \"message-email-outbound\" | \"message-forward\" | \"message-reply\" | \"message-reply-all\" | \"microphone\" | \"microphone-disable\" | \"microphone-talking\" | \"microsoft\" | \"microsoft-teams\" | \"moon\" | \"music\" | \"notes\" | \"notification\" | \"opera\" | \"operator-pair\" | \"paint\" | \"palette\" | \"parking-sign-regular\" | \"paste\" | \"people\" | \"phone\" | \"phone-bell\" | \"phone-call-directory\" | \"phone-call-history\" | \"phone-callback\" | \"phone-close\" | \"phone-conference\" | \"phone-dialpad\" | \"phone-disable\" | \"phone-forward\" | \"phone-hangup\" | \"phone-hold\" | \"phone-inbound\" | \"phone-missed-call\" | \"phone-notification-score\" | \"phone-outbound\" | \"phone-success\" | \"phone-voice\" | \"pin\" | \"pin-location\" | \"post\" | \"product-logo-beyond\" | \"product-logo-g\" | \"quote-left\" | \"quote-right\" | \"radio\" | \"radio-active\" | \"rating\" | \"rating-active\" | \"rating-partial\" | \"record\" | \"refresh\" | \"resource\" | \"retweet\" | \"roster-chat\" | \"roster-chat-disable\" | \"roster-email\" | \"roster-email-disable\" | \"roster-instagram\" | \"roster-instagram-disable\" | \"roster-line\" | \"roster-line-disable\" | \"roster-message\" | \"roster-message-disable\" | \"roster-messenger\" | \"roster-messenger-disable\" | \"roster-phone\" | \"roster-phone-disable\" | \"roster-sms\" | \"roster-sms-disable\" | \"roster-twitter\" | \"roster-twitter-disable\" | \"roster-wechat\" | \"roster-wechat-disable\" | \"roster-whatsapp\" | \"roster-whatsapp-disable\" | \"rss\" | \"run\" | \"safari\" | \"save\" | \"screen-share-regular\" | \"screen-share-slash\" | \"scripter\" | \"search\" | \"send\" | \"server\" | \"settings\" | \"share\" | \"shield-lock\" | \"shield-outline\" | \"shield-solid\" | \"site\" | \"skills\" | \"slideshare\" | \"sms\" | \"sms-cancel\" | \"sms-close\" | \"stamp\" | \"subtract\" | \"subtract-circle\" | \"sun\" | \"tag\" | \"tag-add\" | \"tag-remove\" | \"telegram\" | \"tenant\" | \"thumbs-down\" | \"thumbs-up\" | \"timeline\" | \"toolbar-apps\" | \"toolbar-apps-disable\" | \"toolbar-assist\" | \"toolbar-assist-disable\" | \"toolbar-chat\" | \"toolbar-chat-disable\" | \"toolbar-favorite\" | \"toolbar-favourite\" | \"toolbar-help\" | \"toolbar-inbox\" | \"toolbar-interactions\" | \"toolbar-interactions-disable\" | \"toolbar-notification\" | \"toolbar-phone\" | \"toolbar-phone-active-1\" | \"toolbar-phone-active-2\" | \"toolbar-phone-active-3\" | \"toolbar-phone-disable\" | \"toolbar-video\" | \"toolbar-video-disable\" | \"trade\" | \"transfer\" | \"twitter\" | \"unknown\" | \"unlink\" | \"unlock\" | \"upload\" | \"user\" | \"user-add\" | \"user-circle\" | \"user-contact-id\" | \"user-directory\" | \"user-group\" | \"user-interactions\" | \"user-interactions-disable\" | \"viber\" | \"video\" | \"video-disable\" | \"view-all\" | \"view-cells\" | \"view-grid\" | \"view-list\" | \"view-lists\" | \"view-roster\" | \"view-stacked\" | \"voicemail\" | \"volume-disable\" | \"volume-down\" | \"volume-none\" | \"volume-up\" | \"web\" | \"webcam\" | \"webcam-disable\" | \"wechat\" | \"whatsapp\" | \"window-actual-size\" | \"window-contract\" | \"window-drag-out\" | \"window-expand\" | \"window-fullscreen\" | \"window-popout\" | \"wordpress\" | \"youtube\" | \"zoom-in\" | \"zoom-out\"",
           "references": {
             "GuxIconIconName": {
               "location": "import",
-              "path": "./gux-icon.types"
+              "path": "./gux-icon.types",
+              "id": "src/components/stable/gux-icon/gux-icon.types.ts::GuxIconIconName"
             }
           }
         },

package/dist/collection/components/stable/gux-icon/gux-icon.service.js

@@ -1,4 +1,4 @@
-import { getAssetPath } from '@stencil/core';
+import { getAssetPath } from "@stencil/core";
 const svgHTMLCache = new Map();
 async function fetchIcon(iconName) {
   const iconResponse = await fetch(getAssetPath(`./icons/${iconName}.svg`));

package/dist/collection/components/stable/gux-icon/icons/custom/face-smile-hearts-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.072 6.20795C12.248 6.39195 12.544 6.39195 12.728 6.20795L14.112 4.79195C14.496 4.40795 14.496 3.77595 14.112 3.39195C13.736 3.00795 13.12 3.00795 12.736 3.39195L12.4 3.73595L12.056 3.38395C11.672 2.99995 11.064 2.99995 10.68 3.38395C10.296 3.76795 10.296 4.39995 10.68 4.78395L12.072 6.20795Z"/><path d="M8.65593 6.65595C8.47193 6.85595 8.47993 7.17595 8.67993 7.35995C8.87993 7.54395 9.19193 7.53595 9.37593 7.33595C9.51193 7.19195 9.71993 7.09595 9.99993 7.09595C10.2639 7.09595 10.4959 7.19195 10.6239 7.33595C10.8079 7.53595 11.1199 7.54395 11.3199 7.35995C11.5199 7.16795 11.5279 6.85595 11.3439 6.65595C10.9839 6.27195 10.4559 6.09595 9.99993 6.09595C9.51993 6.10395 9.01593 6.27195 8.65593 6.65595Z"/><path d="M5.99993 7.10395C6.26393 7.10395 6.49593 7.19995 6.62393 7.34395C6.80793 7.54395 7.11993 7.55195 7.31993 7.36795C7.51993 7.17595 7.52793 6.86395 7.34393 6.65595C6.98393 6.27195 6.45593 6.09595 5.99993 6.09595C5.52793 6.09595 5.01593 6.26395 4.65593 6.65595C4.47193 6.86395 4.47993 7.17595 4.67993 7.36795C4.87993 7.55195 5.19193 7.54395 5.37593 7.34395C5.51193 7.19195 5.71993 7.10395 5.99993 7.10395Z"/><path d="M9.96003 9.55198C9.57603 9.95998 8.92803 10.4 8.00003 10.4C7.07203 10.4 6.42403 9.95998 6.04003 9.55198C5.81603 9.31198 5.44003 9.29598 5.19203 9.51998C4.92803 9.74398 4.93603 10.128 5.16003 10.368C5.70403 10.96 6.65603 11.6 8.00003 11.6C9.34403 11.6 10.296 10.96 10.84 10.368C11.064 10.128 11.048 9.74398 10.808 9.51998C10.56 9.29598 10.184 9.31198 9.96003 9.55198Z"/><path d="M14.368 7.41598C14.368 7.40798 14.368 7.39998 14.368 7.39998C14.368 7.07198 14.096 6.79998 13.768 6.79998C13.44 6.79998 13.168 7.07198 13.168 7.39998H13.16C13.176 7.59998 13.2 7.79998 13.2 7.99998C13.2 10.872 10.872 13.2 7.99998 13.2C5.12798 13.2 2.79998 10.872 2.79998 7.99998C2.79998 5.12798 5.12798 2.79998 7.99998 2.79998C8.55198 2.79998 9.07998 2.88798 9.58398 3.04798C9.58398 3.03998 9.58398 3.05598 9.58398 3.03998C9.59198 3.03998 9.59198 3.04798 9.59998 3.04798C9.92798 3.04798 10.2 2.75198 10.2 2.42398C10.2 2.09598 9.92798 1.82398 9.59998 1.82398C9.65598 1.82398 9.69598 1.82398 9.74398 1.83998C9.68798 1.82398 9.65598 1.81598 9.59998 1.79998C9.08798 1.67198 8.55198 1.59998 7.99998 1.59998C4.46398 1.59998 1.59998 4.46398 1.59998 7.99998C1.59998 11.536 4.46398 14.4 7.99998 14.4C11.536 14.4 14.4 11.536 14.4 7.99998C14.4 7.79998 14.384 7.60798 14.368 7.41598Z"/></svg>

package/dist/collection/components/stable/gux-icon/tests/gux-icon.e2e.js

@@ -0,0 +1,11 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-icon', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({
+      html: `<gux-icon decorative="true"></gux-icon>`
+    });
+    const element = await page.find('gux-icon');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+});

package/dist/collection/components/stable/gux-icon/tests/gux-icon.service.spec.js

@@ -0,0 +1,22 @@
+import { getBaseSvgHtml } from "../gux-icon.service";
+describe('icon.service', () => {
+  let fetchSpy;
+  beforeEach(() => {
+    const svgResponse = new Response('<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 16C12.4187 16 16 12.4187 16 8C16 3.58125 12.4187 0 8 0C3.58125 0 0 3.58125 0 8C0 12.4187 3.58125 16 8 16Z"/></svg>');
+    fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValue(svgResponse);
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  describe('getBaseSvgHtml', () => {
+    it('should only fetch once if the same icon is requested multiple times', () => {
+      return Promise.all([
+        getBaseSvgHtml('test'),
+        getBaseSvgHtml('test'),
+        getBaseSvgHtml('test')
+      ]).finally(() => {
+        expect(fetchSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-icon/tests/gux-icon.spec.js

@@ -0,0 +1,6 @@
+import { GuxIcon } from "../gux-icon";
+describe('gux-icon', () => {
+  it('builds', () => {
+    expect(new GuxIcon()).toBeTruthy();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class GuxListDivider {
   render() {
     return (h(Host, { role: "presentation" }));

package/dist/collection/components/stable/gux-list/gux-list-divider/tests/gux-list-divider.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxListDivider } from "../gux-list-divider";
+const components = [GuxListDivider];
+const language = 'en';
+describe('gux-list-divider', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-list-divider></gux-list-divider>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxListDivider);
+  });
+  describe('#render', () => {
+    ['<gux-list-divider></gux-list-divider>'].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.css

@@ -20,37 +20,37 @@
 
 button {
   all: unset;
-  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
-  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
-  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
-  background-color: var(--gse-ui-menu-option-default-backgroundColor);
   box-sizing: border-box;
   width: 100%;
   min-height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
   color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
   border: none;
   outline: none;
   outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
 }
 button:focus-visible:not(:disabled) {
-  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
 }
 button:hover:not(:disabled) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 button:active:not(:disabled) {
-  background: var(--gse-ui-menu-option-selected-backgroundColor);
   font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
   font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
   line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 button:disabled {
-  opacity: var(--gse-ui-menu-option-disabled-opacity);
   cursor: default;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { getClosestElement } from '../../../../utils/dom/get-closest-element';
+import { h, Host } from "@stencil/core";
+import { getClosestElement } from "../../../../utils/dom/get-closest-element";
 /**
  * @slot - text
  */

package/dist/collection/components/stable/gux-list/gux-list-item/tests/gux-list-item.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxListItem } from "../gux-list-item";
+const components = [GuxListItem];
+const language = 'en';
+describe('gux-list-item', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-list-item>Item</gux-list-item>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxListItem);
+  });
+  describe('#render', () => {
+    ['<gux-list-item>Item</gux-list-item>'].forEach((html, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
-import { h, Host } from '@stencil/core';
-import { byClosestId, byId, first, last, next, previous } from './gux-list.service';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import { byClosestId, byId, first, last, next, previous } from "./gux-list.service";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - collection of gux-list-item, gux-list-divider elements
  */
@@ -72,7 +72,8 @@ export class GuxList {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -91,7 +92,8 @@ export class GuxList {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -110,7 +112,8 @@ export class GuxList {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -126,7 +129,8 @@ export class GuxList {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-list/tests/gux-list.e2e.js

@@ -0,0 +1,20 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-list', () => {
+  describe('#render', () => {
+    it('should render component as expected', async () => {
+      const html = `
+        <gux-list>
+          <gux-list-item>Test1</gux-list-item>
+          <gux-list-divider></gux-list-divider>
+          <gux-list-item>Test2</gux-list-item>
+          <gux-list-item>Test3</gux-list-item>
+          <gux-list-item>Test4</gux-list-item>
+        </gux-list>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-list');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-list/tests/gux-list.spec.js

@@ -0,0 +1,23 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxList } from "../gux-list";
+import { GuxListDivider } from "../gux-list-divider/gux-list-divider";
+import { GuxListItem } from "../gux-list-item/gux-list-item";
+const components = [GuxList, GuxListDivider, GuxListItem];
+const language = 'en';
+describe('gux-list', () => {
+  describe('#render', () => {
+    it('should render component as expected', async () => {
+      const html = `
+        <gux-list id="list">
+          <gux-list-item>Test1</gux-list-item>
+          <gux-list-divider></gux-list-divider>
+          <gux-list-item>Test2</gux-list-item>
+          <gux-list-item>Test3</gux-list-item>
+          <gux-list-item>Test4</gux-list-item>
+        </gux-list>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-listbox/gux-listbox.css

@@ -8,8 +8,8 @@
   background: var(--gse-ui-menu-backgroundColor);
   border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
   border-radius: var(--gse-ui-menu-borderRadius);
-  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
   outline: none;
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }
 
 :host(:focus) {
@@ -30,8 +30,8 @@
   box-sizing: border-box;
   height: var(--gse-ui-menu-option-height);
   font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
   font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
   line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
-  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
   color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
 }

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

@@ -1,11 +1,11 @@
-import { h, Host } from '@stencil/core';
-import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from './gux-listbox.service';
-import { optionTagSelector } from './options/option-types';
-import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
-import simulateNativeEvent from '@utils/dom/simulate-native-event';
-import { trackComponent } from '@utils/tracking/usage';
-import translationResources from './i18n/en.json';
+import { h, Host } from "@stencil/core";
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from "./gux-listbox.service";
+import { optionTagSelector } from "./options/option-types";
+import { buildI18nForComponent } from "../../../i18n";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { trackComponent } from "../../../utils/tracking/usage";
+import translationResources from "./i18n/en.json";
 /**
  * The listbox component provides keyboard bindings and a11y patterns for selecting
  * from a list of options.
@@ -233,7 +233,8 @@ export class GuxListbox {
           "references": {
             "GuxFilterTypes": {
               "location": "import",
-              "path": "../gux-dropdown/gux-dropdown.types"
+              "path": "../gux-dropdown/gux-dropdown.types",
+              "id": "src/components/stable/gux-dropdown/gux-dropdown.types.ts::GuxFilterTypes"
             }
           }
         },
@@ -299,7 +300,8 @@ export class GuxListbox {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css

@@ -3,19 +3,19 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-menu-option-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
-  color: var(--gse-ui-menu-option-label-foregroundColor);
-  word-wrap: break-word;
-  cursor: pointer;
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
   font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
   line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
-  gap: var(--gse-ui-menu-option-gap);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  word-wrap: break-word;
+  cursor: pointer;
 }
 :host .gux-slot-container {
   overflow: hidden;
@@ -31,15 +31,15 @@
 
 :host(.gux-selected) {
   font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
   font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
   line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
-  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
   background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 
 :host(.gux-active) {
-  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
   border-radius: var(--gse-semantic-focusRing-cornerRadius);
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
 }
 
 :host(.gux-hovered:not(:disabled)) {

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '@utils/dom/random-html-id';
+import { h, Host } from "@stencil/core";
+import { randomHTMLId } from "../../../../../utils/dom/random-html-";
 /**
  * @slot - text
  */