@semcore/carousel 16.1.9 → 16.1.10-prerelease.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Carousel.js +35 -31
  3. package/lib/cjs/Carousel.js.map +1 -1
  4. package/lib/cjs/style/carousel.shadow.css +38 -15
  5. package/lib/es6/Carousel.js +33 -29
  6. package/lib/es6/Carousel.js.map +1 -1
  7. package/lib/es6/style/carousel.shadow.css +38 -15
  8. package/lib/esm/Carousel.mjs +33 -31
  9. package/lib/esm/style/carousel.shadow.css +38 -15
  10. package/package.json +9 -9
  11. package/src/Carousel.tsx +32 -29
  12. package/src/style/carousel.shadow.css +38 -15
package/lib/esm/Carousel.mjs CHANGED
@@ -3,9 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
3
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
4
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
5
5
  import _createClass from "@babel/runtime/helpers/esm/createClass";
6
- import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
7
- import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
8
- import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
6
+ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
9
7
  import _inherits from "@babel/runtime/helpers/esm/inherits";
10
8
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
11
9
  import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
@@ -21,38 +19,36 @@ import ChevronRight from "@semcore/icon/ChevronRight/l";
21
19
  import Modal from "@semcore/modal";
22
20
  import React from "react";
23
21
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
24
- function _callSuper(t, o, e) {
25
- return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
26
- }
27
22
  /*!__reshadow-styles__:"./style/carousel.shadow.css"*/
28
23
  var style = (
29
24
  /*__reshadow_css_start__*/
30
25
  (sstyled.insert(
31
26
  /*__inner_css_start__*/
32
- '.___SCarousel_crjyj_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_crjyj_gg_{display:flex;transition:transform var(--duration_crjyj) ease-in-out}.___SContentBox_crjyj_gg_,.___SModalBox_crjyj_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_crjyj_gg_:has(.___SItem_crjyj_gg_:focus-visible):after,.___SModalBox_crjyj_gg_:has(.___SItem_crjyj_gg_:focus-visible):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}.___SModalContainer_crjyj_gg_{display:flex;transition:transform var(--duration_crjyj) ease-in-out}.___SItem_crjyj_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_crjyj);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_crjyj_gg_.__zoomIn_crjyj_gg_{cursor:zoom-in}.___SItem_crjyj_gg_.__zoomOut_crjyj_gg_{cursor:zoom-out}.___SIndicators_crjyj_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;outline:0;position:relative}.___SIndicator_crjyj_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_crjyj_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_crjyj_gg_.__active_crjyj_gg_{opacity:1}.___SIndicator_crjyj_gg_.__inverted_crjyj_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_crjyj_gg_,.___SPrev_crjyj_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_crjyj_gg_ .___SNextButton_crjyj_gg_ span:has(>svg:only-child),.___SNext_crjyj_gg_ .___SPrevButton_crjyj_gg_ span:has(>svg:only-child),.___SPrev_crjyj_gg_ .___SNextButton_crjyj_gg_ span:has(>svg:only-child),.___SPrev_crjyj_gg_ .___SPrevButton_crjyj_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_crjyj_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_crjyj_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_crjyj_gg_.__disabled_crjyj_gg_,.___SPrev_crjyj_gg_.__disabled_crjyj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_crjyj_gg_{transition:none}}',
27
+ '.___SCarousel_1yeln_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_1yeln_gg_{display:flex;transition:transform var(--duration_1yeln) ease-in-out}.___SContentBox_1yeln_gg_,.___SModalBox_1yeln_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_1yeln_gg_:has(.___SItem_1yeln_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_1yeln_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SImageBoxContainer_1yeln_gg_:has(.___SItem_1yeln_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_1yeln_gg_ .___SItem_1yeln_gg_:focus-visible{outline:0}.___SModalContainer_1yeln_gg_{display:flex;transition:transform var(--duration_1yeln) ease-in-out}.___SItem_1yeln_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1yeln);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_1yeln_gg_>img{display:block}.___SItem_1yeln_gg_.__zoomIn_1yeln_gg_{cursor:zoom-in}.___SItem_1yeln_gg_.__zoomOut_1yeln_gg_{cursor:zoom-out}.___SIndicators_1yeln_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_1yeln_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_1yeln_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1yeln_gg_.__active_1yeln_gg_{opacity:1}.___SIndicator_1yeln_gg_.__inverted_1yeln_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_1yeln_gg_,.___SPrev_1yeln_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_1yeln_gg_ .___SNextButton_1yeln_gg_ span:has(>svg:only-child),.___SNext_1yeln_gg_ .___SPrevButton_1yeln_gg_ span:has(>svg:only-child),.___SPrev_1yeln_gg_ .___SNextButton_1yeln_gg_ span:has(>svg:only-child),.___SPrev_1yeln_gg_ .___SPrevButton_1yeln_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_1yeln_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1yeln_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1yeln_gg_.__disabled_1yeln_gg_,.___SPrev_1yeln_gg_.__disabled_1yeln_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1yeln_gg_{transition:none}}',
33
28
  /*__inner_css_end__*/
34
- "crjyj_gg_"
29
+ "1yeln_gg_"
35
30
  ), /*__reshadow_css_end__*/
36
31
  {
37
- "__SCarousel": "___SCarousel_crjyj_gg_",
38
- "__SContainer": "___SContainer_crjyj_gg_",
39
- "--duration": "--duration_crjyj",
40
- "__SModalContainer": "___SModalContainer_crjyj_gg_",
41
- "__SItem": "___SItem_crjyj_gg_",
42
- "--transform": "--transform_crjyj",
43
- "_zoomIn": "__zoomIn_crjyj_gg_",
44
- "_zoomOut": "__zoomOut_crjyj_gg_",
45
- "__SIndicators": "___SIndicators_crjyj_gg_",
46
- "__SIndicator": "___SIndicator_crjyj_gg_",
47
- "_active": "__active_crjyj_gg_",
48
- "_inverted": "__inverted_crjyj_gg_",
49
- "__SPrev": "___SPrev_crjyj_gg_",
50
- "__SNext": "___SNext_crjyj_gg_",
51
- "_disabled": "__disabled_crjyj_gg_",
52
- "__SContentBox": "___SContentBox_crjyj_gg_",
53
- "__SModalBox": "___SModalBox_crjyj_gg_",
54
- "__SPrevButton": "___SPrevButton_crjyj_gg_",
55
- "__SNextButton": "___SNextButton_crjyj_gg_"
32
+ "__SCarousel": "___SCarousel_1yeln_gg_",
33
+ "__SContainer": "___SContainer_1yeln_gg_",
34
+ "--duration": "--duration_1yeln",
35
+ "__SContentBox": "___SContentBox_1yeln_gg_",
36
+ "__SModalBox": "___SModalBox_1yeln_gg_",
37
+ "__SItem": "___SItem_1yeln_gg_",
38
+ "__SModalContainer": "___SModalContainer_1yeln_gg_",
39
+ "_zoomIn": "__zoomIn_1yeln_gg_",
40
+ "_zoomOut": "__zoomOut_1yeln_gg_",
41
+ "__SIndicators": "___SIndicators_1yeln_gg_",
42
+ "__SIndicator": "___SIndicator_1yeln_gg_",
43
+ "_active": "__active_1yeln_gg_",
44
+ "_inverted": "__inverted_1yeln_gg_",
45
+ "__SPrev": "___SPrev_1yeln_gg_",
46
+ "__SNext": "___SNext_1yeln_gg_",
47
+ "_disabled": "__disabled_1yeln_gg_",
48
+ "__SImageBoxContainer": "___SImageBoxContainer_1yeln_gg_",
49
+ "--transform": "--transform_1yeln",
50
+ "__SPrevButton": "___SPrevButton_1yeln_gg_",
51
+ "__SNextButton": "___SNextButton_1yeln_gg_"
56
52
  })
57
53
  );
58
54
  var MAP_TRANSFORM = {
@@ -440,6 +436,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
440
436
  var _ref = this.asProps, _ref0, _this5 = this;
441
437
  var SModalContainer = Box;
442
438
  var SModalBox = Box;
439
+ var SImageBoxContainer = Box;
443
440
  var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, zoomWidth = _this$asProps3.zoomWidth;
444
441
  var isOpenZoom = this.state.isOpenZoom;
445
442
  return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(Modal, _ref0.cn("Modal", {
@@ -451,7 +448,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
451
448
  "direction": isSmall ? "column" : "row"
452
449
  }), !isSmall && /* @__PURE__ */ React.createElement(Carousel.Prev, {
453
450
  inverted: true
454
- }), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, assignProps({
451
+ }), /* @__PURE__ */ React.createElement(SImageBoxContainer, _ref0.cn("SImageBoxContainer", {}), /* @__PURE__ */ React.createElement(SModalBox, _ref0.cn("SModalBox", {}), /* @__PURE__ */ React.createElement(SModalContainer, _ref0.cn("SModalContainer", _objectSpread({}, assignProps({
455
452
  "aria-live": "polite",
456
453
  "use:duration": "".concat(duration, "ms"),
457
454
  "ref": this.refModalContainer,
@@ -468,7 +465,7 @@ var CarouselRoot = /* @__PURE__ */ function(_Component) {
468
465
  zoomOut: true,
469
466
  transform: _this5.isSelected(i) ? _this5.getTransform() : void 0
470
467
  }));
471
- }))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
468
+ })))), isSmall ? /* @__PURE__ */ React.createElement(Flex, _ref0.cn("Flex", {
472
469
  "justifyContent": "center",
473
470
  "mt": 2
474
471
  }), /* @__PURE__ */ React.createElement(Carousel.Prev, {
@@ -647,9 +644,13 @@ var Indicators = function Indicators2(_ref19) {
647
644
  var SIndicators = Box;
648
645
  if (Children.origin) {
649
646
  var _ref15;
650
- return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
647
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, assignProps({
648
+ "innerOffset": true
649
+ }, _ref8))), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
651
650
  }
652
- return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, assignProps({}, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
651
+ return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, assignProps({
652
+ "invertOutline": inverted
653
+ }, _ref8))), items === null || items === void 0 ? void 0 : items.map(function(item, index) {
653
654
  return /* @__PURE__ */ React.createElement(Carousel.Indicator, _extends({
654
655
  key: index
655
656
  }, item, {
@@ -660,6 +661,7 @@ var Indicators = function Indicators2(_ref19) {
660
661
  var Indicator = function Indicator2(_ref20) {
661
662
  var _ref9 = arguments[0], _ref17;
662
663
  var styles = _ref20.styles, Children = _ref20.Children;
664
+ _ref20.inverted;
663
665
  var SIndicator = Box;
664
666
  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
665
667
  };
package/lib/esm/style/carousel.shadow.css CHANGED
@@ -10,22 +10,38 @@ SContainer {
10
10
  transition: transform var(--duration) ease-in-out;
11
11
  }
12
12
 
13
- SContentBox, SModalBox {
13
+ SContentBox,
14
+ SModalBox {
14
15
  position: relative;
15
16
  overflow: hidden;
16
17
  border-radius: var(--intergalactic-surface-rounded, 6px);
17
- &:has(SItem:focus-visible) {
18
- &:after {
19
- content: '';
20
- display: block;
21
- position: absolute;
22
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
23
- z-index: 1;
24
- width: calc(100% - 3px * 2);
25
- height: calc(100% - 3px * 2);
26
- top: 3px;
27
- left: 3px;
28
- }
18
+ }
19
+
20
+ SContentBox:has(SItem:focus-visible)::after {
21
+ border-radius: inherit;
22
+ z-index: 2;
23
+ position: absolute;
24
+ inset: 0;
25
+ content: '';
26
+ @mixin focus-outline-mixin -2px;
27
+ }
28
+
29
+ SImageBoxContainer {
30
+ position: relative;
31
+ border-radius: var(--intergalactic-surface-rounded, 6px);
32
+
33
+ &:has(SItem:focus-visible)::after {
34
+ border-radius: inherit;
35
+ z-index: 2;
36
+ position: absolute;
37
+ inset: 0;
38
+ content: '';
39
+ @mixin focus-outline-mixin;
40
+ outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
41
+ }
42
+
43
+ SItem:focus-visible {
44
+ outline: none;
29
45
  }
30
46
  }
31
47
 
@@ -42,11 +58,16 @@ SItem {
42
58
  border-radius: var(--intergalactic-surface-rounded, 6px);
43
59
  overflow: hidden;
44
60
  outline: none;
61
+
62
+ > img {
63
+ display: block;
64
+ }
45
65
  }
46
66
 
47
67
  SItem[zoomIn] {
48
68
  cursor: zoom-in;
49
69
  }
70
+
50
71
  SItem[zoomOut] {
51
72
  cursor: zoom-out;
52
73
  }
@@ -54,7 +75,7 @@ SItem[zoomOut] {
54
75
  SIndicators {
55
76
  display: flex;
56
77
  justify-content: center;
57
- margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
78
+ margin: var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;
58
79
  outline: none;
59
80
  position: relative;
60
81
  }
@@ -92,7 +113,8 @@ SNext {
92
113
  cursor: pointer;
93
114
  color: var(--intergalactic-icon-primary-neutral, #6c6e79);
94
115
 
95
- SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) {
116
+ SPrevButton span:has(> svg:only-child),
117
+ SNextButton span:has(> svg:only-child) {
96
118
  margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
97
119
  margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
98
120
  }
@@ -101,6 +123,7 @@ SNext {
101
123
  SPrev {
102
124
  margin-right: var(--intergalactic-spacing-2x, 8px);
103
125
  }
126
+
104
127
  SNext {
105
128
  margin-left: var(--intergalactic-spacing-2x, 8px);
106
129
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/carousel",
3
3
  "description": "Semrush Carousel Component",
4
- "version": "16.1.9",
4
+ "version": "16.1.10-prerelease.3",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/icon": "16.7.1",
18
- "@semcore/button": "16.0.9",
19
- "@semcore/modal": "16.1.9",
20
- "@semcore/flex-box": "16.0.9",
21
- "@semcore/breakpoints": "16.0.9"
17
+ "@semcore/icon": "16.5.1-prerelease.3",
18
+ "@semcore/button": "16.0.10-prerelease.3",
19
+ "@semcore/modal": "16.1.10-prerelease.3",
20
+ "@semcore/flex-box": "16.0.10-prerelease.3",
21
+ "@semcore/breakpoints": "16.0.10-prerelease.3"
22
22
  },
23
23
  "peerDependencies": {
24
- "@semcore/base-components": "^16.0.0"
24
+ "@semcore/base-components": "^16.4.0-prerelease.3"
25
25
  },
26
26
  "repository": {
27
27
  "type": "git",
@@ -29,8 +29,8 @@
29
29
  "directory": "semcore/carousel"
30
30
  },
31
31
  "devDependencies": {
32
- "@semcore/testing-utils": "1.0.0",
33
- "@semcore/core": "16.3.0"
32
+ "@semcore/core": "16.5.0-prerelease.3",
33
+ "@semcore/testing-utils": "1.0.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"
package/src/Carousel.tsx CHANGED
@@ -466,6 +466,7 @@ class CarouselRoot extends Component<
466
466
  renderModal(isSmall: boolean, ComponentItems: any[]) {
467
467
  const SModalContainer = Root;
468
468
  const SModalBox = Box;
469
+ const SImageBoxContainer = Box;
469
470
  const { styles, uid, duration, zoomWidth } = this.asProps;
470
471
  const { isOpenZoom } = this.state;
471
472
 
@@ -478,32 +479,34 @@ class CarouselRoot extends Component<
478
479
  >
479
480
  <Flex direction={isSmall ? 'column' : 'row'}>
480
481
  {!isSmall && <Carousel.Prev inverted={true} />}
481
- <SModalBox>
482
- <SModalContainer
483
- render={Box}
484
- aria-live='polite'
485
- use:duration={`${duration}ms`}
486
- ref={this.refModalContainer}
487
- use:w={undefined}
488
- wMax={zoomWidth}
489
- >
490
- {ComponentItems.map((item, i) => {
491
- return (
492
- <Carousel.Item
493
- {...item.props}
494
- key={item.key}
495
- uid={uid}
496
- index={i}
497
- current={this.isSelected(i)}
498
- toggleItem={undefined}
499
- zoom={true}
500
- zoomOut={true}
501
- transform={this.isSelected(i) ? this.getTransform() : undefined}
502
- />
503
- );
504
- })}
505
- </SModalContainer>
506
- </SModalBox>
482
+ <SImageBoxContainer>
483
+ <SModalBox>
484
+ <SModalContainer
485
+ render={Box}
486
+ aria-live='polite'
487
+ use:duration={`${duration}ms`}
488
+ ref={this.refModalContainer}
489
+ use:w={undefined}
490
+ wMax={zoomWidth}
491
+ >
492
+ {ComponentItems.map((item, i) => {
493
+ return (
494
+ <Carousel.Item
495
+ {...item.props}
496
+ key={item.key}
497
+ uid={uid}
498
+ index={i}
499
+ current={this.isSelected(i)}
500
+ toggleItem={undefined}
501
+ zoom={true}
502
+ zoomOut={true}
503
+ transform={this.isSelected(i) ? this.getTransform() : undefined}
504
+ />
505
+ );
506
+ })}
507
+ </SModalContainer>
508
+ </SModalBox>
509
+ </SImageBoxContainer>
507
510
  {isSmall
508
511
  ? (
509
512
  <Flex justifyContent='center' mt={2}>
@@ -720,13 +723,13 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
720
723
  const SIndicators = Root;
721
724
  if (Children.origin) {
722
725
  return sstyled(styles)(
723
- <SIndicators render={Box}>
726
+ <SIndicators render={Box} innerOffset>
724
727
  <Children />
725
728
  </SIndicators>,
726
729
  );
727
730
  }
728
731
  return sstyled(styles)(
729
- <SIndicators render={Box}>
732
+ <SIndicators render={Box} invertOutline={inverted}>
730
733
  {items?.map((item: CarouselItem, index: number) => (
731
734
  <Carousel.Indicator key={index} {...item} inverted={inverted} />
732
735
  ))}
@@ -734,7 +737,7 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
734
737
  );
735
738
  };
736
739
 
737
- const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
740
+ const Indicator = ({ styles, Children, inverted }: CarouselIndicatorProps) => {
738
741
  const SIndicator = Root;
739
742
  return sstyled(styles)(
740
743
  <SIndicator render={Box}>
package/src/style/carousel.shadow.css CHANGED
@@ -10,22 +10,38 @@ SContainer {
10
10
  transition: transform var(--duration) ease-in-out;
11
11
  }
12
12
 
13
- SContentBox, SModalBox {
13
+ SContentBox,
14
+ SModalBox {
14
15
  position: relative;
15
16
  overflow: hidden;
16
17
  border-radius: var(--intergalactic-surface-rounded, 6px);
17
- &:has(SItem:focus-visible) {
18
- &:after {
19
- content: '';
20
- display: block;
21
- position: absolute;
22
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
23
- z-index: 1;
24
- width: calc(100% - 3px * 2);
25
- height: calc(100% - 3px * 2);
26
- top: 3px;
27
- left: 3px;
28
- }
18
+ }
19
+
20
+ SContentBox:has(SItem:focus-visible)::after {
21
+ border-radius: inherit;
22
+ z-index: 2;
23
+ position: absolute;
24
+ inset: 0;
25
+ content: '';
26
+ @mixin focus-outline-mixin -2px;
27
+ }
28
+
29
+ SImageBoxContainer {
30
+ position: relative;
31
+ border-radius: var(--intergalactic-surface-rounded, 6px);
32
+
33
+ &:has(SItem:focus-visible)::after {
34
+ border-radius: inherit;
35
+ z-index: 2;
36
+ position: absolute;
37
+ inset: 0;
38
+ content: '';
39
+ @mixin focus-outline-mixin;
40
+ outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
41
+ }
42
+
43
+ SItem:focus-visible {
44
+ outline: none;
29
45
  }
30
46
  }
31
47
 
@@ -42,11 +58,16 @@ SItem {
42
58
  border-radius: var(--intergalactic-surface-rounded, 6px);
43
59
  overflow: hidden;
44
60
  outline: none;
61
+
62
+ > img {
63
+ display: block;
64
+ }
45
65
  }
46
66
 
47
67
  SItem[zoomIn] {
48
68
  cursor: zoom-in;
49
69
  }
70
+
50
71
  SItem[zoomOut] {
51
72
  cursor: zoom-out;
52
73
  }
@@ -54,7 +75,7 @@ SItem[zoomOut] {
54
75
  SIndicators {
55
76
  display: flex;
56
77
  justify-content: center;
57
- margin: var(--intergalactic-spacing-4x, 16px) 3px 3px 3px;
78
+ margin: var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;
58
79
  outline: none;
59
80
  position: relative;
60
81
  }
@@ -92,7 +113,8 @@ SNext {
92
113
  cursor: pointer;
93
114
  color: var(--intergalactic-icon-primary-neutral, #6c6e79);
94
115
 
95
- SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) {
116
+ SPrevButton span:has(> svg:only-child),
117
+ SNextButton span:has(> svg:only-child) {
96
118
  margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
97
119
  margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
98
120
  }
@@ -101,6 +123,7 @@ SNext {
101
123
  SPrev {
102
124
  margin-right: var(--intergalactic-spacing-2x, 8px);
103
125
  }
126
+
104
127
  SNext {
105
128
  margin-left: var(--intergalactic-spacing-2x, 8px);
106
129
  }