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

package/src/components/PageActions/PageActions.tsx

@@ -7,13 +7,12 @@ import type { PageAction } from '@redocly/theme/core/types';
 import { PageActionsMenuItem } from '@redocly/theme/components/PageActions/PageActionsMenuItem';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { SplitButton } from '@redocly/theme/components/SplitButton/SplitButton';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { PageActionType, usePageActions } from '@redocly/theme/core/hooks';
+import { PageActionType, usePageActions, useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActionState = 'idle' | 'processing' | 'done';
 
@@ -28,6 +27,8 @@ const ACTION_DONE_DISPLAY_DURATION = 1000;
 export function PageActions(props: PageActionProps): JSX.Element | null {
   const { pageSlug, mcpUrl } = props;
 
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const actions = usePageActions(pageSlug || '/', mcpUrl, props.actions);
 
   const [actionState, setActionState] = useState<ActionState>('idle');
@@ -73,27 +74,25 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
 
   return (
     <PageActionsWrapper data-component-name="PageActions/PageActions">
-      <ButtonGroup variant="outlined" size="medium">
-        <Button
-          icon={renderIcon(buttonAction, actionState)}
-          to={'link' in buttonAction ? buttonAction.link : undefined}
-          external
-          onClick={() => handleActionClick(buttonAction)}
-        >
-          {buttonAction.buttonText}
-        </Button>
-        {actions.length > 1 ? (
-          <Dropdown
-            withArrow
-            portalled
-            trigger={<Button aria-label="More actions" />}
-            placement="bottom"
-            alignment="end"
+      <SplitButton
+        portalled
+        variant="outlined"
+        size="medium"
+        toggleAriaLabel={translate('page.actions.moreActions', 'More actions')}
+        button={
+          <Button
+            variant="outlined"
+            icon={renderIcon(buttonAction, actionState)}
+            to={'link' in buttonAction ? buttonAction.link : undefined}
+            external
+            onClick={() => handleActionClick(buttonAction)}
           >
-            <StyledDropdownMenu>{menuItems}</StyledDropdownMenu>
-          </Dropdown>
-        ) : null}
-      </ButtonGroup>
+            {buttonAction.buttonText}
+          </Button>
+        }
+      >
+        {actions.length > 1 ? <StyledDropdownMenu>{menuItems}</StyledDropdownMenu> : null}
+      </SplitButton>
     </PageActionsWrapper>
   );
 }

package/src/components/PageActions/PageActionsMenuItem.tsx

@@ -1,73 +1,59 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { JSX } from 'react';
 import type { PageAction } from '@redocly/theme/core/types';
 
+import { DropdownMenuItemContent } from '@redocly/theme/components/Dropdown/DropdownMenuItemContent';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 
-type PageActionsMenuItemProps = {
+export type PageActionsMenuItemProps = {
   pageAction: PageAction;
+  className?: string;
 };
 
-export function PageActionsMenuItem(props: PageActionsMenuItemProps) {
-  const { pageAction } = props;
+export function PageActionsMenuItem(props: PageActionsMenuItemProps): JSX.Element {
+  const { pageAction, className } = props;
 
   return (
-    <MenuItemWrapper data-component-name="PageActions/PageActionsMenuItem">
-      <IconWrapper>
-        <pageAction.iconComponent />
-      </IconWrapper>
-      <ContentWrapper>
-        <Title>
-          {pageAction.title}
-          {'link' in pageAction ? (
-            <LaunchIcon color="var(--page-actions-menu-item-title-icon-color)" size="14px" />
-          ) : null}
-        </Title>
-        <Description>{pageAction.description}</Description>
-      </ContentWrapper>
+    <MenuItemWrapper data-component-name="PageActions/PageActionsMenuItem" className={className}>
+      <DropdownMenuItemContent
+        icon={<pageAction.iconComponent />}
+        title={
+          <>
+            {pageAction.title}
+            {'link' in pageAction ? (
+              <LaunchIcon color="var(--page-actions-menu-item-title-icon-color)" size="14px" />
+            ) : null}
+          </>
+        }
+        description={pageAction.description}
+      />
     </MenuItemWrapper>
   );
 }
 
 const MenuItemWrapper = styled.div`
-  padding: var(--page-actions-menu-item-padding);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--page-actions-menu-item-gap);
-`;
-
-const IconWrapper = styled.div`
-  color: var(--page-actions-menu-item-icon-color);
-  border: 1px solid var(--page-actions-menu-item-icon-border-color);
-  border-radius: var(--page-actions-menu-item-icon-border-radius);
-  width: var(--page-actions-menu-item-icon-wrapper-size);
-  height: var(--page-actions-menu-item-icon-wrapper-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--page-actions-menu-item-text-gap);
-`;
-
-const Title = styled.div`
-  font-weight: var(--page-actions-menu-item-title-font-weight);
-  font-size: var(--page-actions-menu-item-title-font-size);
-  line-height: var(--page-actions-menu-item-title-line-height);
-  color: var(--page-actions-menu-item-title-color);
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-menu-item-title-icon-gap);
-`;
-
-const Description = styled.div`
-  font-weight: var(--page-actions-menu-item-description-font-weight);
-  font-size: var(--page-actions-menu-item-description-font-size);
-  line-height: var(--page-actions-menu-item-description-line-height);
-  color: var(--page-actions-menu-item-description-color);
+  --dropdown-menu-item-content-gap: var(--page-actions-menu-item-gap);
+  --dropdown-menu-item-content-padding: var(--page-actions-menu-item-padding);
+  --dropdown-menu-item-content-icon-size: var(--page-actions-menu-item-icon-wrapper-size);
+  --dropdown-menu-item-content-icon-color: var(--page-actions-menu-item-icon-color);
+  --dropdown-menu-item-content-icon-border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  --dropdown-menu-item-content-icon-border-radius: var(--page-actions-menu-item-icon-border-radius);
+  --dropdown-menu-item-content-text-gap: var(--page-actions-menu-item-text-gap);
+  --dropdown-menu-item-content-title-icon-gap: var(--page-actions-menu-item-title-icon-gap);
+  --dropdown-menu-item-content-title-font-weight: var(--page-actions-menu-item-title-font-weight);
+  --dropdown-menu-item-content-title-font-size: var(--page-actions-menu-item-title-font-size);
+  --dropdown-menu-item-content-title-line-height: var(--page-actions-menu-item-title-line-height);
+  --dropdown-menu-item-content-title-color: var(--page-actions-menu-item-title-color);
+  --dropdown-menu-item-content-description-font-weight: var(
+    --page-actions-menu-item-description-font-weight
+  );
+  --dropdown-menu-item-content-description-font-size: var(
+    --page-actions-menu-item-description-font-size
+  );
+  --dropdown-menu-item-content-description-line-height: var(
+    --page-actions-menu-item-description-line-height
+  );
+  --dropdown-menu-item-content-description-color: var(--page-actions-menu-item-description-color);
 `;

package/src/components/Panel/variables.ts

@@ -178,7 +178,7 @@ export const apiReferencePanels = css`
   * @tokens Panel common
   */
 
-  --panel-border-radius: var(--border-radius); // @presenter BorderRadius
+  --panel-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --panel-border: 1px solid var(--border-color-secondary); // @presenter Border
 
   --panel-line-height: var(--line-height-base); // @presenter LineHeight

package/src/components/Product/variables.ts

@@ -25,7 +25,7 @@ export const productPicker = css`
   --product-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
@@ -36,4 +36,5 @@ export const productPicker = css`
   --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
+  // @tokens End
 `;

package/src/components/ReplayGate/ReplayGate.tsx

@@ -10,6 +10,9 @@ export type ReplayGateProps = {
   // The current OpenAPI description's id (from x-metadata), when known. Lets a custom
   // ReplayGate vary behavior per API in a multi-API catalog.
   apiId?: string;
+  // Closes the whole Replay overlay. A gate that denies access calls this instead of
+  // rendering `children`, so a dismissed gate doesn't leave Replay reachable.
+  onClose: () => void;
   children: React.ReactNode;
 };
 

package/src/components/Search/SearchAiMessage.tsx

@@ -308,7 +308,7 @@ const MessageWrapper = styled.div<{ $role: string }>`
     $role === AiSearchConversationRole.USER
       ? 'var(--spacing-sm)'
       : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
   width: fit-content;
   max-width: 100%;
   word-wrap: break-word;

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -128,7 +128,7 @@ const FeedbackFormWrapper = styled.div`
   padding: var(--spacing-xs);
   background: var(--search-ai-feedback-form-bg-color);
   border: 1px solid var(--search-ai-feedback-form-border-color);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
 `;
 
 const FeedbackHeader = styled.div`
@@ -170,7 +170,7 @@ const FeedbackTextArea = styled.textarea`
   padding: var(--spacing-xs);
   padding-right: 3rem;
   border: 1px solid var(--border-color-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   font-family: inherit;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);

package/src/components/Search/SearchDialog.tsx

@@ -672,7 +672,6 @@ const SearchMessage = styled.div`
 `;
 
 const SearchProductTag = styled(Tag)`
-  --tag-border-radius: var(--border-radius);
   border: none;
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
@@ -747,6 +746,7 @@ const SearchWithAI = styled.div`
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   transition: all 0.3s ease;
 

package/src/components/Search/SearchItem.tsx

@@ -145,6 +145,7 @@ const SearchItemWrapper = styled(Link)`
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   ${ReturnKeyIcon} {
     align-self: center;

package/src/components/Search/SearchRecent.tsx

@@ -97,6 +97,7 @@ const SearchRecentItem = styled.div`
   font-weight: var(--search-recent-item-font-weight);
   line-height: var(--search-recent-item-line-height);
   padding: var(--search-recent-item-padding);
+  border-radius: var(--search-recent-item-border-radius);
   color: var(--search-recent-item-text-color);
   cursor: pointer;
 

package/src/components/Search/SearchSuggestedPages.tsx

@@ -81,6 +81,7 @@ const SearchSuggestedItem = styled(Link)`
   line-height: var(--search-suggested-item-line-height);
   color: var(--search-suggested-item-text-color);
   padding: var(--search-suggested-item-padding);
+  border-radius: var(--search-suggested-item-border-radius);
   cursor: pointer;
 
   &:hover {

package/src/components/Search/variables.ts

@@ -10,7 +10,7 @@ export const search = css`
   --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
-  --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border-radius: var(--border-radius-xxl);
   --search-modal-border: 1px solid var(--border-color-secondary);
 
   --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -34,7 +34,7 @@ export const search = css`
   --search-input-gap: var(--spacing-sm);
   --search-input-height: 40px;
   --search-input-border: none;
-  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-border-radius: var(--border-radius-xl); // @presenter BorderRadius
 
   --search-group-title-padding: var(--spacing-sm);
   --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -53,6 +53,7 @@ export const search = css`
   --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
   --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
   --search-item-border-color: transparent; // @presenter Color
+  --search-item-border-radius: var(--border-radius-lg);
   --search-item-padding: var(--spacing-sm) var(--spacing-lg);
   --search-item-gap: var(--spacing-xxs);
   --search-item-product-icon-size: 16px;
@@ -71,6 +72,7 @@ export const search = css`
   --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-recent-item-border-radius: var(--search-item-border-radius);
 
   --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -86,6 +88,7 @@ export const search = css`
   --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-suggested-item-border-radius: var(--search-item-border-radius);
 
   --search-shortcuts-gap: var(--spacing-xs);
 
@@ -133,7 +136,7 @@ export const search = css`
   --search-trigger-border-style: var(--border-style);
   --search-trigger-border-color: var(--input-border-color);
   --search-trigger-border-color-hover: var(--input-border-color-hover);
-  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-border-radius: var(--border-radius-lg);
   --search-trigger-padding-vertical: var(--input-padding-vertical);
   --search-trigger-padding-horizontal: var(--input-padding-horizontal);
   --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
@@ -244,7 +247,7 @@ export const search = css`
   --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
-  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
+  --search-ai-conversation-input-border-radius: var(--border-radius-xl);
   --search-ai-conversation-input-font-size: var(--font-size-base);
   --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
   --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
@@ -252,7 +255,7 @@ export const search = css`
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius-md);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   --search-ai-conversation-input-min-height: 48px;

package/src/components/Segmented/Segmented.tsx

@@ -16,6 +16,7 @@ function SegmentedComponent<T>(
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
       role="tablist"
+      $size={size}
     >
       {options.map((opt, index) => (
         <React.Fragment key={index}>
@@ -40,12 +41,13 @@ export const Segmented = typedMemo(forwardRef(SegmentedComponent)) as <T>(
   props: SegmentedProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
 ) => ReactElement;
 
-const SegmentedGroup = styled.div`
+const SegmentedGroup = styled.div<{ $size: string }>`
   display: flex;
   background: var(--segmented-buttons-bg-color-main);
   padding: calc(var(--spacing-xxs) / 2);
   gap: calc(var(--spacing-xxs) / 2);
-  border-radius: var(--border-radius-md);
+  border-radius: ${({ $size }) =>
+    $size === 'small' ? 'var(--border-radius-md)' : 'var(--border-radius-lg)'};
   max-width: 100%;
   width: fit-content;
 `;
@@ -75,7 +77,8 @@ const SegmentedItem = styled.button<{ $isActive: boolean; $size: string }>`
           cursor: pointer;
         `}
   line-height: var(--segmented-line-height);
-  border-radius: var(--border-radius);
+  border-radius: ${({ $size }) =>
+    $size === 'small' ? 'var(--border-radius)' : 'var(--border-radius-md)'};
   padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
   white-space: nowrap;
   text-overflow: ellipsis;

package/src/components/Select/Select.tsx

@@ -77,24 +77,32 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [multiple, value]);
 
-  useEffect(() => {
+  const changeSearchValue = (newSearchValue: string | null) => {
+    if (newSearchValue === searchValue) {
+      return;
+    }
+
+    setSearchValue(newSearchValue);
+
     if (onSearch) {
-      onSearch?.(searchValue as T);
-    } else {
-      if (typeof searchValue === 'string') {
-        const filteredOptions = options.filter((option) => {
+      onSearch(newSearchValue as T);
+      return;
+    }
+
+    if (typeof newSearchValue === 'string') {
+      setFilteredOptions(
+        options.filter((option) => {
           const valueForSearch = String(option.label ?? option.value ?? '');
           return (
-            !valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
+            !valueForSearch ||
+            valueForSearch.toLowerCase().indexOf(newSearchValue.toLowerCase()) > -1
           );
-        });
-        setFilteredOptions(filteredOptions);
-      } else {
-        setFilteredOptions(options);
-      }
+        }),
+      );
+    } else {
+      setFilteredOptions(options);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValue]);
+  };
 
   const selectHandler = (selectedOption: SelectOption<T>) => {
     const newSelectedOptions = multiple
@@ -113,7 +121,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
     setSelectedOptions(newSelectedOptions);
     onChange?.(newSelectedValues);
-    setSearchValue(null);
+    changeSearchValue(null);
     setDropdownActive(false);
 
     if (!multiple) {
@@ -125,7 +133,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
   const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const targetValue = e.target.value;
-    setSearchValue(targetValue);
+    changeSearchValue(targetValue);
     setDropdownActive(true);
   };
 
@@ -150,7 +158,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       if (!e.relatedTarget || e.relatedTarget?.id !== inputId) {
         setDropdownActive(false);
       }
-      setSearchValue(null);
+      changeSearchValue(null);
       setStickyInputValue('');
     }
   };

package/src/components/Select/variables.ts

@@ -8,7 +8,7 @@ export const select = css`
   --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
-  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
   
   --select-input-padding-vertical: 6px; // @presenter Spacing
@@ -16,7 +16,7 @@ export const select = css`
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   --select-input-gap: var(--spacing-xs); // @presenter Spacing
   --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
-  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-input-font-size: var(--font-size-base); // @presenter FontSize
   --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-input-line-height: var(--line-height-base); // @presenter LineHeight
@@ -35,7 +35,7 @@ export const select = css`
   --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);
 
   --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
-  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  

package/src/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ComponentProps, JSX } from 'react';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+
+export type SplitButtonProps = {
+  button: React.ReactElement<ButtonProps>;
+  children: ComponentProps<typeof Dropdown>['children'];
+  variant?: ButtonGroupVariant;
+  size?: ButtonGroupSize;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  portalled?: boolean;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  toggleAriaLabel: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  className?: string;
+};
+
+export function SplitButton(props: SplitButtonProps): JSX.Element {
+  const {
+    button,
+    children,
+    variant,
+    size,
+    placement = 'bottom',
+    alignment = 'end',
+    portalled,
+    closeOnSelect = true,
+    disabled,
+    toggleAriaLabel,
+    onOpen,
+    onClose,
+    className,
+  } = props;
+
+  const hasMenu = typeof children === 'function' || React.Children.toArray(children).length > 0;
+
+  return (
+    <SplitButtonWrapper data-component-name="SplitButton/SplitButton" className={className}>
+      <ButtonGroup variant={variant} size={size}>
+        {button}
+        {hasMenu ? (
+          <ToggleDropdown
+            closeOnClick={closeOnSelect}
+            placement={placement}
+            alignment={alignment}
+            portalled={portalled}
+            withArrow
+            onOpen={onOpen}
+            onClose={onClose}
+            trigger={
+              <Button
+                aria-label={toggleAriaLabel}
+                aria-haspopup="menu"
+                variant={variant}
+                size={size}
+                disabled={disabled}
+              />
+            }
+          >
+            {children}
+          </ToggleDropdown>
+        ) : null}
+      </ButtonGroup>
+    </SplitButtonWrapper>
+  );
+}
+
+const SplitButtonWrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+
+  /* Themed button margins must not split the group apart. Direct-child chains
+     keep the rule off buttons rendered inside the dropdown menu. */
+  > * > .button,
+  > * > * > .button {
+    margin: 0;
+  }
+`;
+
+/* The non-portalled menu is absolutely positioned against the nearest positioned
+   ancestor; keep the dropdown segment static so that ancestor is the whole
+   split button rather than the toggle segment. */
+const ToggleDropdown = styled(Dropdown)`
+  position: static;
+`;

package/src/components/Switch/variables.dark.ts

@@ -14,7 +14,7 @@ export const switcherDarkMode = css`
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
     --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
 
     --switch-width: 32px; // @presenter Width
     --switch-height: 18px; // @presenter Height
@@ -27,7 +27,7 @@ export const switcherDarkMode = css`
     --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: all 0.3s; // @presenter Transition

package/src/components/Switch/variables.ts

@@ -13,7 +13,7 @@ export const switcher = css`
     --switch-border-color-pressed: transparent; // @presenter Color
     --switch-border-color-disabled: transparent; // @presenter Color
     --switch-border-color-selected: transparent; // @presenter Color
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-border-width: var(--border-width); // @presenter Border
 
     --switch-width: 32px; // @presenter Width
@@ -27,7 +27,7 @@ export const switcher = css`
     --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: transform 0.3s; // @presenter Transition

package/src/components/Tag/variables.ts

@@ -8,9 +8,9 @@ export const tag = css`
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
-  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius-focused: var(--tag-border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);