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

package/src/components/Search/SearchAiMessage.tsx

@@ -6,9 +6,9 @@ import {
   type SearchAiMessageResource,
   type ToolCall,
   type ContentSegment,
-  ToolCallName,
 } from '@redocly/theme/core/types';
-import { TOOL_CALL_DISPLAY_TEXT, AiSearchConversationRole } from '@redocly/theme/core/constants';
+import { AiSearchConversationRole } from '@redocly/theme/core/constants';
+import { groupToolCallSegments, hasToolCallsAndText } from '@redocly/theme/core/utils';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -18,43 +18,14 @@ import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
 import { SearchAiActionButtons } from '@redocly/theme/components/Search/SearchAiActionButtons';
 import { SearchAiNegativeFeedbackForm } from '@redocly/theme/components/Search/SearchAiNegativeFeedbackForm';
+import { SearchAiActivity } from '@redocly/theme/components/Search/SearchAiActivity';
+import { searchAiAppearAnimation } from '@redocly/theme/core/styles';
 
 function MarkdownSegment({ text }: { text: string }): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
   const markdown = useMarkdownText(text);
   return <ResponseText as="div" children={markdown} data-testid="response-text" />;
 }
-// The codemode `execute` tool passes a human-readable `description` of what its code
-// does; show that instead of a generic "Executing execute..." label.
-function getExecuteDescription(args: unknown): string | undefined {
-  if (args && typeof args === 'object' && 'description' in args) {
-    const { description } = args as { description?: unknown };
-    if (typeof description === 'string' && description.trim().length > 0) {
-      return description.trim();
-    }
-  }
-  return undefined;
-}
-
-function getToolCallDisplayText(toolCall: ToolCall): {
-  inProgressText: string;
-  completedText: string;
-} {
-  if (toolCall.name === ToolCallName.Execute) {
-    const description = getExecuteDescription(toolCall.args);
-    if (description) {
-      return { inProgressText: description, completedText: description };
-    }
-  }
-
-  return (
-    TOOL_CALL_DISPLAY_TEXT[toolCall.name] ?? {
-      inProgressText: `Executing ${toolCall.name}...`,
-      completedText: `${toolCall.name} executed`,
-    }
-  );
-}
-
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
   content: string;
@@ -64,6 +35,7 @@ export type SearchAiMessageProps = {
   messageId?: string;
   feedback?: FeedbackType;
   onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
+  /** @deprecated Not used; the message reads its tool calls from `contentSegments`. */
   toolCalls?: ToolCall[];
   contentSegments?: ContentSegment[];
 };
@@ -77,7 +49,6 @@ function SearchAiMessageComponent({
   messageId,
   feedback,
   onFeedbackChange,
-  toolCalls = [],
   contentSegments = [{ type: 'text' as const, text: content }],
 }: SearchAiMessageProps): JSX.Element {
   const { useTranslate, useTelemetry } = useThemeHooks();
@@ -90,7 +61,8 @@ function SearchAiMessageComponent({
 
   const showSuccessMessage = feedbackSent && feedback;
 
-  const isLoading = isThinking && content.length === 0 && toolCalls.length === 0;
+  const groupedSegments = groupToolCallSegments(contentSegments, isThinking);
+  const isFullWidth = hasToolCallsAndText(contentSegments);
 
   const sendFeedbackTelemetry = (feedbackValue: FeedbackType, dislikeReason?: string) => {
     if (!messageId) return;
@@ -143,29 +115,18 @@ function SearchAiMessageComponent({
           margin="0 var(--spacing-xs) 0 0"
         />
       )}
-      <MessageContentWrapper>
+      <MessageContentWrapper $isFullWidth={isFullWidth}>
         {role === AiSearchConversationRole.ASSISTANT ? (
           <>
-            <MessageWrapper $role={role}>
-              {contentSegments.map((segment, index) => {
-                if (segment.type === 'tool') {
-                  const toolCallCompleted = Boolean(segment.toolCall.result);
-
-                  const { inProgressText, completedText } = getToolCallDisplayText(
-                    segment.toolCall,
-                  );
-
-                  const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
-
+            <MessageWrapper $role={role} $isFullWidth={isFullWidth}>
+              {groupedSegments.map((segment, index) => {
+                if (segment.type === 'tools') {
                   return (
-                    <ToolCallsInfoWrapper key={`tool-${index}`} data-testid="tool-calls-info">
-                      <ToolCallInfoItem>
-                        <DocumentIcon size="14px" color="--search-ai-text-color" />
-                        <ToolCallText $isSearching={!toolCallCompleted}>
-                          {toolCallDisplayText}
-                        </ToolCallText>
-                      </ToolCallInfoItem>
-                    </ToolCallsInfoWrapper>
+                    <ToolCallsActivity
+                      key={`tools-${index}`}
+                      toolCalls={segment.toolCalls}
+                      isActive={segment.isActive}
+                    />
                   );
                 }
 
@@ -193,14 +154,7 @@ function SearchAiMessageComponent({
                   </ResourcesWrapper>
                 </>
               )}
-              {isLoading && (
-                <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
-                  <ThinkingDot />
-                  <ThinkingDot />
-                  <ThinkingDot />
-                </ThinkingDotsWrapper>
-              )}
-              {content.length > 0 && (
+              {!isThinking && content.length > 0 && (
                 <FeedbackWrapper>
                   <SearchAiActionButtons
                     content={content}
@@ -261,7 +215,6 @@ export const SearchAiMessage = memo(SearchAiMessageComponent, (prevProps, nextPr
     prevProps.feedback === nextProps.feedback &&
     prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
     areResourcesEqual(prevProps.resources, nextProps.resources) &&
-    prevProps.toolCalls?.length === nextProps.toolCalls?.length &&
     prevProps.contentSegments === nextProps.contentSegments
   );
 });
@@ -275,9 +228,10 @@ const SearchAiMessageWrapper = styled.div<{ $role: string }>`
     $role === AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
 
-const MessageContentWrapper = styled.div`
+const MessageContentWrapper = styled.div<{ $isFullWidth: boolean }>`
   display: flex;
   flex-direction: column;
+  flex-grow: ${({ $isFullWidth }) => ($isFullWidth ? 1 : 0)};
   gap: var(--spacing-sm);
   max-width: 80%;
   min-width: 0;
@@ -300,13 +254,13 @@ const ResponseText = styled(Markdown)`
   }
 `;
 
-const MessageWrapper = styled.div<{ $role: string }>`
+const MessageWrapper = styled.div<{ $role: string; $isFullWidth?: boolean }>`
   padding: ${({ $role }) =>
     $role === AiSearchConversationRole.USER
       ? 'var(--spacing-sm)'
       : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-xl);
-  width: fit-content;
+  width: ${({ $isFullWidth }) => ($isFullWidth ? 'auto' : 'fit-content')};
   max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -327,12 +281,14 @@ const ResourcesWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin: 0;
+  ${searchAiAppearAnimation}
 `;
 const FeedbackWrapper = styled.div`
   display: flex;
   flex-direction: row;
   gap: var(--search-ai-feedback-gap);
   margin-top: var(--spacing-sm);
+  ${searchAiAppearAnimation}
 `;
 
 const ResourcesTitle = styled.div`
@@ -347,7 +303,7 @@ const ResourceTagsWrapper = styled.div`
   gap: var(--search-ai-resource-tags-gap);
 `;
 
-const ResourceTag = styled(Tag)`
+const ResourceTag = styled(Tag).attrs({ textTransform: 'none' })`
   .tag-default {
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;
@@ -367,43 +323,6 @@ const ResourceTag = styled(Tag)`
   }
 `;
 
-const ThinkingDotsWrapper = styled.div`
-  display: flex;
-  gap: var(--search-ai-thinking-dots-gap);
-  padding: var(--search-ai-thinking-dots-padding);
-`;
-
-const ThinkingDot = styled.div`
-  width: var(--search-ai-thinking-dot-size);
-  height: var(--search-ai-thinking-dot-size);
-  border-radius: 50%;
-  background: var(--search-ai-thinking-dot-color);
-  animation: bounce 1.4s infinite ease-in-out;
-
-  &:nth-child(1) {
-    animation-delay: -0.32s;
-  }
-  &:nth-child(2) {
-    animation-delay: -0.16s;
-  }
-  &:nth-child(3) {
-    animation-delay: 0s;
-  }
-
-  @keyframes bounce {
-    0%,
-    80%,
-    100% {
-      opacity: 0.2;
-      transform: scale(0.8);
-    }
-    40% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-`;
-
 const SuccessMessageWrapper = styled.div`
   max-width: fit-content;
   display: flex;
@@ -420,37 +339,10 @@ const SuccessMessageText = styled.div`
   color: var(--color-success-darker);
 `;
 
-const ToolCallsInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xxs);
+const ToolCallsActivity = styled(SearchAiActivity)`
   margin: 0 0 var(--spacing-sm) 0;
-  font-size: var(--font-size-xs);
-  color: var(--search-ai-text-color);
-  opacity: 0.6;
-`;
-
-const ToolCallInfoItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-`;
-
-const ToolCallText = styled.span<{ $isSearching?: boolean }>`
-  font-weight: var(--font-weight-regular);
 
-  ${({ $isSearching }) =>
-    $isSearching &&
-    `
-    animation: pulse 1.5s ease-in-out infinite;
-    
-    @keyframes pulse {
-      0%, 100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.4;
-      }
-    }
-  `}
+  &:last-child {
+    margin-bottom: var(--spacing-xxs);
+  }
 `;

package/src/components/Search/SearchAiResponse.tsx

@@ -212,6 +212,7 @@ const ResourceTags = styled.div`
 
 const ResourceTag = styled(Tag).attrs({
   className: 'tag-resource',
+  textTransform: 'none',
 })`
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;

package/src/components/Search/SearchDialog.tsx

@@ -19,6 +19,7 @@ import {
   useSearchFilter,
   useRecentSearches,
   useModalScrollLock,
+  usePersistedQuickFilter,
 } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -81,6 +82,16 @@ export function SearchDialog({
     onFacetReset,
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
+  usePersistedQuickFilter({
+    filter,
+    setFilter,
+    facets,
+    groupField,
+    query,
+    isSearchLoading,
+    searchError,
+    enabled: initialMode === 'search',
+  });
   const { addSearchHistoryItem } = useRecentSearches();
   const aiSearch = useAiSearch({ filter: filter, product: product?.name });
   useModalScrollLock(true);

package/src/components/Search/SearchItem.tsx

@@ -9,7 +9,7 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
-import { trimText, getOperationColor } from '@redocly/theme/core/utils';
+import { assignRef, trimText, getOperationColor } from '@redocly/theme/core/utils';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -61,14 +61,7 @@ export function SearchItem({
       tabIndex={0}
       innerRef={(el: HTMLAnchorElement) => {
         ref.current = el;
-
-        if (!innerRef) return;
-
-        if (typeof innerRef === 'function') {
-          innerRef(el);
-        } else {
-          innerRef.current = el;
-        }
+        assignRef(innerRef, el);
       }}
       data-component-name="Search/SearchItem"
     >
@@ -85,7 +78,9 @@ export function SearchItem({
               <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
-              {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              <span>
+                {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              </span>
             </SearchItemOperation>
           ) : null}
           <SearchItemTitleWrapper>
@@ -123,6 +118,20 @@ export function SearchItem({
               {searchHighlight(parameter.name)}
             </div>
             <div>{searchHighlight(parameter.description)}</div>
+            {parameter.enum ? (
+              <div>
+                {translate('search.searchItem.enum', 'Enum')}
+                {': '}
+                {searchHighlight(parameter.enum)}
+              </div>
+            ) : null}
+            {parameter.example ? (
+              <div>
+                {translate('search.searchItem.example', 'Example')}
+                {': '}
+                {searchHighlight(parameter.example)}
+              </div>
+            ) : null}
           </SearchItemPlace>
         ) : (
           shouldShowPath && (

package/src/components/Search/SearchTrigger.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -9,6 +9,9 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
 import { DEFAULT_KEYBOARD_SHORTCUTS } from '@redocly/theme/core/constants';
 
+const MAC_SHORTCUT_LABEL = '⌘K';
+const SHORTCUT_LABEL = 'Ctrl+K';
+
 export type SearchTriggerProps = {
   onClick: () => void;
   className?: string;
@@ -31,7 +34,10 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
-  const isMac = getUserAgent().includes('Mac');
+  // A page can be cached and served to every platform, so the server renders an empty
+  // slot and the browser picks the label after hydration.
+  const [isMac, setIsMac] = React.useState<boolean | undefined>(undefined);
+  React.useEffect(() => setIsMac(getUserAgent().includes('Mac')), []);
 
   return (
     <SearchTriggerWrapper
@@ -53,7 +59,13 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
         {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
-          <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
+          <SearchTriggerShortcut>
+            {isMac === undefined ? null : (
+              <SearchTriggerShortcutLabel>
+                {isMac ? MAC_SHORTCUT_LABEL : SHORTCUT_LABEL}
+              </SearchTriggerShortcutLabel>
+            )}
+          </SearchTriggerShortcut>
         ) : (
           <span>{mainShortcutKey}</span>
         )}
@@ -80,6 +92,38 @@ const SearchTriggerButton = styled(Button)`
   }
 `;
 
+// The hidden copy of the wider label keeps the slot the same width before and after
+// hydration on every platform, so the trigger does not shift when the label appears.
+const SearchTriggerShortcut = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &::after {
+    content: '${SHORTCUT_LABEL}';
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+`;
+
+const shortcutAppear = keyframes`
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateY(3px);
+  }
+`;
+
+const SearchTriggerShortcutLabel = styled.span`
+  animation: ${shortcutAppear} var(--search-trigger-shortcut-appear-duration)
+    var(--search-trigger-shortcut-appear-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+
 const SearchTriggerInput = styled.div`
   display: none;
   align-items: center;

package/src/components/Search/variables.ts

@@ -145,6 +145,8 @@ export const search = css`
   --search-trigger-bg-color: var(--navbar-bg-color);
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
+  --search-trigger-shortcut-appear-duration: 300ms;
+  --search-trigger-shortcut-appear-easing: ease-out;
 
   /**
   * @tokens AI Search
@@ -199,8 +201,21 @@ export const search = css`
   --search-ai-suggestions-title-font-weight: var(--font-weight-light);
   --search-ai-suggestions-text-color: var(--text-color-description);
 
-  --search-ai-thinking-dots-gap: 4px;
-  --search-ai-thinking-dots-padding: 4px 0;
+  --search-ai-activity-font-size: var(--font-size-base);
+  --search-ai-activity-line-height: var(--line-height-sm);
+  --search-ai-activity-count-font-size: var(--font-size-sm);
+  --search-ai-activity-count-bg-color: var(--border-color-secondary);
+  --search-ai-activity-text-color: var(--text-color-description);
+  --search-ai-activity-text-color-hover: var(--text-color-primary);
+  --search-ai-activity-detail-color: var(--text-color-secondary);
+  --search-ai-activity-shimmer-color: var(--text-color-primary);
+  --search-ai-activity-rail-color: var(--border-color-primary);
+  --search-ai-activity-icon-size: 14px;
+  --search-ai-activity-fade-duration: 200ms;
+  --search-ai-activity-expand-duration: 250ms;
+  --search-ai-activity-shimmer-duration: 2s;
+  --search-ai-activity-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 

package/src/components/Segmented/Segmented.tsx

@@ -5,34 +5,43 @@ import type { ForwardedRef, ReactElement } from 'react';
 import type { SegmentedProps } from '@redocly/theme/core/types';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
+import { useTabList } from '@redocly/theme/core/hooks';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
   ref?: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
+  const { tabListProps, getTabProps } = useTabList({
+    count: options.length,
+    activeIndex: options.findIndex((opt) => value == opt.value),
+    onChange: (index) => onChange(options[index]),
+  });
+
   return (
     <SegmentedGroup
       ref={ref}
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
-      role="tablist"
+      {...tabListProps}
       $size={size}
     >
-      {options.map((opt, index) => (
-        <React.Fragment key={index}>
-          {opt.divider}
-          <SegmentedItem
-            key={opt.label}
-            role="tab"
-            title={opt.label}
-            onClick={() => onChange(opt)}
-            $isActive={value == opt.value}
-            $size={size}
-          >
-            {opt.element || opt.label}
-          </SegmentedItem>
-        </React.Fragment>
-      ))}
+      {options.map((opt, index) => {
+        const { 'aria-controls': _noPanel, ...tabProps } = getTabProps(index);
+        return (
+          <React.Fragment key={index}>
+            {opt.divider}
+            <SegmentedItem
+              key={opt.label}
+              {...tabProps}
+              title={opt.label}
+              $isActive={value == opt.value}
+              $size={size}
+            >
+              {opt.element || opt.label}
+            </SegmentedItem>
+          </React.Fragment>
+        );
+      })}
     </SegmentedGroup>
   );
 }

package/src/components/Select/Select.tsx

@@ -63,6 +63,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   const [filteredOptions, setFilteredOptions] = useState<SelectOption<T>[]>(options);
   const [stickyInputValue, setStickyInputValue] = useState<string>(placeholder || '');
   const inputId = useId();
+  const listboxId = `${inputId}-listbox`;
 
   useOutsideClick(selectRef, () => {
     setDropdownActive(false);
@@ -189,7 +190,8 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return (
       <SelectInput
         id={inputId}
-        listboxId={inputId}
+        listboxId={listboxId}
+        expanded={dropdownActive}
         selectedOptions={selectedOptions}
         searchValue={searchValue}
         placeholder={placeholder}
@@ -223,10 +225,14 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           setDropdownActive(!dropdownActive);
         }
       }}
-      tabIndex={0}
-      aria-haspopup="listbox"
-      aria-expanded={dropdownActive}
-      aria-label="Select option"
+      tabIndex={searchable ? undefined : 0}
+      {...(!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox' as const,
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+      })}
       onFocus={(e) => {
         if (e.target === selectRef.current) {
           selectInputRef.current?.focus();
@@ -245,7 +251,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
         alignment={alignment}
         active={!renderInput ? dropdownActive : undefined}
       >
-        <SelectDropdownMenu role="listbox" footer={footer}>
+        <SelectDropdownMenu id={listboxId} role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
             <DropdownMenuItem disabled>
               {translate('select.noResults', 'No results')}

package/src/components/Select/SelectInput.tsx

@@ -6,6 +6,7 @@ import type { SelectOption } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { assignRef } from '@redocly/theme/core/utils';
 
 type SelectInputProps<T> = {
   id?: string;
@@ -22,6 +23,7 @@ type SelectInputProps<T> = {
   placeholder?: string;
   multiple?: boolean;
   searchable?: boolean;
+  expanded?: boolean;
   clearable?: boolean;
   inputRef?: React.ForwardedRef<HTMLInputElement>;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -48,6 +50,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
     stickyValue,
     multiple,
     searchable,
+    expanded,
     clearable,
     clearHandler,
     searchHandler,
@@ -123,17 +126,15 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
         if (!input) return;
 
         inputRef.current = input;
-
-        if (!forwardedInputRef) return;
-
-        if (typeof forwardedInputRef === 'function') {
-          forwardedInputRef(input);
-        } else {
-          forwardedInputRef.current = input;
-        }
+        assignRef(forwardedInputRef, input);
       }}
       $width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
       tabIndex={0}
+      role="combobox"
+      aria-expanded={!!expanded}
+      aria-controls={listboxId}
+      aria-autocomplete="list"
+      aria-label="Select option"
       onFocus={(e) => {
         e.stopPropagation();
       }}
@@ -156,16 +157,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   );
 
   return (
-    <SelectInputWrapper
-      id={id}
-      onFocus={onFocusHandler}
-      onClick={onClickHandler}
-      role="button"
-      aria-haspopup="listbox"
-      aria-controls={listboxId}
-      aria-owns={listboxId}
-      aria-label="Select option"
-    >
+    <SelectInputWrapper id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
       {!onlyIcon && (
         <>
           <SelectInputValue>

package/src/components/Sidebar/Sidebar.tsx

@@ -84,8 +84,8 @@ const SidebarContent = styled.aside<{ $opened: boolean; $collapsed?: boolean }>`
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}