@semcore/carousel 16.1.12 → 16.1.13-prerelease.2

package/lib/esm/Carousel.mjs

@@ -24,31 +24,31 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SCarousel_m7xcz_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_m7xcz_gg_{display:flex;transition:transform var(--duration_m7xcz) ease-in-out}.___SContentBox_m7xcz_gg_,.___SModalBox_m7xcz_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_m7xcz_gg_:has(.___SItem_m7xcz_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_m7xcz_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_m7xcz_gg_:has(.___SItem_m7xcz_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_m7xcz_gg_ .___SItem_m7xcz_gg_:focus-visible{outline:0}.___SModalContainer_m7xcz_gg_{display:flex;transition:transform var(--duration_m7xcz) ease-in-out}.___SItem_m7xcz_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_m7xcz);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_m7xcz_gg_>img{display:block}.___SItem_m7xcz_gg_.__zoomIn_m7xcz_gg_{cursor:zoom-in}.___SItem_m7xcz_gg_.__zoomOut_m7xcz_gg_{cursor:zoom-out}.___SIndicators_m7xcz_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_m7xcz_gg_{margin:0 calc(.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);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_m7xcz_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_m7xcz_gg_.__active_m7xcz_gg_{opacity:1}.___SIndicator_m7xcz_gg_.__inverted_m7xcz_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_m7xcz_gg_,.___SPrev_m7xcz_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_m7xcz_gg_ .___SNextButton_m7xcz_gg_ span:has(>svg:only-child),.___SNext_m7xcz_gg_ .___SPrevButton_m7xcz_gg_ span:has(>svg:only-child),.___SPrev_m7xcz_gg_ .___SNextButton_m7xcz_gg_ span:has(>svg:only-child),.___SPrev_m7xcz_gg_ .___SPrevButton_m7xcz_gg_ 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)}.___SPrev_m7xcz_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_m7xcz_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_m7xcz_gg_.__disabled_m7xcz_gg_,.___SPrev_m7xcz_gg_.__disabled_m7xcz_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_m7xcz_gg_{transition:none}}',
+    '.___SCarousel_10z0a_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SContentBox_10z0a_gg_,.___SIndicator_10z0a_gg_,.___SModalBox_10z0a_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SImageBoxContainer_10z0a_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_10z0a_gg_:has(.___SItem_10z0a_gg_:focus-visible)::after{border-radius:inherit;z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;content:"";outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset;outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SImageBoxContainer_10z0a_gg_ .___SItem_10z0a_gg_:focus-visible{outline:0}.___SModalContainer_10z0a_gg_{display:flex;transition:transform var(--duration_10z0a) ease-in-out}.___SItem_10z0a_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_10z0a);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_10z0a_gg_>img{display:block}.___SItem_10z0a_gg_.__zoomIn_10z0a_gg_{cursor:zoom-in}.___SItem_10z0a_gg_.__zoomOut_10z0a_gg_{cursor:zoom-out}.___SIndicators_10z0a_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_10z0a_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}.___SIndicator_10z0a_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_10z0a_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_10z0a_gg_.__active_10z0a_gg_{opacity:1}.___SIndicator_10z0a_gg_.__inverted_10z0a_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_10z0a_gg_,.___SPrev_10z0a_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SNext_10z0a_gg_ .___SPrevButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SNextButton_10z0a_gg_ span:has(>svg:only-child),.___SPrev_10z0a_gg_ .___SPrevButton_10z0a_gg_ 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)}.___SPrev_10z0a_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_10z0a_gg_.__disabled_10z0a_gg_,.___SPrev_10z0a_gg_.__disabled_10z0a_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_10z0a_gg_{transition:none}}',
     /*__inner_css_end__*/
-    "m7xcz_gg_"
+    "10z0a_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SCarousel": "___SCarousel_m7xcz_gg_",
-    "__SContainer": "___SContainer_m7xcz_gg_",
-    "--duration": "--duration_m7xcz",
-    "__SContentBox": "___SContentBox_m7xcz_gg_",
-    "__SModalBox": "___SModalBox_m7xcz_gg_",
-    "__SItem": "___SItem_m7xcz_gg_",
-    "__SModalContainer": "___SModalContainer_m7xcz_gg_",
-    "_zoomIn": "__zoomIn_m7xcz_gg_",
-    "_zoomOut": "__zoomOut_m7xcz_gg_",
-    "__SIndicators": "___SIndicators_m7xcz_gg_",
-    "__SIndicator": "___SIndicator_m7xcz_gg_",
-    "_active": "__active_m7xcz_gg_",
-    "_inverted": "__inverted_m7xcz_gg_",
-    "__SPrev": "___SPrev_m7xcz_gg_",
-    "__SNext": "___SNext_m7xcz_gg_",
-    "_disabled": "__disabled_m7xcz_gg_",
-    "__SImageBoxContainer": "___SImageBoxContainer_m7xcz_gg_",
-    "--transform": "--transform_m7xcz",
-    "__SPrevButton": "___SPrevButton_m7xcz_gg_",
-    "__SNextButton": "___SNextButton_m7xcz_gg_"
+    "__SCarousel": "___SCarousel_10z0a_gg_",
+    "__SContainer": "___SContainer_10z0a_gg_",
+    "--duration": "--duration_10z0a",
+    "__SContentBox": "___SContentBox_10z0a_gg_",
+    "__SModalBox": "___SModalBox_10z0a_gg_",
+    "__SIndicator": "___SIndicator_10z0a_gg_",
+    "__SItem": "___SItem_10z0a_gg_",
+    "__SModalContainer": "___SModalContainer_10z0a_gg_",
+    "_zoomIn": "__zoomIn_10z0a_gg_",
+    "_zoomOut": "__zoomOut_10z0a_gg_",
+    "__SIndicators": "___SIndicators_10z0a_gg_",
+    "_active": "__active_10z0a_gg_",
+    "_inverted": "__inverted_10z0a_gg_",
+    "__SPrev": "___SPrev_10z0a_gg_",
+    "__SNext": "___SNext_10z0a_gg_",
+    "_disabled": "__disabled_10z0a_gg_",
+    "__SImageBoxContainer": "___SImageBoxContainer_10z0a_gg_",
+    "--transform": "--transform_10z0a",
+    "__SPrevButton": "___SPrevButton_10z0a_gg_",
+    "__SNextButton": "___SNextButton_10z0a_gg_"
   })
 );
 var MAP_TRANSFORM = {
@@ -483,27 +483,25 @@ var CarouselRoot = /* @__PURE__ */ (function(_Component) {
     value: function render() {
       var _ref2 = this.asProps, _ref1, _this6 = this;
       var SCarousel = Box;
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], ariaRoledescription = _this$asProps4["aria-roledescription"], indicators = _this$asProps4.indicators;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, uid = _this$asProps4.uid, hasZoom = _this$asProps4.zoom, ariaLabel = _this$asProps4["aria-label"], indicators = _this$asProps4.indicators, getI18nText = _this$asProps4.getI18nText;
       var ComponentItems = findAllComponents(Children, ["Carousel.Item"]);
       var Controls = findAllComponents(Children, ["Carousel.Prev", "Carousel.Next", "Carousel.Indicators"]);
       return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SCarousel, _ref1.cn("SCarousel", _objectSpread({}, assignProps({
         "role": "region",
-        "roledescription": "carousel",
+        "aria-roledescription": getI18nText("Carousel:aria-roledescription"),
         "onKeyDown": this.handlerKeyDown,
         "onTouchStart": this.handlerTouchStart,
         "onTouchEnd": this.handlerTouchEnd,
         "ref": this.refCarousel,
-        "id": "igc-".concat(uid, "-carousel"),
-        "aria-roledescription": ariaRoledescription
+        "id": "igc-".concat(uid, "-carousel")
       }, _ref2))), Controls.length === 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, _ref1.cn("Flex", {}), /* @__PURE__ */ React.createElement(Carousel.Prev, null), /* @__PURE__ */ React.createElement(Carousel.ContentBox, null, /* @__PURE__ */ React.createElement(Carousel.Container, {
         "aria-label": ariaLabel
       }, /* @__PURE__ */ React.createElement(Children, _ref1.cn("Children", {})))), /* @__PURE__ */ React.createElement(Carousel.Next, null)), indicators === "default" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null), indicators === "preview" && /* @__PURE__ */ React.createElement(Carousel.Indicators, null, function() {
         return ComponentItems.map(function(item, index) {
           return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({}, item.props, {
             key: item.key,
-            w: 100,
-            h: 100,
-            "aria-roledescription": "slide",
+            w: void 0,
+            "aria-roledescription": getI18nText("Carousel.Indicator:aria-roledescription"),
             active: _this6.isSelected(index),
             onClick: _this6.bindHandlerClickIndicator(index)
           }));

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

@@ -11,7 +11,8 @@ SContainer {
 }
 
 SContentBox,
-SModalBox {
+SModalBox,
+SIndicator {
   position: relative;
   overflow: hidden;
   border-radius: var(--intergalactic-surface-rounded, 6px);
@@ -86,13 +87,17 @@ SIndicator {
   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);
   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));
 }

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/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": "16.1.12",
+  "version": "16.1.13-prerelease.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.7.3",
+    "@semcore/icon": "16.7.3-prerelease.2",
     "@semcore/button": "16.0.12",
     "@semcore/modal": "16.1.12",
     "@semcore/flex-box": "16.0.11",

package/src/Carousel.tsx

@@ -531,8 +531,8 @@ class CarouselRoot extends Component<
       uid,
       zoom: hasZoom,
       'aria-label': ariaLabel,
-      'aria-roledescription': ariaRoledescription,
       indicators,
+      getI18nText,
     } = this.asProps;
     const ComponentItems = findAllComponents(Children, ['Carousel.Item']);
     const Controls = findAllComponents(Children, [
@@ -545,13 +545,12 @@ class CarouselRoot extends Component<
       <SCarousel
         render={Box}
         role='region'
-        roledescription='carousel'
+        aria-roledescription={getI18nText('Carousel:aria-roledescription')}
         onKeyDown={this.handlerKeyDown}
         onTouchStart={this.handlerTouchStart}
         onTouchEnd={this.handlerTouchEnd}
         ref={this.refCarousel}
         id={`igc-${uid}-carousel`}
-        aria-roledescription={ariaRoledescription}
       >
         {Controls.length === 0
           ? (
@@ -573,9 +572,8 @@ class CarouselRoot extends Component<
                         <Carousel.Indicator
                           {...item.props}
                           key={item.key}
-                          w={100}
-                          h={100}
-                          aria-roledescription='slide'
+                          w={undefined}
+                          aria-roledescription={getI18nText('Carousel.Indicator:aria-roledescription')}
                           active={this.isSelected(index)}
                           onClick={this.bindHandlerClickIndicator(index)}
                         />

package/src/style/carousel.shadow.css

@@ -11,7 +11,8 @@ SContainer {
 }
 
 SContentBox,
-SModalBox {
+SModalBox,
+SIndicator {
   position: relative;
   overflow: hidden;
   border-radius: var(--intergalactic-surface-rounded, 6px);
@@ -86,13 +87,17 @@ SIndicator {
   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);
   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));
 }

package/src/translations/de.json

@@ -2,5 +2,7 @@
   "next": "Nächste Folie",
   "prev": "Vorherige Folie",
   "slides": "Folien",
-  "slide": "Folie {slideNumber}"
+  "slide": "Folie {slideNumber}",
+  "Carousel:aria-roledescription": "Karussell",
+  "Carousel.Indicator:aria-roledescription": "Folie"
 }

package/src/translations/en.json

@@ -2,5 +2,7 @@
   "next": "Next slide",
   "prev": "Previous slide",
   "slides": "Slides",
-  "slide": "Slide {slideNumber}"
+  "slide": "Slide {slideNumber}",
+  "Carousel:aria-roledescription": "carousel",
+  "Carousel.Indicator:aria-roledescription": "slide"
 }

package/src/translations/es.json

@@ -2,5 +2,7 @@
   "next": "Próxima diapositiva",
   "prev": "Diapositiva anterior",
   "slides": "Diapositivas",
-  "slide": "Diapositiva {slideNumber}"
+  "slide": "Diapositiva {slideNumber}",
+  "Carousel:aria-roledescription": "carrusel",
+  "Carousel.Indicator:aria-roledescription": "diapositiva"
 }

package/src/translations/fr.json

@@ -2,5 +2,7 @@
   "next": "Diapositive suivante",
   "prev": "Diapositive précédente",
   "slides": "Diapositives",
-  "slide": "Diapositive {slideNumber}"
+  "slide": "Diapositive {slideNumber}",
+  "Carousel:aria-roledescription": "carrousel",
+  "Carousel.Indicator:aria-roledescription": "diapositive"
 }

package/src/translations/it.json

@@ -2,5 +2,7 @@
   "next": "Slide successiva",
   "prev": "Slide precedente",
   "slides": "Slide",
-  "slide": "Slide {slideNumber}"
+  "slide": "Slide {slideNumber}",
+  "Carousel:aria-roledescription": "carosello",
+  "Carousel.Indicator:aria-roledescription": "slide"
 }

package/src/translations/ja.json

@@ -2,5 +2,7 @@
   "next": "次のスライド",
   "prev": "前のスライド",
   "slides": "スライド",
-  "slide": "スライド{slideNumber}"
+  "slide": "スライド{slideNumber}",
+  "Carousel:aria-roledescription": "カルーセル",
+  "Carousel.Indicator:aria-roledescription": "スライド"
 }

package/src/translations/ko.json

@@ -2,5 +2,7 @@
   "next": "다음 슬라이드",
   "prev": "이전 슬라이드",
   "slides": "슬라이드",
-  "slide": "슬라이드 {slideNumber}"
+  "slide": "슬라이드 {slideNumber}",
+  "Carousel:aria-roledescription": "캐러셀",
+  "Carousel.Indicator:aria-roledescription": "슬라이드"
 }

package/src/translations/nl.json

@@ -2,5 +2,7 @@
   "next": "Volgende dia",
   "prev": "Vorige dia",
   "slides": "Dia's",
-  "slide": "Dia {slideNumber}"
+  "slide": "Dia {slideNumber}",
+  "Carousel:aria-roledescription": "carrousel",
+  "Carousel.Indicator:aria-roledescription": "dia"
 }

package/src/translations/pl.json

@@ -2,5 +2,7 @@
   "next": "Następny slajd",
   "prev": "Poprzedni slajd",
   "slides": "Slajdy",
-  "slide": "Slajd {slideNumber}"
+  "slide": "Slajd {slideNumber}",
+  "Carousel:aria-roledescription": "karuzela",
+  "Carousel.Indicator:aria-roledescription": "slajd"
 }

package/src/translations/pt.json

@@ -2,5 +2,7 @@
   "next": "Próximo slide",
   "prev": "Slide anterior",
   "slides": "Slides",
-  "slide": "Slide {slideNumber}"
+  "slide": "Slide {slideNumber}",
+  "Carousel:aria-roledescription": "carrossel",
+  "Carousel.Indicator:aria-roledescription": "slide"
 }

package/src/translations/sv.json

@@ -2,5 +2,7 @@
   "next": "Nästa bild",
   "prev": "Föregående bild",
   "slides": "Bilder",
-  "slide": "Bild {slideNumber}"
+  "slide": "Bild {slideNumber}",
+  "Carousel:aria-roledescription": "carousel",
+  "Carousel.Indicator:aria-roledescription": "bild"
 }

package/src/translations/tr.json

@@ -2,5 +2,7 @@
   "next": "Sonraki slayt",
   "prev": "Önceki slayt",
   "slides": "Slaytlar",
-  "slide": "Slayt {slideNumber}"
+  "slide": "Slayt {slideNumber}",
+  "Carousel:aria-roledescription": "bant",
+  "Carousel.Indicator:aria-roledescription": "slayt"
 }

package/src/translations/vi.json

@@ -2,5 +2,7 @@
   "next": "Slide tiếp theo",
   "prev": "Slide trước",
   "slides": "Slide",
-  "slide": "Slide {slideNumber}"
+  "slide": "Slide {slideNumber}",
+  "Carousel:aria-roledescription": "carousel",
+  "Carousel.Indicator:aria-roledescription": "slide"
 }

package/src/translations/zh.json

@@ -2,5 +2,7 @@
   "next": "下一张幻灯片",
   "prev": "上一张幻灯片",
   "slides": "幻灯片",
-  "slide": "幻灯片 {slideNumber}"
+  "slide": "幻灯片 {slideNumber}",
+  "Carousel:aria-roledescription": "广告轮播",
+  "Carousel.Indicator:aria-roledescription": "幻灯片"
 }