@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/carousel/carousel.js

@@ -1,13 +1,27 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { attr, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { setChildrenFocusability } from '../../component-utilities.js';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { FASTElement, observable, Updates, attr } from "@microsoft/fast-element";
-import { uniqueId } from "@microsoft/fast-web-utilities";
+var __classPrivateFieldSet = globalThis && globalThis.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
+var __classPrivateFieldGet = globalThis && globalThis.__classPrivateFieldGet || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Carousel_isRtl;
 /**
- * Carousel
  * @summary A Carousel component for displaying a set of items in a horizontal, scrollable manner.
  *
  * @example
@@ -22,14 +36,14 @@ import { uniqueId } from "@microsoft/fast-web-utilities";
  * </fabric-carousel>
  * ```
  *
- * @attr {boolean} disable-animation - Disables animation when set to true.
+ * @attr disable-animation - Disables animation when set to true.
  *
  * @prop {boolean} disableAnimation - Boolean attribute to disable animation.
  * @prop {HTMLElement[]} slottedCarouselItems - An array of carousel items that are slotted into the carousel.
  * @prop {HTMLElement} header - The header element.
  * @prop {number} currentIndex - The current index of the carousel, indicating which item is currently visible.
- * @prop {HTMLElement} nextButton - The next button element.
- * @prop {HTMLElement} prevButton - The previous button element.
+ * @prop {HTMLElement[]} nextButton - The next button element.
+ * @prop {HTMLElement[]} prevButton - The previous button element.
  * @prop {number} visibleItemsCount - Gets the number of items currently visible in the carousel. (readonly)
  *
  * @slot header - Slot for the carousel header content.
@@ -37,10 +51,6 @@ import { uniqueId } from "@microsoft/fast-web-utilities";
  * @slot next-button - Slot for the carousel's next navigation button.
  * @slot - Default slot for carousel items.
  *
- * @csspart header - The header section of the carousel.
- * @csspart button-container - The container holding the navigation buttons.
- * @csspart viewport - The viewport for the carousel items.
- *
  * @method next - Moves the carousel to the next set of items.
  * @method prev - Moves the carousel to the previous set of items.
  * @method scrollToIndex - Scrolls the carousel to a specific index.
@@ -52,375 +62,389 @@ import { uniqueId } from "@microsoft/fast-web-utilities";
  * @tagname fabric-carousel
  * @public
  */
-export class Carousel extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * An array of carousel items that are slotted into the carousel.
-         *
-         * @public
-         * @type {HTMLElement[]}
-         * @observable
-         */
-        this.slottedCarouselItems = [];
-        /**
-         * Boolean attribute to check if the carousel items are loaded
-         */
-        this.slottedCarouselItemsLoaded = false;
-        /**
-         * The current index of the carousel, indicating which item is currently visible.
-         *
-         * @public
-         * @type {number}
-         * @observable
-         */
-        this.currentIndex = 0;
-        /**
-         * The width of the gap between carousel items, in pixels.
-         *
-         * @private
-         * @type {number}
-         */
-        this.gapWidth = 16;
-        /**
-         * Handle the next button click event.
-         * @internal
-         */
-        this.handleNext = () => {
-            this.next();
-        };
-        /**
-         * Handle the previous button click event.
-         * @internal
-         */
-        this.handlePrev = () => {
-            this.prev();
-        };
-        /**
-         * bound updateVisibleItems method to the carousel instance so that it can be added and removed as a listener
-         */
-        this._boundUpdateVisibleItems = this.updateVisibleItems.bind(this);
-        /**
-         * Cached container width
-         * @private
-         * @type {number}
-         */
-        this.cachedContainerWidth = 0;
-        /**
-         * Whether the layout should be recalculated
-         * @private
-         * @type {boolean}
-         */
-        this.shouldRecalculateLayout = true;
-        /**
-         * Resize observer
-         * @private
-         * @type {ResizeObserver}
-         */
-        this.resizeObserver = undefined;
-        /**
-         * Item measurements
-         * @private
-         * @type {number[]}
-         */
-        this.itemMeasurements = [];
-        /**
-         * The index of the last visible item in the carousel.
-         * @private
-         * @type {number}
-         */
-        this.lastVisibleItemIndex = -1;
-    }
-    /**
-     * Callback when slottedCarouselItems changes to update button states
-     * @internal
-     */
-    slottedCarouselItemsChanged(prev, next) {
-        if (prev && next && next.length !== prev.length) {
-            this.slottedCarouselItemsLoaded = true;
-        }
-        this.updateButtonStates();
-    }
-    /**
-     * Callback when currentIndex changes to update button states
-     * @internal
-     */
-    currentIndexChanged() {
-        this.updateButtonStates();
-    }
+class Carousel extends FASTElement {
+  constructor() {
+    super(...arguments);
     /**
-     * Updates the disabled state of navigation buttons based on carousel position
-     * @internal
+     * Boolean attribute to check if the component is in RTL mode
      */
-    updateButtonStates() {
-        var _a, _b;
-        if (((_a = this.nextButton) === null || _a === void 0 ? void 0 : _a[0]) && ((_b = this.prevButton) === null || _b === void 0 ? void 0 : _b[0])) {
-            this.prevButton[0].toggleAttribute("disabled", this.currentIndex === 0);
-            this.nextButton[0].toggleAttribute("disabled", this.isAtEnd());
-        }
-    }
+    _Carousel_isRtl.set(this, void 0);
     /**
-     * Sets event listeners for the carousel's navigation buttons.
-     * @internal
+     * An array of carousel items that are slotted into the carousel.
+     *
+     * @public
+     * @type {HTMLElement[]}
+     * @observable
      */
-    setEventListeners() {
-        window.addEventListener("resize", this._boundUpdateVisibleItems);
-        if (this.nextButton && this.nextButton.length > 0) {
-            this.nextButton[0].addEventListener("click", this.handleNext);
-        }
-        if (this.prevButton && this.prevButton.length > 0) {
-            this.prevButton[0].addEventListener("click", this.handlePrev);
-        }
-    }
+    this.slottedCarouselItems = [];
     /**
-     * Removes event listeners for the carousel's navigation buttons.
-     * @internal
+     * Boolean attribute to check if the carousel items are loaded
      */
-    removeEventListeners() {
-        window.removeEventListener("resize", this._boundUpdateVisibleItems);
-        if (this.nextButton && this.nextButton.length > 0) {
-            this.nextButton[0].removeEventListener("click", this.handleNext);
-        }
-        if (this.prevButton && this.prevButton.length > 0) {
-            this.prevButton[0].removeEventListener("click", this.handlePrev);
-        }
-    }
+    this.slottedCarouselItemsLoaded = false;
     /**
-     * Invoked when the carousel is added to the document's DOM.
+     * The current index of the carousel, indicating which item is currently visible.
      *
      * @public
-     * @returns {void}
+     * @type {number}
+     * @observable
      */
-    connectedCallback() {
-        var _a, _b, _c;
-        super.connectedCallback();
-        // Set a unique ID for the header and associate it with the region
-        const headerId = `fabric-carousel-header-${uniqueId()}`;
-        if (this.header) {
-            this.header.id = headerId;
-        }
-        const viewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".viewport");
-        if (!this._viewport) {
-            this._viewport = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".viewport");
-        }
-        (_c = this._viewport) === null || _c === void 0 ? void 0 : _c.setAttribute("aria-labelledby", headerId);
-        this.style.setProperty("--gap-width", `${this.gapWidth}px`);
-        Updates.enqueue(() => {
-            this.updateVisibleItems();
-            this.updateButtonStates();
-            this.setEventListeners();
-        });
-        this.setupResizeObserver();
-    }
+    this.currentIndex = 0;
     /**
-     * Invoked when the carousel is removed from the document's DOM.
+     * The width of the gap between carousel items, in pixels.
      *
-     * @public
-     * @returns {void}
+     * @private
+     * @type {number}
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-        this.removeEventListeners();
-    }
+    this.gapWidth = 16;
     /**
-     * Moves the carousel to the next set of items.
-     *
-     * @public
-     * @returns {void}
+     * Handle the next button click event.
+     * @internal
      */
-    next() {
-        if (!this.isAtEnd()) {
-            const visibleCount = this.visibleItemsCount;
-            const maxIndex = Math.max(0, this.slottedCarouselItems.length - visibleCount);
-            this.currentIndex = Math.min(this.currentIndex + this.getNextVisibleItemsCount("next"), maxIndex);
-            this.updateVisibleItems();
-        }
-    }
+    this.handleNext = () => {
+      this.next();
+    };
     /**
-     * Moves the carousel to the previous set of items.
-     *
-     * @public
-     * @returns {void}
+     * Handle the previous button click event.
+     * @internal
      */
-    prev() {
-        if (this.currentIndex > 0) {
-            const itemsToMove = this.getNextVisibleItemsCount("prev");
-            this.currentIndex -= itemsToMove;
-            this.updateVisibleItems();
-        }
-    }
+    this.handlePrev = () => {
+      this.prev();
+    };
     /**
-     * Scrolls the carousel to a specific index.
-     *
-     * @public
-     * @param {number} index - The target index to scroll to
-     * @returns {void}
+     * Cached container width
+     * @private
+     * @type {number}
      */
-    scrollToIndex(index, _attempts = 0) {
-        const maxAttempts = 10;
-        if (!this.slottedCarouselItemsLoaded) {
-            if (_attempts >= maxAttempts) {
-                console.warn(`carousel:scrollToIndex -- scroll overflow exceeded: ${maxAttempts}. No slotted carousel elements.`, index);
-                return;
-            }
-            requestAnimationFrame(() => this.scrollToIndex(index));
-            return;
-        }
-        if (index < 0 || index >= this.slottedCarouselItems.length) {
-            console.warn(`Invalid index ${index}. Must be between 0 and ${this.slottedCarouselItems.length - 1}`);
-            return;
-        }
-        this.currentIndex = index;
-        this.updateVisibleItems();
-        this.updateButtonStates();
-    }
+    this.cachedContainerWidth = 0;
     /**
-     * Sets up a resize observer to watch for changes in the carousel's container width
+     * Whether the layout should be recalculated
+     * @private
+     * @type {boolean}
      */
-    setupResizeObserver() {
-        this.resizeObserver = new ResizeObserver(() => {
-            this.cachedContainerWidth = 0;
-            this.measureItems();
-            this.updateVisibleItems();
-        });
-        this.resizeObserver.observe(this);
-    }
+    this.shouldRecalculateLayout = true;
     /**
-     * Measures the width of each item in the carousel.
-     * @internal
+     * Resize observer
+     * @private
+     * @type {ResizeObserver}
      */
-    measureItems() {
-        if (this.shouldRecalculateLayout) {
-            this.itemMeasurements = this.slottedCarouselItems.map((item) => item.getBoundingClientRect().width + this.gapWidth);
-            this.shouldRecalculateLayout = false;
-        }
-    }
+    this.resizeObserver = undefined;
     /**
-     * Gets the number of items currently visible in the carousel.
-     *
-     * @public
-     * @returns {number} The count of visible items.
+     * Item measurements
+     * @private
+     * @type {number[]}
      */
-    get visibleItemsCount() {
-        if (!this.cachedContainerWidth || this.shouldRecalculateLayout) {
-            this.cachedContainerWidth = this.clientWidth;
-            this.measureItems();
-        }
-        let totalWidth = 0;
-        let count = 0;
-        let index = this.currentIndex;
-        let isLastVisibleEl = false;
-        while (!isLastVisibleEl) {
-            if (totalWidth + this.itemMeasurements[index] <=
-                this.cachedContainerWidth) {
-                totalWidth += this.itemMeasurements[index];
-                index++;
-                if (index >= this.currentIndex) {
-                    count++;
-                }
-            }
-            else {
-                isLastVisibleEl = true;
-            }
-        }
-        this.lastVisibleItemIndex = index - 1;
-        return count;
-    }
+    this.itemMeasurements = [];
     /**
-     * Checks if the carousel is at the end of the items.
-     *
-     * @public
-     * @returns {boolean} True if at the end, false otherwise.
+     * The index of the last visible item in the carousel.
+     * @private
+     * @type {number}
      */
-    isAtEnd() {
-        const totalItems = this.slottedCarouselItems.length;
-        const visibleCount = this.visibleItemsCount;
-        const maxIndex = Math.max(0, totalItems - visibleCount);
-        return this.currentIndex >= maxIndex;
+    this.lastVisibleItemIndex = -1;
+  }
+  /**
+   * Callback when slottedCarouselItems changes to update button states
+   * @internal
+   */
+  slottedCarouselItemsChanged(prev, next) {
+    if (prev && next && next.length !== prev.length) {
+      this.slottedCarouselItemsLoaded = true;
     }
-    /**
-     * Gets the count of the next set of visible items in the carousel.
-     *
-     * @public
-     * @returns {number} The count of the next visible items.
-     */
-    getNextVisibleItemsCount(direction) {
-        let totalWidth = 0;
-        let count = 0;
-        if (!this.cachedContainerWidth || this.shouldRecalculateLayout) {
-            this.cachedContainerWidth = this.clientWidth;
-            this.measureItems();
-        }
-        const widths = this.itemMeasurements.slice(direction === "next" ? this.currentIndex : 0, direction === "next"
-            ? this.slottedCarouselItems.length
-            : this.currentIndex);
-        for (const width of widths) {
-            if (totalWidth + width <= this.cachedContainerWidth) {
-                totalWidth += width;
-                count++;
-            }
-            else {
-                break;
-            }
+    this.updateButtonStates();
+  }
+  /**
+   * Callback when currentIndex changes to update button states
+   * @internal
+   */
+  currentIndexChanged() {
+    this.updateButtonStates();
+  }
+  /**
+   * Updates the disabled state of navigation buttons based on carousel position
+   * @internal
+   */
+  updateButtonStates() {
+    var _a, _b;
+    if (((_a = this.nextButton) === null || _a === void 0 ? void 0 : _a[0]) && ((_b = this.prevButton) === null || _b === void 0 ? void 0 : _b[0])) {
+      this.prevButton[0].toggleAttribute("disabled", this.currentIndex === 0);
+      this.nextButton[0].toggleAttribute("disabled", this.isAtEnd());
+    }
+  }
+  /**
+   * Sets event listeners for the carousel's navigation buttons.
+   * @internal
+   */
+  setEventListeners() {
+    if (this.nextButton && this.nextButton.length > 0) {
+      this.nextButton[0].addEventListener("click", this.handleNext);
+    }
+    if (this.prevButton && this.prevButton.length > 0) {
+      this.prevButton[0].addEventListener("click", this.handlePrev);
+    }
+  }
+  /**
+   * Removes event listeners for the carousel's navigation buttons.
+   * @internal
+   */
+  removeEventListeners() {
+    if (this.nextButton && this.nextButton.length > 0) {
+      this.nextButton[0].removeEventListener("click", this.handleNext);
+    }
+    if (this.prevButton && this.prevButton.length > 0) {
+      this.prevButton[0].removeEventListener("click", this.handlePrev);
+    }
+  }
+  /**
+   * Invoked when the carousel is added to the document's DOM.
+   *
+   * @public
+   * @returns {void}
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateDirection();
+    // Set a unique ID for the header and associate it with the region
+    const headerId = `fabric-carousel-header-${uniqueId()}`;
+    if (this.header) {
+      this.header.id = headerId;
+    }
+    if (this.viewportRef) {
+      this.viewportRef.setAttribute("aria-labelledby", headerId);
+    }
+    this.style.setProperty("--gap-width", `${this.gapWidth}px`);
+    Updates.enqueue(() => {
+      this.updateVisibleItems();
+      this.updateButtonStates();
+      this.setEventListeners();
+    });
+    this.setupResizeObserver();
+  }
+  /**
+   * Invoked when the carousel is removed from the document's DOM.
+   *
+   * @public
+   * @returns {void}
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
+    this.removeEventListeners();
+  }
+  /**
+   * Moves the carousel to the next set of items.
+   *
+   * @public
+   * @returns {void}
+   */
+  next() {
+    if (!this.isAtEnd()) {
+      const visibleCount = this.visibleItemsCount;
+      const maxIndex = Math.max(0, this.slottedCarouselItems.length - visibleCount);
+      this.currentIndex = Math.min(this.currentIndex + this.getNextVisibleItemsCount("next"), maxIndex);
+      this.updateVisibleItems();
+    }
+  }
+  /**
+   * Moves the carousel to the previous set of items.
+   *
+   * @public
+   * @returns {void}
+   */
+  prev() {
+    if (this.currentIndex > 0) {
+      const itemsToMove = this.getNextVisibleItemsCount("prev");
+      this.currentIndex -= itemsToMove;
+      this.updateVisibleItems();
+    }
+  }
+  /**
+   * Scrolls the carousel to a specific index.
+   *
+   * @public
+   * @param {number} index - The target index to scroll to
+   * @returns {void}
+   */
+  scrollToIndex(index, _attempts = 0) {
+    const maxAttempts = 10;
+    if (!this.slottedCarouselItemsLoaded) {
+      if (_attempts >= maxAttempts) {
+        console.warn(`carousel:scrollToIndex -- scroll overflow exceeded: ${maxAttempts}. No slotted carousel elements.`, index);
+        return;
+      }
+      requestAnimationFrame(() => this.scrollToIndex(index));
+      return;
+    }
+    if (index < 0 || index >= this.slottedCarouselItems.length) {
+      console.warn(`Invalid index ${index}. Must be between 0 and ${this.slottedCarouselItems.length - 1}`);
+      return;
+    }
+    this.currentIndex = index;
+    this.updateVisibleItems();
+    this.updateButtonStates();
+  }
+  /**
+   * Sets up a resize observer to watch for changes in the carousel's container width
+   */
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.cachedContainerWidth = 0;
+      this.measureItems();
+      this.updateVisibleItems();
+    });
+    this.resizeObserver.observe(this);
+  }
+  /**
+   * Measures the width of each item in the carousel.
+   * @internal
+   */
+  measureItems() {
+    if (this.shouldRecalculateLayout) {
+      this.itemMeasurements = this.slottedCarouselItems.map(item => item.getBoundingClientRect().width + this.gapWidth);
+      this.shouldRecalculateLayout = false;
+    }
+  }
+  /**
+   * Gets the number of items currently visible in the carousel.
+   *
+   * @public
+   * @returns {number} The count of visible items.
+   */
+  get visibleItemsCount() {
+    if (!this.cachedContainerWidth || this.shouldRecalculateLayout) {
+      this.cachedContainerWidth = this.clientWidth;
+      this.measureItems();
+    }
+    let totalWidth = 0;
+    let count = 0;
+    let index = this.currentIndex;
+    let isLastVisibleEl = false;
+    while (!isLastVisibleEl) {
+      if (totalWidth + this.itemMeasurements[index] <= this.cachedContainerWidth) {
+        totalWidth += this.itemMeasurements[index];
+        index++;
+        if (index >= this.currentIndex) {
+          count++;
         }
-        return count;
+      } else {
+        isLastVisibleEl = true;
+      }
     }
-    /**
-     * Updates the visible items in the carousel.
-     *
-     * @public
-     * @returns {void}
-     */
-    updateVisibleItems() {
-        Updates.enqueue(() => {
-            var _a;
-            let totalWidth = 0;
-            if (this.itemMeasurements.length > 0) {
-                this.slottedCarouselItems.forEach((item, index) => {
-                    if (index > this.lastVisibleItemIndex || index < this.currentIndex) {
-                        item.setAttribute("aria-hidden", "true");
-                    }
-                    else {
-                        item.setAttribute("aria-hidden", "false");
-                    }
-                    if (index < this.currentIndex) {
-                        totalWidth += this.itemMeasurements[index];
-                    }
-                });
-                if (!this._viewport) {
-                    this._viewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".viewport");
-                }
-                if (this.disableAnimation) {
-                    this._viewport.style.transition = "none";
-                }
-                else {
-                    this._viewport.style.transition = "";
-                }
-                this._viewport.style.transform = `translateX(-${totalWidth}px)`;
-            }
-        });
+    this.lastVisibleItemIndex = index - 1;
+    return count;
+  }
+  /**
+   * Checks if the carousel is at the end of the items.
+   *
+   * @public
+   * @returns {boolean} True if at the end, false otherwise.
+   */
+  isAtEnd() {
+    const totalItems = this.slottedCarouselItems.length;
+    const visibleCount = this.visibleItemsCount;
+    const maxIndex = Math.max(0, totalItems - visibleCount);
+    return this.currentIndex >= maxIndex;
+  }
+  /**
+   * Gets the count of the next set of visible items in the carousel.
+   *
+   * @public
+   * @param {string} direction - The direction to check ("next" or "prev")
+   * @returns {number} The count of the next visible items.
+   */
+  getNextVisibleItemsCount(direction) {
+    let totalWidth = 0;
+    let count = 0;
+    if (!this.cachedContainerWidth || this.shouldRecalculateLayout) {
+      this.cachedContainerWidth = this.clientWidth;
+      this.measureItems();
+    }
+    const widths = this.itemMeasurements.slice(direction === "next" ? this.currentIndex : 0, direction === "next" ? this.slottedCarouselItems.length : this.currentIndex);
+    for (const width of widths) {
+      if (totalWidth + width <= this.cachedContainerWidth) {
+        totalWidth += width;
+        count++;
+      } else {
+        break;
+      }
+    }
+    return count;
+  }
+  /**
+   * Detects if the component is in RTL mode
+   * @private
+   * @returns {boolean} True if RTL is active
+   */
+  updateDirection() {
+    var _a;
+    const computedDir = getComputedStyle(this).direction;
+    const documentDir = document.documentElement.dir;
+    const htmlDir = (_a = document.querySelector("html")) === null || _a === void 0 ? void 0 : _a.getAttribute("dir");
+    __classPrivateFieldSet(this, _Carousel_isRtl, computedDir === "rtl" || documentDir === "rtl" || htmlDir === "rtl", "f");
+  }
+  /**
+   * Gets the appropriate transform direction based on RTL
+   * @private
+   * @param {number} offset - The offset amount
+   * @returns {string} The transform CSS value
+   */
+  getTransform(offset) {
+    if (__classPrivateFieldGet(this, _Carousel_isRtl, "f") === undefined) {
+      this.updateDirection();
     }
+    // In RTL, positive offset should move right (positive translateX)
+    // In LTR, positive offset should move left (negative translateX)
+    const transformValue = __classPrivateFieldGet(this, _Carousel_isRtl, "f") ? offset : -offset;
+    return `translateX(${transformValue}px)`;
+  }
+  /**
+   * Updates the visible items in the carousel.
+   *
+   * @public
+   * @returns {void}
+   */
+  updateVisibleItems() {
+    Updates.enqueue(() => {
+      let totalWidth = 0;
+      if (this.itemMeasurements.length > 0) {
+        this.slottedCarouselItems.forEach((item, index) => {
+          if (index > this.lastVisibleItemIndex || index < this.currentIndex) {
+            item.setAttribute("aria-hidden", "true");
+            item.tabIndex = -1;
+            setChildrenFocusability(item, false);
+          } else {
+            item.setAttribute("aria-hidden", "false");
+            item.tabIndex = 0;
+            setChildrenFocusability(item, true);
+          }
+          if (index < this.currentIndex) {
+            totalWidth += this.itemMeasurements[index];
+          }
+        });
+        if (this.viewportRef) {
+          if (this.disableAnimation) {
+            this.viewportRef.style.transition = "none";
+          } else {
+            this.viewportRef.style.transition = "";
+          }
+          // Use RTL-aware transform
+          this.viewportRef.style.transform = this.getTransform(totalWidth);
+        }
+      }
+    });
+  }
 }
-__decorate([
-    attr({ mode: "boolean", attribute: "disable-animation" })
-], Carousel.prototype, "disableAnimation", void 0);
-__decorate([
-    observable
-], Carousel.prototype, "slottedCarouselItems", void 0);
-__decorate([
-    observable
-], Carousel.prototype, "header", void 0);
-__decorate([
-    observable
-], Carousel.prototype, "currentIndex", void 0);
-__decorate([
-    observable
-], Carousel.prototype, "nextButton", void 0);
-__decorate([
-    observable
-], Carousel.prototype, "prevButton", void 0);
-//# sourceMappingURL=carousel.js.map
+_Carousel_isRtl = new WeakMap();
+__decorate([attr({
+  mode: "boolean",
+  attribute: "disable-animation"
+})], Carousel.prototype, "disableAnimation", void 0);
+__decorate([observable], Carousel.prototype, "slottedCarouselItems", void 0);
+__decorate([observable], Carousel.prototype, "header", void 0);
+__decorate([observable], Carousel.prototype, "viewportRef", void 0);
+__decorate([observable], Carousel.prototype, "currentIndex", void 0);
+__decorate([observable], Carousel.prototype, "nextButton", void 0);
+__decorate([observable], Carousel.prototype, "prevButton", void 0);
+
+export { Carousel };