@redocly/theme 0.69.0-next.4 → 0.69.0-next.6

package/src/components/Dropdown/Dropdown.tsx

@@ -10,7 +10,8 @@ import React, {
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 
-import type { CSSProperties, PropsWithChildren, ReactElement } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
+import type { RenderableChildren } from '@redocly/theme/core/types';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -26,8 +27,14 @@ interface TriggerProps {
   [key: string]: unknown;
 }
 
-export type DropdownProps = PropsWithChildren<{
+type DropdownMenuContext = {
+  close: () => void;
+  isOpen: boolean;
+};
+
+export type DropdownProps = {
   trigger: React.ReactNode;
+  children: RenderableChildren<DropdownMenuContext>;
   triggerEvent?: 'click' | 'hover';
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
@@ -43,7 +50,7 @@ export type DropdownProps = PropsWithChildren<{
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
   onOpen?: () => void;
-}>;
+};
 
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -78,6 +85,9 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     };
 
     const handleClose = () => {
+      if (!isOpen) {
+        return;
+      }
       setIsOpen(false);
       onClose?.();
     };
@@ -137,10 +147,14 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     useOutsideClick(portalled ? [wrapperRef, menuRef] : wrapperRef, handleClose);
 
+    const menuContent =
+      typeof children === 'function' ? children({ close: handleClose, isOpen }) : children;
+
     const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
 
     const dropdownTrigger = cloneElement(triggerChild, {
       onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      'aria-expanded': isOpen,
       icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
       ...(withArrow ? { iconPosition: 'right' } : {}),
       ...triggerChild.props,
@@ -157,7 +171,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         style={portalled ? menuStyle : undefined}
         onClick={closeOnClick ? handleChildClick : undefined}
       >
-        {children}
+        {menuContent}
       </ChildrenWrapper>
     );
 
@@ -198,6 +212,13 @@ const DropdownWrapper = styled.div`
   position: relative;
 
   text-decoration: none;
+
+  /* The trigger keeps its hovered appearance while the menu is open. */
+  > .button[aria-expanded='true'] {
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-color-hover);
+    border-color: var(--button-border-color-hover);
+  }
 `;
 
 const ChildrenWrapper = styled.div<{

package/src/components/Dropdown/DropdownMenuItemContent.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+export type DropdownMenuItemContentProps = {
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+  description?: React.ReactNode;
+  className?: string;
+};
+
+export function DropdownMenuItemContent(props: DropdownMenuItemContentProps): JSX.Element {
+  const { title, icon, description, className } = props;
+
+  return (
+    <MenuItemContentWrapper
+      data-component-name="Dropdown/DropdownMenuItemContent"
+      className={className}
+    >
+      {icon ? <IconWrapper>{icon}</IconWrapper> : null}
+      <TextWrapper>
+        <TitleWrapper>{title}</TitleWrapper>
+        {description ? <DescriptionWrapper>{description}</DescriptionWrapper> : null}
+      </TextWrapper>
+    </MenuItemContentWrapper>
+  );
+}
+
+const MenuItemContentWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dropdown-menu-item-content-gap);
+  padding: var(--dropdown-menu-item-content-padding);
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--dropdown-menu-item-content-icon-size);
+  height: var(--dropdown-menu-item-content-icon-size);
+  color: var(--dropdown-menu-item-content-icon-color);
+  border: var(--dropdown-menu-item-content-icon-border);
+  border-radius: var(--dropdown-menu-item-content-icon-border-radius);
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--dropdown-menu-item-content-text-gap);
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-menu-item-content-title-icon-gap);
+  font-weight: var(--dropdown-menu-item-content-title-font-weight);
+  font-size: var(--dropdown-menu-item-content-title-font-size);
+  line-height: var(--dropdown-menu-item-content-title-line-height);
+  color: var(--dropdown-menu-item-content-title-color);
+`;
+
+const DescriptionWrapper = styled.div`
+  font-weight: var(--dropdown-menu-item-content-description-font-weight);
+  font-size: var(--dropdown-menu-item-content-description-font-size);
+  line-height: var(--dropdown-menu-item-content-description-line-height);
+  color: var(--dropdown-menu-item-content-description-color);
+`;

package/src/components/Dropdown/variables.ts

@@ -17,7 +17,7 @@ export const dropdown = css`
   --dropdown-menu-max-width: 424px;
   --dropdown-menu-max-height: 300px;
   --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-menu-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
   --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
   --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
@@ -27,7 +27,7 @@ export const dropdown = css`
   --dropdown-menu-item-padding-vertical: 5px; // @presenter Spacing
   --dropdown-menu-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
   --dropdown-menu-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-menu-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-menu-item-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --dropdown-menu-item-bg-color: transparent;
   --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
   --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
@@ -45,5 +45,22 @@ export const dropdown = css`
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
   --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
+
+  --dropdown-menu-item-content-gap: var(--spacing-sm); // @presenter Spacing
+  --dropdown-menu-item-content-padding: var(--spacing-xxs) 0; // @presenter Spacing
+  --dropdown-menu-item-content-icon-size: 32px;
+  --dropdown-menu-item-content-icon-color: var(--icon-color-secondary); // @presenter Color
+  --dropdown-menu-item-content-icon-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --dropdown-menu-item-content-icon-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-menu-item-content-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-menu-item-content-title-icon-gap: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-menu-item-content-title-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-menu-item-content-title-font-size: var(--font-size-base); // @presenter FontSize
+  --dropdown-menu-item-content-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-menu-item-content-title-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-item-content-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-menu-item-content-description-font-size: var(--font-size-sm); // @presenter FontSize
+  --dropdown-menu-item-content-description-line-height: var(--line-height-sm); // @presenter LineHeight
+  --dropdown-menu-item-content-description-color: var(--text-color-description); // @presenter Color
   // @tokens End
 `;

package/src/components/Feedback/Mood.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -130,16 +129,19 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     return reasonsSettings[score as MOOD_STATES]?.component;
   };
 
+  const hasComment = !commentSettings?.hide;
+  const hasOptionalEmail = !optionalEmailSettings?.hide && !userData?.isAuthenticated;
+
   const displayReasons = checkIfShouldDisplayReasons(score);
-  const displayComment = !!(score && !commentSettings?.hide);
+  const displayComment = !!score && hasComment;
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && hasOptionalEmail;
 
-  const onSubmitMoodForm = () => {
+  const submitMood = (moodScore: string) => {
     const trimmedComment = comment?.trim() || undefined;
     const trimmedEmail = email?.trim() || undefined;
     onSubmit({
-      score: remapScore(score),
+      score: remapScore(moodScore),
       comment: trimmedComment,
       reasons,
       email: trimmedEmail,
@@ -147,6 +149,18 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     setIsSubmitted(true);
   };
 
+  const onSubmitMoodForm = () => {
+    submitMood(score);
+  };
+
+  const onScoreChange = (newScore: string) => {
+    setScore(newScore);
+
+    if (newScore && !checkIfShouldDisplayReasons(newScore) && !hasComment && !hasOptionalEmail) {
+      submitMood(newScore);
+    }
+  };
+
   const onCancelMoodForm = () => {
     setScore('');
     setComment('');
@@ -154,13 +168,6 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     setEmail(undefined);
   };
 
-  useEffect(() => {
-    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-      onSubmitMoodForm();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
-
   if (isSubmitted) {
     return (
       <MoodWrapper data-component-name="Feedback/Mood">
@@ -193,7 +200,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
               tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
               onClick={() => {
-                setScore(MOOD_STATES.DISSATISFIED);
+                onScoreChange(MOOD_STATES.DISSATISFIED);
               }}
               icon={<FaceDissatisfiedIcon />}
             />
@@ -203,7 +210,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               variant={score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary'}
               size="medium"
               onClick={() => {
-                setScore(MOOD_STATES.NEUTRAL);
+                onScoreChange(MOOD_STATES.NEUTRAL);
               }}
               icon={<FaceNeutralIcon />}
             />
@@ -213,7 +220,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
               size="medium"
               onClick={() => {
-                setScore(MOOD_STATES.SATISFIED);
+                onScoreChange(MOOD_STATES.SATISFIED);
               }}
               icon={<FaceSatisfiedIcon />}
             />

package/src/components/Feedback/Rating.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -59,16 +58,20 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
+  const hasComment = !commentSettings?.hide;
+  const hasOptionalEmail = !optionalEmailSettings?.hide && !userData?.isAuthenticated;
+
   const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setEmail(value || undefined);
   };
 
-  const onSubmitRatingForm = () => {
+  const submitRating = (ratingScore: number) => {
     const trimmedComment = comment?.trim() || undefined;
     const trimmedEmail = email?.trim() || undefined;
     onSubmit({
-      score,
+      score: ratingScore,
       comment: trimmedComment,
       reasons,
       max: FEEDBACK_MAX_RATING,
@@ -77,6 +80,18 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     setIsSubmitted(true);
   };
 
+  const onSubmitRatingForm = () => {
+    submitRating(score);
+  };
+
+  const onScoreChange = (newScore: number) => {
+    setScore(newScore);
+
+    if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
+      submitRating(newScore);
+    }
+  };
+
   const onCancelRatingForm = () => {
     setScore(0);
     setComment('');
@@ -84,17 +99,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     setEmail(undefined);
   };
 
-  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
-  const displayComment = !!(score && !commentSettings?.hide);
+  const displayReasons = !!score && hasReasons;
+  const displayComment = !!score && hasComment;
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
-
-  useEffect(() => {
-    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-      onSubmitRatingForm();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
+  const displayFeedbackEmail = !!score && hasOptionalEmail;
 
   if (isSubmitted) {
     return (
@@ -122,7 +130,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
           </Label>
 
           <StyledMandatoryFieldContainer>
-            <Stars max={FEEDBACK_MAX_RATING} onChange={setScore} value={score} />
+            <Stars max={FEEDBACK_MAX_RATING} onChange={onScoreChange} value={score} />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>
         {(displayReasons || displayComment) && (

package/src/components/Feedback/Scale.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -68,6 +67,42 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     setEmail(value || undefined);
   };
 
+  const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
+  const hasComment = !commentSettings?.hide;
+  const hasOptionalEmail = !optionalEmailSettings?.hide && !userData?.isAuthenticated;
+
+  const submitScale = (scaleScore: number) => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
+    onSubmit({
+      score: scaleScore,
+      comment: trimmedComment,
+      reasons,
+      max: MAX_SCALE,
+      email: trimmedEmail,
+    });
+    setIsSubmitted(true);
+  };
+
+  const onSubmitScaleForm = () => {
+    submitScale(score);
+  };
+
+  const onScoreChange = (newScore: number) => {
+    setScore(newScore);
+
+    if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
+      submitScale(newScore);
+    }
+  };
+
+  const handleCancel = () => {
+    setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
+  };
+
   const scaleOptions = [];
 
   for (let i = 1; i <= MAX_SCALE; i++) {
@@ -76,7 +111,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
         id={`scale-option-${i}`}
         key={`scale-option-${i}`}
         type="button"
-        onClick={() => setScore(i)}
+        onClick={() => onScoreChange(i)}
         className={`${score === i ? 'active' : ''}`}
       >
         {i}
@@ -84,37 +119,10 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     );
   }
 
-  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
-  const displayComment = !!(score && !commentSettings?.hide);
+  const displayReasons = !!score && hasReasons;
+  const displayComment = !!score && hasComment;
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
-  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
-
-  const handleCancel = () => {
-    setScore(0);
-    setComment('');
-    setReasons([]);
-    setEmail(undefined);
-  };
-
-  const onSubmitScaleForm = () => {
-    const trimmedComment = comment?.trim() || undefined;
-    const trimmedEmail = email?.trim() || undefined;
-    onSubmit({
-      score,
-      comment: trimmedComment,
-      reasons,
-      max: MAX_SCALE,
-      email: trimmedEmail,
-    });
-    setIsSubmitted(true);
-  };
-
-  useEffect(() => {
-    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-      onSubmitScaleForm();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
+  const displayFeedbackEmail = !!score && hasOptionalEmail;
 
   if (isSubmitted) {
     return (

package/src/components/Feedback/Sentiment.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -86,10 +85,13 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     return !scoreSpecificReasonsSettings?.hide;
   };
 
+  const hasComment = !commentSettings?.hide;
+  const hasOptionalEmail = !optionalEmailSettings?.hide && !userData?.isAuthenticated;
+
   const displayReasons = checkIfShouldDisplayReasons(score);
-  const displayComment = !!(score && !commentSettings?.hide);
+  const displayComment = !!score && hasComment;
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && hasOptionalEmail;
 
   const commentLabel =
     score === 1
@@ -117,11 +119,11 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     return scoreSpecificReasonSettings?.component;
   };
 
-  const onSubmitSentimentForm = () => {
+  const submitSentiment = (sentimentScore: number) => {
     const trimmedComment = comment?.trim() || undefined;
     const trimmedEmail = email?.trim() || undefined;
     onSubmit({
-      score,
+      score: sentimentScore,
       comment: trimmedComment,
       reasons,
       email: trimmedEmail,
@@ -129,6 +131,18 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     setIsSubmitted(true);
   };
 
+  const onSubmitSentimentForm = () => {
+    submitSentiment(score);
+  };
+
+  const onScoreChange = (newScore: number) => {
+    setScore(newScore);
+
+    if (newScore && !checkIfShouldDisplayReasons(newScore) && !hasComment && !hasOptionalEmail) {
+      submitSentiment(newScore);
+    }
+  };
+
   const onCancelSentimentForm = () => {
     setScore(0);
     setComment('');
@@ -136,13 +150,6 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     setEmail(undefined);
   };
 
-  useEffect(() => {
-    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-      onSubmitSentimentForm();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
-
   if (isSubmitted) {
     return (
       <SentimentWrapper data-component-name="Feedback/Sentiment">
@@ -174,7 +181,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
               size="medium"
               variant={score === 1 ? 'primary' : 'secondary'}
               onClick={() => {
-                setScore(1);
+                onScoreChange(1);
               }}
               aria-label={translate('feedback.sentiment.thumbUp', 'Like')}
               icon={<ThumbUpIcon />}
@@ -185,7 +192,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
               variant={score === -1 ? 'primary' : 'secondary'}
               tone={score === -1 ? 'danger' : 'default'}
               onClick={() => {
-                setScore(-1);
+                onScoreChange(-1);
               }}
               aria-label={translate('feedback.sentiment.thumbDown', 'Dislike')}
               icon={<ThumbDownIcon />}

package/src/components/Filter/FilterSelect.tsx

@@ -77,6 +77,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-text-color: var(--filter-select-color);
   border: 1px solid var(--filter-select-border-color);
   --select-border-radius: var(--filter-select-border-radius);
+  --select-input-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
   &:hover {

package/src/components/Filter/variables.ts

@@ -72,7 +72,7 @@ export const filter = css`
   --filter-select-max-width: 100%;
   --filter-select-color: var(--text-color-primary);
   --filter-select-border-color: var(--border-color-primary);
-  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-select-border-radius: var(--input-border-radius);
   --filter-select-padding: 0;
   --filter-select-border-color-hover: var(--text-color-primary);
   --filter-select-option-margin: 0;
@@ -92,7 +92,7 @@ export const filter = css`
   --filter-date-picker-icon-width: var(--spacing-sm);
   --filter-date-picker-icon-stroke-hover: var(--text-color-primary);
   --filter-date-picker-wrapper-border-color: var(--border-color-primary);
-  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-date-picker-wrapper-radius: var(--border-radius-md);
   --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
 
   // @tokens End

package/src/components/Image/variables.ts

@@ -10,7 +10,7 @@ export const image = css`
   --image-frame-border-color: var(--border-color-secondary);
   --image-frame-border-radius: var(--border-radius-xxl);
   --image-frame-bg-color: var(--bg-color-raised);
-  --image-frame-image-border-radius: var(--border-radius-lg);
+  --image-frame-image-border-radius: var(--border-radius-xl);
 
   /**
     * @tokens Image caption
@@ -24,7 +24,7 @@ export const image = css`
   /**
     * @tokens Image gallery
     */
-  --image-gallery-border-radius: var(--border-radius-lg);
+  --image-gallery-border-radius: var(--border-radius-xl);
   --image-gallery-image-bg-color: var(--bg-color-tonal);
 
   /**
@@ -49,8 +49,10 @@ export const image = css`
   --image-lightbox-close-size: 40px;
   --image-lightbox-close-icon-size: 18px;
   --image-lightbox-close-offset: var(--spacing-base);
-  --image-lightbox-close-border-radius: var(--border-radius-lg);
+  --image-lightbox-close-border-radius: var(--border-radius-xl);
   --image-lightbox-side-gutter: calc(
     var(--image-lightbox-close-size) + var(--image-lightbox-close-offset) + var(--spacing-sm)
   );
+
+  // @tokens End
 `;

package/src/components/LanguagePicker/variables.ts

@@ -22,7 +22,7 @@ export const languagePicker = css`
   --language-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color

package/src/components/Markdown/variables.ts

@@ -40,7 +40,7 @@ export const markdown = css`
   --md-table-line-height: var(--line-height-md); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-bg-color: transparent; // @presenter Color
-  --md-table-border-radius: var(--border-radius);
+  --md-table-border-radius: var(--border-radius-xl);
 
   --md-table-border-width: 1px;
   --md-table-header-bg-color: var(--layer-color);

package/src/components/Menu/MenuItem.tsx

@@ -122,8 +122,8 @@ function MenuItemImpl(props: React.PropsWithChildren<MenuItemProps>): JSX.Elemen
       onClick={handleOnClick}
       onKeyDown={handleExpandOnEnter}
       ref={labelRef}
-      role={item.link ? 'none' : 'link'}
-      tabIndex={!item.link ? 0 : undefined}
+      role={item.link || isSeparator ? 'none' : 'link'}
+      tabIndex={!item.link && !isSeparator ? 0 : undefined}
       data-testid="menu-item-label"
       data-active={item.active}
     >

package/src/components/Menu/variables.ts

@@ -56,7 +56,7 @@ export const menu = css`
   --menu-item-label-margin: var(--menu-item-label-margin-vertical) var(--menu-item-label-margin-horizontal);
   --menu-item-label-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
   --menu-item-label-gap: var(--spacing-xxs);
-  --menu-item-label-border-radius: 6px;
+  --menu-item-label-border-radius: var(--border-radius-lg);
   --menu-item-label-chevron-size: 12px;
   --menu-item-label-chevron-offset: calc(var(--menu-item-label-gap) + var(--menu-item-label-chevron-size));
 

package/src/components/Navbar/variables.ts

@@ -27,7 +27,7 @@ export const navbar = css`
 
   --navbar-item-line-height: var(--line-height-base);
   --navbar-item-bg-color-active: var(--bg-color-active);
-  --navbar-item-border-radius: var(--border-radius);
+  --navbar-item-border-radius: var(--border-radius-lg);
   --navbar-item-bottom-border: none;
 
   --navbar-item-text-color-hover: var(--text-color-primary);