@orangesk/orange-design-system 2.0.0-beta.44 → 2.0.0-beta.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.44",
+  "version": "2.0.0-beta.45",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -63,7 +63,7 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.0",
+    "dompurify": "^3.4.1",
     "html-react-parser": "6.0.1",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",

package/src/assets/icons/pictogram-internet--dark.svg

@@ -0,0 +1,15 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.5 11H6.5C4.29086 11 2.5 12.7909 2.5 15V43C2.5 45.2091 4.29086 47 6.5 47H55.5C57.7091 47 59.5 45.2091 59.5 43V15C59.5 12.7909 57.7091 11 55.5 11Z" fill="#DA8436"/>
+<path d="M15.167 50H45.167" stroke="white" stroke-width="2"/>
+<mask id="mask0_3153_344" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11" width="38" height="37">
+<path d="M48.667 11H11.667V48H48.667V11Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3153_344)">
+<path d="M30.1669 12.3213C20.6801 12.3213 12.9883 20.0131 12.9883 29.4999C12.9883 38.9867 20.6801 46.6785 30.1669 46.6785C39.6537 46.6785 47.3455 38.9867 47.3455 29.4999C47.3455 20.0131 39.6537 12.3213 30.1669 12.3213Z" stroke="white" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M30.1668 12.3213C25.3711 12.3213 20.8613 20.0131 20.8613 29.4999C20.8613 38.9867 25.3706 46.6785 30.1668 46.6785C34.9631 46.6785 39.4723 38.9867 39.4723 29.4999C39.4723 20.0131 34.9625 12.3213 30.1668 12.3213Z" stroke="white" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M18.7148 18.0469C21.873 20.2891 25.8489 21.6263 30.1673 21.6263C34.4857 21.6263 38.4617 20.2891 41.6199 18.0469" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.6199 40.9525C38.4617 38.7103 34.4857 37.373 30.1673 37.373C25.8489 37.373 21.873 38.7103 18.7148 40.9525" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.167 12.3213V46.6785" stroke="white" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M47.3455 29.5H12.9883" stroke="white" stroke-width="2" stroke-miterlimit="15.62"/>
+</g>
+</svg>

package/src/assets/icons/pictogram-internet.svg

@@ -0,0 +1,15 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.5 11H6.5C4.29086 11 2.5 12.7909 2.5 15V43C2.5 45.2091 4.29086 47 6.5 47H55.5C57.7091 47 59.5 45.2091 59.5 43V15C59.5 12.7909 57.7091 11 55.5 11Z" fill="#FFC48F"/>
+<path d="M15.167 50H45.167" stroke="black" stroke-width="2"/>
+<mask id="mask0_3153_327" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11" width="38" height="37">
+<path d="M48.667 11H11.667V48H48.667V11Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3153_327)">
+<path d="M30.1669 12.3213C20.6801 12.3213 12.9883 20.0131 12.9883 29.4999C12.9883 38.9867 20.6801 46.6785 30.1669 46.6785C39.6537 46.6785 47.3455 38.9867 47.3455 29.4999C47.3455 20.0131 39.6537 12.3213 30.1669 12.3213Z" stroke="black" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M30.1668 12.3213C25.3711 12.3213 20.8613 20.0131 20.8613 29.4999C20.8613 38.9867 25.3706 46.6785 30.1668 46.6785C34.9631 46.6785 39.4723 38.9867 39.4723 29.4999C39.4723 20.0131 34.9625 12.3213 30.1668 12.3213Z" stroke="black" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M18.7148 18.0469C21.873 20.2891 25.8489 21.6263 30.1673 21.6263C34.4857 21.6263 38.4617 20.2891 41.6199 18.0469" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.6199 40.9525C38.4617 38.7103 34.4857 37.373 30.1673 37.373C25.8489 37.373 21.873 38.7103 18.7148 40.9525" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.167 12.3213V46.6785" stroke="black" stroke-width="2" stroke-miterlimit="15.62"/>
+<path d="M47.3455 29.5H12.9883" stroke="black" stroke-width="2" stroke-miterlimit="15.62"/>
+</g>
+</svg>

package/src/assets/icons/pictogram-my-orange--dark.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.1542 23.745C39.0039 24.7252 40.4724 26.2962 41.3256 28.2078C42.1788 30.1194 42.3677 32.2616 41.8622 34.293C41.3566 36.3244 40.1857 38.1282 38.536 39.4169C36.8864 40.7056 34.8528 41.4051 32.7595 41.4039C30.6661 41.4028 28.6334 40.701 26.9851 39.4105C25.3369 38.12 24.168 36.3149 23.6647 34.283C23.1613 32.251 23.3526 30.109 24.2079 28.1984C25.0632 26.2877 26.5334 24.7183 28.3843 23.7402" stroke="white" stroke-width="1.875"/>
+<path d="M32.7646 19.0078V28.3828" stroke="white" stroke-width="1.875"/>
+<path d="M51.22 40.1969C53.8508 33.8493 58.7873 41.5229 58.7895 32.4C58.7899 23.2763 53.8518 30.9469 51.2237 24.5986C48.5956 18.2503 57.5124 20.1869 51.0625 13.7347C44.6112 7.28175 46.5435 16.1978 40.1977 13.5678C33.85 10.937 41.5232 6.00198 32.4002 6C23.2771 5.99802 30.948 10.9358 24.5993 13.564C18.2507 16.1922 20.1871 7.27691 13.7347 13.7269C7.28103 20.1759 16.1986 18.2441 13.5678 24.5918C10.937 30.9394 6.00047 23.2656 6 32.3894C5.99782 41.5124 10.9359 33.8418 13.5648 40.1883C16.1929 46.537 7.27718 44.6027 13.7268 51.0551C20.1765 57.5074 18.2441 48.5911 24.5918 51.2219C30.9376 53.8519 23.2646 58.7869 32.3892 58.7898C41.5124 58.7917 33.8406 53.8513 40.1891 51.2228C46.5367 48.5967 44.6009 57.5117 51.0547 51.0626C57.5067 44.6127 48.5891 46.5446 51.22 40.1969Z" fill="#DA8436"/>
+<path d="M38.7061 30.6055C39.7286 31.296 40.5907 32.2191 41.2207 33.3116C41.9633 34.5992 42.3559 36.0711 42.3555 37.5723V49.1915H25.2959C24.4933 49.1915 23.7177 48.8636 23.1416 48.2706C22.5648 47.6767 22.2364 46.8659 22.2363 46.0147V37.4786L22.2383 37.3868C22.2697 35.9175 22.6775 34.4845 23.418 33.2325C24.0436 32.1746 24.8878 31.2789 25.8848 30.6055C27.6868 32.1164 29.9483 32.9542 32.2959 32.9542C34.6432 32.9541 36.9042 32.1161 38.7061 30.6055ZM32.2959 16.0723C33.9472 16.0723 35.5367 16.7473 36.7129 17.9581C37.8899 19.1698 38.5557 20.819 38.5557 22.544C38.5556 23.8298 38.1853 25.0845 37.4941 26.1495C36.803 27.2142 35.8234 28.04 34.6826 28.5264C33.5422 29.0127 32.2889 29.1392 31.0801 28.8917C29.8711 28.6441 28.7562 28.033 27.8789 27.1299C27.0014 26.2266 26.4008 25.0721 26.1572 23.8116C25.9137 22.5511 26.0386 21.2445 26.5156 20.0587C26.9927 18.873 27.799 17.8632 28.8281 17.1553C29.857 16.4477 31.064 16.0723 32.2959 16.0723Z" stroke="white" stroke-width="1.88"/>
+</svg>

package/src/assets/icons/pictogram-my-orange.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.6542 23.745C38.5039 24.7252 39.9724 26.2962 40.8256 28.2078C41.6788 30.1194 41.8677 32.2616 41.3622 34.293C40.8566 36.3244 39.6857 38.1282 38.036 39.4169C36.3864 40.7056 34.3528 41.4051 32.2595 41.4039C30.1661 41.4028 28.1334 40.701 26.4851 39.4105C24.8369 38.12 23.668 36.3149 23.1647 34.283C22.6613 32.251 22.8526 30.109 23.7079 28.1984C24.5632 26.2877 26.0334 24.7183 27.8843 23.7402" stroke="black" stroke-width="1.875"/>
+<path d="M32.2646 19.0078V28.3828" stroke="black" stroke-width="1.875"/>
+<path d="M50.72 40.1969C53.3508 33.8493 58.2873 41.5229 58.2895 32.4C58.2899 23.2763 53.3518 30.9469 50.7237 24.5986C48.0956 18.2503 57.0124 20.1869 50.5625 13.7347C44.1112 7.28175 46.0435 16.1978 39.6977 13.5678C33.35 10.937 41.0232 6.00198 31.9002 6C22.7771 5.99802 30.448 10.9358 24.0993 13.564C17.7507 16.1922 19.6871 7.27691 13.2347 13.7269C6.78103 20.1759 15.6986 18.2441 13.0678 24.5918C10.437 30.9394 5.50047 23.2656 5.5 32.3894C5.49782 41.5124 10.4359 33.8418 13.0648 40.1883C15.6929 46.537 6.77718 44.6027 13.2268 51.0551C19.6765 57.5074 17.7441 48.5911 24.0918 51.2219C30.4376 53.8519 22.7646 58.7869 31.8892 58.7898C41.0124 58.7917 33.3406 53.8513 39.6891 51.2228C46.0367 48.5967 44.1009 57.5117 50.5547 51.0626C57.0067 44.6127 48.0891 46.5446 50.72 40.1969Z" fill="#FFC48F"/>
+<path d="M38.2061 30.6055C39.2286 31.296 40.0907 32.2191 40.7207 33.3116C41.4633 34.5992 41.8559 36.0711 41.8555 37.5723V49.1915H24.7959C23.9933 49.1915 23.2177 48.8636 22.6416 48.2706C22.0648 47.6767 21.7364 46.8659 21.7363 46.0147V37.4786L21.7383 37.3868C21.7697 35.9175 22.1775 34.4845 22.918 33.2325C23.5436 32.1746 24.3878 31.2789 25.3848 30.6055C27.1868 32.1164 29.4483 32.9542 31.7959 32.9542C34.1432 32.9541 36.4042 32.1161 38.2061 30.6055ZM31.7959 16.0723C33.4472 16.0723 35.0367 16.7473 36.2129 17.9581C37.3899 19.1698 38.0557 20.819 38.0557 22.544C38.0556 23.8298 37.6853 25.0845 36.9941 26.1495C36.303 27.2142 35.3234 28.04 34.1826 28.5264C33.0422 29.0127 31.7889 29.1392 30.5801 28.8917C29.3711 28.6441 28.2562 28.033 27.3789 27.1299C26.5014 26.2266 25.9008 25.0721 25.6572 23.8116C25.4137 22.5511 25.5386 21.2445 26.0156 20.0587C26.4927 18.873 27.299 17.8632 28.3281 17.1553C29.357 16.4477 30.564 16.0723 31.7959 16.0723Z" stroke="black" stroke-width="1.88"/>
+</svg>

package/src/assets/icons/pictogram-tariffs--dark.svg

@@ -0,0 +1,9 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3153_368" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
+<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3153_368)">
+<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#DA8436"/>
+<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/pictogram-tariffs.svg

@@ -0,0 +1,9 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3153_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
+<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_3153_361)">
+<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#FFC48F"/>
+<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/components/Carousel/Carousel.static.ts

@@ -141,7 +141,7 @@ export default class Carousel {
   private getOverflowWidth(viewportWrapper?: HTMLElement): number {
     const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
     const containerWidth = isBleedRight
-      ? viewportWrapper?.clientWidth || 0
+      ? this.element.clientWidth || viewportWrapper?.clientWidth || 0
       : this.viewport?.clientWidth || 0;
 
     if (containerWidth <= 0) {
@@ -330,11 +330,25 @@ export default class Carousel {
       this.setScrollbarVisible(true);
 
       const scrollbarWidth = scrollbar.el.offsetWidth;
-      const viewportWidth = viewportWrapper.clientWidth;
+      const viewportWidth =
+        this.instance?.width ||
+        this.element.clientWidth ||
+        viewportWrapper.clientWidth;
       const contentWidth = this.getSlidesContentWidth();
+      const minTranslate =
+        typeof swiper.minTranslate === "function" ? swiper.minTranslate() : 0;
+      const maxTranslate =
+        typeof swiper.maxTranslate === "function" ? swiper.maxTranslate() : 0;
+      const translateRange = Math.max(Math.abs(maxTranslate - minTranslate), 0);
+      const normalizedContentWidth = Math.max(
+        contentWidth,
+        viewportWidth + translateRange,
+      );
 
       const visibleRatio =
-        contentWidth > 0 ? Math.min(viewportWidth / contentWidth, 1) : 1;
+        normalizedContentWidth > 0
+          ? Math.min(viewportWidth / normalizedContentWidth, 1)
+          : 1;
       const dragSize = visibleRatio * scrollbarWidth;
       const finalDragSize = Math.max(dragSize, 30);
 
@@ -432,9 +446,25 @@ export default class Carousel {
       return;
     }
 
+    const containerWidth =
+      this.element.clientWidth || viewportWrapper.clientWidth || 0;
+    const viewportWidth =
+      document.documentElement?.clientWidth || window.innerWidth || 0;
+    const wrapperRect = viewportWrapper.getBoundingClientRect();
+    const rootRect = this.element.getBoundingClientRect();
+    const stableLeftInsetSource =
+      rootRect.left > 0 ? rootRect.left : wrapperRect.left;
+    const leftInset = Math.max(Math.floor(stableLeftInsetSource), 0);
+    const shellWidth = Math.max(Math.floor(viewportWidth), containerWidth, 0);
+    const shellMarginLeft = -leftInset;
+    const bleedViewportWidth = Math.max(
+      shellWidth - leftInset,
+      containerWidth,
+      0,
+    );
+
     const projectedContentWidth = this.getSlidesContentWidth();
-    const projectedOverflowWidth =
-      projectedContentWidth - viewportWrapper.clientWidth;
+    const projectedOverflowWidth = projectedContentWidth - containerWidth;
     const slidesPerView = this.getSlidesPerView();
     const slidesCount = this.instance.slides.length;
     const hasIntrinsicOverflow =
@@ -442,12 +472,33 @@ export default class Carousel {
         ? projectedOverflowWidth > Carousel.OVERFLOW_EPSILON_PX
         : slidesCount > slidesPerView;
     const shouldDisableBleed = !hasIntrinsicOverflow;
-
-    this.element.classList.toggle(CLASS_BLEED_RIGHT, !shouldDisableBleed);
-
-    const baseWidth = shouldDisableBleed
-      ? undefined
-      : viewportWrapper.clientWidth;
+    const shouldEnableBleedClass = !shouldDisableBleed;
+    const hadBleedClass = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const nextBleedViewportWidth = shouldDisableBleed
+      ? "100%"
+      : `${bleedViewportWidth}px`;
+    const nextBleedMarginLeft = shouldDisableBleed ? "0px" : `${leftInset}px`;
+    const nextBleedShellWidth = shouldDisableBleed ? "100%" : `${shellWidth}px`;
+    const nextBleedShellMarginLeft = shouldDisableBleed
+      ? "0px"
+      : `${shellMarginLeft}px`;
+    const geometryChanged =
+      hadBleedClass !== shouldEnableBleedClass ||
+      this.instance.params.width !==
+        (shouldDisableBleed ? undefined : containerWidth) ||
+      this.element.style.getPropertyValue("--carousel-bleed-viewport-width") !==
+        nextBleedViewportWidth ||
+      this.element.style.getPropertyValue("--carousel-bleed-margin-left") !==
+        nextBleedMarginLeft ||
+      this.element.style.getPropertyValue("--carousel-bleed-shell-width") !==
+        nextBleedShellWidth ||
+      this.element.style.getPropertyValue(
+        "--carousel-bleed-shell-margin-left",
+      ) !== nextBleedShellMarginLeft;
+
+    this.element.classList.toggle(CLASS_BLEED_RIGHT, shouldEnableBleedClass);
+
+    const baseWidth = shouldDisableBleed ? undefined : containerWidth;
     this.instance.params.width = baseWidth;
     if (this.instance.originalParams) {
       this.instance.originalParams.width = baseWidth;
@@ -455,10 +506,26 @@ export default class Carousel {
 
     this.instance.params.slidesOffsetBefore = 0;
     this.instance.params.slidesOffsetAfter = 0;
-    this.element.style.setProperty("--carousel-bleed-viewport-width", "100%");
-    this.element.style.setProperty("--carousel-bleed-margin-left", "0px");
+    this.element.style.setProperty(
+      "--carousel-bleed-viewport-width",
+      nextBleedViewportWidth,
+    );
+    this.element.style.setProperty(
+      "--carousel-bleed-margin-left",
+      nextBleedMarginLeft,
+    );
+    this.element.style.setProperty(
+      "--carousel-bleed-shell-width",
+      nextBleedShellWidth,
+    );
+    this.element.style.setProperty(
+      "--carousel-bleed-shell-margin-left",
+      nextBleedShellMarginLeft,
+    );
 
-    this.instance.update();
+    if (geometryChanged) {
+      this.instance.update();
+    }
     this.updateCarouselEnabledState();
   }
 
@@ -639,13 +706,9 @@ export default class Carousel {
       return;
     }
 
-    const isAtStart = this.instance.isBeginning;
-    const slidesCount = this.instance.slides.length;
-    const slidesPerView = this.instance.params.slidesPerView as number;
-    const activeIndex = this.instance.activeIndex;
-
-    // Check if we've reached the end (when there are no more slides to scroll to)
-    const isAtEnd = activeIndex + slidesPerView >= slidesCount;
+    const isDisabled = !this.instance.enabled;
+    const isAtStart = isDisabled || this.instance.isBeginning;
+    const isAtEnd = isDisabled || this.instance.isEnd;
 
     const prevControls = document.querySelectorAll(
       `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,

package/src/components/Carousel/styles/mixins.scss

@@ -217,7 +217,12 @@
   overflow: visible;
 
   .carousel__viewport-wrapper {
-    overflow: visible;
+    width: var(--carousel-bleed-shell-width, 100%);
+    max-width: var(--carousel-bleed-shell-width, 100%);
+    margin-left: var(--carousel-bleed-shell-margin-left, 0) !important;
+    overflow-x: hidden;
+    overflow-x: clip;
+    overflow-y: visible;
   }
 
   .carousel__viewport {

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -836,10 +836,10 @@ describe("Carousel Static - Auto-Disable Feature", () => {
         carouselElement.style.getPropertyValue(
           "--carousel-bleed-viewport-width",
         ),
-      ).toBe("100%");
+      ).toBe("880px");
       expect(
         carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
-      ).toBe("0px");
+      ).toBe("120px");
 
       Object.defineProperty(window, "innerWidth", {
         configurable: true,
@@ -847,5 +847,92 @@ describe("Carousel Static - Auto-Disable Feature", () => {
         value: originalInnerWidth,
       });
     });
+
+    it("should calculate bleed-right scrollbar drag from logical viewport, not shell width", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.slides.forEach((slide) => {
+        Object.defineProperty(slide, "offsetWidth", {
+          configurable: true,
+          value: 300,
+        });
+      });
+
+      mockSwiperInstance.params.slidesPerView = 1.2;
+      mockSwiperInstance.params.spaceBetween = 0;
+      mockSwiperInstance.width = 800;
+      mockSwiperInstance.progress = 0.5;
+      mockSwiperInstance.minTranslate = vi.fn(() => -300);
+      mockSwiperInstance.maxTranslate = vi.fn(() => 0);
+
+      const scrollbarEl = document.createElement("div");
+      const dragEl = document.createElement("div");
+      Object.defineProperty(scrollbarEl, "offsetWidth", {
+        configurable: true,
+        value: 200,
+      });
+
+      mockSwiperInstance.scrollbar = {
+        updateSize: vi.fn(),
+        el: scrollbarEl,
+        dragEl,
+      };
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+                <div class="carousel__slide">Slide 3</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(carouselElement, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 1000,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 1120,
+          bottom: 200,
+          left: 120,
+          width: 1000,
+          height: 200,
+          x: 120,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // Regression: drag must not become full width just because shell wrapper is wider than logical viewport.
+      expect(dragEl.style.width).not.toBe("200px");
+    });
   });
 });