@fabric-msft/fabric-web 7.2.0 → 7.4.0

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":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,2BAA2B,EAG5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QACE;;;WAGG;QACM,eAAU,GAAG,IAAI,kBAAkB,EAAE,CAAC;QAE/C;;;WAGG;QAEH,gBAAW,GAAwB,oBAAoB,CAAC,cAAc,CAAC;QAEvE;;;WAGG;QAEH,uBAAkB,GAChB,2BAA2B,CAAC,OAAO,CAAC;QAkBtC;;;WAGG;QAEH,iBAAY,GAAmB,EAAE,CAAC;IA8FpC,CAAC;IAnHC;;;OAGG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,YAAY,CAAC,KAAa;QAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;QACnD,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;YACrC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IASD;;;;OAIG;IACH,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;IACpC,CAAC;IAED;;;OAGG;IACH,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,aAAa,CAAC,KAAa;QACzB,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,QAAQ,CAAC,KAAa;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED;;;OAGG;IACH,UAAU,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAa;QACvB,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,CAAC;IACvC,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAa,EAAE,aAAqB;QACrD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,CAAC,MAAM,EAAE;YACzC,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE;YAChC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;CACF;AA7HC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CACmC;AAOvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;oDAEN;AAuBtC;IADC,UAAU;8CACuB"}

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{white-space:normal;--_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;;;;;;;kBAOtB,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,27 +1,4 @@
-import { definition as definition$2 } 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';
-
-/**
- * Registers the carousel element and all of its internal dependencies
- * (carousel-item, carousel-nav, carousel-nav-item) with the provided registry.
- *
- * @param registry - The CustomElementRegistry to register with. Defaults to `customElements`.
- *
- * @example
- * ```ts
- * import { defineCarousel } from "@fabric-msft/fabric-web";
- * defineCarousel(); // registers fabric-carousel and its dependencies
- * ```
- *
- * @public
- */
-function defineCarousel(registry = customElements) {
-  definition.define(registry);
-  definition$1.define(registry);
-  definition$2.define(registry);
-}
+import { DesignSystem } from "../design-system.js";
+import { defineCarousel } from "./carousel.definition.js";
 defineCarousel(DesignSystem.registry);
-
-export { defineCarousel };
+//# sourceMappingURL=define.js.map

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,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,cAAc,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/carousel/index.js

@@ -1,8 +1,7 @@
 export * from "./carousel.js";
 export { CarouselNavPositions } from "./carousel.options.js";
 export { CarouselEventNames } from "./carousel.events.js";
-export { definition as CarouselDefinition } from "./carousel.definition.js";
+export { definition as CarouselDefinition, defineCarousel } from "./carousel.definition.js";
 export { styles as CarouselStyles } from "./carousel.styles.js";
 export { template as CarouselTemplate } from "./carousel.template.js";
-export { defineCarousel } from "./define.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EACL,UAAU,IAAI,kBAAkB,EAChC,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -5,6 +5,6 @@ import { css } from '@microsoft/fast-element';
  * @public
  */
 const styles = css`
-  :host{display:block;flex-shrink:0;width:100%;box-sizing:border-box}`;
+  :host{white-space:normal;display:block;flex-shrink:0;width:100%;box-sizing:border-box}`;
 
 export { styles };

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-item.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-item/carousel-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9C;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;CAOvC,CAAC"}
+{"version":3,"file":"carousel-item.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-item/carousel-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9C;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;;CAQvC,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';
@@ -12,7 +13,7 @@ import '../../util/platform.js';
  * @public
  */
 const styles = css`
-  :host{display:flex;align-items:center;justify-content:center;width:100%}.nav-content{display:flex;align-items:center;gap:${spacingHorizontalM}}:host([button-placement="grouped"]) .nav-content{justify-content:center}:host([button-placement="flexible"]) .nav-content{justify-content:space-between;width:100%}:host([button-placement="flexible"]) .indicators{flex:1;display:flex;justify-content:center}:host([button-placement="hidden"]) .nav-button{display:none}.indicators{display:flex;align-items:center}.nav-button{display:flex;align-items:center;justify-content:center;width:${spacingHorizontalXXL};height:${spacingHorizontalXXL};padding:${spacingHorizontalXXS};background:${colorNeutralBackground1};color:${colorNeutralForeground1};cursor:pointer;border:none}.nav-button svg{display:block}:dir(rtl) .nav-button svg{transform:scaleX(-1)}.nav-button:hover{background:${colorNeutralStroke1}}.nav-button:focus-visible{outline:2px solid ${colorNeutralForeground1};outline-offset:2px;border-radius:${borderRadiusSmall}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{white-space:normal;display:flex;align-items:center;justify-content:center;width:100%}.nav-content{display:flex;align-items:center;gap:${spacingHorizontalM}}:host([button-placement="grouped"]) .nav-content{justify-content:center}:host([button-placement="flexible"]) .nav-content{justify-content:space-between;width:100%}:host([button-placement="flexible"]) .indicators{flex:1;display:flex;justify-content:center}:host([button-placement="hidden"]) .nav-button{display:none}.indicators{display:flex;align-items:center}.nav-button{display:flex;align-items:center;justify-content:center;width:${spacingHorizontalXXL};height:${spacingHorizontalXXL};padding:${spacingHorizontalXXS};background:${colorNeutralBackground1};color:${colorNeutralForeground1};cursor:pointer;border:none}.nav-button svg{display:block}:dir(rtl) .nav-button svg{transform:scaleX(-1)}.nav-button:hover{background:${colorNeutralStroke1}}.nav-button:focus-visible{outline:2px solid ${colorNeutralForeground1};outline-offset:2px;border-radius:${borderRadiusSmall}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .nav-button:focus-visible{outline-color:Highlight !important}`));
 
 export { styles };

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-nav.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;;;;;WAW7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAkChB,oBAAoB;cACnB,oBAAoB;eACnB,oBAAoB;kBACjB,uBAAuB;aAC5B,uBAAuB;;;;;;;;;;;;;;kBAclB,mBAAmB;;;;yBAIZ,uBAAuB;;qBAE3B,iBAAiB;;CAErC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"carousel-nav.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;;;;;;WAY7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAkChB,oBAAoB;cACnB,oBAAoB;eACnB,oBAAoB;kBACjB,uBAAuB;aAC5B,uBAAuB;;;;;;;;;;;;;;kBAclB,mBAAmB;;;;yBAIZ,uBAAuB;;qBAE3B,iBAAiB;;CAErC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

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();
 

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-nav.template.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IAGjC,OAAO,IAAI,CAAG;kCACkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe;;;;;oBAKtC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;YAElC,eAAe;;;;;;;;cAQb,OAAO,CAAC;QACR,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CACZ,EAAc,CAAC,OAAO,KAAK,0BAA0B;KACzD,CAAC;;;;;;oBAMM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;YAElC,gBAAgB;;;;GAIzB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"carousel-nav.template.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav/carousel-nav.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IAGjC,OAAO,IAAI,CAAG;kCACkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe;;;;;0BAKhC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;sBACjD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;cAElC,eAAe;;;;;;wBAML,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC;;;cAG9D,OAAO,CAAC;QACR,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CACZ,EAAc,CAAC,OAAO,KAAK,0BAA0B;KACzD,CAAC;;;;;;0BAMY,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;sBAC7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;cAElC,gBAAgB;;;;;GAK3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,mBAAmB,EAAE,CAAC"}

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

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { spacingHorizontalXXL, spacingVerticalXXL, spacingHorizontalS, borderRadiusCircular, colorNeutralForeground2, durationFast, curveEasyEase, spacingHorizontalL, colorNeutralForeground1, borderRadiusSmall } from '@fluentui/web-components';
+import '../../util/carousel-controller.js';
 import '../../util/debug.js';
 import '@microsoft/fast-web-utilities';
 import '../../util/support.js';
@@ -12,7 +13,7 @@ import '../../util/platform.js';
  * @public
  */
 const styles = css`
-  :host{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:${spacingHorizontalXXL};height:${spacingVerticalXXL}}.indicator{display:block;width:${spacingHorizontalS};height:${spacingHorizontalS};border-radius:${borderRadiusCircular};background:${colorNeutralForeground2};opacity:0.3;transition:width ${durationFast} ${curveEasyEase},opacity ${durationFast} ${curveEasyEase}}:host([active]) .indicator{width:${spacingHorizontalL};opacity:1;background:${colorNeutralForeground1}}:host(:hover) .indicator{opacity:0.6}:host([active]:hover) .indicator{opacity:1}:host(:focus-visible){outline:2px solid ${colorNeutralForeground1};border-radius:${borderRadiusSmall}}@media (prefers-reduced-motion:reduce){.indicator{transition:none}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{white-space:normal;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:${spacingHorizontalXXL};height:${spacingVerticalXXL}}.indicator{display:block;width:${spacingHorizontalS};height:${spacingHorizontalS};border-radius:${borderRadiusCircular};background:${colorNeutralForeground2};opacity:0.3;transition:width ${durationFast} ${curveEasyEase},opacity ${durationFast} ${curveEasyEase}}:host([active]) .indicator{width:${spacingHorizontalL};opacity:1;background:${colorNeutralForeground1}}:host(:hover) .indicator{opacity:0.6}:host([active]:hover) .indicator{opacity:1}:host(:focus-visible){outline:2px solid ${colorNeutralForeground1};border-radius:${borderRadiusSmall}}@media (prefers-reduced-motion:reduce){.indicator{transition:none}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(:focus-visible){outline-color:Highlight !important}`));
 
 export { styles };

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-nav-item.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav-item/carousel-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;aAM3B,oBAAoB;cACnB,kBAAkB;;;;;aAKnB,kBAAkB;cACjB,kBAAkB;qBACX,oBAAoB;kBACvB,uBAAuB;;;cAG3B,YAAY,IAAI,aAAa;gBAC3B,YAAY,IAAI,aAAa;;;;aAIhC,kBAAkB;;kBAEb,uBAAuB;;;;;;;;;;;;yBAYhB,uBAAuB;qBAC3B,iBAAiB;;;;;;;;CAQrC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"carousel-nav-item.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-nav-item/carousel-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;aAO3B,oBAAoB;cACnB,kBAAkB;;;;;aAKnB,kBAAkB;cACjB,kBAAkB;qBACX,oBAAoB;kBACvB,uBAAuB;;;cAG3B,YAAY,IAAI,aAAa;gBAC3B,YAAY,IAAI,aAAa;;;;aAIhC,kBAAkB;;kBAEb,uBAAuB;;;;;;;;;;;;yBAYhB,uBAAuB;qBAC3B,iBAAiB;;;;;;;;CAQrC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

package/esm/components/carousel-viewport/carousel-viewport.definition.js

@@ -0,0 +1,21 @@
+import { DesignSystem } from '../design-system.js';
+import { CarouselViewport } from './carousel-viewport.js';
+import { styles } from './carousel-viewport.styles.js';
+import { template } from './carousel-viewport.template.js';
+
+/**
+ * The CarouselViewport element definition.
+ * @public
+ * @remarks
+ * HTML Element: <fabric-carousel-viewport>
+ */
+const definition = CarouselViewport.compose({
+  name: `${DesignSystem.prefix}-carousel-viewport`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/carousel-viewport/carousel-viewport.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-viewport.definition.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/carousel-viewport.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACjD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,oBAAoB;IAChD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,37 @@
+import { observable, FASTElement } from '@microsoft/fast-element';
+
+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;
+};
+/**
+ * @summary Renders the scrolling viewport for carousel items.
+ *
+ * This component is the visual container that shows one carousel item at a time
+ * and applies a CSS transform to slide between items. It is driven by a
+ * {@link CarouselController} which manages the active index and item state.
+ *
+ * The host component (e.g. fabric-carousel or fabric-modal) is responsible for
+ * managing the controller's items. The viewport is purely a rendering component.
+ *
+ * @example
+ * ```html
+ * <fabric-carousel-viewport>
+ *   <fabric-carousel-item>Slide 1</fabric-carousel-item>
+ *   <fabric-carousel-item>Slide 2</fabric-carousel-item>
+ * </fabric-carousel-viewport>
+ * ```
+ *
+ * @slot default - Slot for fabric-carousel-item elements.
+ *
+ * @extends FASTElement
+ * @tagname fabric-carousel-viewport
+ * @public
+ */
+class CarouselViewport extends FASTElement {}
+__decorate([observable], CarouselViewport.prototype, "controller", void 0);
+
+export { CarouselViewport };

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-viewport.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/carousel-viewport.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;CAOhD;AADC;IADC,UAAU;oDACqB"}