genesys-spark-components 4.0.0-beta.30 → 4.0.0-beta.32

package/dist/types/components/beta/gux-segmented-control/gux-segmented-control.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from '../../../stencil-public-runtime';
+/**
+ * @slot - list of gux-segmented-control-item elements
+ */
+export declare class GuxSegmentedControl {
+  root: HTMLElement;
+  value: string;
+  items: HTMLGuxSegmentedControlItemElement[];
+  onClick(e: MouseEvent): void;
+  private slotChanged;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  render(): JSX.Element;
+}

package/dist/types/components/stable/gux-action-button/gux-action-button.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter, JSX } from '../../../stencil-public-runtime';
 import { GuxActionButtonAccent, GuxActionButtonType } from './gux-action-button.types';
+/**
+ * @slot title - slot for icon and button text
+ */
 export declare class GuxActionButton {
   private dropdownButton;
   private i18n;
@@ -21,10 +24,6 @@ export declare class GuxActionButton {
    * Triggered when the action button is clicked
    */
   actionClick: EventEmitter;
-  /**
-   * The component text.
-   */
-  text: string;
   /**
    * Disables the action button.
    */

package/dist/types/components/stable/gux-calendar/gux-calendar.types.d.ts

@@ -6,5 +6,6 @@ export interface IDateElement {
   selected: boolean;
   disabled: boolean;
   hidden: boolean;
+  isToday: boolean;
 }
 export type GuxCalendarDayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;

package/dist/types/components/stable/gux-context-menu/gux-context-menu.d.ts

@@ -6,14 +6,18 @@ export declare class GuxContextMenu {
   private buttonId;
   private root;
   /**
-   * Screenreader text for context menu button
-   * defaults to "context menu"
+   * Indicates button density style. Intended to be paired with gux-table property.
    */
-  screenreaderText: string;
+  compact: boolean;
   /**
    * Controls the disabled state of the internal button
    */
   disabled: boolean;
+  /**
+   * Screenreader text for context menu button
+   * defaults to "context menu"
+   */
+  screenreaderText: string;
   /**
    * Controls the visibility of the popover list
    */

package/dist/types/components/stable/gux-popup/gux-popup.d.ts

@@ -7,9 +7,12 @@ export declare class GuxPopup {
   private targetElementContainer;
   private popupElementContainer;
   private cleanupUpdatePosition;
-  private root;
   expanded: boolean;
   disabled: boolean;
+  /**
+   * set if parent component design allows for popup exceeding target width
+   */
+  exceedTargetWidth: boolean;
   /**
    * This event will run when the popup transitions to an expanded state.
    */

package/dist/types/components.d.ts

@@ -36,7 +36,7 @@ import { Placement } from "@floating-ui/dom";
 import { GuxRadialLoadingContext } from "./components/stable/gux-radial-loading/gux-radial-loading.types";
 import { GuxSimpleToastAccent } from "./components/legacy/gux-simple-toast-legacy/gux-simple-toast.types";
 import { GuxTableSelectedState, GuxTableSortState } from "./components/stable/gux-table/gux-table.types";
-import { GuxSwitchAllowedLayouts } from "./components/stable/gux-switch/gux-switch.types";
+import { GuxSwitchAllowedLayouts } from "./components/legacy/gux-switch-legacy/gux-switch.types";
 import { GuxTableToolbarActionTypes } from "./components/stable/gux-table-toolbar/gux-table-toolbar-action/gux-table-toolbar-action.types";
 import { GuxTableToolbarActionAccent } from "./components/stable/gux-table-toolbar/gux-table-toolbar-action-accents.types";
 import { GuxTabsAlignment, GuxTabsOrientation } from "./components/stable/gux-tabs/gux-tabs-types";
@@ -77,7 +77,7 @@ export { Placement } from "@floating-ui/dom";
 export { GuxRadialLoadingContext } from "./components/stable/gux-radial-loading/gux-radial-loading.types";
 export { GuxSimpleToastAccent } from "./components/legacy/gux-simple-toast-legacy/gux-simple-toast.types";
 export { GuxTableSelectedState, GuxTableSortState } from "./components/stable/gux-table/gux-table.types";
-export { GuxSwitchAllowedLayouts } from "./components/stable/gux-switch/gux-switch.types";
+export { GuxSwitchAllowedLayouts } from "./components/legacy/gux-switch-legacy/gux-switch.types";
 export { GuxTableToolbarActionTypes } from "./components/stable/gux-table-toolbar/gux-table-toolbar-action/gux-table-toolbar-action.types";
 export { GuxTableToolbarActionAccent } from "./components/stable/gux-table-toolbar/gux-table-toolbar-action-accents.types";
 export { GuxTabsAlignment, GuxTabsOrientation } from "./components/stable/gux-tabs/gux-tabs-types";
@@ -114,10 +114,6 @@ export namespace Components {
           * It is used to open or not the list.
          */
         "isOpen": boolean;
-        /**
-          * The component text.
-         */
-        "text": string;
         /**
           * The component button type
          */
@@ -270,6 +266,10 @@ export namespace Components {
         "matchCount": number;
     }
     interface GuxContextMenu {
+        /**
+          * Indicates button density style. Intended to be paired with gux-table property.
+         */
+        "compact": boolean;
         /**
           * Controls the disabled state of the internal button
          */
@@ -438,7 +438,7 @@ export namespace Components {
          */
         "value": string;
     }
-    interface GuxFlyoutMenuBeta {
+    interface GuxFlyoutMenu {
     }
     interface GuxFormFieldCheckbox {
     }
@@ -765,6 +765,10 @@ export namespace Components {
     }
     interface GuxPopup {
         "disabled": boolean;
+        /**
+          * set if parent component design allows for popup exceeding target width
+         */
+        "exceedTargetWidth": boolean;
         "expanded": boolean;
     }
     interface GuxRadialLoading {
@@ -807,6 +811,15 @@ export namespace Components {
     }
     interface GuxScreenReaderBeta {
     }
+    interface GuxSegmentedControlBeta {
+        "value": string;
+    }
+    interface GuxSegmentedControlItem {
+        "disabled": boolean;
+        "iconOnly": boolean;
+        "selected": boolean;
+        "value": string;
+    }
     interface GuxSimpleToastLegacy {
         /**
           * The component accent.
@@ -827,15 +840,15 @@ export namespace Components {
         "guxFocus": () => Promise<void>;
         "label": string;
     }
-    interface GuxSwitch {
-        "layout": GuxSwitchAllowedLayouts;
-        "value": string;
-    }
     interface GuxSwitchItem {
         "disabled": boolean;
         "selected": boolean;
         "value": string;
     }
+    interface GuxSwitchLegacy {
+        "layout": GuxSwitchAllowedLayouts;
+        "value": string;
+    }
     interface GuxTab {
         /**
           * Specifies if tab is disabled
@@ -1458,11 +1471,11 @@ declare global {
         prototype: HTMLGuxDropdownOptionElement;
         new (): HTMLGuxDropdownOptionElement;
     };
-    interface HTMLGuxFlyoutMenuBetaElement extends Components.GuxFlyoutMenuBeta, HTMLStencilElement {
+    interface HTMLGuxFlyoutMenuElement extends Components.GuxFlyoutMenu, HTMLStencilElement {
     }
-    var HTMLGuxFlyoutMenuBetaElement: {
-        prototype: HTMLGuxFlyoutMenuBetaElement;
-        new (): HTMLGuxFlyoutMenuBetaElement;
+    var HTMLGuxFlyoutMenuElement: {
+        prototype: HTMLGuxFlyoutMenuElement;
+        new (): HTMLGuxFlyoutMenuElement;
     };
     interface HTMLGuxFormFieldCheckboxElement extends Components.GuxFormFieldCheckbox, HTMLStencilElement {
     }
@@ -1786,6 +1799,18 @@ declare global {
         prototype: HTMLGuxScreenReaderBetaElement;
         new (): HTMLGuxScreenReaderBetaElement;
     };
+    interface HTMLGuxSegmentedControlBetaElement extends Components.GuxSegmentedControlBeta, HTMLStencilElement {
+    }
+    var HTMLGuxSegmentedControlBetaElement: {
+        prototype: HTMLGuxSegmentedControlBetaElement;
+        new (): HTMLGuxSegmentedControlBetaElement;
+    };
+    interface HTMLGuxSegmentedControlItemElement extends Components.GuxSegmentedControlItem, HTMLStencilElement {
+    }
+    var HTMLGuxSegmentedControlItemElement: {
+        prototype: HTMLGuxSegmentedControlItemElement;
+        new (): HTMLGuxSegmentedControlItemElement;
+    };
     interface HTMLGuxSimpleToastLegacyElement extends Components.GuxSimpleToastLegacy, HTMLStencilElement {
     }
     var HTMLGuxSimpleToastLegacyElement: {
@@ -1816,18 +1841,18 @@ declare global {
         prototype: HTMLGuxSubmenuElement;
         new (): HTMLGuxSubmenuElement;
     };
-    interface HTMLGuxSwitchElement extends Components.GuxSwitch, HTMLStencilElement {
-    }
-    var HTMLGuxSwitchElement: {
-        prototype: HTMLGuxSwitchElement;
-        new (): HTMLGuxSwitchElement;
-    };
     interface HTMLGuxSwitchItemElement extends Components.GuxSwitchItem, HTMLStencilElement {
     }
     var HTMLGuxSwitchItemElement: {
         prototype: HTMLGuxSwitchItemElement;
         new (): HTMLGuxSwitchItemElement;
     };
+    interface HTMLGuxSwitchLegacyElement extends Components.GuxSwitchLegacy, HTMLStencilElement {
+    }
+    var HTMLGuxSwitchLegacyElement: {
+        prototype: HTMLGuxSwitchLegacyElement;
+        new (): HTMLGuxSwitchLegacyElement;
+    };
     interface HTMLGuxTabElement extends Components.GuxTab, HTMLStencilElement {
     }
     var HTMLGuxTabElement: {
@@ -2017,7 +2042,7 @@ declare global {
         "gux-dropdown-multi": HTMLGuxDropdownMultiElement;
         "gux-dropdown-multi-tag": HTMLGuxDropdownMultiTagElement;
         "gux-dropdown-option": HTMLGuxDropdownOptionElement;
-        "gux-flyout-menu-beta": HTMLGuxFlyoutMenuBetaElement;
+        "gux-flyout-menu": HTMLGuxFlyoutMenuElement;
         "gux-form-field-checkbox": HTMLGuxFormFieldCheckboxElement;
         "gux-form-field-color": HTMLGuxFormFieldColorElement;
         "gux-form-field-dropdown": HTMLGuxFormFieldDropdownElement;
@@ -2071,13 +2096,15 @@ declare global {
         "gux-region-icon": HTMLGuxRegionIconElement;
         "gux-row-select": HTMLGuxRowSelectElement;
         "gux-screen-reader-beta": HTMLGuxScreenReaderBetaElement;
+        "gux-segmented-control-beta": HTMLGuxSegmentedControlBetaElement;
+        "gux-segmented-control-item": HTMLGuxSegmentedControlItemElement;
         "gux-simple-toast-legacy": HTMLGuxSimpleToastLegacyElement;
         "gux-skip-navigation-item": HTMLGuxSkipNavigationItemElement;
         "gux-skip-navigation-list": HTMLGuxSkipNavigationListElement;
         "gux-sort-control": HTMLGuxSortControlElement;
         "gux-submenu": HTMLGuxSubmenuElement;
-        "gux-switch": HTMLGuxSwitchElement;
         "gux-switch-item": HTMLGuxSwitchItemElement;
+        "gux-switch-legacy": HTMLGuxSwitchLegacyElement;
         "gux-tab": HTMLGuxTabElement;
         "gux-tab-advanced": HTMLGuxTabAdvancedElement;
         "gux-tab-advanced-list": HTMLGuxTabAdvancedListElement;
@@ -2146,10 +2173,6 @@ declare namespace LocalJSX {
           * Triggered when the menu is open
          */
         "onOpen"?: (event: GuxActionButtonCustomEvent<any>) => void;
-        /**
-          * The component text.
-         */
-        "text"?: string;
         /**
           * The component button type
          */
@@ -2308,6 +2331,10 @@ declare namespace LocalJSX {
         "onGuxcurrentmatchchanged"?: (event: GuxContentSearchCustomEvent<number>) => void;
     }
     interface GuxContextMenu {
+        /**
+          * Indicates button density style. Intended to be paired with gux-table property.
+         */
+        "compact"?: boolean;
         /**
           * Controls the disabled state of the internal button
          */
@@ -2496,7 +2523,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface GuxFlyoutMenuBeta {
+    interface GuxFlyoutMenu {
     }
     interface GuxFormFieldCheckbox {
     }
@@ -2833,6 +2860,10 @@ declare namespace LocalJSX {
     }
     interface GuxPopup {
         "disabled"?: boolean;
+        /**
+          * set if parent component design allows for popup exceeding target width
+         */
+        "exceedTargetWidth"?: boolean;
         "expanded"?: boolean;
         /**
           * This event will run when the popup transitions to a collapsed state.
@@ -2884,6 +2915,15 @@ declare namespace LocalJSX {
     }
     interface GuxScreenReaderBeta {
     }
+    interface GuxSegmentedControlBeta {
+        "value"?: string;
+    }
+    interface GuxSegmentedControlItem {
+        "disabled"?: boolean;
+        "iconOnly"?: boolean;
+        "selected"?: boolean;
+        "value"?: string;
+    }
     interface GuxSimpleToastLegacy {
         /**
           * The component accent.
@@ -2902,15 +2942,15 @@ declare namespace LocalJSX {
     interface GuxSubmenu {
         "label"?: string;
     }
-    interface GuxSwitch {
-        "layout"?: GuxSwitchAllowedLayouts;
-        "value"?: string;
-    }
     interface GuxSwitchItem {
         "disabled"?: boolean;
         "selected"?: boolean;
         "value"?: string;
     }
+    interface GuxSwitchLegacy {
+        "layout"?: GuxSwitchAllowedLayouts;
+        "value"?: string;
+    }
     interface GuxTab {
         /**
           * Specifies if tab is disabled
@@ -3190,7 +3230,7 @@ declare namespace LocalJSX {
         "gux-dropdown-multi": GuxDropdownMulti;
         "gux-dropdown-multi-tag": GuxDropdownMultiTag;
         "gux-dropdown-option": GuxDropdownOption;
-        "gux-flyout-menu-beta": GuxFlyoutMenuBeta;
+        "gux-flyout-menu": GuxFlyoutMenu;
         "gux-form-field-checkbox": GuxFormFieldCheckbox;
         "gux-form-field-color": GuxFormFieldColor;
         "gux-form-field-dropdown": GuxFormFieldDropdown;
@@ -3244,13 +3284,15 @@ declare namespace LocalJSX {
         "gux-region-icon": GuxRegionIcon;
         "gux-row-select": GuxRowSelect;
         "gux-screen-reader-beta": GuxScreenReaderBeta;
+        "gux-segmented-control-beta": GuxSegmentedControlBeta;
+        "gux-segmented-control-item": GuxSegmentedControlItem;
         "gux-simple-toast-legacy": GuxSimpleToastLegacy;
         "gux-skip-navigation-item": GuxSkipNavigationItem;
         "gux-skip-navigation-list": GuxSkipNavigationList;
         "gux-sort-control": GuxSortControl;
         "gux-submenu": GuxSubmenu;
-        "gux-switch": GuxSwitch;
         "gux-switch-item": GuxSwitchItem;
+        "gux-switch-legacy": GuxSwitchLegacy;
         "gux-tab": GuxTab;
         "gux-tab-advanced": GuxTabAdvanced;
         "gux-tab-advanced-list": GuxTabAdvancedList;
@@ -3321,7 +3363,7 @@ declare module "@stencil/core" {
             "gux-dropdown-multi": LocalJSX.GuxDropdownMulti & JSXBase.HTMLAttributes<HTMLGuxDropdownMultiElement>;
             "gux-dropdown-multi-tag": LocalJSX.GuxDropdownMultiTag & JSXBase.HTMLAttributes<HTMLGuxDropdownMultiTagElement>;
             "gux-dropdown-option": LocalJSX.GuxDropdownOption & JSXBase.HTMLAttributes<HTMLGuxDropdownOptionElement>;
-            "gux-flyout-menu-beta": LocalJSX.GuxFlyoutMenuBeta & JSXBase.HTMLAttributes<HTMLGuxFlyoutMenuBetaElement>;
+            "gux-flyout-menu": LocalJSX.GuxFlyoutMenu & JSXBase.HTMLAttributes<HTMLGuxFlyoutMenuElement>;
             "gux-form-field-checkbox": LocalJSX.GuxFormFieldCheckbox & JSXBase.HTMLAttributes<HTMLGuxFormFieldCheckboxElement>;
             "gux-form-field-color": LocalJSX.GuxFormFieldColor & JSXBase.HTMLAttributes<HTMLGuxFormFieldColorElement>;
             "gux-form-field-dropdown": LocalJSX.GuxFormFieldDropdown & JSXBase.HTMLAttributes<HTMLGuxFormFieldDropdownElement>;
@@ -3379,13 +3421,15 @@ declare module "@stencil/core" {
             "gux-region-icon": LocalJSX.GuxRegionIcon & JSXBase.HTMLAttributes<HTMLGuxRegionIconElement>;
             "gux-row-select": LocalJSX.GuxRowSelect & JSXBase.HTMLAttributes<HTMLGuxRowSelectElement>;
             "gux-screen-reader-beta": LocalJSX.GuxScreenReaderBeta & JSXBase.HTMLAttributes<HTMLGuxScreenReaderBetaElement>;
+            "gux-segmented-control-beta": LocalJSX.GuxSegmentedControlBeta & JSXBase.HTMLAttributes<HTMLGuxSegmentedControlBetaElement>;
+            "gux-segmented-control-item": LocalJSX.GuxSegmentedControlItem & JSXBase.HTMLAttributes<HTMLGuxSegmentedControlItemElement>;
             "gux-simple-toast-legacy": LocalJSX.GuxSimpleToastLegacy & JSXBase.HTMLAttributes<HTMLGuxSimpleToastLegacyElement>;
             "gux-skip-navigation-item": LocalJSX.GuxSkipNavigationItem & JSXBase.HTMLAttributes<HTMLGuxSkipNavigationItemElement>;
             "gux-skip-navigation-list": LocalJSX.GuxSkipNavigationList & JSXBase.HTMLAttributes<HTMLGuxSkipNavigationListElement>;
             "gux-sort-control": LocalJSX.GuxSortControl & JSXBase.HTMLAttributes<HTMLGuxSortControlElement>;
             "gux-submenu": LocalJSX.GuxSubmenu & JSXBase.HTMLAttributes<HTMLGuxSubmenuElement>;
-            "gux-switch": LocalJSX.GuxSwitch & JSXBase.HTMLAttributes<HTMLGuxSwitchElement>;
             "gux-switch-item": LocalJSX.GuxSwitchItem & JSXBase.HTMLAttributes<HTMLGuxSwitchItemElement>;
+            "gux-switch-legacy": LocalJSX.GuxSwitchLegacy & JSXBase.HTMLAttributes<HTMLGuxSwitchLegacyElement>;
             "gux-tab": LocalJSX.GuxTab & JSXBase.HTMLAttributes<HTMLGuxTabElement>;
             "gux-tab-advanced": LocalJSX.GuxTabAdvanced & JSXBase.HTMLAttributes<HTMLGuxTabAdvancedElement>;
             "gux-tab-advanced-list": LocalJSX.GuxTabAdvancedList & JSXBase.HTMLAttributes<HTMLGuxTabAdvancedListElement>;

package/dist/types/stencil-wrapper.d.ts

@@ -1,2 +1,2 @@
-export declare const CDN_URL = "/spark-components/build-assets/4.0.0-beta.30-30/genesys-webcomponents/";
+export declare const CDN_URL = "/spark-components/build-assets/4.0.0-beta.32-34/genesys-webcomponents/";
 export declare function registerElements(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark-components",
-  "version": "4.0.0-beta.30",
+  "version": "4.0.0-beta.32",
   "description": "Common webcomponents",
   "license": "MIT",
   "main": "dist/stencil-wrapper.js",

package/dist/collection/components/beta/gux-flyout-menu/gux-flyout-menu.css

@@ -1,35 +0,0 @@
-:host {
-  z-index: var(--gux-zindex-popover, 2);
-  color: #2e394c;
-  cursor: default;
-}
-:host(:focus) {
-  outline: none;
-}
-:host(:focus-visible) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-flyout-menu-content {
-  display: none;
-  margin: 0;
-}
-.gux-flyout-menu-content.gux-shown {
-  display: flex;
-}
-.gux-arrow,
-.gux-arrow::before {
-  position: absolute;
-  top: -3px;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-}
-.gux-arrow::before {
-  visibility: visible;
-  content: '';
-  border-top: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-  transform: rotate(45deg);
-}

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.css

@@ -1,29 +0,0 @@
-gux-menu-option {
-  display: block;
-  flex: 1 1 auto;
-  align-self: auto;
-}
-gux-menu-option .gux-menu-option-button {
-  all: unset;
-  width: 100%;
-  width: 125px;
-  height: 32px;
-  padding: 0 16px;
-  line-height: 32px;
-  color: #2e394c;
-  background-color: #fdfdfd;
-}
-gux-menu-option .gux-menu-option-button:focus-within,
-gux-menu-option .gux-menu-option-button:hover {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-}
-gux-menu-option .gux-menu-option-button:enabled {
-  cursor: pointer;
-}
-gux-menu-option .gux-menu-option-button .gux-menu-option-button-text {
-  display: block;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-menu.css

@@ -1,24 +0,0 @@
-gux-menu {
-  flex-direction: column;
-  width: fit-content;
-  padding: 8px 0;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
-}
-gux-menu .gux-arrow,
-gux-menu .gux-arrow::before {
-  position: absolute;
-  top: -3px;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-}
-gux-menu .gux-arrow::before {
-  visibility: visible;
-  content: '';
-  border-top: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-  transform: rotate(45deg);
-}

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.css

@@ -1,57 +0,0 @@
-gux-submenu {
-  display: block;
-  flex: 1 1 auto;
-  align-self: auto;
-}
-gux-submenu .gux-submenu-button {
-  all: unset;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: flex-start;
-  width: 129px;
-  height: 32px;
-  padding: 0 12px 0 16px;
-  line-height: 32px;
-  color: #2e394c;
-  background-color: #fdfdfd;
-}
-gux-submenu .gux-submenu-button:focus-within,
-gux-submenu .gux-submenu-button:hover {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-}
-gux-submenu .gux-submenu-button .gux-submenu-button-text {
-  flex: 1 1 auto;
-  align-self: auto;
-  order: 0;
-  margin-right: 12px;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-gux-submenu .gux-submenu-button .gux-submenu-open-icon {
-  flex: 0 0 auto;
-  align-self: auto;
-  order: 0;
-  width: 16px;
-  height: 16px;
-}
-gux-submenu .gux-submenu-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  flex-direction: column;
-  padding: 8px 0;
-  margin: 0;
-  visibility: hidden;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
-}
-gux-submenu .gux-submenu-wrapper.gux-shown {
-  visibility: visible;
-}