@fabric-msft/fabric-web 7.2.0 → 7.3.1

package/dts/util/carousel-controller.d.ts

@@ -0,0 +1,120 @@
+import type { CarouselItem } from "../components/carousel-item/carousel-item.js";
+/**
+ * Interface for items managed by a {@link CarouselController}.
+ * Any element implementing this shape can be driven by the controller
+ * (e.g. `CarouselItem`, `ModalFreItem`).
+ * @public
+ */
+export interface CarouselManagedItem {
+    active: boolean;
+    panelId?: string;
+    tabId?: string;
+    label?: string;
+}
+/**
+ * Options for creating a CarouselController.
+ * @public
+ */
+export interface CarouselControllerOptions {
+    /**
+     * Optional prefix for generated IDs.
+     * Defaults to an auto-incrementing "carousel-N" value.
+     */
+    idPrefix?: string;
+}
+/**
+ * Framework-agnostic controller that manages carousel state and navigation.
+ *
+ * Both `fabric-carousel` and `fabric-modal` (FRE mode) instantiate this
+ * controller. It owns:
+ * - `currentIndex` / `totalItems` state
+ * - `next()`, `prev()`, `scrollToIndex()` navigation
+ * - Active-state synchronization on `CarouselItem` elements
+ * - ARIA tab/panel ID generation
+ *
+ * @public
+ */
+export declare class CarouselController<T extends CarouselManagedItem = CarouselItem> {
+    /**
+     * Counter for generating unique carousel IDs.
+     * @internal
+     */
+    private static idCounter;
+    /**
+     * Unique ID prefix for this controller instance.
+     * @internal
+     */
+    readonly idPrefix: string;
+    /**
+     * Index of the currently active item.
+     * Setting this value calls {@link updateActiveStates} and invokes
+     * the {@link onChange} callback when the value actually changes.
+     * @public
+     */
+    private _currentIndex;
+    get currentIndex(): number;
+    set currentIndex(value: number);
+    /**
+     * The collection of carousel items managed by this controller.
+     * Uses FAST Observable API so template bindings (e.g. `repeat`)
+     * react when the array reference is replaced.
+     * @public
+     */
+    private _items;
+    get items(): T[];
+    set items(value: T[]);
+    /**
+     * Total number of items.
+     * Derives from the tracked `items` property so observers are notified
+     * when the item array is replaced.
+     * @public
+     * @readonly
+     */
+    get totalItems(): number;
+    constructor(options?: CarouselControllerOptions);
+    /**
+     * Advances to the next item if not at the end.
+     * @public
+     */
+    next(): void;
+    /**
+     * Moves to the previous item if not at the beginning.
+     * @public
+     */
+    prev(): void;
+    /**
+     * Scrolls to the item at the specified index.
+     * @param index - The target index.
+     * @public
+     */
+    scrollToIndex(index: number): void;
+    /**
+     * Synchronizes active state, panelId, and tabId on all items.
+     * Clamps `currentIndex` to valid range.
+     * @public
+     */
+    updateActiveStates(): void;
+    /**
+     * Applies active state, panelId, and tabId to all items
+     * based on the current index. Does not clamp.
+     * @internal
+     */
+    private syncActiveStates;
+    /**
+     * Gets the tab ID for a given index.
+     * @public
+     */
+    getTabId(index: number): string;
+    /**
+     * Gets the panel ID for a given index.
+     * @public
+     */
+    getPanelId(index: number): string;
+    /**
+     * Gets the tab label for a given index.
+     * Uses the item's label if set, otherwise a localized "Slide N" label.
+     * @public
+     */
+    getTabLabel(index: number): string;
+}
+//# sourceMappingURL=carousel-controller.d.ts.map

package/dts/util/carousel-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-controller.d.ts","sourceRoot":"","sources":["../../../src/util/carousel-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAIjF;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,kBAAkB,CAAC,CAAC,SAAS,mBAAmB,GAAG,YAAY;IAC1E;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAE7B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B;;;;;OAKG;IACH,OAAO,CAAC,aAAa,CAAa;IAElC,IAAI,YAAY,IAAI,MAAM,CAGzB;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAO7B;IAED;;;;;OAKG;IACH,OAAO,CAAC,MAAM,CAAW;IAEzB,IAAI,KAAK,IAAI,CAAC,EAAE,CAGf;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,EAInB;IAED;;;;;;OAMG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;gBAEW,OAAO,CAAC,EAAE,yBAAyB;IAK/C;;;OAGG;IACH,IAAI,IAAI,IAAI;IAMZ;;;OAGG;IACH,IAAI,IAAI,IAAI;IAMZ;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMlC;;;;OAIG;IACH,kBAAkB,IAAI,IAAI;IAW1B;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI/B;;;OAGG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIjC;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAInC"}

package/dts/util/icons.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Document icon (20x20).
+ * @internal
+ */
+export declare const documentIcon: import("@microsoft/fast-element").ViewTemplate<any, any>;
+/**
+ * Dismiss icon (16x16).
+ * @internal
+ */
+export declare const dismissIcon: import("@microsoft/fast-element").ViewTemplate<any, any>;
 /**
  * Chevron left icon (20x20).
  * @internal
@@ -18,4 +28,9 @@ export declare const chevronDownIcon: import("@microsoft/fast-element").InlineTe
  * @internal
  */
 export declare const chevronUpIcon: import("@microsoft/fast-element").InlineTemplateDirective;
+/**
+ * Modified indicator SVG template (small dot).
+ * @internal
+ */
+export declare const modifiedIndicatorSVG: import("@microsoft/fast-element").ViewTemplate<any, any>;
 //# sourceMappingURL=icons.d.ts.map

package/dts/util/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/util/icons.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,eAAe,0DAa3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,0DAa5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,2DAapB,CAAC;AAET;;;GAGG;AACH,eAAO,MAAM,aAAa,2DAalB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/util/icons.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,YAAY,0DAcxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,0DAcvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,0DAa3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,0DAa5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,2DAapB,CAAC;AAET;;;GAGG;AACH,eAAO,MAAM,aAAa,2DAalB,CAAC;AAET;;;GAGG;AACH,eAAO,MAAM,oBAAoB,0DAWhC,CAAC"}

package/dts/util/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./accessibility-utilities.js";
 export * from "./apply-mixins.js";
 export * from "./attribute-utilities.js";
+export * from "./carousel-controller.js";
 export * from "./collection-event-manager.js";
 export * from "./debounce.js";
 export * from "./debug.js";

package/dts/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,uCAAuC,CAAC;AACtD,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,uCAAuC,CAAC;AACtD,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC"}

package/esm/components/accordion-menu-panel/accordion-menu-panel.styles.js

@@ -9,6 +9,6 @@ const styles = css`
   :host{contain:content;position:relative}:host(:focus-visible){outline:none}:host(:focus-visible) .heading{border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}:host([marker-position="start"]) .heading{flex-direction:row-reverse}:host([marker-position="end"]) .heading{flex-direction:row}.heading{display:flex;justify-content:space-between;height:${sizeVerticalXXXL};align-items:center;position:relative;padding-inline:${spacingHorizontalS} ${spacingHorizontalS};border-radius:${borderRadiusMedium};${typographyCaption1StrongStyles}
     grid-template-columns:auto auto 1fr auto;padding:0px ${spacingHorizontalMNudge};margin:1px;gap:${spacingHorizontalXS};cursor:pointer;color:${colorNeutralForeground3};background:${colorTransparentBackground};transition:background-color 0.2s ease-in-out}.heading *{pointer-events:none}.heading-content{flex:1;display:flex;align-items:center}.content{display:none}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot="marker-collapsed"],[slot="marker-expanded"])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;transition:transform 0.2s ease-in-out}::slotted([slot="start"]){display:flex;justify-content:center;align-items:center;padding-inline-end:${spacingHorizontalS}}:host(${disabledState}) .heading{color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${disabledState}) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg)
       brightness(88%) contrast(87%)}:host(${expandedState}) .content{display:block}:host(${expandedState}) .default-marker-collapsed,:host(${expandedState}) ::slotted([slot="marker-collapsed"]),:host(:not(${expandedState})) :is(.default-marker-expanded,.content),:host(:not(${expandedState})) ::slotted([slot="marker-expanded"]){display:none}:host(${expandedState}) ::slotted([slot="marker-expanded"]),:host(:not(${expandedState})) ::slotted([slot="marker-collapsed"]){display:flex}:host(${smallState}) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${extraLargeState}) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${alignEndState}) :slotted([slot="start"]){grid-column:1 / span 1}:host(${alignEndState})
-    :is(.default-marker-collapsed,.default-marker-expanded){padding-inline-start:${spacingHorizontalS};padding-inline-end:${spacingHorizontalXXS}}:host([block]){max-width:100%}:host(${alignEndState}) .heading{padding-inline:${spacingHorizontalS}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalSNudge} ${spacingHorizontalS}}:host(:not(:first-child)) .heading{border-block-start:${strokeWidthThin} solid ${colorNeutralStroke2};border-radius:0}::slotted(fabric-menu-list){box-shadow:none;border-radius:0;border:none}`;
+    :is(.default-marker-collapsed,.default-marker-expanded){padding-inline-start:${spacingHorizontalS};padding-inline-end:${spacingHorizontalXXS}}:host([block]){max-width:100%}:host(${alignEndState}) .heading{padding-inline:${spacingHorizontalS}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalSNudge} ${spacingHorizontalS}}:host(:not(:first-of-type)) .heading{border-block-start:${strokeWidthThin} solid ${colorNeutralStroke2};border-radius:0}::slotted(fabric-menu-list){box-shadow:none;border-radius:0;border:none}`;
 
 export { styles };

package/esm/components/carousel/carousel.js

@@ -1,15 +1,8 @@
 import { attr, observable, FASTElement } from '@microsoft/fast-element';
 import { CarouselNavPositions } from './carousel.options.js';
 import { CarouselEventNames } from './carousel.events.js';
-import '../carousel-nav/carousel-nav.js';
+import { CarouselController } from '../../util/carousel-controller.js';
 import { CarouselNavButtonPlacements } from '../carousel-nav/carousel-nav.options.js';
-import { definition } from '../carousel-nav/carousel-nav.definition.js';
-import '../carousel-nav/carousel-nav.styles.js';
-import '../carousel-nav/carousel-nav.template.js';
-import '../carousel-nav-item/carousel-nav-item.js';
-import { definition as definition$1 } from '../carousel-nav-item/carousel-nav-item.definition.js';
-import '../carousel-nav-item/carousel-nav-item.styles.js';
-import '../carousel-nav-item/carousel-nav-item.template.js';
 
 var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
   var c = arguments.length,
@@ -55,11 +48,10 @@ class Carousel extends FASTElement {
   constructor() {
     super(...arguments);
     /**
-     * Unique ID for this carousel instance.
-     * Used to generate unique IDs for tabs and panels.
+     * Internal carousel controller that manages state and navigation.
      * @internal
      */
-    this.carouselId = `carousel-${Carousel.idCounter++}`;
+    this.controller = new CarouselController();
     /**
      * Nav position relative to content.
      * @public
@@ -70,11 +62,6 @@ class Carousel extends FASTElement {
      * @public
      */
     this.navButtonPlacement = CarouselNavButtonPlacements.grouped;
-    /**
-     * Index of the currently visible item.
-     * @public
-     */
-    this.currentIndex = 0;
     /**
      * Slotted carousel items.
      * @internal
@@ -82,48 +69,42 @@ class Carousel extends FASTElement {
     this.slottedItems = [];
   }
   /**
-   * Total number of carousel items.
+   * Index of the currently visible item.
    * @public
-   * @readonly
-   */
-  get totalItems() {
-    return this.slottedItems.length;
-  }
-  /**
-   * Callback when generatedNav changes.
-   * @internal
    */
-  generatedNavChanged(_oldValue, newValue) {
-    var _a;
-    (_a = this.eventListenerAbortController) === null || _a === void 0 ? void 0 : _a.abort();
-    if (newValue) {
-      this.setupNavListeners(newValue);
+  get currentIndex() {
+    return this.controller.currentIndex;
+  }
+  set currentIndex(value) {
+    const previousIndex = this.controller.currentIndex;
+    if (value !== previousIndex) {
+      this.controller.currentIndex = value;
+      this.emitChange(value, previousIndex);
     }
   }
   /**
-   * Callback when currentIndex changes.
-   * @internal
+   * Total number of carousel items.
+   * @public
+   * @readonly
    */
-  currentIndexChanged(oldValue, newValue) {
-    this.updateActiveStates();
-    if (oldValue !== undefined) {
-      this.emitChange(newValue, oldValue);
-    }
+  get totalItems() {
+    return this.controller.totalItems;
   }
   /**
    * Callback when slotted items change.
    * @internal
    */
   slottedItemsChanged() {
-    this.updateActiveStates();
+    this.controller.items = this.slottedItems;
+    this.controller.updateActiveStates();
   }
   /**
    * Advances carousel to the next item.
    * @public
    */
   next() {
-    if (this.currentIndex < this.totalItems - 1) {
-      this.currentIndex++;
+    if (this.controller.currentIndex < this.totalItems - 1) {
+      this.currentIndex = this.controller.currentIndex + 1;
     }
   }
   /**
@@ -131,8 +112,8 @@ class Carousel extends FASTElement {
    * @public
    */
   prev() {
-    if (this.currentIndex > 0) {
-      this.currentIndex--;
+    if (this.controller.currentIndex > 0) {
+      this.currentIndex = this.controller.currentIndex - 1;
     }
   }
   /**
@@ -144,34 +125,19 @@ class Carousel extends FASTElement {
       this.currentIndex = index;
     }
   }
-  /**
-   * Updates active states on carousel items.
-   * @internal
-   */
-  updateActiveStates() {
-    var _a, _b;
-    if ((_a = this.slottedItems) === null || _a === void 0 ? void 0 : _a.length) {
-      this.currentIndex = Math.min(this.currentIndex, this.slottedItems.length - 1);
-    }
-    (_b = this.slottedItems) === null || _b === void 0 ? void 0 : _b.forEach((item, index) => {
-      item.active = index === this.currentIndex;
-      item.panelId = `${this.carouselId}-panel-${index}`;
-      item.tabId = `${this.carouselId}-tab-${index}`;
-    });
-  }
   /**
    * Gets the tab ID for a given index.
    * @internal
    */
   getTabId(index) {
-    return `${this.carouselId}-tab-${index}`;
+    return this.controller.getTabId(index);
   }
   /**
    * Gets the panel ID for a given index.
    * @internal
    */
   getPanelId(index) {
-    return `${this.carouselId}-panel-${index}`;
+    return this.controller.getPanelId(index);
   }
   /**
    * Gets the tab label for a given index.
@@ -179,28 +145,12 @@ class Carousel extends FASTElement {
    * @internal
    */
   getTabLabel(index) {
-    var _a, _b;
-    const item = (_a = this.slottedItems) === null || _a === void 0 ? void 0 : _a[index];
-    return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : `Slide ${index + 1}`;
+    return this.controller.getTabLabel(index);
   }
-  /**
-   * Sets up event listeners on nav element.
-   * @internal
-   */
-  setupNavListeners(nav) {
-    this.eventListenerAbortController = new AbortController();
-    const {
-      signal
-    } = this.eventListenerAbortController;
-    nav.addEventListener("select", e => this.scrollToIndex(e.detail.index), {
-      signal
-    });
-    nav.addEventListener("previous", () => this.prev(), {
-      signal
-    });
-    nav.addEventListener("next", () => this.next(), {
-      signal
-    });
+  connectedCallback() {
+    super.connectedCallback();
+    this.controller.items = this.slottedItems;
+    this.controller.updateActiveStates();
   }
   /**
    * Emits change event.
@@ -216,31 +166,13 @@ class Carousel extends FASTElement {
       composed: true
     }));
   }
-  connectedCallback() {
-    super.connectedCallback();
-    definition.define(customElements);
-    definition$1.define(customElements);
-    this.updateActiveStates();
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.eventListenerAbortController) === null || _a === void 0 ? void 0 : _a.abort();
-  }
 }
-/**
- * Counter for generating unique carousel IDs.
- * @internal
- */
-Carousel.idCounter = 0;
 __decorate([attr({
   attribute: "nav-position"
 })], Carousel.prototype, "navPosition", void 0);
 __decorate([attr({
   attribute: "nav-button-placement"
 })], Carousel.prototype, "navButtonPlacement", void 0);
-__decorate([observable], Carousel.prototype, "currentIndex", void 0);
 __decorate([observable], Carousel.prototype, "slottedItems", void 0);
-__decorate([observable], Carousel.prototype, "generatedNav", void 0);
 
 export { Carousel };

package/esm/components/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.ts"],"names":[],"mappings":"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"}

package/esm/components/carousel/carousel.styles.js

@@ -1,11 +1,11 @@
 import { css } from '@microsoft/fast-element';
-import { colorNeutralBackground1, durationNormal, curveEasyEase, spacingVerticalM } from '@fluentui/web-components';
+import { colorNeutralBackground1, spacingVerticalM } from '@fluentui/web-components';
 
 /**
  * Styles for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
  * @public
  */
 const styles = css`
-  :host{--_carousel-dir:-1;display:flex;flex-direction:column;position:relative;background:${colorNeutralBackground1}}:host(:dir(rtl)){--_carousel-dir:1}.viewport{overflow:hidden;position:relative;width:100%}.track{display:flex;transition:transform ${durationNormal} ${curveEasyEase};will-change:transform}@media (prefers-reduced-motion:reduce){.track{transition:none}}.nav-container{display:flex;justify-content:center;width:100%}:host([nav-position="outside-content"]) .nav-container{position:relative;margin-block-start:${spacingVerticalM}}:host([nav-position="over-content"]) .nav-container{position:absolute;inset-block-end:${spacingVerticalM};inset-inline:0;z-index:1}`;
+  :host{--_carousel-dir:-1;display:flex;flex-direction:column;position:relative;background:${colorNeutralBackground1}}:host(:dir(rtl)){--_carousel-dir:1}.nav-container{display:flex;justify-content:center;width:100%}:host([nav-position="outside-content"]) .nav-container{position:relative;margin-block-start:${spacingVerticalM}}:host([nav-position="over-content"]) .nav-container{position:absolute;inset-block-end:${spacingVerticalM};inset-inline:0;z-index:1}`;
 
 export { styles };

package/esm/components/carousel/carousel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;kBAMtB,uBAAuB;;;;;;;;;;;;;;;4BAeb,cAAc,IAAI,aAAa;;;;;;;;;;;;;;;;;;0BAkBjC,gBAAgB;;;;;uBAKnB,gBAAgB;;;;CAItC,CAAC"}
+{"version":3,"file":"carousel.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;kBAMtB,uBAAuB;;;;;;;;;;;;;;;0BAef,gBAAgB;;;;;uBAKnB,gBAAgB;;;;CAItC,CAAC"}

package/esm/components/carousel/carousel.template.js

@@ -1,14 +1,14 @@
-import { slotted, ref, repeat, html } from '@microsoft/fast-element';
+import { slotted, repeat, html } from '@microsoft/fast-element';
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(Carousel:class)} component.
  * @public
  */
 function carouselTemplate() {
-  return html`<template role="region" aria-roledescription="carousel" nav-position="${x => x.navPosition}" nav-button-placement="${x => x.navButtonPlacement}"><div class="viewport" aria-live="polite" aria-atomic="false"><div class="track" style="transform: translateX(calc(var(--_carousel-dir) * ${x => x.currentIndex} * 100%))"><slot ${slotted({
+  return html`<template role="region" aria-roledescription="carousel" nav-position="${x => x.navPosition}" nav-button-placement="${x => x.navButtonPlacement}"><fabric-carousel-viewport :controller="${x => x.controller}"><slot ${slotted({
     property: "slottedItems",
     filter: el => el.tagName === "FABRIC-CAROUSEL-ITEM"
-  })}></slot></div></div><div class="nav-container"><fabric-carousel-nav ${ref("generatedNav")} button-placement="${x => x.navButtonPlacement}" current-index="${x => x.currentIndex}">${repeat(x => x.slottedItems, html`<fabric-carousel-nav-item :tabId="${(_item, c) => c.parent.getTabId(c.index)}" :panelId="${(_item, c) => c.parent.getPanelId(c.index)}" :tabLabel="${(_item, c) => c.parent.getTabLabel(c.index)}"></fabric-carousel-nav-item>`, {
+  })}></slot></fabric-carousel-viewport><div class="nav-container"><fabric-carousel-nav :controller="${x => x.controller}" button-placement="${x => x.navButtonPlacement}" current-index="${x => x.currentIndex}">${repeat(x => x.slottedItems, html`<fabric-carousel-nav-item :tabId="${(_item, c) => c.parent.getTabId(c.index)}" :panelId="${(_item, c) => c.parent.getPanelId(c.index)}" :tabLabel="${(_item, c) => c.parent.getTabLabel(c.index)}"></fabric-carousel-nav-item>`, {
     positioning: true
   })}</fabric-carousel-nav></div></template>`;
 }

package/esm/components/carousel/carousel.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.template.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAKrE;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;;;sBAIM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;8BACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;;;;;qEAKY,CAAC,CAAC,EAAE,EAAE,CAC/D,CAAC,CAAC,YAAY;;;cAGZ,OAAO,CAAC;QACR,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,EAAc,CAAC,OAAO,KAAK,sBAAsB;KACnE,CAAC;;;;;;YAMF,GAAG,CAAC,cAAc,CAAC;8BACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;2BAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY;;YAEpC,MAAM,CACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,EACrB,IAAI,CAAwB;;0BAEd,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;4BACtC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;6BACzC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;;aAE3D,EACD,EAAE,WAAW,EAAE,IAAI,EAAE,CACtB;;;;GAIR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"carousel.template.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAKhE;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;;;sBAIM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;8BACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;;+CAEV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;;YAEtD,OAAO,CAAC;QACR,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,EAAc,CAAC,OAAO,KAAK,sBAAsB;KACnE,CAAC;;;;;yBAKa,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;8BACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB;2BAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY;;YAEpC,MAAM,CACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,EACrB,IAAI,CAAwB;;0BAEd,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;4BACtC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;6BACzC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;;aAE3D,EACD,EAAE,WAAW,EAAE,IAAI,EAAE,CACtB;;;;GAIR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}

package/esm/components/carousel/define.js

@@ -1,7 +1,8 @@
-import { definition as definition$2 } from './carousel.definition.js';
+import { definition as definition$3 } from './carousel.definition.js';
 import { DesignSystem } from '../design-system.js';
-import { definition } from '../carousel-nav/carousel-nav.definition.js';
-import { definition as definition$1 } from '../carousel-nav-item/carousel-nav-item.definition.js';
+import { definition as definition$1 } from '../carousel-nav/carousel-nav.definition.js';
+import { definition as definition$2 } from '../carousel-nav-item/carousel-nav-item.definition.js';
+import { definition } from '../carousel-viewport/carousel-viewport.definition.js';
 
 /**
  * Registers the carousel element and all of its internal dependencies
@@ -21,6 +22,7 @@ function defineCarousel(registry = customElements) {
   definition.define(registry);
   definition$1.define(registry);
   definition$2.define(registry);
+  definition$3.define(registry);
 }
 defineCarousel(DesignSystem.registry);
 

package/esm/components/carousel/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/carousel/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACjG,OAAO,EAAE,UAAU,IAAI,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AAE/G;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,cAAc,CAC5B,WAAkC,cAAc;IAEhD,qBAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC;AAED,cAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/carousel/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACjG,OAAO,EAAE,UAAU,IAAI,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AAC/G,OAAO,EAAE,UAAU,IAAI,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAEhH;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,cAAc,CAC5B,WAAkC,cAAc;IAEhD,0BAA0B,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC;AAED,cAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/carousel-item/carousel-item.template.js

@@ -6,7 +6,7 @@ import { html } from '@microsoft/fast-element';
  * @public
  */
 function carouselItemTemplate() {
-  return html`<template role="tabpanel" id="${x => x.panelId}" aria-labelledby="${x => x.tabId}" aria-label="${x => x.label}" ?active="${x => x.active}" ?aria-hidden="${x => !x.active}" tabindex="${x => x.active ? 0 : -1}"><slot></slot></template>`;
+  return html`<template role="tabpanel" id="${x => x.panelId}" aria-labelledby="${x => x.tabId}" aria-label="${x => x.label}" ?active="${x => x.active}" aria-hidden="${x => !x.active ? "true" : null}" tabindex="${x => x.active ? 0 : -1}"><slot></slot></template>`;
 }
 const template = carouselItemTemplate();
 

package/esm/components/carousel-item/carousel-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-item.template.js","sourceRoot":"","sources":["../../../../src/components/carousel-item/carousel-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C;;;;GAIG;AACH,MAAM,UAAU,oBAAoB;IAGlC,OAAO,IAAI,CAAG;;;YAGJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBACH,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;oBACnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;iBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;sBACV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM;kBACpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;GAIzC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"carousel-item.template.js","sourceRoot":"","sources":["../../../../src/components/carousel-item/carousel-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C;;;;GAIG;AACH,MAAM,UAAU,oBAAoB;IAGlC,OAAO,IAAI,CAAG;;;YAGJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBACH,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;oBACnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;iBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;qBACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;kBACrC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;GAIzC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,oBAAoB,EAAE,CAAC"}

package/esm/components/carousel-nav/carousel-nav.js

@@ -30,8 +30,11 @@ var __decorate = globalThis && globalThis.__decorate || function (decorators, ta
  *
  * @prop {CarouselNavButtonPlacement} buttonPlacement - Button positioning.
  * @prop {number} currentIndex - Currently selected nav item index.
+ * @prop {CarouselController} controller - The carousel controller to drive navigation.
  *
  * @slot default - Slot for fabric-carousel-nav-item elements.
+ * @slot prev-button - Custom previous button. Defaults to a chevron left button.
+ * @slot next-button - Custom next button. Defaults to a chevron right button.
  *
  * @fires select - Fired when a nav item is selected with detail { index }.
  * @fires previous - Fired when prev button is clicked.
@@ -128,12 +131,14 @@ class CarouselNav extends FASTElement {
    * @internal
    */
   handleIndicatorKeydown(event, index) {
+    var _a;
     const {
       key
     } = event;
     // Enter/Space selects the indicator
     if (key === keyEnter || key === keySpace) {
       event.preventDefault();
+      (_a = this.controller) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
       this.emitSelect(index);
       return;
     }
@@ -145,6 +150,8 @@ class CarouselNav extends FASTElement {
    * @internal
    */
   handleItemClick(index) {
+    var _a;
+    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
     this.emitSelect(index);
   }
   /**
@@ -152,6 +159,8 @@ class CarouselNav extends FASTElement {
    * @internal
    */
   handlePrevClick() {
+    var _a;
+    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.prev();
     this.dispatchEvent(new CustomEvent(CarouselNavEventNames.previous, {
       bubbles: true,
       composed: true
@@ -162,6 +171,8 @@ class CarouselNav extends FASTElement {
    * @internal
    */
   handleNextClick() {
+    var _a;
+    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.next();
     this.dispatchEvent(new CustomEvent(CarouselNavEventNames.next, {
       bubbles: true,
       composed: true
@@ -192,6 +203,7 @@ __decorate([attr({
 __decorate([attr({
   attribute: "current-index"
 })], CarouselNav.prototype, "currentIndex", void 0);
+__decorate([observable], CarouselNav.prototype, "controller", void 0);
 __decorate([observable], CarouselNav.prototype, "slottedNavItems", void 0);
 
 export { CarouselNav };

package/esm/components/carousel-nav/carousel-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-nav.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EACL,2BAA2B,EAE5B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACL,2BAA2B,EAE5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,4BAA4B,EAE7B,MAAM,wCAAwC,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QACE;;;WAGG;QAEH,oBAAe,GACb,2BAA2B,CAAC,OAAO,CAAC;QAEtC;;;WAGG;QAEH,iBAAY,GAAW,CAAC,CAAC;QAuBzB;;;WAGG;QACK,gBAAW,GAA0B,2BAA2B,CAAC;YACvE,KAAK,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,eAAe,mCAAI,EAAE,CAAA,EAAA;YACvC,WAAW,EAAE,YAAY;YACzB,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,IAAI;YACnB,KAAK,EAAE,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,GAAG;SAC/D,CAAC,CAAC;QAEH;;;WAGG;QACK,kBAAa,GACnB,4BAA4B,EAAE,CAAC;QAEjC;;;WAGG;QAEH,oBAAe,GAAsB,EAAE,CAAC;IA2G1C,CAAC;IAxJC;;;OAGG;IACH,mBAAmB,CACjB,SAA0B,EAC1B,QAAyB;QAEzB,MAAM,QAAQ,GACZ,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;YAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;IACH,CAAC;IA4BD;;;OAGG;IACH,sBAAsB,CACpB,QAA2B,EAC3B,QAA2B;QAE3B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YACpE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;gBAChE,MAAM;aACP,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CACnB,SAAS,EACT,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,KAAK,CAAC,EAC3D,EAAE,MAAM,EAAE,CACX,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACK,kBAAkB;;QACxB,MAAA,IAAI,CAAC,eAAe,0CAAE,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5C,IAAI,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACK,sBAAsB,CAAC,KAAoB,EAAE,KAAa;QAChE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QAEtB,oCAAoC;QACpC,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YACzC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,0DAA0D;QAC1D,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED;;;OAGG;IACK,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,eAAe;QACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,CAAC,QAAQ,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,eAAe;QACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,CAAC,IAAI,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAa;QAC9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,CAAC,MAAM,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE;YACjB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;CACF;AAlKC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDAEF;AAOtC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDACZ;AA+CzB;IADC,UAAU;oDAC6B"}
+{"version":3,"file":"carousel-nav.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.ts"],"names":[],"mappings":"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"}

package/esm/components/carousel-nav/carousel-nav.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { spacingHorizontalM, spacingHorizontalXXL, spacingHorizontalXXS, colorNeutralBackground1, colorNeutralForeground1, colorNeutralStroke1, borderRadiusSmall } from '@fluentui/web-components';
+import '../../util/carousel-controller.js';
 import '../../util/debug.js';
 import '@microsoft/fast-web-utilities';
 import '../../util/support.js';

package/esm/components/carousel-nav/carousel-nav.template.js

@@ -1,15 +1,16 @@
-import { slotted, html } from '@microsoft/fast-element';
+import { oneTime, slotted, html } from '@microsoft/fast-element';
 import { chevronLeftIcon, chevronRightIcon } from '../../util/icons.js';
+import { getString } from '@fabric-msft/localization';
 
 /**
  * The template for the {@link @fabric-msft/fabric-web#(CarouselNav:class)} component.
  * @public
  */
 function carouselNavTemplate() {
-  return html`<template button-placement="${x => x.buttonPlacement}"><div class="nav-content"><button class="nav-button prev-button" aria-label="Previous" @click="${x => x.handlePrevClick()}">${chevronLeftIcon}</button><div class="indicators" role="tablist" aria-label="Choose slide to display"><slot ${slotted({
+  return html`<template button-placement="${x => x.buttonPlacement}"><div class="nav-content"><slot name="prev-button"><button class="nav-button prev-button" aria-label="${oneTime(() => getString("Carousel_Previous"))}" @click="${x => x.handlePrevClick()}">${chevronLeftIcon}</button></slot><div class="indicators" role="tablist" aria-label="${oneTime(() => getString("Carousel_SlideIndicators"))}"><slot ${slotted({
     property: "slottedNavItems",
     filter: el => el.tagName === "FABRIC-CAROUSEL-NAV-ITEM"
-  })}></slot></div><button class="nav-button next-button" aria-label="Next" @click="${x => x.handleNextClick()}">${chevronRightIcon}</button></div></template>`;
+  })}></slot></div><slot name="next-button"><button class="nav-button next-button" aria-label="${oneTime(() => getString("Carousel_Next"))}" @click="${x => x.handleNextClick()}">${chevronRightIcon}</button></slot></div></template>`;
 }
 const template = carouselNavTemplate();