@semcore/carousel 3.50.0-prerelease.5 → 3.50.0-prerelease.7

package/lib/esm/style/carousel.shadow.css

@@ -10,39 +10,22 @@ SContainer {
   transition: transform var(--duration) ease-in-out;
 }
 
-SContentBox,
-SModalBox,
-SIndicator {
+SContentBox, SModalBox {
   position: relative;
   overflow: hidden;
   border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
-}
-
-SContentBox:has(SItem:focus-visible)::after {
-  border-radius: inherit;
-  z-index: 2;
-  position: absolute;
-  inset: 0;
-  content: '';
-  @mixin focus-outline-mixin -2px;
-}
-
-SImageBoxContainer {
-  position: relative;
-  border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
-
-  &:has(SItem:focus-visible)::after {
-    border-radius: inherit;
-    z-index: 2;
-    position: absolute;
-    inset: 0;
-    content: '';
-    @mixin focus-outline-mixin;
-    outline-color: var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7));
-  }
-
-  SItem:focus-visible {
-    outline: none;
+  &:has(SItem[keyboardFocused]) {
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+      z-index: 1;
+      width: calc(100% - 3px * 2);
+      height: calc(100% - 3px * 2);
+      top: 3px;
+      left: 3px;
+    }
   }
 }
 
@@ -59,16 +42,11 @@ SItem {
   border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
   overflow: hidden;
   outline: none;
-
-  > img {
-    display: block;
-  }
 }
 
 SItem[zoomIn] {
   cursor: zoom-in;
 }
-
 SItem[zoomOut] {
   cursor: zoom-out;
 }
@@ -76,28 +54,36 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin: var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;
+  margin-top: var(--intergalactic-spacing-4x, 16px);
   outline: none;
   position: relative;
 }
 
+SIndicators[keyboardFocused]:after {
+  content: '';
+  display: block;
+  position: absolute;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+  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;
   display: block;
   width: 12px;
   height: 12px;
+  border-radius: var(--intergalactic-control-rounded, 6px);
   background-color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
   opacity: var(--intergalactic-disabled-opacity, 0.4);
   object-fit: cover;
   transition: ease-in-out opacity 0.1s;
 }
 
-SIndicator[aria-roledescription="slide"] {
-  width: 100px;
-  height: 100px;
-}
-
 SIndicator:hover {
   opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.4));
 }
@@ -118,17 +104,33 @@ SNext {
   cursor: pointer;
   color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
 
-  SPrevButton span:has(> svg:only-child),
-  SNextButton span:has(> svg:only-child) {
+  SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) {
     margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
     margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
   }
 }
 
+SPrevButton, SNextButton {
+  &:focus-visible {
+    box-shadow: none;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+      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);
 }
-
 SNext {
   margin-left: var(--intergalactic-spacing-2x, 8px);
 }

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
 import ja from "./ja.json.mjs";
 import ko from "./ko.json.mjs";
 import nl from "./nl.json.mjs";
-import pl from "./pl.json.mjs";
 import pt from "./pt.json.mjs";
-import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
 var localizedMessages = {
   de,
   en,

package/lib/esm/translations/de.json.mjs

@@ -6,9 +6,7 @@ const de = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "Karussell",
-  "Carousel.Indicator:aria-roledescription": "Folie"
+  slide
 };
 export {
   de as default,

package/lib/esm/translations/en.json.mjs

@@ -6,9 +6,7 @@ const en = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carousel",
-  "Carousel.Indicator:aria-roledescription": "slide"
+  slide
 };
 export {
   en as default,

package/lib/esm/translations/es.json.mjs

@@ -6,9 +6,7 @@ const es = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carrusel",
-  "Carousel.Indicator:aria-roledescription": "diapositiva"
+  slide
 };
 export {
   es as default,

package/lib/esm/translations/fr.json.mjs

@@ -6,9 +6,7 @@ const fr = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carrousel",
-  "Carousel.Indicator:aria-roledescription": "diapositive"
+  slide
 };
 export {
   fr as default,

package/lib/esm/translations/it.json.mjs

@@ -6,9 +6,7 @@ const it = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carosello",
-  "Carousel.Indicator:aria-roledescription": "slide"
+  slide
 };
 export {
   it as default,

package/lib/esm/translations/ja.json.mjs

@@ -6,9 +6,7 @@ const ja = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "カルーセル",
-  "Carousel.Indicator:aria-roledescription": "スライド"
+  slide
 };
 export {
   ja as default,

package/lib/esm/translations/ko.json.mjs

@@ -6,9 +6,7 @@ const ko = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "캐러셀",
-  "Carousel.Indicator:aria-roledescription": "슬라이드"
+  slide
 };
 export {
   ko as default,

package/lib/esm/translations/nl.json.mjs

@@ -6,9 +6,7 @@ const nl = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carrousel",
-  "Carousel.Indicator:aria-roledescription": "dia"
+  slide
 };
 export {
   nl as default,

package/lib/esm/translations/pl.json.mjs

@@ -6,9 +6,7 @@ const pl = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "karuzela",
-  "Carousel.Indicator:aria-roledescription": "slajd"
+  slide
 };
 export {
   pl as default,

package/lib/esm/translations/pt.json.mjs

@@ -6,9 +6,7 @@ const pt = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carrossel",
-  "Carousel.Indicator:aria-roledescription": "slide"
+  slide
 };
 export {
   pt as default,

package/lib/esm/translations/sv.json.mjs

@@ -6,9 +6,7 @@ const sv = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carousel",
-  "Carousel.Indicator:aria-roledescription": "bild"
+  slide
 };
 export {
   sv as default,

package/lib/esm/translations/tr.json.mjs

@@ -6,9 +6,7 @@ const tr = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "bant",
-  "Carousel.Indicator:aria-roledescription": "slayt"
+  slide
 };
 export {
   tr as default,

package/lib/esm/translations/vi.json.mjs

@@ -6,9 +6,7 @@ const vi = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "carousel",
-  "Carousel.Indicator:aria-roledescription": "slide"
+  slide
 };
 export {
   vi as default,

package/lib/esm/translations/zh.json.mjs

@@ -6,9 +6,7 @@ const zh = {
   next,
   prev,
   slides,
-  slide,
-  "Carousel:aria-roledescription": "广告轮播",
-  "Carousel.Indicator:aria-roledescription": "幻灯片"
+  slide
 };
 export {
   zh as default,

package/lib/types/Carousel.d.ts

@@ -1,3 +1,3 @@
-import type CarouselType from './Carousel.types';
+import CarouselType from './Carousel.types';
 declare const Carousel: typeof CarouselType;
 export default Carousel;

package/lib/types/Carousel.types.d.ts

@@ -1,5 +1,8 @@
-import type { BoxProps } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic, IRootComponentProps } from '@semcore/core';
+import { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';
+import { BoxProps } from '@semcore/flex-box';
+/** @deprecated */
+export interface ICarouselProps extends CarouselProps, UnknownProperties {
+}
 export type CarouselProps = BoxProps & {
     /** Index active item */
     index?: number;
@@ -16,9 +19,8 @@ export type CarouselProps = BoxProps & {
     /** Disables infinite items change in the carousel
      * @default false */
     bounded?: boolean;
-    /** Internal */
+    /** @ignore  */
     step?: number;
-    /** Specifies the locale for i18n support */
     locale?: string;
     /** Enable zoom feature for carousel items */
     zoom?: boolean;
@@ -27,6 +29,9 @@ export type CarouselProps = BoxProps & {
     /** Type of indicators */
     indicators?: 'default' | 'hide' | 'preview';
 };
+/** @deprecated */
+export interface ICarouselContext extends CarouselContext, UnknownProperties {
+}
 export type CarouselContext = {
     getContainerProps: PropGetterFn;
     getItemProps: PropGetterFn;
@@ -69,6 +74,9 @@ export type CarouselItemProps = BoxProps & {
      */
     isOpenZoom?: boolean;
 };
+/** @deprecated */
+export interface ICarouselState extends CarouselState, UnknownProperties {
+}
 export type CarouselState = {
     isOpenZoom: boolean;
     selectedIndex: number;

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -4,111 +4,83 @@ export declare const localizedMessages: {
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     en: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     es: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     fr: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     it: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     ja: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     ko: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     nl: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     pt: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     tr: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     vi: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     zh: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     pl: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
     sv: {
         next: string;
         prev: string;
         slides: string;
         slide: string;
-        "Carousel:aria-roledescription": string;
-        "Carousel.Indicator:aria-roledescription": string;
     };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/carousel",
   "description": "Semrush Carousel Component",
-  "version": "3.50.0-prerelease.5",
+  "version": "3.50.0-prerelease.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,15 +14,15 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.42.0-prerelease.5",
-    "@semcore/icon": "4.63.0-prerelease.5",
-    "@semcore/utils": "4.49.0-prerelease.5",
-    "@semcore/button": "5.44.0-prerelease.5",
-    "@semcore/modal": "4.57.0-prerelease.5",
-    "@semcore/breakpoints": "1.42.0-prerelease.5"
+    "@semcore/flex-box": "5.42.0-prerelease.7",
+    "@semcore/icon": "4.63.0-prerelease.7",
+    "@semcore/utils": "4.49.0-prerelease.7",
+    "@semcore/button": "5.44.0-prerelease.7",
+    "@semcore/modal": "4.57.0-prerelease.7",
+    "@semcore/breakpoints": "1.42.0-prerelease.7"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.5",
+    "@semcore/core": "^2.40.0-prerelease.7",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

package/lib/esm/Carousel.types.mjs

@@ -1 +0,0 @@
-