@redocly/theme 0.69.0-next.1 → 0.69.0-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.69.0-next.1",
+  "version": "0.69.0-next.11",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
+    "@redocly/realm-asyncapi-sdk": "0.15.0-next.4",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -53,8 +54,8 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "4.1.10",
-    "@vitest/ui": "4.1.10",
+    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/ui": "4.1.11",
     "concurrently": "7.6.0",
     "react-router": "^8.3.0",
     "resize-observer-polyfill": "1.5.1",
@@ -65,15 +66,15 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "6.0.3",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "vitest-when": "0.6.2",
-    "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.15.0-next.0"
+    "webpack": "5.105.2"
   },
   "dependencies": {
+    "@redocly/config": "0.56.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
-    "@xyflow/react": "^12.8.2",
+    "@xyflow/react": "12.8.3",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",
     "highlight-words-core": "1.2.2",
@@ -83,10 +84,18 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "^1.7.2",
+    "openapi-sampler": "^1.7.5",
     "react-calendar": "5.1.0",
-    "react-date-picker": "11.0.0",
-    "@redocly/config": "0.53.1"
+    "react-date-picker": "11.0.0"
+  },
+  "nx": {
+    "targets": {
+      "vitest:test": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
@@ -32,6 +32,12 @@ export function Accordion({
 }: PropsWithChildren<AccordionProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
+  const [prevExpanded, setPrevExpanded] = useState(expanded);
+
+  if (prevExpanded !== expanded) {
+    setPrevExpanded(expanded);
+    setExpanded(expanded);
+  }
 
   const toggle = ({ target }: BaseSyntheticEvent): void => {
     if (target instanceof HTMLAnchorElement || !isExpandable) return;
@@ -40,8 +46,6 @@ export function Accordion({
     onToggle?.(!isExpanded);
   };
 
-  useEffect(() => setExpanded(expanded), [expanded]);
-
   return (
     <AccordionWrapper
       className={className}

package/src/components/Accordion/variables.ts

@@ -12,7 +12,7 @@ export const accordion = css`
   * @tokens Accordion common
   */
 
-  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --accordion-border: none; // @presenter Border
 
   --accordion-line-height: var(--line-height-base); // @presenter LineHeight

package/src/components/Admonition/Admonition.tsx

@@ -10,7 +10,7 @@ import { InformationIcon } from '@redocly/theme/icons/InformationIcon/Informatio
 import { IdeaIcon } from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 
 type AdmonitionTypeProps = {
-  type: 'warning' | 'success' | 'danger' | 'info' | 'default';
+  type: 'warning' | 'success' | 'danger' | 'info' | 'idea';
 };
 
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
@@ -25,7 +25,7 @@ const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
   success: CheckmarkOutlineIcon,
   danger: ErrorIcon,
   info: InformationIcon,
-  default: IdeaIcon,
+  idea: IdeaIcon,
 };
 
 export function Admonition({

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

@@ -13,6 +13,6 @@ export const admonitionDarkMode = css`
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
 
-  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
-  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
+  --admonition-idea-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-idea-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;

package/src/components/Admonition/variables.ts

@@ -32,7 +32,7 @@ export const admonition = css`
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: 1px;
 
@@ -90,17 +90,17 @@ export const admonition = css`
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
   /**
-  * @tokens Admonition type primary
+  * @tokens Admonition type idea
   */
 
-  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
-  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
-  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
-  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
-  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
-  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  --admonition-idea-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-idea-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-idea-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-idea-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-idea-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-idea-border: var(--admonition-idea-border-width) var(--admonition-idea-border-style) var(--admonition-idea-border-color); // @presenter Border
   
   // @tokens End
 `;

package/src/components/Badge/Badge.tsx

@@ -11,9 +11,18 @@ export type BadgeProps = PropsWithChildren<{
   key?: string;
   className?: string;
   icon?: string;
+  /** Inline SVG content for the icon */
+  iconRawContent?: string;
 }>;
 
-export function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element {
+export function Badge({
+  icon,
+  iconRawContent,
+  children,
+  deprecated,
+  color,
+  ...props
+}: BadgeProps): JSX.Element {
   return (
     <BadgeComponent
       {...props}
@@ -21,7 +30,7 @@ export function Badge({ icon, children, deprecated, color, ...props }: BadgeProp
       $deprecated={deprecated}
       data-component-name="Badge/Badge"
     >
-      {icon ? <BadgeIcon icon={icon} /> : null}
+      {icon || iconRawContent ? <BadgeIcon icon={icon} rawContent={iconRawContent} /> : null}
       {children}
     </BadgeComponent>
   );
@@ -54,4 +63,9 @@ const BadgeIcon = styled(GenericIcon)`
   margin-right: var(--spacing-xxs);
   flex-shrink: 0;
   vertical-align: middle;
+
+  /* For inline SVG to align properly */
+  svg {
+    display: block;
+  }
 `;

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

@@ -6,5 +6,7 @@ export const bannerDarkMode = css`
   */
  
   --banner-warning-text-color: var(--color-white); // @presenter Color
+
+  // @tokens End
 `;
 

package/src/components/Banner/variables.ts

@@ -8,7 +8,7 @@ export const banner = css`
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);
-  --banner-button-border-radius: var(--border-radius);
+  --banner-button-border-radius: var(--border-radius-md);
   --banner-button-padding-inline: 1px var(--spacing-sm);
   --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
   --banner-button-icon-size: 14px;
@@ -47,5 +47,7 @@ export const banner = css`
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
   --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
   --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
+
+  // @tokens End
 `;
 

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -61,7 +61,7 @@ const baseBreadcrumbStyles = `
   align-items: center;
   gap: var(--breadcrumbs-gap);
   padding: var(--breadcrumb-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--breadcrumbs-border-radius);
   color: var(--breadcrumbs-text-color);
   text-decoration: none;
 

package/src/components/Breadcrumbs/variables.ts

@@ -13,7 +13,7 @@ export const breadcrumbs = css`
   --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
-  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
+  --breadcrumbs-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing
 
   --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing

package/src/components/Button/ButtonGroup.tsx

@@ -2,13 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { ButtonSize } from '@redocly/theme/components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '@redocly/theme/core/types';
 
-type ButtonGroupVariant = 'outlined';
-
-type ButtonGroupProps = {
+export type ButtonGroupProps = {
   variant?: ButtonGroupVariant;
-  size?: ButtonSize;
+  size?: ButtonGroupSize;
   children: React.ReactNode;
   className?: string;
 };
@@ -30,24 +28,44 @@ const ButtonGroupWrapper = styled.div`
   display: flex;
   line-height: var(--button-line-height);
 
-  .button {
+  & > .button,
+  & > * > .button {
     border-radius: 0;
   }
 
   & > .button:first-child,
-  *:first-child > .button {
+  & > *:first-child > .button {
     border-top-left-radius: var(--button-border-radius);
     border-bottom-left-radius: var(--button-border-radius);
   }
 
   & > .button:last-child,
-  *:last-child > .button {
+  & > *:last-child > .button {
     border-top-right-radius: var(--button-border-radius);
     border-bottom-right-radius: var(--button-border-radius);
   }
 
+  /* Adjacent segments share a single divider line: the leading segment drops its
+     own right border and the trailing one draws the divider as its left border. */
+  & > .button:not(:last-child),
+  & > *:not(:last-child) > .button {
+    border-right-style: none;
+    border-right-width: 0;
+  }
+
   & > .button:not(:first-child),
-  *:not(:first-child) > .button {
-    border-left: none;
+  & > *:not(:first-child) > .button {
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: color-mix(
+      in srgb,
+      var(--button-group-divider-color) calc(var(--button-group-divider-opacity) * 100%),
+      transparent
+    );
+  }
+
+  & > .button:not(:first-child):disabled,
+  & > *:not(:first-child) > .button:disabled {
+    border-left-color: var(--button-group-divider-color-disabled);
   }
 `;

package/src/components/Button/variables.ts

@@ -68,7 +68,7 @@ export const button = css`
   --button-font-weight: var(--font-weight-regular);
   --button-font-size: var(--font-size-base);
   --button-line-height: var(--line-height-base);
-  --button-border-radius: var(--border-radius-md);
+  --button-border-radius: var(--border-radius-lg);
   --button-padding: 5px var(--spacing-sm);
   --button-text-wrap: nowrap;
   --button-gap: var(--spacing-xs);
@@ -94,7 +94,7 @@ export const button = css`
   .button-size-small,
   .button-group-size-small .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: 1px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
     
@@ -107,7 +107,7 @@ export const button = css`
   .button-size-medium,
   .button-group-size-medium .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-lg);
     --button-padding: 5px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
 
@@ -120,7 +120,7 @@ export const button = css`
   .button-size-large,
   .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-xl);
     --button-padding: var(--spacing-xs) var(--spacing-md);
     --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
@@ -241,5 +241,28 @@ export const button = css`
     --button-icon-right-padding: 0;
   }
 
+  /**
+    * @tokens Button group divider
+    */
+
+  --button-group-divider-color: transparent;
+  --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-divider-opacity: 0.32;
+  }
+
+  .button-group-secondary {
+    --button-group-divider-color: var(--button-content-color); // @presenter Color
+    --button-group-divider-opacity: 0.12;
+  }
+
+  .button-group-outlined {
+    --button-group-divider-color: var(--button-border-color); // @presenter Color
+    --button-group-divider-opacity: 1;
+  }
+
   // @tokens End
 `;