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

package/build/search-index.json

@@ -81,7 +81,7 @@
   },
   {
     "href": "/components/expander",
-    "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the native <details> and <summary> HTML elements, which provide built-in accessibility support. Screen readers automatically announce the expanded/collapsed state without requiring manual ARIA attributes. The native <details> element ensures: - Keyboard navigation works automatically (Enter/Space to toggle) - Screen readers announce the state changes - Focus management is handled by the browser Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state to improve user experience. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
+    "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Content placement Use the placement prop with value top to render opened content above trigger. Accessibility The Expander component uses the native <details> and <summary> HTML elements, which provide built-in accessibility support. Screen readers automatically announce the expanded/collapsed state without requiring manual ARIA attributes. The native <details> element ensures: - Keyboard navigation works automatically (Enter/Space to toggle) - Screen readers announce the state changes - Focus management is handled by the browser Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state to improve user experience. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ---------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | placement | \"top\" \\| \"bottom\" | \"bottom\" | Position of trigger relative to content when opened | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
   },
   {
     "href": "/components/feature-accordion",
@@ -165,7 +165,7 @@
   },
   {
     "href": "/components/grid",
-    "content": "import spaces from \"@/styles/export/space.js\"; Grid The main function of the grid is to distribute items to rows and columns. Our grid has a maximum of 12 columns. Each column can have a custom size defined by breakpoints. Breakpoints Grid uses the mobile-first definition of breakpoints, which means that smallest breakpoint defines default size. Columns You can have a maximum of 12 columns in one row. A default column takes all the available space. <code>(default) 12</code> <code>6</code> <hr /> <code>auto</code> <code>4</code> <code>6</code> <hr /> <code>fill</code> <code>4</code> <code>6</code> <hr /> <code>shrink</code> <code>6</code> Resizing There are two ways of resizing a column. 1. .gridcol--[size] where size is a number 1-12 or one of [shrink/fill/auto] 2. .gridcol--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the column size > XS breakpoint size > > There is no need to specify the xs breakpoint size because it's a default by definition of mobile-first philosophy. What is shrink/fill/auto? - shrink column takes the least amount of space available - fill column takes all the space available and does not shrink to accomodate other columns - auto takes all available space, also tries to shrink to fit into one row. This is the same as .gridcol. <code>(default) 12</code> <code>4</code> <code>shrink</code> <code>fill</code> <code>auto</code> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Available combinations You can use combinations of different size types for one column at once. Available types are [1-12/shrink/fill/auto] for every breakpoint. <code>(default) 12, sm-9, md-6, lg-fill</code> <code>(default) 12, sm-3, md-6, lg-fill</code> Justify content height Grid with justified content height uses flexbox with an attempt to equalize height of column children <div className=\"surface-subtle\"> <p>Children of these columns are the same height</p> </div> <div className=\"surface-subtle\"> <p>The most high column dictates the height of the row</p> </div> <div className=\"surface-subtle\"> <p>Subsequent rows remain unaffected</p> </div> Container alignment Horizontal Vertical Children alignment Vertical Column gap size Add larger space between grid columns, use smaller gap, or remove them completely. There are two ways of adding a column gap: 1. .grid-column-gap--[size] where size is one of [none/small/default/large] 2. .grid-column-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"large\", \"default\", \"small\", \"none\"].map((size, index) => ( <div key={index.toString()}> <h3 className=\"bold\">Column gap size {JSON.stringify(size)}</h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} </div> ))} Row gap size Row gap helps to maintain space between grid rows and fixes unwanted spacing problems on the bottom of grid's last row elements by removing their content margins. There are two ways of adding a row gap: 1. .grid-row-gap--[size] where size is one of [small/medium/large/xlarge] 2. .grid-row-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"small\", \"medium\", \"large\", \"xlarge\"].map((size, index, array) => ( <h3 className=\"mb-2\">Row gap size {JSON.stringify(size)}</h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} ))} Advanced Examples Complex Layout with Alignment <code>top aligned</code> <code>auto middle</code> <code>fill bottom</code> <code>stretch</code> Semantic HTML Tags <code>main content</code> <code>sidebar</code> All Column Sizes (1-12) {Array.from({ length: 12 }, (, i) => ( <code>{i + 1}</code> ))} API Grid React Props | Name | Type | Default | Description | | --------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------ | | vAlign | \"stretch\" \\| \"start\" \\| \"end\" \\| \"center\" | - | Vertical alignment of grid items. | | hAlign | \"end\" \\| \"center\" \\| \"space-around\" \\| \"space-between\" | - | Horizontal alignment of grid items. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | justifyHeight | boolean | false | Whether grid should justify height. | | rowGapSize | \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Row gap size, can be responsive object. | | columnGapSize | \"none\" \\| \"small\" \\| \"default\" \\| \"large\" \\| Record<string, ...> | - | Column gap size, can be responsive object. | | className | string | - | Additional CSS classes. | GridCol React Props | Name | Type | Default | Description | | ----------- | ------------------- | ------- | --------------------------------------------- | | size | ResponsiveSize | - | Column size (1-12), can be responsive object. | | offset | ResponsiveSize | - | Column offset, can be responsive object. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. |"
+    "content": "import spaces from \"@/styles/export/space.js\"; Grid The main function of the grid is to distribute items to rows and columns. Our grid has a maximum of 12 columns. Each column can have a custom size defined by breakpoints. Breakpoints Grid uses the mobile-first definition of breakpoints, which means that smallest breakpoint defines default size. Columns You can have a maximum of 12 columns in one row. A default column takes all the available space. <code>(default) 12</code> <code>6</code> <hr /> <code>auto</code> <code>4</code> <code>6</code> <hr /> <code>fill</code> <code>4</code> <code>6</code> <hr /> <code>shrink</code> <code>6</code> Resizing There are two ways of resizing a column. 1. .gridcol--[size] where size is a number 1-12 or one of [shrink/fill/auto] 2. .gridcol--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the column size > XS breakpoint size > > There is no need to specify the xs breakpoint size because it's a default by definition of mobile-first philosophy. What is shrink/fill/auto? - shrink column takes the least amount of space available - fill column takes all the space available and does not shrink to accomodate other columns - auto takes all available space, also tries to shrink to fit into one row. This is the same as .gridcol. <code>(default) 12</code> <code>4</code> <code>shrink</code> <code>fill</code> <code>auto</code> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Available combinations You can use combinations of different size types for one column at once. Available types are [1-12/shrink/fill/auto] for every breakpoint. <code>(default) 12, sm-9, md-6, lg-fill</code> <code>(default) 12, sm-3, md-6, lg-fill</code> Justify content height Grid with justified content height uses flexbox with an attempt to equalize height of column children <div className=\"surface-subtle\"> <p>Children of these columns are the same height</p> </div> <div className=\"surface-subtle\"> <p>The most high column dictates the height of the row</p> </div> <div className=\"surface-subtle\"> <p>Subsequent rows remain unaffected</p> </div> Container alignment Horizontal Vertical Children alignment Vertical Column gap size Add larger space between grid columns, use smaller gap, or remove them completely. There are two ways of adding a column gap: 1. .grid-column-gap--[size] where size is one of [none/small/default/large/xlarge] 2. .grid-column-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"xlarge\", \"large\", \"default\", \"small\", \"none\"].map((size, index) => ( <div key={index.toString()}> <h3 className=\"bold\">Column gap size {JSON.stringify(size)}</h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} </div> ))} <h3 className=\"mb-2\"> Responsive column gap size {'{\"xs\":\"small\",\"md\":\"xlarge\"}'} </h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} Row gap size Row gap helps to maintain space between grid rows and fixes unwanted spacing problems on the bottom of grid's last row elements by removing their content margins. There are two ways of adding a row gap: 1. .grid-row-gap--[size] where size is one of [none/xsmall/small/medium/large/xlarge] 2. .grid-row-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"none\", \"xsmall\", \"small\", \"medium\", \"large\", \"xlarge\"].map( (size, index, array) => ( <h3 className=\"mb-2\">Row gap size {JSON.stringify(size)}</h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} ), )} <h3 className=\"mb-2\"> Responsive row gap size {'{\"xs\":\"medium\",\"md\":\"xlarge\"}'} </h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} Advanced Examples Complex Layout with Alignment <code>top aligned</code> <code>auto middle</code> <code>fill bottom</code> <code>stretch</code> Semantic HTML Tags <code>main content</code> <code>sidebar</code> All Column Sizes (1-12) {Array.from({ length: 12 }, (, i) => ( <code>{i + 1}</code> ))} API Grid React Props | Name | Type | Default | Description | | --------------- | ----------------------------------------------------------------------------------------- | ------- | ------------------------------------------ | | vAlign | \"stretch\" \\| \"start\" \\| \"end\" \\| \"center\" | - | Vertical alignment of grid items. | | hAlign | \"end\" \\| \"center\" \\| \"space-around\" \\| \"space-between\" | - | Horizontal alignment of grid items. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | justifyHeight | boolean | false | Whether grid should justify height. | | rowGapSize | \"none\" \\| \"xsmall\" \\| \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Row gap size, can be responsive object. | | columnGapSize | \"none\" \\| \"small\" \\| \"default\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Column gap size, can be responsive object. | | className | string | - | Additional CSS classes. | GridCol React Props | Name | Type | Default | Description | | ----------- | ------------------- | ------- | --------------------------------------------- | | size | ResponsiveSize | - | Column size (1-12), can be responsive object. | | offset | ResponsiveSize | - | Column offset, can be responsive object. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. |"
   },
   {
     "href": "/components/hero",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.43",
+  "version": "2.0.0-beta.44",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -109,10 +109,10 @@
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.4",
-    "@vitest/browser-playwright": "^4.1.4",
-    "@vitest/coverage-v8": "^4.1.4",
-    "@vitest/ui": "^4.1.4",
+    "@vitest/browser": "^4.1.5",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/ui": "^4.1.5",
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.4",
     "glob": "13.0.6",
@@ -130,7 +130,7 @@
     "sass": "^1.99.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.4",
+    "vitest": "^4.1.5",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },

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

@@ -42,7 +42,7 @@
   width: 100%;
   display: flex;
   padding: space.get("large");
-  gap: convert.to-rem(30px);
+  gap: convert.to-rem(60px);
 
   > div:not(.body-banner__button) {
     flex: 1;
@@ -56,6 +56,7 @@
   @include breakpoint.get("lg", "down") {
     display: flex;
     flex-direction: column;
+    gap: convert.to-rem(30px);
   }
 
   @include breakpoint.get("sm", "down") {
@@ -82,13 +83,7 @@
 @mixin button {
   display: flex;
   align-items: center;
-  padding: 0 0 0 space.get("xlarge");
   margin: 0 !important;
-
-  @include breakpoint.get("lg", "down") {
-    padding: 0;
-    margin-top: space.get("small") !important;
-  }
 }
 
 @mixin large {
@@ -113,9 +108,4 @@
       display: block;
     }
   }
-
-  .body-banner__button {
-    padding: 0;
-    margin-top: space.get("small") !important;
-  }
 }

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

@@ -61,6 +61,7 @@ export const defaultConfig: SwiperOptions = {
   },
   a11y: {
     enabled: true,
+    scrollOnFocus: false,
     prevSlideMessage: "Predchádzajúci snímok",
     nextSlideMessage: "Nasledujúci snímok",
     paginationBulletMessage: "Prejsť na snímok {index}",
@@ -97,6 +98,76 @@ export default class Carousel {
   private resizeRafId?: number;
   private boundWindowResizeHandler: () => void;
   private bleedResizeHandler?: () => void;
+  private static readonly OVERFLOW_EPSILON_PX = 1;
+
+  private getViewportWrapper(): HTMLElement | null {
+    return this.element.querySelector(
+      `.${CLASS_VIEWPORT_WRAPPER}`,
+    ) as HTMLElement | null;
+  }
+
+  private getSlidesPerView(): number {
+    return Number(this.instance?.params?.slidesPerView) || 1;
+  }
+
+  private setScrollbarVisible(visible: boolean): void {
+    const scrollbarEl = this.element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    if (scrollbarEl) {
+      scrollbarEl.style.display = visible ? "" : "none";
+    }
+  }
+
+  private getSlidesContentWidth(): number {
+    if (!this.instance) {
+      return this.track?.scrollWidth || 0;
+    }
+
+    const slides = Array.from(this.instance.slides) as HTMLElement[];
+    const widthsSum = slides.reduce((sum, slide) => sum + slide.offsetWidth, 0);
+    const spaceBetween = Number(this.instance.params?.spaceBetween) || 0;
+    const gaps = Math.max(slides.length - 1, 0) * spaceBetween;
+    const measuredWidth = widthsSum + gaps;
+
+    // Fallback for early lifecycle/test DOM where slides can report 0 width.
+    if (widthsSum <= 0 || measuredWidth <= 0) {
+      return this.track?.scrollWidth || 0;
+    }
+
+    return measuredWidth;
+  }
+
+  private getOverflowWidth(viewportWrapper?: HTMLElement): number {
+    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const containerWidth = isBleedRight
+      ? viewportWrapper?.clientWidth || 0
+      : this.viewport?.clientWidth || 0;
+
+    if (containerWidth <= 0) {
+      return 0;
+    }
+
+    const contentWidth = this.getSlidesContentWidth();
+
+    return contentWidth - containerWidth;
+  }
+
+  private hasScrollableContent(viewportWrapper?: HTMLElement): boolean {
+    if (!this.instance || !this.instance.params) {
+      return false;
+    }
+
+    const overflowWidth = this.getOverflowWidth(viewportWrapper);
+    if (overflowWidth !== 0) {
+      return overflowWidth > Carousel.OVERFLOW_EPSILON_PX;
+    }
+
+    // Fallback for hidden/zero-width initialization.
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = this.getSlidesPerView();
+    return slidesCount > slidesPerView;
+  }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -131,8 +202,12 @@ export default class Carousel {
       this.getCustomOptions();
     }
 
+    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+
     this.instance = new Swiper(this.viewport, {
       ...this.config,
+      // Swiper watchOverflow can mis-detect with slides offsets; manage bleed-right overflow ourselves.
+      watchOverflow: isBleedRight ? false : this.config.watchOverflow,
       enabled: false,
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Mousewheel],
       on: {
@@ -237,9 +312,7 @@ export default class Carousel {
    */
   fixBleedRightScrollbar() {
     const updateScrollbar = () => {
-      const viewportWrapper = this.element.querySelector(
-        `.${CLASS_VIEWPORT_WRAPPER}`,
-      ) as HTMLElement;
+      const viewportWrapper = this.getViewportWrapper();
       const scrollbar = this.instance?.scrollbar;
       const swiper = this.instance;
 
@@ -247,26 +320,18 @@ export default class Carousel {
         return;
       }
 
-      const minTranslate = swiper.minTranslate();
-      const maxTranslate = swiper.maxTranslate();
-      const translateRange = Math.abs(maxTranslate - minTranslate);
+      const hasScrollableContent = this.hasScrollableContent(viewportWrapper);
 
-      if (translateRange <= 1 || !swiper.enabled) {
-        if (scrollbar.el) {
-          scrollbar.el.style.display = "none";
-        }
+      if (!hasScrollableContent) {
+        this.setScrollbarVisible(false);
         return;
       }
 
-      if (scrollbar.el) {
-        scrollbar.el.style.display = "";
-      }
+      this.setScrollbarVisible(true);
 
       const scrollbarWidth = scrollbar.el.offsetWidth;
       const viewportWidth = viewportWrapper.clientWidth;
-      const offsetBefore = Number(swiper.params.slidesOffsetBefore) || 0;
-      const offsetAfter = Number(swiper.params.slidesOffsetAfter) || 0;
-      const contentWidth = this.track.scrollWidth + offsetBefore + offsetAfter;
+      const contentWidth = this.getSlidesContentWidth();
 
       const visibleRatio =
         contentWidth > 0 ? Math.min(viewportWidth / contentWidth, 1) : 1;
@@ -348,21 +413,18 @@ export default class Carousel {
   private updateCarouselEnabledState(): void {
     if (!this.instance || !this.instance.params) return;
 
-    const slidesCount = this.instance.slides.length;
-    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+    const viewportWrapper = this.getViewportWrapper();
+    const hasScrollableContent = this.hasScrollableContent(
+      viewportWrapper || undefined,
+    );
 
-    if (slidesCount > slidesPerView) {
+    if (hasScrollableContent) {
       this.instance.enable();
     } else {
       this.instance.disable();
     }
 
-    const scrollbarEl = this.element.querySelector(
-      SELECTOR_SCROLLBAR,
-    ) as HTMLElement | null;
-    if (scrollbarEl) {
-      scrollbarEl.style.display = this.instance.enabled ? "" : "none";
-    }
+    this.setScrollbarVisible(this.instance.enabled);
   }
 
   private applyBleedInsets(viewportWrapper: HTMLElement): void {
@@ -370,42 +432,34 @@ export default class Carousel {
       return;
     }
 
-    const viewportWidth =
-      document.documentElement.clientWidth ||
-      window.visualViewport?.width ||
-      window.innerWidth;
-
-    const rect = viewportWrapper.getBoundingClientRect();
-    const insetLeft = Math.max(Math.round(rect.left), 0);
-    const insetRight = Math.max(Math.round(viewportWidth - rect.right), 0);
-    const insetAfter = insetRight;
-
-    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+    const projectedContentWidth = this.getSlidesContentWidth();
+    const projectedOverflowWidth =
+      projectedContentWidth - viewportWrapper.clientWidth;
+    const slidesPerView = this.getSlidesPerView();
     const slidesCount = this.instance.slides.length;
-    const shouldDisableBleed =
-      viewportWidth >= 2560 || slidesCount <= slidesPerView;
+    const hasIntrinsicOverflow =
+      projectedContentWidth > 0
+        ? projectedOverflowWidth > Carousel.OVERFLOW_EPSILON_PX
+        : slidesCount > slidesPerView;
+    const shouldDisableBleed = !hasIntrinsicOverflow;
 
     this.element.classList.toggle(CLASS_BLEED_RIGHT, !shouldDisableBleed);
 
-    if (shouldDisableBleed) {
-      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");
-    } else {
-      this.instance.params.slidesOffsetBefore = insetLeft;
-      this.instance.params.slidesOffsetAfter = insetAfter;
-      this.element.style.setProperty(
-        "--carousel-bleed-viewport-width",
-        `${Math.round(viewportWidth)}px`,
-      );
-      this.element.style.setProperty(
-        "--carousel-bleed-margin-left",
-        `${-insetLeft}px`,
-      );
+    const baseWidth = shouldDisableBleed
+      ? undefined
+      : viewportWrapper.clientWidth;
+    this.instance.params.width = baseWidth;
+    if (this.instance.originalParams) {
+      this.instance.originalParams.width = baseWidth;
     }
 
+    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.instance.update();
+    this.updateCarouselEnabledState();
   }
 
   /**
@@ -418,9 +472,7 @@ export default class Carousel {
     requestAnimationFrame(() => {
       if (!this.instance) return;
 
-      const viewportWrapper = this.element.querySelector(
-        `.${CLASS_VIEWPORT_WRAPPER}`,
-      ) as HTMLElement;
+      const viewportWrapper = this.getViewportWrapper();
       if (!viewportWrapper) return;
 
       const updateBleedState = () => {

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

@@ -225,6 +225,6 @@
     max-width: var(--carousel-bleed-viewport-width, 100%);
     margin-right: 0;
     margin-left: var(--carousel-bleed-margin-left, 0) !important;
-    overflow: hidden !important;
+    overflow: visible !important;
   }
 }

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

@@ -124,6 +124,12 @@ describe("Carousel Static - External Controls", () => {
   });
 
   describe("External Controls Initialization", () => {
+    it("should disable a11y scrollOnFocus to prevent focus-triggered slide jumps", () => {
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+
+      expect(swiperConfig?.a11y?.scrollOnFocus).toBe(false);
+    });
+
     it("should find and initialize external controls", () => {
       const prevButton = document.getElementById("prev-btn");
       const nextButton = document.getElementById("next-btn");
@@ -691,7 +697,76 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       });
     });
 
-    it("should use right inset for bleed-right trailing offset", () => {
+    it("should disable bleed-right when slides fit wrapper despite right inset", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1200,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      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>
+            </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(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 1000,
+          bottom: 200,
+          left: 100,
+          width: 900,
+          height: 200,
+          x: 100,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
+    it("should keep wrapper-based bleed geometry without offsets", () => {
       const originalInnerWidth = window.innerWidth;
       Object.defineProperty(window, "innerWidth", {
         configurable: true,
@@ -726,6 +801,16 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       const viewportWrapper = carouselElement.querySelector(
         ".carousel__viewport-wrapper",
       );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 1200,
+      });
 
       Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
         configurable: true,
@@ -744,16 +829,17 @@ describe("Carousel Static - Auto-Disable Feature", () => {
 
       carouselInstance = new Carousel(carouselElement);
 
-      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(120);
-      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(80);
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+      expect(mockSwiperInstance.params.width).toBe(800);
       expect(
         carouselElement.style.getPropertyValue(
           "--carousel-bleed-viewport-width",
         ),
-      ).toBe("1000px");
+      ).toBe("100%");
       expect(
         carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
-      ).toBe("-120px");
+      ).toBe("0px");
 
       Object.defineProperty(window, "innerWidth", {
         configurable: true,

package/src/components/Expander/Expander.tsx

@@ -25,6 +25,8 @@ interface ExpanderProps {
   children?: React.ReactNode;
   /** Expander takes full width of its container */
   isFullWidth?: boolean;
+  /** Position of trigger relative to content when opened */
+  placement?: "top" | "bottom";
   /** Group identifier for syncing multiple expanders together */
   toggleGroup?: string;
   /** Initial open state */
@@ -40,6 +42,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     renderSummary,
     renderSummaryOpened,
     isFullWidth,
+    placement = "bottom",
     toggleGroup,
     ...other
   } = props;
@@ -49,6 +52,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
+      [`${CLASS_ROOT}--placement-top`]: placement === "top",
     },
     className,
   );

package/src/components/Expander/styles/style.scss

@@ -51,6 +51,18 @@
       }
     }
 
+    &--placement-top {
+      &[open] {
+        display: flex;
+        flex-direction: column-reverse;
+
+        summary {
+          margin-top: space.get("large");
+          margin-bottom: 0;
+        }
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;

package/src/components/Expander/tests/Expander.conformance.test.jsx

@@ -47,6 +47,10 @@ const example = (
     >
       Content
     </Expander>
+
+    <Expander summary="Open above trigger" placement="top">
+      Content
+    </Expander>
   </>
 );
 

package/src/components/Expander/tests/Expander.unit.test.jsx

@@ -184,4 +184,13 @@ describe("Expander", () => {
     );
     expect(getByTestId("test-id")).toHaveClass("expander--fullwidth");
   });
+
+  it("applies placement-top class when placement prop is top", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details" placement="top">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander--placement-top");
+  });
 });

package/src/components/Grid/Grid.tsx

@@ -5,17 +5,20 @@ import { genResponsiveClasses } from "../../utils";
 export type GridVAlign = "stretch" | "start" | "end" | "center";
 export type GridHAlign = "end" | "center" | "space-around" | "space-between";
 export type GridRowGapSize =
+  | "none"
+  | "xsmall"
   | "small"
   | "medium"
   | "large"
   | "xlarge"
-  | Record<string, "small" | "medium" | "large" | "xlarge">;
+  | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
 export type GridColumnGapSize =
   | "none"
   | "small"
   | "default"
   | "large"
-  | Record<string, "none" | "small" | "default" | "large">;
+  | "xlarge"
+  | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

package/src/components/Grid/styles/config.scss

@@ -2,12 +2,13 @@
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ("small", "medium", "large", "xlarge");
-$grid-column-gap-sizes: ("none", "small", "default", "large");
+$grid-row-gap-sizes: ("none", "xsmall", "small", "medium", "large", "xlarge");
+$grid-column-gap-sizes: ("none", "small", "default", "large", "xlarge");
 
 $column-gap: (
   none: 0,
   small: space.get("xsmall"),
   default: space.get("small"),
   large: space.get("medium"),
+  xlarge: space.get("large"),
 );