@fabric-msft/fabric-web 7.0.0 → 7.3.1

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":"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"}
+{"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();
 

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';

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"}

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

@@ -0,0 +1,11 @@
+import { css } from '@microsoft/fast-element';
+import { durationNormal, curveEasyEase } from '@fluentui/web-components';
+
+/**
+ * Styles for the {@link @fabric-msft/fabric-web#(CarouselViewport:class)} component.
+ * @public
+ */
+const styles = css`
+  :host{--_carousel-dir:-1;display:block;overflow:hidden;position:relative;width:100%}:host(:dir(rtl)){--_carousel-dir:1}.track{display:flex;transition:transform ${durationNormal} ${curveEasyEase};will-change:transform}@media (prefers-reduced-motion:reduce){.track{transition:none}}`;
+
+export { styles };

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-viewport.styles.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/carousel-viewport.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;;;;;;;;;4BAeZ,cAAc,IAAI,aAAa;;;;;;;;;CAS1D,CAAC"}

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

@@ -0,0 +1,15 @@
+import { html } from '@microsoft/fast-element';
+
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(CarouselViewport:class)} component.
+ * @public
+ */
+function carouselViewportTemplate() {
+  return html`<template aria-live="polite" aria-atomic="false"><div class="track" style="transform: translateX(calc(var(--_carousel-dir) * ${x => {
+    var _a, _b;
+    return (_b = (_a = x.controller) === null || _a === void 0 ? void 0 : _a.currentIndex) !== null && _b !== void 0 ? _b : 0;
+  }} * 100%))"><slot></slot></div></template>`;
+}
+const template = carouselViewportTemplate();
+
+export { carouselViewportTemplate, template };

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-viewport.template.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/carousel-viewport.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C;;;GAGG;AACH,MAAM,UAAU,wBAAwB;IAGtC,OAAO,IAAI,CAAG;;;;mEAImD,CAAC,CAAC,EAAE,EAAE,eAC/D,OAAA,MAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,YAAY,mCAAI,CAAC,CAAA,EAAA;;;;;GAKtC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,wBAAwB,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+import { definition } from "./carousel-viewport.definition.js";
+import { DesignSystem } from "../design-system.js";
+definition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+export { CarouselViewport } from "./carousel-viewport.js";
+export { definition as CarouselViewportDefinition } from "./carousel-viewport.definition.js";
+export { styles as CarouselViewportStyles } from "./carousel-viewport.styles.js";
+export { template as CarouselViewportTemplate } from "./carousel-viewport.template.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/carousel-viewport/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC7F,OAAO,EAAE,MAAM,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,QAAQ,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

package/esm/components/dynamic-tab/define.js

@@ -0,0 +1,4 @@
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./dynamic-tab.definition.js";
+definition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/dynamic-tab/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}