@semcore/carousel 16.1.13 → 16.2.0-prerelease.0

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 (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +4 -4
  3. package/lib/cjs/Carousel.js +37 -33
  4. package/lib/cjs/Carousel.js.map +1 -1
  5. package/lib/cjs/style/carousel.shadow.css +10 -10
  6. package/lib/es6/Carousel.js +37 -33
  7. package/lib/es6/Carousel.js.map +1 -1
  8. package/lib/es6/style/carousel.shadow.css +10 -10
  9. package/lib/esm/Carousel.mjs +34 -34
  10. package/lib/esm/style/carousel.shadow.css +10 -10
  11. package/package.json +9 -9
  12. package/src/Carousel.tsx +8 -8
  13. package/src/style/carousel.shadow.css +10 -10
package/lib/esm/Carousel.mjs CHANGED
@@ -24,31 +24,31 @@ var style = (
24
24
  /*__reshadow_css_start__*/
25
25
  (sstyled.insert(
26
26
  /*__inner_css_start__*/
27
- '.___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}}',
27
+ '.___SCarousel_lejkd_gg_{overflow:hidden;outline:0;-moz-user-select:none;user-select:none}.___SContainer_lejkd_gg_{display:flex;transition:transform var(--duration_lejkd) ease-in-out}.___SContentBox_lejkd_gg_,.___SIndicator_lejkd_gg_,.___SModalBox_lejkd_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SContentBox_lejkd_gg_:has(.___SItem_lejkd_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_lejkd_gg_{position:relative;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px))}.___SImageBoxContainer_lejkd_gg_:has(.___SItem_lejkd_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}@supports (color:oklab(0%0 0%)){.___SImageBoxContainer_lejkd_gg_:has(.___SItem_lejkd_gg_:focus-visible)::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7))}}.___SImageBoxContainer_lejkd_gg_ .___SItem_lejkd_gg_:focus-visible{outline:0}.___SModalContainer_lejkd_gg_{display:flex;transition:transform var(--duration_lejkd) ease-in-out}.___SItem_lejkd_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_lejkd);border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));overflow:hidden;outline:0}.___SItem_lejkd_gg_>img{display:block}.___SItem_lejkd_gg_.__zoomIn_lejkd_gg_{cursor:zoom-in}.___SItem_lejkd_gg_.__zoomOut_lejkd_gg_{cursor:zoom-out}.___SIndicators_lejkd_gg_{display:flex;justify-content:center;margin:var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;outline:0;position:relative}.___SIndicator_lejkd_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, rgba(0, 5, 2, 0.385));opacity:var(--intergalactic-disabled-opacity, 0.4);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@supports (color:color(display-p3 0 0 0%)){.___SIndicator_lejkd_gg_{background-color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SIndicator_lejkd_gg_{background-color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SIndicator_lejkd_gg_[aria-roledescription=slide]{width:100px;height:100px}@media (hover:hover){.___SIndicator_lejkd_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.4))}}.___SIndicator_lejkd_gg_.__active_lejkd_gg_{opacity:1}.___SIndicator_lejkd_gg_.__inverted_lejkd_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@supports (color:color(display-p3 0 0 0%)){.___SIndicator_lejkd_gg_.__inverted_lejkd_gg_{background-color:var(--intergalactic-icon-primary-invert, rgba(253, 255, 254, 0.808))}@media (color-gamut:p3){.___SIndicator_lejkd_gg_.__inverted_lejkd_gg_{background-color:var(--intergalactic-icon-primary-invert, color(display-p3 0.99189 0.99995 0.99683 / 0.808))}}}.___SNext_lejkd_gg_,.___SPrev_lejkd_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}.___SNext_lejkd_gg_ .___SNextButton_lejkd_gg_ span:has(>svg:only-child),.___SNext_lejkd_gg_ .___SPrevButton_lejkd_gg_ span:has(>svg:only-child),.___SPrev_lejkd_gg_ .___SNextButton_lejkd_gg_ span:has(>svg:only-child),.___SPrev_lejkd_gg_ .___SPrevButton_lejkd_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_lejkd_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_lejkd_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_lejkd_gg_.__disabled_lejkd_gg_,.___SPrev_lejkd_gg_.__disabled_lejkd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_lejkd_gg_{transition:none}}',
28
28
  /*__inner_css_end__*/
29
- "10z0a_gg_"
29
+ "lejkd_gg_"
30
30
  ), /*__reshadow_css_end__*/
31
31
  {
32
- "__SCarousel": "___SCarousel_10z0a_gg_",
33
- "__SContainer": "___SContainer_10z0a_gg_",
34
- "--duration": "--duration_10z0a",
35
- "__SContentBox": "___SContentBox_10z0a_gg_",
36
- "__SModalBox": "___SModalBox_10z0a_gg_",
37
- "__SIndicator": "___SIndicator_10z0a_gg_",
38
- "__SItem": "___SItem_10z0a_gg_",
39
- "__SModalContainer": "___SModalContainer_10z0a_gg_",
40
- "_zoomIn": "__zoomIn_10z0a_gg_",
41
- "_zoomOut": "__zoomOut_10z0a_gg_",
42
- "__SIndicators": "___SIndicators_10z0a_gg_",
43
- "_active": "__active_10z0a_gg_",
44
- "_inverted": "__inverted_10z0a_gg_",
45
- "__SPrev": "___SPrev_10z0a_gg_",
46
- "__SNext": "___SNext_10z0a_gg_",
47
- "_disabled": "__disabled_10z0a_gg_",
48
- "__SImageBoxContainer": "___SImageBoxContainer_10z0a_gg_",
49
- "--transform": "--transform_10z0a",
50
- "__SPrevButton": "___SPrevButton_10z0a_gg_",
51
- "__SNextButton": "___SNextButton_10z0a_gg_"
32
+ "__SCarousel": "___SCarousel_lejkd_gg_",
33
+ "__SContainer": "___SContainer_lejkd_gg_",
34
+ "--duration": "--duration_lejkd",
35
+ "__SContentBox": "___SContentBox_lejkd_gg_",
36
+ "__SModalBox": "___SModalBox_lejkd_gg_",
37
+ "__SIndicator": "___SIndicator_lejkd_gg_",
38
+ "__SItem": "___SItem_lejkd_gg_",
39
+ "__SModalContainer": "___SModalContainer_lejkd_gg_",
40
+ "_zoomIn": "__zoomIn_lejkd_gg_",
41
+ "_zoomOut": "__zoomOut_lejkd_gg_",
42
+ "__SIndicators": "___SIndicators_lejkd_gg_",
43
+ "_active": "__active_lejkd_gg_",
44
+ "_inverted": "__inverted_lejkd_gg_",
45
+ "__SPrev": "___SPrev_lejkd_gg_",
46
+ "__SNext": "___SNext_lejkd_gg_",
47
+ "_disabled": "__disabled_lejkd_gg_",
48
+ "__SImageBoxContainer": "___SImageBoxContainer_lejkd_gg_",
49
+ "--transform": "--transform_lejkd",
50
+ "__SPrevButton": "___SPrevButton_lejkd_gg_",
51
+ "__SNextButton": "___SNextButton_lejkd_gg_"
52
52
  })
53
53
  );
54
54
  var MAP_TRANSFORM = {
@@ -524,7 +524,7 @@ _defineProperty(CarouselRoot, "defaultProps", {
524
524
  });
525
525
  _defineProperty(CarouselRoot, "style", style);
526
526
  _defineProperty(CarouselRoot, "enhance", enhance);
527
- var Container = function Container2(props) {
527
+ function Container(props) {
528
528
  var _ref3 = arguments[0], _ref10;
529
529
  var SContainer = Box;
530
530
  var styles = props.styles, duration = props.duration;
@@ -532,13 +532,13 @@ var Container = function Container2(props) {
532
532
  "use:duration": "".concat(duration, "ms"),
533
533
  "aria-live": "polite"
534
534
  }, _ref3))));
535
- };
536
- var ContentBox = function ContentBox2(props) {
535
+ }
536
+ function ContentBox(props) {
537
537
  var _ref4 = arguments[0], _ref11;
538
538
  var SContentBox = Box;
539
539
  var styles = props.styles;
540
540
  return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SContentBox, _ref11.cn("SContentBox", _objectSpread({}, assignProps({}, _ref4))));
541
- };
541
+ }
542
542
  var Item = /* @__PURE__ */ (function(_Component2) {
543
543
  function Item2() {
544
544
  var _this7;
@@ -604,7 +604,7 @@ var Item = /* @__PURE__ */ (function(_Component2) {
604
604
  }
605
605
  }]);
606
606
  })(Component);
607
- var Prev = function Prev2(props) {
607
+ function Prev(props) {
608
608
  var _ref6 = arguments[0], _ref13;
609
609
  var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top = props.top, top = _props$top === void 0 ? 0 : _props$top, inverted = props.inverted;
610
610
  var SPrev = Box;
@@ -619,8 +619,8 @@ var Prev = function Prev2(props) {
619
619
  "size": "l",
620
620
  "innerOutline": true
621
621
  })));
622
- };
623
- var Next = function Next2(props) {
622
+ }
623
+ function Next(props) {
624
624
  var _ref7 = arguments[0], _ref14;
625
625
  var styles = props.styles, children = props.children, Children = props.Children, label = props.label, _props$top2 = props.top, top = _props$top2 === void 0 ? 0 : _props$top2, inverted = props.inverted;
626
626
  var SNext = Box;
@@ -635,8 +635,8 @@ var Next = function Next2(props) {
635
635
  "size": "l",
636
636
  "innerOutline": true
637
637
  })));
638
- };
639
- var Indicators = function Indicators2(_ref19) {
638
+ }
639
+ function Indicators(_ref19) {
640
640
  var _ref8 = arguments[0], _ref16;
641
641
  var items = _ref19.items, styles = _ref19.styles, Children = _ref19.Children, inverted = _ref19.inverted;
642
642
  var SIndicators = Box;
@@ -655,14 +655,14 @@ var Indicators = function Indicators2(_ref19) {
655
655
  inverted
656
656
  }));
657
657
  }));
658
- };
659
- var Indicator = function Indicator2(_ref20) {
658
+ }
659
+ function Indicator(_ref20) {
660
660
  var _ref9 = arguments[0], _ref17;
661
661
  var styles = _ref20.styles, Children = _ref20.Children;
662
662
  _ref20.inverted;
663
663
  var SIndicator = Box;
664
664
  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SIndicator, _ref17.cn("SIndicator", _objectSpread({}, assignProps({}, _ref9))), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
665
- };
665
+ }
666
666
  var Carousel = createComponent(CarouselRoot, {
667
667
  Container,
668
668
  ContentBox,
package/lib/esm/style/carousel.shadow.css CHANGED
@@ -15,7 +15,7 @@ SModalBox,
15
15
  SIndicator {
16
16
  position: relative;
17
17
  overflow: hidden;
18
- border-radius: var(--intergalactic-surface-rounded, 6px);
18
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
19
19
  }
20
20
 
21
21
  SContentBox:has(SItem:focus-visible)::after {
@@ -29,7 +29,7 @@ SContentBox:has(SItem:focus-visible)::after {
29
29
 
30
30
  SImageBoxContainer {
31
31
  position: relative;
32
- border-radius: var(--intergalactic-surface-rounded, 6px);
32
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
33
33
 
34
34
  &:has(SItem:focus-visible)::after {
35
35
  border-radius: inherit;
@@ -38,7 +38,7 @@ SImageBoxContainer {
38
38
  inset: 0;
39
39
  content: '';
40
40
  @mixin focus-outline-mixin;
41
- outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
41
+ outline-color: var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7));
42
42
  }
43
43
 
44
44
  SItem:focus-visible {
@@ -56,7 +56,7 @@ SItem {
56
56
  max-width: 100%;
57
57
  box-sizing: border-box;
58
58
  transform: var(--transform);
59
- border-radius: var(--intergalactic-surface-rounded, 6px);
59
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
60
60
  overflow: hidden;
61
61
  outline: none;
62
62
 
@@ -87,8 +87,8 @@ SIndicator {
87
87
  display: block;
88
88
  width: 12px;
89
89
  height: 12px;
90
- background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
91
- opacity: var(--intergalactic-disabled-opacity, 0.3);
90
+ background-color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
91
+ opacity: var(--intergalactic-disabled-opacity, 0.4);
92
92
  object-fit: cover;
93
93
  transition: ease-in-out opacity 0.1s;
94
94
  }
@@ -99,7 +99,7 @@ SIndicator[aria-roledescription="slide"] {
99
99
  }
100
100
 
101
101
  SIndicator:hover {
102
- opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.3));
102
+ opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.4));
103
103
  }
104
104
 
105
105
  SIndicator[active] {
@@ -107,7 +107,7 @@ SIndicator[active] {
107
107
  }
108
108
 
109
109
  SIndicator[inverted] {
110
- background-color: var(--intergalactic-icon-primary-invert, #ffffff);
110
+ background-color: var(--intergalactic-icon-primary-invert, oklch(0.998 0.003 173.3 / 0.808));
111
111
  }
112
112
 
113
113
  SPrev,
@@ -116,7 +116,7 @@ SNext {
116
116
  align-items: center;
117
117
  justify-content: center;
118
118
  cursor: pointer;
119
- color: var(--intergalactic-icon-primary-neutral, #6c6e79);
119
+ color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
120
120
 
121
121
  SPrevButton span:has(> svg:only-child),
122
122
  SNextButton span:has(> svg:only-child) {
@@ -135,7 +135,7 @@ SNext {
135
135
 
136
136
  SPrev[disabled],
137
137
  SNext[disabled] {
138
- opacity: var(--intergalactic-disabled-opacity, 0.3);
138
+ opacity: var(--intergalactic-disabled-opacity, 0.4);
139
139
  cursor: default;
140
140
  pointer-events: none;
141
141
  }
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.13",
4
+ "version": "16.2.0-prerelease.0",
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.3",
18
- "@semcore/button": "16.0.12",
19
- "@semcore/modal": "16.1.12",
20
- "@semcore/flex-box": "16.0.11",
21
- "@semcore/breakpoints": "16.0.11"
17
+ "@semcore/icon": "16.8.0-prerelease.0",
18
+ "@semcore/button": "16.1.0-prerelease.0",
19
+ "@semcore/modal": "16.2.0-prerelease.0",
20
+ "@semcore/flex-box": "16.1.0-prerelease.0",
21
+ "@semcore/breakpoints": "16.1.0-prerelease.0"
22
22
  },
23
23
  "peerDependencies": {
24
- "@semcore/base-components": "^16.0.0"
24
+ "@semcore/base-components": "^16.6.0-prerelease.0"
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.5.1"
32
+ "@semcore/core": "16.6.0-prerelease.0",
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
@@ -597,21 +597,21 @@ class CarouselRoot extends Component<
597
597
  }
598
598
  }
599
599
 
600
- const Container = (props: BoxProps & { duration?: number }) => {
600
+ function Container(props: BoxProps & { duration?: number }) {
601
601
  const SContainer = Root;
602
602
  const { styles, duration } = props;
603
603
 
604
604
  return sstyled(styles)(
605
605
  <SContainer render={Box} use:duration={`${duration}ms`} aria-live='polite' />,
606
606
  );
607
- };
607
+ }
608
608
 
609
- const ContentBox = (props: BoxProps) => {
609
+ function ContentBox(props: BoxProps) {
610
610
  const SContentBox = Root;
611
611
  const { styles } = props;
612
612
 
613
613
  return sstyled(styles)(<SContentBox render={Box} />);
614
- };
614
+ }
615
615
 
616
616
  class Item extends Component<CarouselItemProps> {
617
617
  refItem = React.createRef<HTMLElement>();
@@ -667,7 +667,7 @@ class Item extends Component<CarouselItemProps> {
667
667
  }
668
668
  }
669
669
 
670
- const Prev = (props: CarouselButtonProps) => {
670
+ function Prev(props: CarouselButtonProps) {
671
671
  const { styles, children, Children, label, top = 0, inverted } = props;
672
672
  const SPrev = Root;
673
673
  const SPrevButton = Button;
@@ -692,7 +692,7 @@ const Prev = (props: CarouselButtonProps) => {
692
692
  );
693
693
  };
694
694
 
695
- const Next = (props: CarouselButtonProps) => {
695
+ function Next(props: CarouselButtonProps) {
696
696
  const { styles, children, Children, label, top = 0, inverted } = props;
697
697
  const SNext = Root;
698
698
  const SNextButton = Button;
@@ -717,7 +717,7 @@ const Next = (props: CarouselButtonProps) => {
717
717
  );
718
718
  };
719
719
 
720
- const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsProps) => {
720
+ function Indicators({ items, styles, Children, inverted }: CarouselIndicatorsProps) {
721
721
  const SIndicators = Root;
722
722
  if (Children.origin) {
723
723
  return sstyled(styles)(
@@ -735,7 +735,7 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
735
735
  );
736
736
  };
737
737
 
738
- const Indicator = ({ styles, Children, inverted }: CarouselIndicatorProps) => {
738
+ function Indicator({ styles, Children, inverted }: CarouselIndicatorProps) {
739
739
  const SIndicator = Root;
740
740
  return sstyled(styles)(
741
741
  <SIndicator render={Box}>
package/src/style/carousel.shadow.css CHANGED
@@ -15,7 +15,7 @@ SModalBox,
15
15
  SIndicator {
16
16
  position: relative;
17
17
  overflow: hidden;
18
- border-radius: var(--intergalactic-surface-rounded, 6px);
18
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
19
19
  }
20
20
 
21
21
  SContentBox:has(SItem:focus-visible)::after {
@@ -29,7 +29,7 @@ SContentBox:has(SItem:focus-visible)::after {
29
29
 
30
30
  SImageBoxContainer {
31
31
  position: relative;
32
- border-radius: var(--intergalactic-surface-rounded, 6px);
32
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
33
33
 
34
34
  &:has(SItem:focus-visible)::after {
35
35
  border-radius: inherit;
@@ -38,7 +38,7 @@ SImageBoxContainer {
38
38
  inset: 0;
39
39
  content: '';
40
40
  @mixin focus-outline-mixin;
41
- outline-color: var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8));
41
+ outline-color: var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7));
42
42
  }
43
43
 
44
44
  SItem:focus-visible {
@@ -56,7 +56,7 @@ SItem {
56
56
  max-width: 100%;
57
57
  box-sizing: border-box;
58
58
  transform: var(--transform);
59
- border-radius: var(--intergalactic-surface-rounded, 6px);
59
+ border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
60
60
  overflow: hidden;
61
61
  outline: none;
62
62
 
@@ -87,8 +87,8 @@ SIndicator {
87
87
  display: block;
88
88
  width: 12px;
89
89
  height: 12px;
90
- background-color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
91
- opacity: var(--intergalactic-disabled-opacity, 0.3);
90
+ background-color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
91
+ opacity: var(--intergalactic-disabled-opacity, 0.4);
92
92
  object-fit: cover;
93
93
  transition: ease-in-out opacity 0.1s;
94
94
  }
@@ -99,7 +99,7 @@ SIndicator[aria-roledescription="slide"] {
99
99
  }
100
100
 
101
101
  SIndicator:hover {
102
- opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.3));
102
+ opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.4));
103
103
  }
104
104
 
105
105
  SIndicator[active] {
@@ -107,7 +107,7 @@ SIndicator[active] {
107
107
  }
108
108
 
109
109
  SIndicator[inverted] {
110
- background-color: var(--intergalactic-icon-primary-invert, #ffffff);
110
+ background-color: var(--intergalactic-icon-primary-invert, oklch(0.998 0.003 173.3 / 0.808));
111
111
  }
112
112
 
113
113
  SPrev,
@@ -116,7 +116,7 @@ SNext {
116
116
  align-items: center;
117
117
  justify-content: center;
118
118
  cursor: pointer;
119
- color: var(--intergalactic-icon-primary-neutral, #6c6e79);
119
+ color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
120
120
 
121
121
  SPrevButton span:has(> svg:only-child),
122
122
  SNextButton span:has(> svg:only-child) {
@@ -135,7 +135,7 @@ SNext {
135
135
 
136
136
  SPrev[disabled],
137
137
  SNext[disabled] {
138
- opacity: var(--intergalactic-disabled-opacity, 0.3);
138
+ opacity: var(--intergalactic-disabled-opacity, 0.4);
139
139
  cursor: default;
140
140
  pointer-events: none;
141
141
  }