@semcore/carousel 3.49.2-prerelease.0 → 3.50.0-prerelease.0

package/lib/esm/index.mjs

@@ -1,4 +1,5 @@
 import { default as default2 } from "./Carousel.mjs";
+import "./Carousel.types.mjs";
 export {
   default2 as default
 };

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

@@ -10,22 +10,39 @@ SContainer {
   transition: transform var(--duration) ease-in-out;
 }
 
-SContentBox, SModalBox {
+SContentBox,
+SModalBox,
+SIndicator {
   position: relative;
   overflow: hidden;
-  border-radius: var(--intergalactic-surface-rounded, 6px);
-  &:has(SItem[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 * 2);
-      top: 3px;
-      left: 3px;
-    }
+  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;
   }
 }
 
@@ -39,14 +56,19 @@ SItem {
   max-width: 100%;
   box-sizing: border-box;
   transform: var(--transform);
-  border-radius: var(--intergalactic-surface-rounded, 6px);
+  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;
 }
@@ -54,38 +76,30 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin-top: var(--intergalactic-spacing-4x, 16px);
+  margin: var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;
   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;
   display: block;
   width: 12px;
   height: 12px;
-  border-radius: var(--intergalactic-control-rounded, 6px);
-  background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  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.3));
+  opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.4));
 }
 
 SIndicator[active] {
@@ -93,7 +107,7 @@ SIndicator[active] {
 }
 
 SIndicator[inverted] {
-  background-color: var(--intergalactic-icon-primary-invert, #ffffff);
+  background-color: var(--intergalactic-icon-primary-invert, oklch(0.998 0.003 173.3 / 0.808));
 }
 
 SPrev,
@@ -102,42 +116,26 @@ SNext {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: var(--intergalactic-icon-primary-neutral, #6c6e79);
+  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 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);
 }
+
 SNext {
   margin-left: var(--intergalactic-spacing-2x, 8px);
 }
 
 SPrev[disabled],
 SNext[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/types/Carousel.d.ts

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

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

@@ -1,8 +1,5 @@
-import { PropGetterFn, UnknownProperties, Intergalactic, IRootComponentProps } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
-/** @deprecated */
-export interface ICarouselProps extends CarouselProps, UnknownProperties {
-}
+import type { BoxProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic, IRootComponentProps } from '@semcore/core';
 export type CarouselProps = BoxProps & {
     /** Index active item */
     index?: number;
@@ -19,8 +16,9 @@ export type CarouselProps = BoxProps & {
     /** Disables infinite items change in the carousel
      * @default false */
     bounded?: boolean;
-    /** @ignore  */
+    /** Internal */
     step?: number;
+    /** Specifies the locale for i18n support */
     locale?: string;
     /** Enable zoom feature for carousel items */
     zoom?: boolean;
@@ -29,9 +27,6 @@ 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;
@@ -74,9 +69,6 @@ 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,83 +4,111 @@ 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.49.2-prerelease.0",
+  "version": "3.50.0-prerelease.0",
   "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.41.4-prerelease.0",
-    "@semcore/icon": "4.62.1-prerelease.0",
-    "@semcore/utils": "4.48.5-prerelease.0",
-    "@semcore/button": "5.43.3-prerelease.0",
-    "@semcore/modal": "4.56.2-prerelease.0",
-    "@semcore/breakpoints": "1.41.4-prerelease.0"
+    "@semcore/flex-box": "5.42.0-prerelease.0",
+    "@semcore/icon": "4.63.0-prerelease.0",
+    "@semcore/utils": "4.49.0-prerelease.0",
+    "@semcore/button": "5.44.0-prerelease.0",
+    "@semcore/modal": "4.57.0-prerelease.0",
+    "@semcore/breakpoints": "1.42.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.4-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },