@dnanpm/styleguide 3.9.9 → 3.9.11

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.js

@@ -20,8 +20,8 @@ const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
     const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
     const menuItemLink = menuItem.urls[lang] || '';
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1rem", color: theme.color.default.pink })),
+    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1.25rem", color: theme.color.default.pink })),
         React__default.createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.js

@@ -1,18 +1,18 @@
 import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
 import React__default, { useContext, useRef, useMemo } from 'react';
-import { useSpring, animated } from 'react-spring';
+import { animated, useSpring } from 'react-spring';
 import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { menuLevelsAmount, navMaxHeight, mobileNavMaxWidth, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
 import MobileMenuContext from '../context/MobileMenuContext.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
 
-const MobileMenuWrapper = styled.div `
+const MobileMenuWrapper = styled(animated.div) `
     width: ${100 * menuLevelsAmount}%;
+    display: flex;
     button {
         border: 0;
         background: transparent;
@@ -28,16 +28,15 @@ const MobileMenuContainer = styled.div `
     overflow: hidden;
     overflow-y: auto;
     transition: max-height 0.2s ease-in-out;
-    background: ${theme.color.background.white.default};
+    background-color: ${theme.color.background.sand.default};
     max-height: ${mobileMenu};
     height: ${mobileMenu};
     max-width: ${mobileNavMaxWidth};
     ${MenuList} {
         display: block;
-        float: left;
         width: ${100 / menuLevelsAmount}%;
         position: relative;
-        min-height: ${mobileMenu};
+        border-top: 4px solid ${theme.color.background.white.default};
         &:first-of-type {
             background: ${theme.color.background.white.default};
             > ${MenuItem} > ${MenuLink} {
@@ -50,17 +49,12 @@ const MobileMenuContainer = styled.div `
         }
         ${MenuItem} {
             border-bottom: 1px solid ${theme.color.line.L04};
-            &:last-of-type {
-                margin-bottom: ${headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
-            }
         }
+        margin-bottom: ${headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
     }
     ${MenuLink}, ${MenuLinkWithChildren} {
         line-height: ${theme.lineHeight.default};
-        padding: ${getMultipliedSize(theme.base.baseHeight, 1.75)}
-            ${getMultipliedSize(theme.base.baseWidth, 1.5)}
-            ${getMultipliedSize(theme.base.baseHeight, 1.75)}
-            ${getMultipliedSize(theme.base.baseWidth, 2)};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
         font-size: ${theme.fontSize.default};
         display: flex;
         flex-grow: 1;
@@ -77,7 +71,7 @@ const MobileMenuContainer = styled.div `
         color: ${theme.color.text.pink};
         justify-content: flex-start;
         gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-        height: auto;
+        height: ${getMultipliedSize(theme.base.baseHeight, 6)};
     }
     ${FeaturedBlock} {
         border-bottom: 1px solid ${theme.color.line.L04};
@@ -89,7 +83,6 @@ const MobileMenuContainer = styled.div `
         }
     }
 `;
-const useTabNavigationDisabled = (scrollPosition, indexLevel) => scrollPosition !== indexLevel;
 const MenuItemBackLink = ({ currentLevel }) => {
     const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
     const levels = {
@@ -104,17 +97,16 @@ const MenuItemBackLink = ({ currentLevel }) => {
     const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
     const backLink = getBackLink(menuElements, currentLevel - 1);
     return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default.createElement(Icon, { icon: ChevronLeft, size: "1rem" }),
+        React__default.createElement(MenuLinkBackLink, { as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default.createElement(ChevronLeft, { size: "1.5rem" }),
             backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    var _a;
     const { handleNavMenuClick, menuLevel, lang, currentUrl } = useContext(NavContext);
     const { mobileMenuRef } = useContext(MobileMenuContext);
-    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
+    const hasChildren = menuItem.pages.length;
     const indexLevel = currentLevel - 1;
-    const tabNavigationDisabled = useTabNavigationDisabled(menuLevel.scrollPosition, indexLevel);
+    const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
     const menuUrl = menuItem.urls[lang] || '';
     const mobileMenuClick = (element) => (e) => {
         var _a, _b;
@@ -126,11 +118,11 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
-    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, role: "presentation", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) }, children));
+    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) }, children));
     if (hasChildren && currentLevel < 3) {
-        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
+        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
             menuItem.titles[lang],
-            React__default.createElement(Icon, { icon: ChevronRight, color: theme.color.default.pink })));
+            React__default.createElement(ChevronRight, { color: theme.color.default.pink })));
     }
     return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
 };
@@ -138,7 +130,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
     const indexLevel = currentLevel - 1;
     const { collapseSize, menuLevel: { scrollPosition }, } = useContext(NavContext);
-    const tabNavigationDisabled = useTabNavigationDisabled(scrollPosition, indexLevel);
+    const tabNavigationDisabled = scrollPosition !== indexLevel;
     if (!menuItem.pages.length) {
         return null;
     }
@@ -178,9 +170,8 @@ const RenderMobileMenu = () => {
     }
     return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
         React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
-            React__default.createElement(MobileMenuWrapper, null,
-                React__default.createElement(animated.div, { style: slidingMenuAnimation },
-                    React__default.createElement(NavigationMenuMobile, null))))));
+            React__default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
+                React__default.createElement(NavigationMenuMobile, null)))));
 };
 
 export { RenderMobileMenu as default };

package/build/es/components/MainHeaderNavigation/context/MobileMenuContext.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-interface MobileMenuContextProps {
+export interface MobileMenuContextProps {
     mobileMenuRef: RefObject<HTMLElement> | null;
 }
 declare const MobileMenuContext: import("react").Context<MobileMenuContextProps>;

package/build/es/components/MainHeaderNavigation/globalNavStyles.js

@@ -27,14 +27,9 @@ const MobileMenuButton = styled.button `
     border: 0;
     padding: 0;
     background: transparent;
-    svg {
-        color: ${theme.color.text.black};
-        fill: ${theme.color.text.black};
-    }
     &:focus,
     &:active {
         svg {
-            color: ${theme.color.text.pink};
             fill: ${theme.color.text.pink};
         }
     }
@@ -45,6 +40,9 @@ const MobileMenuButton = styled.button `
             0px 0px 0px 4px ${theme.color.focus.dark};
         color: ${theme.color.text.black};
     }
+    svg {
+        fill: ${theme.color.text.black};
+    }
 `;
 const HeaderIconContainer = styled.div `
     display: flex;
@@ -74,9 +72,6 @@ const MenuItem = styled.li `
         padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
             ${getMultipliedSize(theme.base.baseWidth, 3)};
     }
-    > button {
-        background-color: ${theme.color.background.white};
-    }
     > button,
     > a {
         color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
@@ -97,14 +92,6 @@ const MenuLink = styled.a `
     overflow: visible;
     text-decoration: none;
     color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
-    &:hover,
-    &:focus {
-        color: ${theme.color.hover.pink};
-        text-underline-offset: 0.2em;
-        -webkit-text-decoration-skip: ink;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: from-font;
-    }
 `;
 const MenuLinkWithChildren = styled.button `
     line-height: ${theme.lineHeight.xs};
@@ -123,7 +110,7 @@ const MenuLinkWithChildren = styled.button `
         cursor: pointer;
         outline: none;
     }
-    > span > svg {
+    > svg {
             transform: rotate( ${p => (p.isOpen ? '270deg' : '90deg')});
             transition: transform .2s ease-in-out;
         }
@@ -133,8 +120,6 @@ const MenuLinkWithChildren = styled.button `
 const MenuList = styled.ul `
     display: flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
-    overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
-    list-style: none;
     margin: 0;
     padding: 0;
     background-color: ${theme.color.background.white};

package/build/es/components/Notification/Notification.d.ts

@@ -16,13 +16,17 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: ReactNode;
+    children: ReactNode;
     /**
      * Allows to show and hide close button
      *
      * @default false
      */
     closeButton?: boolean;
+    /**
+     * Label for the close button
+     */
+    closeButtonLabel?: string;
     /**
      * On close button click callback
      */
@@ -41,8 +45,18 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * If true, the component is treated as static (non-interactive),
+     * and uses `aria-label` instead of `role="alert"`.
+     *
+     * @default false
+     */
+    isStatic?: boolean;
+    /**
+     * Accessible label for the notification. Required when `isStatic` is true
+     * and no type-based default label is desired.
+     */
+    ariaLabel?: string;
 }
-/** @visibleName Notification */
-declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
-/** @component */
+declare const Notification: ({ type, "data-testid": dataTestId, isStatic, className, children, closeButton, closeButtonLabel, onClickCloseButton, dismissed, ariaLabel, }: Props) => React.JSX.Element | null;
 export default Notification;

package/build/es/components/Notification/Notification.js

@@ -1,7 +1,6 @@
-import { __rest } from 'tslib';
 import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import styled__default, { css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
@@ -12,7 +11,7 @@ const iconsMap = {
     warning: Warning,
     error: Error,
 };
-const NotificationWrapper = styled__default.div `
+const sharedStyles = css `
     display: flex;
     gap: 1rem;
     line-height: ${theme.lineHeight.default};
@@ -21,6 +20,14 @@ const NotificationWrapper = styled__default.div `
     border-radius: ${theme.radius.s};
     border: 2px solid ${({ $type }) => theme.color.notification[$type]};
 `;
+const NotificationWrapper = styled__default.div `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.color.notification[$type]};
+`;
+const StaticWrapper = styled__default.section `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.color.notification[$type]};
+`;
 const IconWrapper = styled__default.div `
     display: flex;
     align-items: center;
@@ -35,16 +42,24 @@ const ContentWrapper = styled__default.span `
 const ButtonCloseStyled = styled__default(ButtonClose) `
     position: static;
     margin: auto 0.5rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
+    }
 `;
-/** @visibleName Notification */
-const Notification = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return !props.dismissed ? (React__default.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
+const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = false, className, children, closeButton = false, closeButtonLabel, onClickCloseButton, dismissed = false, ariaLabel, }) => {
+    if (dismissed)
+        return null;
+    const IconToUse = iconsMap[type];
+    const renderContent = () => (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(IconWrapper, { "$type": type },
-            React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.default.white })),
-        React__default.createElement(ContentWrapper, null, props.children),
-        props.closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
-            React__default.createElement(Icon, { icon: Close, color: "currentColor" }))))) : null;
+            React__default.createElement(Icon, { icon: IconToUse, size: "2rem", color: theme.color.default.white, "aria-hidden": true })),
+        React__default.createElement(ContentWrapper, null, children),
+        closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
+            React__default.createElement(Icon, { icon: Close, color: "currentColor", "aria-hidden": true })))));
+    return isStatic ? (React__default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel }, renderContent())) : (React__default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
 };
 
 export { Notification as default };

package/build/es/components/NotificationBadge/NotificationBadge.d.ts

@@ -35,8 +35,12 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label for the badge (visually hidden)
+     */
+    visuallyHiddenText?: string;
 }
 /** @visibleName Notification Badge */
-declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const NotificationBadge: ({ "data-testid": dataTestId, visuallyHiddenText, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default NotificationBadge;

package/build/es/components/NotificationBadge/NotificationBadge.js

@@ -18,10 +18,24 @@ const NotificationBadgeElement = styled.div `
     background-color: ${theme.color.notification.error};
     border-radius: ${theme.radius.circle};
 `;
+const VisuallyHidden = styled.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+`;
 /** @visibleName Notification Badge */
 const NotificationBadge = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
+    var { 'data-testid': dataTestId, visuallyHiddenText } = _a, props = __rest(_a, ['data-testid', "visuallyHiddenText"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        visuallyHiddenText && React__default.createElement(VisuallyHidden, null, visuallyHiddenText),
+        React__default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId, "aria-hidden": "true" }, props.children)));
 };
 
 export { NotificationBadge as default };

package/build/es/components/Pill/Pill.d.ts

@@ -4,7 +4,11 @@ type PillType = 'none' | 'checkbox' | 'radio';
 type Position = 'auto' | 'left' | 'right' | 'middle';
 interface Props {
     /**
-     * Unique ID for the input element
+     * Unique ID
+     *
+     * This ID is used to associate the label with the input for
+     * "checkbox" and "radio" types. For "none" types, the ID
+     * is applied directly to the button element.
      */
     id: string;
     /**
@@ -14,7 +18,7 @@ interface Props {
     /**
      * Allows to change the functionality of component while retaining style
      *
-     * @param {PillType} none No functionality
+     * @param {PillType} none Acts as a button
      * @param {PillType} checkbox Acts as a checkbox input type
      * @param {PillType} radio Acts as a radiobutton input type
      *
@@ -72,7 +76,16 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * A styled version that is designed to look like the default Button component
+     */
+    isDefaultButtonStyle?: boolean;
+    /**
+     * A screen reader label that describes the purpose of the Pill component when the default text is not sufficiently descriptive.
+     */
+    ariaLabel?: string;
 }
 declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Pill;
+export { PillType, Position };

package/build/es/components/Pill/Pill.js

@@ -3,36 +3,73 @@ import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import { shade } from '../Button/Button.js';
 
-const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
+const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
     const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const colorValue = isChecked
+    const bgColor = isChecked
         ? theme.color.background.plum.default
         : theme.color.background.orange.E02;
-    // Only Pill component specific colors to be used on user interaction styles
-    const hoverValue = isChecked ? '#441632' : '#FFB557';
-    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
-    return backgroundColor + hoverBackgroundColor;
+    const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
+    const textColor = isChecked ? theme.color.default.white : theme.color.default.black;
+    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+    return `
+      font-size: ${theme.fontSize.s};
+      font-weight: ${theme.fontWeight.medium};
+      padding: 2px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid transparent;
+      ${!isDisabled ? `&:hover { background-color: ${hoverBgColor}; }` : ''}
+    `;
+};
+const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
+    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+    const disabledBgColor = isDisabled ? theme.color.default.plum : shade.plum.lighter;
+    const bgColor = isChecked ? disabledBgColor : 'transparent';
+    const textColor = isChecked ? theme.color.default.white : theme.color.default.plum;
+    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+    const disabledBorderColor = isDisabled ? 'transparent' : shade.plum.lighter;
+    const borderColor = isChecked
+        ? disabledBorderColor
+        : `${theme.color.default.plum}${alphaValue}`;
+    return `
+      font-size: ${theme.fontSize.default};
+      font-weight: ${theme.fontWeight.bold};
+      padding: 6px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid ${borderColor};
+      ${!isDisabled
+        ? `
+        &:hover { 
+            border: 2px solid ${hoverColor};
+            color: ${theme.color.default.white}; 
+            background-color: ${hoverColor}; 
+        }`
+        : ''}
+    `;
 };
 const Label = styled__default.label `
+    all: unset;
+    position: relative;
     display: inline-block;
     border-radius: ${theme.radius.pill};
-    font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.medium};
-    color: ${({ isChecked }) => isChecked ? theme.color.default.white : theme.color.default.black};
-    border: 2px solid transparent;
-    padding: 2px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
     text-align: center;
+    transition: all 0.2s ease-in-out;
+
+    ${({ isChecked, isDisabled, isDefaultButtonStyle }) => isDefaultButtonStyle
+    ? getDefaultButtonStyles({ isChecked, isDisabled })
+    : getStandardPillStyles({ isChecked, isDisabled })}
 
-    ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
-    ${({ isChecked, isDisabled }) => getBackgroundColor({ isChecked, isDisabled })}
+    ${({ isDisabled }) => `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`}
 
     &:focus-within, *:focus > & {
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-        border: 2px solid ${theme.color.focus.light};
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
     }
 
     ${({ position }) => (position === 'right' || position === 'middle') &&
@@ -64,7 +101,10 @@ const Input = styled__default.input `
     border: 0 none;
     margin: 0;
     width: 0;
-    height: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
 
     &:focus-visible {
         outline: 0 none;
@@ -72,9 +112,10 @@ const Input = styled__default.input `
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+    const isDefaultType = type === 'none';
+    return (React__default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId, isDefaultButtonStyle: props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined },
         props.children,
-        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+        !isDefaultType && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }))));
 };
 
 export { Pill as default };

package/build/es/components/PriorityNavigation/PriorityNavigation.d.ts

@@ -49,10 +49,22 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a custom aria-label for mobile dropdown button
+     */
+    mobileDropdownAriaLabel?: string;
+    /**
+     * Allows to pass a custom aria-label for current page
+     */
+    currentPageAriaLabel?: string;
+    /**
+     * Allows to pass a custom aria-label for open more subpages button
+     */
+    openMoreSubpagesAriaLabel?: string;
 }
 /**
  * @visibleName Priority Navigation
  */
-declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, mobileDropdownAriaLabel, currentPageAriaLabel, openMoreSubpagesAriaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default PriorityNavigation;