@redocly/theme 0.70.0-next.0 → 0.70.0-next.1

package/lib/components/Button/Button.js

@@ -118,7 +118,9 @@ const StyledButton = styled_components_1.default.button `
     height: var(--button-icon-size);
   }
 
-  &:hover {
+  /* A button that owns an open menu keeps its hovered appearance. */
+  &:hover,
+  &[aria-expanded='true'] {
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
     border-color: var(--button-border-color-hover);
@@ -140,7 +142,8 @@ const StyledButton = styled_components_1.default.button `
     border-color: var(--button-border-color-danger);
     background-color: var(--button-bg-color-danger);
 
-    &:hover {
+    &:hover,
+    &[aria-expanded='true'] {
       color: var(--button-content-color-danger-hover);
       border-color: var(--button-border-color-danger-hover);
       background-color: var(--button-bg-color-danger-hover);

package/lib/components/Button/variables.js

@@ -251,21 +251,30 @@ exports.button = (0, styled_components_1.css) `
   --button-group-divider-opacity: 1;
   --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
 
-  .button-group-primary {
-    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+  .button-group-primary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.32;
   }
 
-  .button-group-secondary {
-    --button-group-divider-color: var(--button-content-color); // @presenter Color
+  .button-group-secondary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.12;
   }
 
-  .button-group-outlined {
+  .button-group-outlined .button {
     --button-group-divider-color: var(--button-border-color); // @presenter Color
     --button-group-divider-opacity: 1;
   }
 
+  .button-group-primary .button.button-tone-danger,
+  .button-group-secondary .button.button-tone-danger {
+    --button-group-divider-color: var(--button-content-color-danger); // @presenter Color
+  }
+
+  .button-group-outlined .button.button-tone-danger {
+    --button-group-divider-color: var(--button-border-color-danger); // @presenter Color
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Dropdown/Dropdown.js

@@ -142,13 +142,6 @@ const DropdownWrapper = styled_components_1.default.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_components_1.default.div `
   padding-top: var(--dropdown-menu-padding-top);

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.d.ts

@@ -0,0 +1,11 @@
+export type ReplaySecurityType = 'oauth2' | 'openIdConnect' | 'apiKey' | 'http-bearer';
+export type ReplaySecuritySchemeActionsProps = {
+    schemeId: string | null;
+    securityType: ReplaySecurityType;
+    environment: string;
+    operationId?: string;
+    value: string;
+    setValue: (value: string) => void;
+    apiId?: string;
+};
+export declare function ReplaySecuritySchemeActions(_props: ReplaySecuritySchemeActionsProps): null;

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplaySecuritySchemeActions = ReplaySecuritySchemeActions;
+function ReplaySecuritySchemeActions(_props) {
+    return null;
+}
+//# sourceMappingURL=ReplaySecuritySchemeActions.js.map

package/lib/components/SplitButton/SplitButton.d.ts

@@ -8,6 +8,7 @@ export type SplitButtonProps = {
     children: ComponentProps<typeof Dropdown>['children'];
     variant?: ButtonGroupVariant;
     size?: ButtonGroupSize;
+    tone?: ButtonProps['tone'];
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
     portalled?: boolean;

package/lib/components/SplitButton/SplitButton.js

@@ -10,12 +10,12 @@ const Button_1 = require("../../components/Button/Button");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function SplitButton(props) {
-    const { button, children, variant, size, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
+    const { button, children, variant, size, tone, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
     const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
     return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
             button,
-            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, disabled: disabled }) }, children)) : null)));
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
 }
 const SplitButtonWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/Tooltip/AnchorTooltip.js

@@ -103,15 +103,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(100%);'}
         }
       `}
   `,
@@ -135,15 +133,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-100%);'}
         }
       `}
   `,
@@ -156,11 +152,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           right: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -176,11 +170,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           left: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -222,9 +214,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);

package/lib/components/Tooltip/JsTooltip.js

@@ -112,12 +112,12 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -127,28 +127,26 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -158,18 +156,16 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
@@ -177,19 +173,17 @@ const PLACEMENTS = {
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
@@ -197,19 +191,17 @@ const PLACEMENTS = {
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,9 +232,7 @@ const TooltipBody = styled_components_1.default.span `
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -252,8 +242,6 @@ const TooltipBody = styled_components_1.default.span `
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;
 //# sourceMappingURL=JsTooltip.js.map

package/lib/components/Tooltip/Tooltip.js

@@ -41,8 +41,7 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function TooltipComponent(props) {
     var _a, _b;
-    const { useAnchorPositioning } = (0, hooks_1.useThemeHooks)();
-    const { isSupported } = useAnchorPositioning();
+    const { isSupported } = (0, hooks_1.useAnchorPositioning)();
     const fallbackPlacements = (_a = props.fallbackPlacements) !== null && _a !== void 0 ? _a : (0, utils_1.getDefaultFallbackPlacements)((_b = props.placement) !== null && _b !== void 0 ? _b : 'top');
     if (isSupported) {
         return (react_1.default.createElement(AnchorTooltip_1.Tooltip, Object.assign({}, props, { fallbackPlacements: fallbackPlacements, arrowPosition: prepareArrowPosition(props.arrowPosition) })));

package/lib/core/hooks/catalog/use-catalog-entity-schema.js

@@ -8,7 +8,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
     try {
         parsedSchema = JSON.parse(schema);
     }
-    catch (error) {
+    catch (_c) {
         parsedSchema = undefined;
     }
     let parsedApiDefinition;
@@ -17,7 +17,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
             ? JSON.parse(relatedEntity.metadata.schema)
             : undefined;
     }
-    catch (err) {
+    catch (_d) {
         parsedApiDefinition = undefined;
     }
     const definition = !parsedApiDefinition || ((_b = relatedEntity === null || relatedEntity === void 0 ? void 0 : relatedEntity.metadata) === null || _b === void 0 ? void 0 : _b.specType) !== 'openapi'

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -42,7 +42,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         Object.entries(newState).forEach(([id, control]) => {
             const existingControl = controlsState[id];
             if (existingControl && existingControl.type === control.type) {
-                // @ts-ignore
+                // @ts-expect-error
                 newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
             }
         });

package/lib/core/hooks/index.d.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

package/lib/core/hooks/index.js

@@ -71,4 +71,5 @@ __exportStar(require("./use-toast"), exports);
 __exportStar(require("./use-toast-logic"), exports);
 __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
+__exportStar(require("./use-anchor-positioning"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-nested-menu.js

@@ -46,9 +46,9 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
             rect.right <= (window.innerWidth || document.documentElement.clientWidth);
         // Only scroll if element is in viewport to prevent page jumping
-        // @ts-ignore
+        // @ts-expect-error
         if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-            // @ts-ignore
+            // @ts-expect-error
             el.scrollIntoViewIfNeeded(centerIfNeeded);
         }
     }

package/lib/core/hooks/use-anchor-positioning.d.ts

@@ -0,0 +1,3 @@
+export declare const useAnchorPositioning: () => {
+    isSupported: boolean;
+};

package/lib/core/hooks/use-anchor-positioning.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorPositioning = void 0;
+const react_1 = require("react");
+const useAnchorPositioning = () => {
+    const [isSupported, setIsSupported] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsSupported(isAnchorPositioningSupported());
+    }, []);
+    return { isSupported };
+};
+exports.useAnchorPositioning = useAnchorPositioning;
+function isAnchorPositioningSupported() {
+    if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+        return false;
+    }
+    return (CSS.supports('anchor-name: --a') &&
+        CSS.supports('position-anchor: --a') &&
+        CSS.supports('top: anchor(top)'));
+}
+//# sourceMappingURL=use-anchor-positioning.js.map

package/lib/core/hooks/use-theme-hooks.js

@@ -5,7 +5,6 @@ const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
-    useAnchorPositioning: () => ({ isSupported: false }),
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),

package/lib/core/types/hooks.d.ts

@@ -14,9 +14,6 @@ import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
-    useAnchorPositioning: () => {
-        isSupported: boolean;
-    };
     useTranslate: () => {
         translate: TFunction;
     };

package/lib/core/utils/load-and-navigate.js

@@ -24,9 +24,9 @@ function loadAndNavigate(_a) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const loader = window['__LOADER'];
         const result = yield (0, with_load_progress_1.withLoadProgress)(loader.tryLoad(pathname));
-        // @ts-ignore
+        // @ts-expect-error
         if (result === null || result === void 0 ? void 0 : result.redirectTo) {
-            // @ts-ignore
+            // @ts-expect-error
             return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
         }
         if (result && lastNavigatedPath === to) {
@@ -34,7 +34,7 @@ function loadAndNavigate(_a) {
                 // origin is used to prevent infinite loop when navigating from post message (from wysiwyg)
                 navigate({ pathname, search, hash }, Object.assign(Object.assign({}, options), { state: { origin }, unstable_flushSync: true }));
             }
-            // @ts-ignore
+            // @ts-expect-error
             if ((_b = result.props) === null || _b === void 0 ? void 0 : _b.disableAutoScroll)
                 return;
             if (hash) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.0",
+  "version": "0.70.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.56.0",
+    "@redocly/config": "0.57.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",
@@ -84,7 +84,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "^1.7.5",
+    "openapi-sampler": "^1.7.6",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0"
   },

package/src/components/Button/Button.tsx

@@ -123,7 +123,9 @@ const StyledButton = styled.button<{
     height: var(--button-icon-size);
   }
 
-  &:hover {
+  /* A button that owns an open menu keeps its hovered appearance. */
+  &:hover,
+  &[aria-expanded='true'] {
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
     border-color: var(--button-border-color-hover);
@@ -145,7 +147,8 @@ const StyledButton = styled.button<{
     border-color: var(--button-border-color-danger);
     background-color: var(--button-bg-color-danger);
 
-    &:hover {
+    &:hover,
+    &[aria-expanded='true'] {
       color: var(--button-content-color-danger-hover);
       border-color: var(--button-border-color-danger-hover);
       background-color: var(--button-bg-color-danger-hover);

package/src/components/Button/variables.ts

@@ -249,20 +249,29 @@ export const button = css`
   --button-group-divider-opacity: 1;
   --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
 
-  .button-group-primary {
-    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+  .button-group-primary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.32;
   }
 
-  .button-group-secondary {
-    --button-group-divider-color: var(--button-content-color); // @presenter Color
+  .button-group-secondary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.12;
   }
 
-  .button-group-outlined {
+  .button-group-outlined .button {
     --button-group-divider-color: var(--button-border-color); // @presenter Color
     --button-group-divider-opacity: 1;
   }
 
+  .button-group-primary .button.button-tone-danger,
+  .button-group-secondary .button.button-tone-danger {
+    --button-group-divider-color: var(--button-content-color-danger); // @presenter Color
+  }
+
+  .button-group-outlined .button.button-tone-danger {
+    --button-group-divider-color: var(--button-border-color-danger); // @presenter Color
+  }
+
   // @tokens End
 `;

package/src/components/Dropdown/Dropdown.tsx

@@ -216,13 +216,6 @@ 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/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.tsx

@@ -0,0 +1,19 @@
+// Named after the OpenAPI fields, not the labels Replay shows, so renaming a label cannot
+// silently change what a project matches on. Only schemes that take a single credential are
+// here: Replay renders no slot for the rest, which `setValue` could not fill anyway.
+export type ReplaySecurityType = 'oauth2' | 'openIdConnect' | 'apiKey' | 'http-bearer';
+
+export type ReplaySecuritySchemeActionsProps = {
+  schemeId: string | null;
+  securityType: ReplaySecurityType;
+  environment: string;
+  // Undefined for an operation with no documented id, and in the workflow tab, which has no operation.
+  operationId?: string;
+  value: string;
+  setValue: (value: string) => void;
+  apiId?: string;
+};
+
+export function ReplaySecuritySchemeActions(_props: ReplaySecuritySchemeActionsProps) {
+  return null;
+}

package/src/components/SplitButton/SplitButton.tsx

@@ -14,6 +14,7 @@ export type SplitButtonProps = {
   children: ComponentProps<typeof Dropdown>['children'];
   variant?: ButtonGroupVariant;
   size?: ButtonGroupSize;
+  tone?: ButtonProps['tone'];
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
   portalled?: boolean;
@@ -31,6 +32,7 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
     children,
     variant,
     size,
+    tone,
     placement = 'bottom',
     alignment = 'end',
     portalled,
@@ -63,6 +65,7 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
                 aria-haspopup="menu"
                 variant={variant}
                 size={size}
+                tone={tone}
                 disabled={disabled}
               />
             }

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -132,15 +132,13 @@ const PLACEMENTS = {
       $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(100%);'}
         }
       `}
   `,
@@ -166,15 +164,13 @@ const PLACEMENTS = {
       $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-100%);'}
         }
       `}
   `,
@@ -188,11 +184,9 @@ const PLACEMENTS = {
       $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           right: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -209,11 +203,9 @@ const PLACEMENTS = {
       $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           left: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -263,9 +255,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName })
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);

package/src/components/Tooltip/JsTooltip.tsx

@@ -125,15 +125,20 @@ function TooltipComponent({
 
 export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
+type TooltipArrowProps = {
+  $withArrow: boolean;
+  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
+};
+
 const PLACEMENTS = {
-  top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  top: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -143,30 +148,28 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
-  bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  bottom: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -176,61 +179,55 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
-  left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  left: css<TooltipArrowProps>`
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
-  right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  right: css<TooltipArrowProps>`
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,12 +237,12 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-const TooltipBody = styled.span<{
-  $placement: NonNullable<TooltipProps['placement']>;
-  $withArrow: boolean;
-  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
-  $width?: string;
-}>`
+const TooltipBody = styled.span<
+  TooltipArrowProps & {
+    $placement: NonNullable<TooltipProps['placement']>;
+    $width?: string;
+  }
+>`
   display: inline-block;
 
   padding: var(--tooltip-padding);
@@ -267,9 +264,7 @@ const TooltipBody = styled.span<{
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -279,7 +274,5 @@ const TooltipBody = styled.span<{
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => css`
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;

package/src/components/Tooltip/Tooltip.tsx

@@ -4,11 +4,10 @@ import type { TooltipProps } from '@redocly/theme/core/types';
 
 import { Tooltip as AnchorTooltip } from '@redocly/theme/components/Tooltip/AnchorTooltip';
 import { Tooltip as JsTooltip } from '@redocly/theme/components/Tooltip/JsTooltip';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useAnchorPositioning } from '@redocly/theme/core/hooks';
 import { getDefaultFallbackPlacements } from '@redocly/theme/core/utils';
 
 function TooltipComponent(props: TooltipProps): React.ReactElement {
-  const { useAnchorPositioning } = useThemeHooks();
   const { isSupported } = useAnchorPositioning();
 
   const fallbackPlacements =

package/src/core/hooks/__mocks__/index.ts

@@ -1,5 +1,6 @@
 export * from './use-theme-config';
 export * from './use-theme-hooks';
+export * from './use-anchor-positioning';
 export * from './use-mobile-menu';
 export * from './use-controlled-state';
 export * from './search/use-recent-searches';

package/src/core/hooks/__mocks__/use-anchor-positioning.ts

@@ -0,0 +1,3 @@
+import { vi } from 'vitest';
+
+export const useAnchorPositioning = vi.fn(() => ({ isSupported: true }));

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -3,9 +3,6 @@ import { vi, type MockedFunction } from 'vitest';
 import type { ThemeHooks } from '../../types/hooks';
 
 export const useThemeHooks = vi.fn(() => ({
-  useAnchorPositioning: vi.fn(() => ({
-    isSupported: true,
-  })),
   useTranslate: vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue

package/src/core/hooks/catalog/use-catalog-entity-schema.ts

@@ -12,7 +12,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
 
   try {
     parsedSchema = JSON.parse(schema);
-  } catch (error) {
+  } catch {
     parsedSchema = undefined;
   }
 
@@ -22,7 +22,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
     parsedApiDefinition = relatedEntity?.metadata?.schema
       ? (JSON.parse(relatedEntity.metadata.schema) as Record<string, unknown>)
       : undefined;
-  } catch (err) {
+  } catch {
     parsedApiDefinition = undefined;
   }
 

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -8,7 +8,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
+  // @ts-expect-error
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';

package/src/core/hooks/code-walkthrough/__mocks__/mock-intersection-observer.ts

@@ -9,7 +9,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
+  // @ts-expect-error
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-ignore
+        // @ts-expect-error
         newState[id] = {
           ...control,
           value: existingControl.value,

package/src/core/hooks/index.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

package/src/core/hooks/menu/use-nested-menu.ts

@@ -47,9 +47,9 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
       rect.right <= (window.innerWidth || document.documentElement.clientWidth);
 
     // Only scroll if element is in viewport to prevent page jumping
-    // @ts-ignore
+    // @ts-expect-error
     if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-      // @ts-ignore
+      // @ts-expect-error
       el.scrollIntoViewIfNeeded(centerIfNeeded);
     }
   }

package/src/core/hooks/use-anchor-positioning.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export const useAnchorPositioning = (): { isSupported: boolean } => {
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    setIsSupported(isAnchorPositioningSupported());
+  }, []);
+
+  return { isSupported };
+};
+
+function isAnchorPositioningSupported(): boolean {
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return false;
+  }
+  return (
+    CSS.supports('anchor-name: --a') &&
+    CSS.supports('position-anchor: --a') &&
+    CSS.supports('top: anchor(top)')
+  );
+}

package/src/core/hooks/use-theme-hooks.ts

@@ -6,7 +6,6 @@ import { ThemeDataContext } from '../contexts/ThemeDataContext';
 import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
-  useAnchorPositioning: () => ({ isSupported: false }),
   useTranslate: () => ({
     translate: (value?: string, options?: { defaultValue: string } | string) =>
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',

package/src/core/types/hooks.ts

@@ -44,7 +44,6 @@ import type { BreadcrumbItem } from './breadcrumb';
 import type { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
-  useAnchorPositioning: () => { isSupported: boolean };
   useTranslate: () => { translate: TFunction };
   useTranslationKeys: () => string[];
   /**

package/src/core/utils/load-and-navigate.ts

@@ -25,9 +25,9 @@ export async function loadAndNavigate({
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const loader = (window as any)['__LOADER'];
   const result = await withLoadProgress(loader.tryLoad(pathname));
-  // @ts-ignore
+  // @ts-expect-error
   if (result?.redirectTo) {
-    // @ts-ignore
+    // @ts-expect-error
     return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
   }
 
@@ -40,7 +40,7 @@ export async function loadAndNavigate({
         unstable_flushSync: true,
       } as NavigateOptions & { unstable_flushSync: boolean });
     }
-    // @ts-ignore
+    // @ts-expect-error
     if (result.props?.disableAutoScroll) return;
 
     if (hash) {