@semcore/carousel 3.47.1 → 16.0.0-prerelease.2

package/src/Carousel.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import Button from '@semcore/button';
 import Modal from '@semcore/modal';
 import { Box, Flex } from '@semcore/flex-box';
 import ChevronRight from '@semcore/icon/ChevronRight/l';
 import ChevronLeft from '@semcore/icon/ChevronLeft/l';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-import logger from '@semcore/utils/lib/logger';
+import logger from '@semcore/core/lib/utils/logger';
 import style from './style/carousel.shadow.css';
 import CarouselType, {
   CarouselProps,
@@ -21,9 +21,9 @@ import CarouselType, {
   CarouselIndicatorProps,
 } from './Carousel.types';
 import { BoxProps } from '@semcore/flex-box';
-import { findAllComponents } from '@semcore/utils/lib/findComponent';
+import { findAllComponents } from '@semcore/core/lib/utils/findComponent';
 import { createBreakpoints } from '@semcore/breakpoints';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 
 const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
   ArrowLeft: 'left',
@@ -33,7 +33,7 @@ const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
 const enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const;
 const media = ['(min-width: 481px)', '(max-width: 480px)'];
 const BreakPoints = createBreakpoints(media);
-const isSmallScreen = (index: number) => index === 1;
+const isSmallScreen = (index?: number) => index === 1;
 
 class CarouselRoot extends Component<
   CarouselProps,
@@ -406,6 +406,7 @@ class CarouselRoot extends Component<
         key,
       })),
       role: 'tablist',
+      tabIndex: 0,
       'aria-label': getI18nText('slides'),
     };
   }
@@ -696,6 +697,7 @@ const Prev = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
+          innerOutline
         />
       )}
     </SPrev>,
@@ -718,6 +720,7 @@ const Next = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
+          innerOutline
         />
       )}
     </SNext>,
@@ -735,13 +738,12 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
   }
   return sstyled(styles)(
     <SIndicators render={Box}>
-      {items?.map((item, index) => (
+      {items?.map((item: CarouselItem, index: number) => (
         <Carousel.Indicator key={index} {...item} inverted={inverted} />
       ))}
     </SIndicators>,
   );
 };
-Indicators.enhance = [keyboardFocusEnhance()];
 
 const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
   const SIndicator = Root;

package/src/style/carousel.shadow.css

@@ -54,23 +54,11 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin-top: var(--intergalactic-spacing-4x, 16px);
+  margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
   outline: none;
   position: relative;
 }
 
-SIndicators[keyboardFocused]:after {
-  content: '';
-  display: block;
-  position: absolute;
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  z-index: 1;
-  width: calc(100% - 3px * 2);
-  height: calc(100% - 3px);
-  top: 0;
-  left: 3px;
-}
-
 SIndicator {
   margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
   cursor: pointer;
@@ -110,24 +98,6 @@ SNext {
   }
 }
 
-SPrevButton, SNextButton {
-  &:focus-visible {
-    box-shadow: none;
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-      z-index: 1;
-      width: calc(100% - 3px * 2);
-      height: calc(100% - 3px * 2);
-      top: 3px;
-      left: 3px;
-      border-radius: var(--intergalactic-control-rounded, 6px);
-    }
-  }
-}
-
 SPrev {
   margin-right: var(--intergalactic-spacing-2x, 8px);
 }