@redocly/theme 0.18.3-patch.2 → 0.18.3-patch.6

package/src/components/Filter/Filter.tsx

@@ -2,19 +2,20 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatePicker } from 'react-date-picker';
 
-import type { ReactNode } from 'react';
+// import type { ReactNode } from 'react';
 
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { useTranslate } from '@portal/hooks';
 import { CheckboxIcon } from '@theme/icons';
 import { Select } from '@theme/components/Select';
+import type { ThemeConfig } from '@theme/config';
 
 export function Filter({
   filter,
   filterValuesCasing,
 }: {
   filter: ResolvedFilter & { selectedOptions: any };
-  filterValuesCasing?: 'sentence';
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }) {
   const { translate } = useTranslate();
   const translationKeys = {
@@ -24,7 +25,7 @@ export function Filter({
 
   if (!filter.parentUsed) return null;
 
-  let selectOptions: { value: string; component: React.ReactNode }[] = [];
+  let selectOptions: { value: string; element: React.ReactNode }[] = [];
   if (filter.type === 'select') {
     const defaultOptionCount = filter.filteredOptions.reduce(
       (acc, option) => acc + option.count,
@@ -33,8 +34,8 @@ export function Filter({
     selectOptions = [
       {
         value: '',
-        component: (
-          <FilterOption key="all" role="link" onClick={() => filter.selectOption('')}>
+        element: (
+          <FilterOption key="all" onClick={() => filter.selectOption('')}>
             <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
             <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
           </FilterOption>
@@ -44,12 +45,8 @@ export function Filter({
     selectOptions.push(
       ...filter.filteredOptions.map((option) => ({
         value: option.value,
-        component: (
-          <FilterOption
-            key={option.value}
-            role="link"
-            onClick={() => filter.selectOption(option.value)}
-          >
+        element: (
+          <FilterOption key={option.value}>
             <FilterOptionLabel>
               {changeCasing(translate(option.value), filterValuesCasing)}
             </FilterOptionLabel>
@@ -60,22 +57,14 @@ export function Filter({
     );
   }
 
-  let selectedOptionComponent: ReactNode;
-  if (filter.type === 'select') {
-    const selectedOption = (filter.selectedOptions as Set<any>).values().next()?.value;
-    selectedOptionComponent =
-      selectOptions.find((option) => option.value === selectedOption)?.component ||
-      selectOptions[0].component;
-  }
-
   return (
     <FilterGroup key={filter.property + filter.title}>
       <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
-          withArrow={true}
-          selected={selectedOptionComponent}
-          options={selectOptions.map((option) => option.component)}
+          value={(filter.selectedOptions as Set<any>).values().next()?.value}
+          onChange={(value) => filter.selectOption(value)}
+          options={selectOptions}
         />
       ) : filter.type === 'date-range' ? (
         <>
@@ -140,11 +129,24 @@ export function Filter({
   );
 }
 
-function changeCasing(str: string, casing?: 'sentence') {
-  if (casing !== 'sentence') return str;
+function changeCasing(
+  str: string,
+  casing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'],
+) {
+  if (!casing || casing === 'original' || !str) return str;
+
+  if (casing === 'lowercase') {
+    return str.toLowerCase();
+  }
+
+  if (casing === 'uppercase') {
+    return str.toUpperCase();
+  }
 
-  const words = str.split(/[\s-_]+/);
-  return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  if (casing === 'sentence') {
+    const words = str.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  }
 }
 
 const FilterGroup = styled.div`

package/src/components/Filter/FilterContent.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { useTranslate } from '@portal/hooks';
 import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter/index';
+import { Filter } from '@theme/components/Filter';
+import { Sidebar } from '@theme/components/Sidebar';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { StyledInput } from '@theme/components/Filter/FilterPopover';
 
@@ -13,7 +16,7 @@ interface FilterContentProps {
   filters: ResolvedFilter[];
   filterTerm: string;
   isMobile: boolean;
-  filterValuesCasing?: 'sentence';
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
 export function FilterContent({
@@ -68,7 +71,7 @@ export function FilterContent({
   );
 }
 
-const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
   width: var(--sidebar-width);
   display: none;
 
@@ -77,7 +80,7 @@ const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
     margin: var(--filter-content-clear-button-margin);
   }
 
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
     display: block;
     border-right: 1px solid var(--filter-content-border-color);
 

package/src/components/Filter/FilterPopover.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Filter, FilterControls } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
 import { useTranslate } from '@portal/hooks';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
@@ -9,13 +11,20 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 interface FilterPopoverProps {
   setIsAddingFilter: (value: boolean) => void;
   filters: ResolvedFilter[];
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
-export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps) {
+export function FilterPopover({
+  setIsAddingFilter,
+  filters,
+  filterValuesCasing,
+}: FilterPopoverProps) {
   const [filterTerm, setFilterTerm] = React.useState('');
   const filteredFilters = filters
     .map((filter) => {
-      const options = filter.options.filter((option) => option.value.includes(filterTerm));
+      const options = filter.options.filter((option) =>
+        option.value.toLowerCase().includes(filterTerm.toLowerCase()),
+      );
       return options.length
         ? {
             ...filter,
@@ -43,6 +52,7 @@ export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps
         setFilterTerm={setFilterTerm}
         filters={filters}
         filterTerm={filterTerm}
+        filterValuesCasing={filterValuesCasing}
         isMobile
       />
       <FilterControls>
@@ -72,7 +82,7 @@ const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
   background-color: var(--filter-popover-background-color);
   display: block;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 `;

package/src/components/Filter/styledVariables.ts

@@ -30,7 +30,7 @@ export const filter = css`
   --filter-option-count-background-color: var(--bg-raised);
 
   --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
+  --filter-content-items-padding: 0 var(--spacing-lg);
   --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
   --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
   --filter-controls-background-color: var(--bg-base);

package/src/components/Footer/Footer.tsx

@@ -21,7 +21,7 @@ export function Footer(): JSX.Element | null {
     <FooterPresentationalComponent
       items={items as ResolvedNavItem[]}
       copyrightText={copyrightText}
-      logo={logo}
+      logo={footer?.logo?.hide ? undefined : logo}
     />
   );
 }

package/src/components/Footer/FooterColumn.tsx

@@ -83,6 +83,8 @@ const FooterColumnContainer = styled.div`
   flex: 1;
   margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
   min-width: var(--footer-column-min-width);
+  align-content: center;
+  flex-wrap: wrap;
 
   ${({ theme }) => theme.mediaQueries.small} {
     text-align: left;

package/src/components/Footer/styledVariables.ts

@@ -42,7 +42,7 @@ export const footer = css`
   --footer-copyright-text-align: start;
 
   --footer-logo-display: block;
-  --footer-logo-margin-right: 86px; // @presenter Spacing
+  --footer-logo-margin-right: 0; // @presenter Spacing
   --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
 
   --footer-language-picker-display: block;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -51,8 +51,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
-      {text}
-      {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
+      {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );

package/src/components/Markdown/Admonition.tsx

@@ -31,18 +31,20 @@ export function Admonition({
       data-hash={dataHash}
     >
       <AlertIcon type={type} />
-      {name ? <Heading type={type}>{name}</Heading> : null}
-      <Content>{children}</Content>
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        <Content>{children}</Content>
+      </TextContainer>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div<AdmonitionTypeProps>`
-  position: relative;
-  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
-  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -58,10 +60,13 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   `}
 `;
 
-const Heading = styled.h5<AdmonitionTypeProps>`
-  display: block;
-  margin: 0 0 10px;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
 
+const Heading = styled.div<AdmonitionTypeProps>`
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/src/components/Markdown/Mermaid.tsx

@@ -28,6 +28,9 @@ export function Mermaid({
 }
 
 const Wrapper = styled.div`
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
   .mermaid > svg {
     font-size: var(--font-size-base) !important;
     max-width: 100%;

package/src/components/Markdown/styledVariables.ts

@@ -7,11 +7,11 @@ export const admonition = css`
   * @tokens Admonition typography
   */
 
-  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
   --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
   --admonition-heading-transform: uppercase;
 
@@ -21,16 +21,16 @@ export const admonition = css`
   */
 
   --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical:  var(--spacing-xs);
+  --admonition-margin-vertical: var(--spacing-lg);
   --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical:  var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
   --admonition-icon-size: 25px;
 
   /**
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: 0; // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: var(--border-width);
 
@@ -148,7 +148,7 @@ export const markdown = css`
   * @tokens Markdown Table
   */
 
-  --md-table-font-size: var(--font-size-base); // @presenter FontSize
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-background-color: transparent; // @presenter Color
 
@@ -216,4 +216,15 @@ export const markdown = css`
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
 
   // @tokens End
-`;
+`;
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/components/Panel/PanelHeader.ts

@@ -18,6 +18,7 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   justify-content: space-between;
   min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/src/components/Panel/styledVariables.ts

@@ -421,7 +421,7 @@ export const apiReferencePanels = css`
   * @tokens Panel try-it tabs
   */
 
-  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
   --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
 

package/src/components/Product/ProductPicker.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import type { ThemeUIConfig } from '../../config';
 
 import { useCurrentProduct, useGlobalData } from '@portal/hooks';
-import { Link } from '@portal/Link';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+// import { Link } from '@portal/Link';
 import { ArrowIcon } from '@theme/icons';
 
 import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
@@ -13,26 +14,30 @@ import { Product } from './Product';
 export const ProductPicker = () => {
   const globalData = useGlobalData() as { theme?: ThemeUIConfig };
   const currentProduct = useCurrentProduct();
-  const currentProductComponent = currentProduct ? (
-    <Product product={currentProduct} />
-  ) : (
-    'Products'
-  );
+  // const currentProductComponent = currentProduct ? (
+  //   <Product product={currentProduct} />
+  // ) : (
+  //   'Products'
+  // );
+  const { push } = usePreloadHistory();
 
   const products = Object.values(globalData?.theme?.products || {});
 
-  const productComponents = products.map((product) => (
-    <Link key={product.slug} to={product.link}>
-      <Product product={product} />
-    </Link>
-  ));
+  const productComponents = products.map((product) => ({
+    element: <Product product={product} />,
+    value: product,
+  }));
 
   return products.length ? (
     <ProductSelect
-      selected={currentProductComponent}
+      value={currentProduct}
+      placeholder="Products"
       options={productComponents}
-      withArrow={true}
       triggerEvent="hover"
+      onChange={(product: typeof currentProduct) => {
+        if (!product) return;
+        push(product.link);
+      }}
     />
   ) : null;
 };

package/src/components/Select/Select.tsx

@@ -1,40 +1,46 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
-export interface SelectProps {
-  selected: React.ReactNode | string;
-  options: React.ReactNode[] | string[];
+export interface SelectProps<T = any> {
+  value: T;
+  options: {
+    element: React.ReactNode | string;
+    value: T;
+    label?: string;
+  }[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  onChange?: (value: React.ReactNode | string) => void;
+  onChange?: (value: any) => void;
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
   icon?: React.ReactNode;
   onlyIcon?: boolean;
+  placeholder?: string;
 }
 
-export const Select = ({
+export function Select<T>({
   className,
-  selected,
+  value,
   options,
   dataAttributes,
-  withArrow,
+  withArrow = true,
   triggerEvent = 'click',
   onChange,
   placement,
   alignment,
   icon,
   onlyIcon,
-}: SelectProps) => {
-  const selectRef = useRef<HTMLDivElement | null>(null);
+  placeholder,
+}: SelectProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [_selected, setSelected] = useState<React.ReactNode | string>(selected);
+  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
 
   const handleOpen = () => {
     setIsOpen(true);
@@ -48,46 +54,56 @@ export const Select = ({
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (value: React.ReactNode | string) => {
-    setSelected(value);
+  const handleSelect = (value: T) => {
+    // setSelectedIdx(options.findIndex(o => o.value === value));
     setIsOpen(false);
     onChange?.(value);
   };
 
-  useOutsideClick(selectRef, handleClose);
+  useOutsideClick(containerRef, handleClose);
 
-  useEffect(() => {
-    handleSelect(selected);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected]);
+  // useEffect(() => {
+  //   handleSelect(selected);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [selected]);
+
+  const selectedOption = options.find((option) => option.value === value);
 
   return (
     <SelectContainer
       {...dataAttributes}
       data-testid="select"
       className={className}
-      ref={selectRef}
+      ref={containerRef}
       onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && <SelectInputValue>{_selected}</SelectInputValue>}
+        {!onlyIcon && (
+          <SelectInputValue>
+            {selectedOption?.label || selectedOption?.element || placeholder}
+          </SelectInputValue>
+        )}
         {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
         <SelectList placement={placement} alignment={alignment}>
           {options.map((option, index) => (
-            <SelectListItem key={index} onClick={() => handleSelect(option)}>
-              {option}
+            <SelectListItem
+              key={index}
+              onClick={() => handleSelect(option.value)}
+              selected={option.value === value}
+            >
+              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
             </SelectListItem>
           ))}
         </SelectList>
       )}
     </SelectContainer>
   );
-};
+}
 
 export const SelectContainer = styled.div`
   position: relative;
@@ -129,7 +145,6 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   min-width: var(--select-list-min-width);
   width: 100%;
   max-width: var(--select-list-max-width);
-  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);
@@ -141,7 +156,7 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   z-index: 1;
 `;
 
-export const SelectListItem = styled.li`
+export const SelectListItem = styled.li<{ selected: boolean }>`
   border-radius: var(--select-list-item-border-radius);
 
   & > * {
@@ -149,6 +164,12 @@ export const SelectListItem = styled.li`
   }
 
   :hover {
-    background-color: var(--select-list-item-active-background-color);
+    background-color: var(--select-list-item-hover-background-color);
   }
+
+  ${({ selected }) =>
+    selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
 `;

package/src/components/Select/styledVariables.ts

@@ -24,7 +24,8 @@ export const select = css`
   --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
   --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
-  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --select-list-item-active-background-color: var(--color-primary-bg); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
 
   // @tokens End
 `;

package/src/components/Separator/SeparatorItem.tsx

@@ -23,5 +23,6 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
 
   :hover {
     color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -4,7 +4,7 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/HeaderWrapper',
   className,
 }))`
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-header-padding-bottom);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
   border-bottom: solid 1px var(--border-secondary);
 `;

package/src/components/Sidebar/VersionPicker.tsx

@@ -9,6 +9,11 @@ export const VersionPicker = styled(Select).attrs(() => ({
     'data-component-name': 'Sidebar/VersionPicker',
   },
 }))<SelectProps>`
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -40,9 +45,5 @@ export const VersionPicker = styled(Select).attrs(() => ({
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--version-picker-list-item-active-background-color);
-    }
   }
 `;