@veracity/vui 2.9.0 → 2.10.0-beta.1

package/dist/esm/theme/foundations/index.d.ts

@@ -183,6 +183,7 @@ declare const _default: {
             main: string;
         };
         sandstone: {
+            97: string;
             95: string;
             90: string;
             85: string;

package/dist/esm/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/esm/tree/tree.js

@@ -68,7 +68,7 @@ export const Tree = vui((props, ref) => {
     };
     return (React.createElement(TreeProvider, { value: context },
         React.createElement(TreeBase, { className: cs('vui-tree', className), ref: ref, ...styles.container, ...rest },
-            React.createElement(List, { w: 1 }, itemsInternal?.map(({ id, isActive, ...props }, index) => {
+            React.createElement(List, { role: "tree", w: 1 }, itemsInternal?.map(({ id, isActive, ...props }, index) => {
                 return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapseInternal, iconExpand: iconExpandInternal, id: id, isActive: isActive ? isActive : activeItemIndex ? activeItemIndex === id : false, isFirstLevel: true, key: id ?? index, onClickTreeItem: onClickTreeItem, ...props }));
             })))));
 });

package/dist/esm/tree/treeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,eAAO,MAAM,YAAY,8HAKxB,CAAA;AAGD;;GAEG;AACH,eAAO,MAAM,QAAQ,qDAmLnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,eAAO,MAAM,YAAY,8HAKxB,CAAA;AAGD;;GAEG;AACH,eAAO,MAAM,QAAQ,qDAyLnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/tree/treeItem.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Box } from '../box';
 import { styled, useStyleConfig, vui } from '../core';
 import { List } from '../list';
-import { cs, isArray, isReactText, vuiColorToRGBA } from '../utils';
+import { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils';
 import { useTreeContext } from './context';
 import TreeIcon from './treeIcon';
 import TreeText from './treeText';
@@ -87,6 +87,10 @@ export const TreeItem = vui((props, ref) => {
     if (!isCollapsable) {
         textMl += 3.8;
     }
+    const aliasedProps = filterUndefined({
+        'aria-expanded': isCollapsable ? !collapsedInternal : undefined,
+        role: 'treeitem'
+    });
     // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
     return (React.createElement(TreeItemBase, { className: cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className), color: isFirstLevel ? styles?.firstLevelItem?.color : color, h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id.toString(), m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, propagatedPL: propagatedPL, ref: ref, w: 1, ...itemStyles, bg: isFirstLevel
             ? isActiveInternal
@@ -94,12 +98,12 @@ export const TreeItem = vui((props, ref) => {
                 : styles?.firstLevelItem?.bg
             : isActiveInternal
                 ? styles?.item?.activeBg
-                : bg, hoverBg: undefined, ...rest },
+                : bg, hoverBg: undefined, ...aliasedProps, ...rest },
         React.createElement(React.Fragment, null,
             React.createElement(Box, { centerV: true, className: cs('vui-treeItem-permanent', isActiveInternal ? 'vui-treeItem-active' : '', isFirstLevel ? 'vui-treeItem-firstLevel' : ''), fontWeight: isActiveInternal ? '600' : '500', pl: `${innerBoxPl}px` },
                 items && items?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mx: 1.5, name: iconExpand }) : React.createElement(TreeIcon, { mx: 1.5, name: iconCollapse }))),
                 isReactText(text) ? React.createElement(TreeText, { ml: textMl, ...{ isTruncated, text } }) : text),
-            isCollapsable && !collapsedInternal && (React.createElement(List, { w: 1 }, children ??
+            isCollapsable && !collapsedInternal && (React.createElement(List, { role: "tree", w: 1 }, children ??
                 (isArray(items)
                     ? items.map(({ key, propagatedPL, ...props }, index) => {
                         return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, propagatedPL: innerListPl, ...props }));

package/dist/esm/tutorial/tutorial.types.d.ts

@@ -17,11 +17,11 @@ export type TutorialProps = {
     className?: string;
     /** An id for further handling with localStorage */
     id: string;
-    /** Invoked once the action button clicked. */
+    /** Invoked once the action button is clicked. */
     onAction?: () => void;
-    /** Invoked once the dismiss button clicked. */
+    /** Invoked once the dismiss button is clicked. */
     onDismiss?: () => void;
-    /** Invoked once the finish button clicked. */
+    /** Invoked once the finish button is clicked. */
     onFinish?: () => void;
     /** Popover placement */
     placement?: Placement;

package/dist/esm/tutorial/tutorial.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}

package/dist/esm/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAuHnB"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAoHnB"}

package/dist/esm/tutorial/tutorialCard.js

@@ -32,8 +32,5 @@ export function TutorialCard({ actionLabel = 'Action', className, title, readMor
             (showSkipButton || isFinalStep || !!onAction) && (React.createElement(Box, { alignItems: "center", justifyContent: "space-between" },
                 showSkipButton && !isFinalStep && (React.createElement(Button, { mr: 2, onClick: onDismiss, variant: "primaryLight" }, "Skip")),
                 isFinalStep && (React.createElement(Button, { mr: 2, onClick: onFinish, variant: "primaryLight" }, "Finish")),
-                !!onAction && (React.createElement(Button, { mr: 6, onClick: onAction, variant: "primaryLight" },
-                    React.createElement(React.Fragment, null,
-                        actionLabel,
-                        onAction))))))));
+                !!onAction && (React.createElement(Button, { mr: 6, onClick: onAction, variant: "primaryLight" }, actionLabel)))))));
 }

package/dist/esm/utils/array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../../src/utils/array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,iGAAiG;AACjG,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,GAAE,IAAI,CAAC,OAAO,CAAS,WAGlF,CAAC,SAAS,CAAC,YAW3B;AAGD,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,CAEtD"}
+{"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../../src/utils/array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,iGAAiG;AACjG,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,GAAE,IAAI,CAAC,OAAO,CAAS,WAGlF,CAAC,SAAS,CAAC,YAY3B;AAGD,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,CAEtD"}

package/dist/esm/utils/array.js

@@ -3,6 +3,8 @@
 export function compareBy(key, order = 'asc') {
     const ord = order === 'asc' ? 1 : -1;
     return (item1, item2) => {
+        if (order === null)
+            return 0;
         const a = item1[key];
         const b = item2[key];
         if (typeof a === 'string' && typeof b === 'string') {

package/dist/esm/utils/types.d.ts

@@ -43,8 +43,9 @@ export type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<Compo
 export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
 /** Merges props definitions, overriding source keys */
 export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
+export type SortOrder = 'asc' | 'desc' | null;
 export type Sort<T = string> = {
     key: T;
-    order: 'asc' | 'desc';
+    order: SortOrder;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.9.0",
+  "version": "2.10.0-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/accordion/accordionItem.tsx

@@ -23,7 +23,6 @@ export const AccordionItem = (props: AccordionItemProps) => {
     ...rest
   } = omitThemingProps(props)
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
-
   const styles = useStyleConfig('Accordion', useAccordionContext())
 
   useEffect(() => {

package/src/avatar/theme.ts

@@ -143,7 +143,7 @@ const variants = {
     activeBg: 'hsl(178, 80%, 42%)'
   },
   solidTerracotta: {
-    bg: 'hsl(34, 100%, 35%)',
+    bg: 'hsl(34, 100%, 30%)',
     hoverBg: 'hsl(34, 100%, 40%)',
     borderColor: 'hsl(34, 100%, 35%)',
     color: 'white',

package/src/button/button.tsx

@@ -98,6 +98,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
 
   let ariaLabel = 'vui-button'
+
   if (title) {
     ariaLabel = title
   } else {
@@ -142,7 +143,6 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   return (
     <ButtonProvider value={context}>
       <ButtonBase
-        aria-label={ariaLabel}
         borderWidth={border}
         className={cs('vui-button', className, isActive && activeClassName, `vui-button-variant-${variantProp}`)}
         disabled={disabled}
@@ -151,7 +151,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         pl={pl}
         pr={isDropDown ? 0 : pr}
         ref={ref}
-        title={title}
+        title={title || ariaLabel}
         type="button"
         variant={variant}
         {...buttonStyles}

package/src/core/vuiProvider/globalStyle.tsx

@@ -17,7 +17,6 @@ type GlobalStyleProps = {
  */
 export default createGlobalStyle<GlobalStyleProps>`
   ${fontFaces}
-
   :root {
     ${generateCSSVariables}
   }
@@ -29,18 +28,23 @@ export default createGlobalStyle<GlobalStyleProps>`
   }
 
   button,
+  .vui-avatar,
+  .vui-tag,
   .vui-switchTrack {
     --x-ring-color: transparent;
   }
 
   button:focus-visible,
   li:focus-visible,
+  .vui-avatar:focus-visible,
+  .vui-tag:focus-visible,
   .vui-switchTrack:focus-visible {
     --x-ring-color: var(--vui-colors-focusColor);
     outline: var(--vui-colors-focusColor) solid 3px;
     z-index: 1;
   }
 
+  //@formatter:off
   ${p =>
     p.globalStyle &&
     css`
@@ -59,6 +63,7 @@ export default createGlobalStyle<GlobalStyleProps>`
       }
     `}
 
+  //@formatter:on
   @keyframes vui-bounce {
   ${bounce}
   }

package/src/header/headerAccount.tsx

@@ -28,6 +28,7 @@ export function HeaderAccount(props: HeaderAccountProps) {
         isInteractive
         ml={1}
         name={name}
+        role="button"
         size="lg"
         title="Account"
         variant={variant}

package/src/header/headerAccountUserInfo.tsx

@@ -39,7 +39,7 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
             )}
             {companyName && <T fontSize={isApplication ? '12px' : 'inherit'}>{companyName}</T>}
             {role && (
-              <T color="sandstone.55" fontSize={isApplication ? '12px' : 'inherit'}>
+              <T color="sandstone.45" fontSize={isApplication ? '12px' : 'inherit'}>
                 {role}
               </T>
             )}

package/src/header/headerMobileToggle.tsx

@@ -22,6 +22,7 @@ export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
       onClick={() => setIsMobileOpen(s => !s)}
       p="3px"
       ref={mergeRefs(ref, mobileToggleRef)}
+      title="mobileToggleButton"
       {...styles.mobileToggle}
       {...rest}
     />

package/src/header/headerNotifications.tsx

@@ -36,9 +36,8 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
       className={cs('vui-headerNotifications', className)}
       href={url ?? links.notifications}
       minW={0}
-      ml={1}
       position="relative"
-      px="7px"
+      px="9px"
       ref={ref}
       size="lg"
       title="Notifications"

package/src/header/headerServices.tsx

@@ -38,6 +38,7 @@ export function HeaderServices(props: HeaderServicesProps) {
           <Menu.Button
             className="vui-services-trigger"
             icon="falTh"
+            size="lg"
             title="My services"
             {...styles.button}
             {...buttonProps}

package/src/input/autoCompletePopover.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { styled } from '../core'
+import { List } from '../list'
+import { Popover } from '../popover'
+import { cs } from '../utils'
+import { AutoCompletePopoverProps } from './input.types'
+
+const InputContainer = styled.divBox`
+  width: 100%;
+`
+
+const options = {
+  aria: {
+    expanded: false
+  }
+}
+
+/** Wrapper for the autocomplete popover. */
+export const AutoCompletePopover = ({
+  autoCompleteOptions,
+  autoCompleteMaxHeight,
+  children,
+  filterAutoCompleteOptions,
+  onAutoCompleteSelect
+}: AutoCompletePopoverProps) => {
+  if (!autoCompleteOptions?.length) return children
+
+  return (
+    <Popover options={options} placement="bottom-start">
+      <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>
+        {children}
+      </Popover.Trigger>
+      {!!autoCompleteOptions && (
+        <Popover.Content>
+          <List maxH={autoCompleteMaxHeight}>
+            {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (
+              <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
+                {i}
+              </List.Item>
+            ))}
+          </List>
+        </Popover.Content>
+      )}
+    </Popover>
+  )
+}
+
+export default React.memo(AutoCompletePopover)

package/src/input/helpText.tsx

@@ -8,7 +8,7 @@ import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const { className, children, isError, ...rest } = props
   const inputProps = useInputContext()

package/src/input/input.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import { List } from '../list'
-import { Popover } from '../popover'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
+import AutoCompletePopover from './autoCompletePopover'
 import { inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
@@ -13,10 +12,6 @@ import { InputProps } from './input.types'
 import InputIcon from './inputIcon'
 import InputInput from './inputInput'
 
-export const InputContainer = styled.divBox`
-  width: 100%;
-`
-
 export const InputBase = styled.divBox`
   align-items: center;
   background-color: white;
@@ -118,67 +113,59 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   return (
     <InputProvider value={context}>
-      <Popover placement="bottom-start">
-        <Popover.Trigger as={InputContainer}>
-          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-            {itemLeft}
-            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-            {children ?? input ?? (
-              <InputInput
-                ref={inputRef}
-                {...{
-                  autoFocus,
-                  defaultValue,
-                  disabled,
-                  id,
-                  max,
-                  maxLength,
-                  min,
-                  name,
-                  onBlur,
-                  onChange,
-                  onFocus,
-                  pattern,
-                  placeholder,
-                  readOnly,
-                  required,
-                  step,
-                  type
-                }}
-                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
-                value={valueInternal}
-                {...inputProps}
-              />
-            )}
-            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-            {itemRight}
-            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-            {showCount && (
-              <T
-                className="vui-inputCount"
-                color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
-                position="absolute"
-                right={0}
-                size="sm"
-                top="calc(100% + 1px)"
-              >
-                {count} {maxLength ? `/ ${maxLength}` : null}
-              </T>
-            )}
-          </InputBase>
-        </Popover.Trigger>
-        {!!autoCompleteOptions && (
-          <Popover.Content>
-            <List maxH={autoCompleteMaxHeight}>
-              {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (
-                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
-                  {i}
-                </List.Item>
-              ))}
-            </List>
-          </Popover.Content>
-        )}
-      </Popover>
+      <AutoCompletePopover
+        autoCompleteMaxHeight={autoCompleteMaxHeight}
+        autoCompleteOptions={autoCompleteOptions}
+        filterAutoCompleteOptions={filterAutoCompleteOptions}
+        onAutoCompleteSelect={onAutoCompleteSelect}
+      >
+        <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+          {itemLeft}
+          {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+          {children ?? input ?? (
+            <InputInput
+              ref={inputRef}
+              {...{
+                autoFocus,
+                defaultValue,
+                disabled,
+                id,
+                max,
+                maxLength,
+                min,
+                name,
+                onBlur,
+                onChange,
+                onFocus,
+                pattern,
+                placeholder,
+                readOnly,
+                required,
+                step,
+                type
+              }}
+              autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
+              value={valueInternal}
+              {...inputProps}
+            />
+          )}
+          {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+          {itemRight}
+          {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+          {showCount && (
+            <T
+              className="vui-inputCount"
+              color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+              position="absolute"
+              right={0}
+              size="sm"
+              top="calc(100% + 1px)"
+            >
+              {count} {maxLength ? `/ ${maxLength}` : null}
+            </T>
+          )}
+        </InputBase>
+      </AutoCompletePopover>
       {!!helpText && <HelpText>{helpText}</HelpText>}
       {!!errorText && <HelpText isError>{errorText}</HelpText>}
     </InputProvider>

package/src/input/input.types.ts

@@ -80,6 +80,18 @@ export type InputProps = SystemProps &
     value?: number | string
   }
 
+export type AutoCompletePopoverProps = {
+  /** List of autocomplete options. */
+  autoCompleteOptions?: string[]
+  /** Maximum autoComplete container height in px. */
+  autoCompleteMaxHeight?: number
+  /** The input children. */
+  children: JSX.Element
+  /** Filter helper function. */
+  filterAutoCompleteOptions: (value: string, index: number, array: string[]) => boolean
+  onAutoCompleteSelect: (value: string) => void
+}
+
 export type HelpTextProps = PProps & {
   isError?: boolean
 }

package/src/list/list.types.ts

@@ -16,6 +16,8 @@ export type ListProps = SystemProps &
     isInteractive?: boolean
     /** Socket displaying a list of items. */
     items?: PropsOf<'li', ListItemProps>[] | JSX.Element
+    /** Socket for the variant. The 'blue' variant is internal, used in the header. */
+    variant?: 'default' | 'ordered' | 'unordered' | 'blue'
   }
 
 export type ListItemLinkProps = PropsOf<'a', LinkProps> | object

package/src/list/theme.ts

@@ -83,7 +83,27 @@ const sizes = {
 
 const variants = {
   default: {},
-  // variant *blue* was introduced for the *header* component
+  ordered: {
+    container: {
+      as: 'ol',
+      listStyleType: 'decimal',
+      pl: 3
+    },
+    item: {
+      display: 'list-item'
+    }
+  },
+  unordered: {
+    container: {
+      as: 'ul',
+      listStyleType: 'disc',
+      pl: 3
+    },
+    item: {
+      display: 'list-item'
+    }
+  },
+  // internal; variant *blue* was introduced for the *header* component
   blue: {
     heading: {
       color: 'darkBlue.main'

package/src/popover/popover.tsx

@@ -12,10 +12,9 @@ import usePopover from './usePopover'
  * By default, renders provided content only when popover is opened (lazy).
  */
 export default function Popover(props: PopoverProps) {
-  const { children, isLazy = true, ...rest } = props
-  const popoverProps = usePopover(rest)
+  const { children, isLazy = true, options, ...rest } = props
+  const popoverProps = usePopover({ options, ...rest })
   const { close, isOpen, open } = popoverProps
-
   const context = filterUndefined({ isLazy, ...popoverProps })
 
   return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>

package/src/popover/popover.types.ts

@@ -1,3 +1,5 @@
+import { TippyProps } from '@tippyjs/react'
+
 import { BoxProps } from '../box'
 import { SystemProps } from '../system'
 import { RenderProps } from '../utils'
@@ -11,6 +13,8 @@ export type PopoverProps = UsePopoverProps & {
   children?: PopoverRenderProps
   /** Mounts provided content only when popover is opened for performance. @default true */
   isLazy?: boolean
+  /** Object with any Tippy props. */
+  options?: Partial<TippyProps>
 }
 
 export type PopoverRenderProps = RenderProps<{

package/src/popover/usePopover.ts

@@ -40,6 +40,7 @@ export default function usePopover(props: UsePopoverProps = {}) {
 
   const tippyOptions: Partial<TippyProps> = useMemo(() => {
     const {
+      aria,
       offset: optionsOffset,
       onHidden,
       onHide,
@@ -50,6 +51,7 @@ export default function usePopover(props: UsePopoverProps = {}) {
     } = options ?? {}
 
     return {
+      aria,
       arrow: false,
       duration: [200, 150],
       hideOnClick: !isControlled ? closeOnBlur : false,

package/src/progressCircular/progressCircular.tsx

@@ -50,6 +50,7 @@ export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) =
         aria-valuemin={0}
         aria-valuenow={progress}
         height={styles.width}
+        role="meter"
         version="1.1"
         viewBox="0 0 100 100"
         width={styles.width}