@fabric-msft/fabric-web 7.0.0 → 7.3.1

package/esm/components/modal/modal.js

@@ -0,0 +1,369 @@
+import { attr, nullableNumberConverter, observable, FASTElement, Observable } from '@microsoft/fast-element';
+import { ModalModes } from './modal.options.js';
+import { ModalEventNames } from './modal.events.js';
+import { CarouselController } from '../../util/carousel-controller.js';
+import { getString } from '@fabric-msft/localization';
+
+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;
+};
+/**
+ * Default button labels sourced from the localization bundle.
+ * @internal
+ */
+const defaultPrimaryLabel = () => getString("Modal_PrimaryAction");
+const defaultNextLabel = () => getString("Modal_Next");
+const defaultDoneLabel = () => getString("Modal_Done");
+const defaultTryLaterLabel = () => getString("Modal_TryLater");
+const defaultBackLabel = () => getString("Modal_Back");
+const defaultDismissLabel = () => getString("Modal_Dismiss");
+/**
+ * @summary A modal dialog with optional FRE (First Run Experience) multi-step wizard mode.
+ * Uses fabric-dialog internally for native backdrop, focus trapping, and Escape key handling.
+ *
+ * @example Default mode
+ * ```html
+ * <fabric-modal open modal-title="Confirm action">
+ *   <h2>Are you sure?</h2>
+ *   <p>This action cannot be undone.</p>
+ * </fabric-modal>
+ * ```
+ *
+ * @example FRE mode
+ * ```html
+ * <fabric-modal mode="fre" open modal-title="Welcome">
+ *   <fabric-modal-fre-item>
+ *     <span slot="title">Step 1</span>
+ *     <span slot="description">First step details.</span>
+ *     <img src="hero1.png" alt="Step 1" />
+ *   </fabric-modal-fre-item>
+ *   <fabric-modal-fre-item>
+ *     <span slot="title">Step 2</span>
+ *     <span slot="description">Second step details.</span>
+ *     <img src="hero2.png" alt="Step 2" />
+ *   </fabric-modal-fre-item>
+ * </fabric-modal>
+ * ```
+ *
+ * @attr {string} mode - Modal mode: "default" or "fre".
+ * @attr {boolean} open - Whether the modal is visible.
+ * @attr {string} modal-title - Accessible label for the modal.
+ * @attr {number} current-step - Active step index (FRE mode).
+ * @attr {string} primary-label - Label for the primary button in default mode (defaults to "OK").
+ * @attr {string} next-label - Label for the "Next" button in FRE mode (defaults to "Next").
+ * @attr {string} done-label - Label for the "Done" button in FRE mode (defaults to "Done").
+ * @attr {string} try-later-label - Label for the secondary button on FRE first step (defaults to "Try Later").
+ * @attr {string} back-label - Label for the secondary "Back" button in FRE mode (defaults to "Back").
+ * @attr {string} dismiss-label - Label for the secondary "Dismiss" button on FRE last step (defaults to "Dismiss").
+ *
+ * @prop {ModalMode} mode - Modal mode.
+ * @prop {boolean} open - Whether the modal is visible.
+ * @prop {string} modalTitle - Accessible label.
+ * @prop {number} currentStep - Active step index (FRE mode).
+ * @prop {number} totalSteps - Total step count (FRE mode, readonly).
+ *
+ * @slot default - Modal content. In FRE mode, accepts fabric-modal-fre-item elements.
+ *
+ * @fires open-change - Fired when open state changes.
+ * @fires dismiss - Fired when the modal is dismissed. Detail includes `{ complete: boolean }` indicating if dismissal was due to FRE wizard completion.
+ * @fires step-change - Fired when the active step changes (FRE mode).
+ *
+ * @extends FASTElement
+ * @tagname fabric-modal
+ * @public
+ */
+class Modal extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Carousel controller for FRE mode.
+     * @internal
+     */
+    this.carouselController = new CarouselController();
+    /**
+     * Modal mode: "default" for simple modal, "fre" for multi-step wizard.
+     * @public
+     */
+    this.mode = ModalModes.default;
+    /**
+     * Whether the modal is visible.
+     * @public
+     */
+    this.open = false;
+    /**
+     * Accessible label for the modal.
+     * @public
+     */
+    this.modalTitle = "";
+    /**
+     * Active step index. Only meaningful in FRE mode.
+     * @public
+     */
+    this.currentStep = 0;
+    /**
+     * Label for the primary button in default mode.
+     * @public
+     */
+    this.primaryLabel = "";
+    /**
+     * Label for the "Next" button in FRE mode.
+     * @public
+     */
+    this.nextLabel = "";
+    /**
+     * Label for the "Done" button in FRE mode.
+     * @public
+     */
+    this.doneLabel = "";
+    /**
+     * Label for the secondary button on FRE first step.
+     * @public
+     */
+    this.tryLaterLabel = "";
+    /**
+     * Label for the secondary "Back" button in FRE mode.
+     * @public
+     */
+    this.backLabel = "";
+    /**
+     * Label for the secondary "Dismiss" button on FRE last step.
+     * @public
+     */
+    this.dismissLabel = "";
+    /**
+     * Slotted items (used in FRE mode to track fre-items, or carousel-items in default).
+     * @internal
+     */
+    this.slottedContent = [];
+    /**
+     * FRE items parsed from slotted content.
+     * @internal
+     */
+    this.freItems = [];
+  }
+  /**
+   * Total step count (FRE mode).
+   * @public
+   * @readonly
+   */
+  get totalSteps() {
+    return this.carouselController.totalItems;
+  }
+  /**
+   * Callback when open changes.
+   * Delegates to the inner fabric-dialog's show/hide.
+   * @internal
+   */
+  openChanged(_oldValue, newValue) {
+    var _a, _b;
+    if (this.dialog) {
+      const dialogOpen = (_b = (_a = this.dialog.dialog) === null || _a === void 0 ? void 0 : _a.open) !== null && _b !== void 0 ? _b : false;
+      if (newValue && !dialogOpen) {
+        this.dialog.show();
+      } else if (!newValue && dialogOpen) {
+        this.dialog.hide();
+      }
+    }
+    if (this.$fastController.isConnected) {
+      this.emitOpenChange(newValue);
+    }
+  }
+  /**
+   * Callback when current-step attribute changes.
+   * Syncs the controller to the attribute value.
+   * @internal
+   */
+  currentStepChanged(_oldValue, newValue) {
+    const numValue = typeof newValue === "string" ? parseInt(newValue, 10) : newValue;
+    if (!isNaN(numValue)) {
+      this.carouselController.scrollToIndex(numValue);
+    }
+  }
+  /**
+   * Callback when slotted content changes.
+   * In FRE mode, extracts fre-items and assigns them directly to the carousel controller.
+   * @internal
+   */
+  slottedContentChanged() {
+    if (this.mode === ModalModes.fre) {
+      this.freItems = this.slottedContent.filter(el => el.tagName === "FABRIC-MODAL-FRE-ITEM");
+      this.carouselController.items = this.freItems;
+      this.carouselController.updateActiveStates();
+    }
+  }
+  /**
+   * Handles the toggle event from the inner fabric-dialog.
+   * Syncs open state when the dialog is closed externally (Escape key, backdrop click).
+   * @internal
+   */
+  handleDialogToggle(event) {
+    var _a;
+    const closed = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.newState) === "closed";
+    if (closed && this.open) {
+      this.handleDismiss();
+    }
+  }
+  /**
+   * Handles the primary button action.
+   * In default mode: dismisses. In FRE mode: advances step or completes.
+   * @internal
+   */
+  handlePrimaryAction() {
+    if (this.mode === ModalModes.fre) {
+      const isLastStep = this.carouselController.currentIndex >= this.carouselController.totalItems - 1;
+      if (isLastStep) {
+        this.handleDismiss(true);
+      } else {
+        this.carouselController.next();
+      }
+    } else {
+      this.handleDismiss();
+    }
+  }
+  /**
+   * Handles the secondary button action.
+   * In FRE mode: "Try Later" / "Back" / "Dismiss" depending on step.
+   * @internal
+   */
+  handleSecondaryAction() {
+    if (this.mode !== ModalModes.fre) {
+      return;
+    }
+    const isFirstStep = this.carouselController.currentIndex === 0;
+    const isLastStep = this.carouselController.currentIndex >= this.carouselController.totalItems - 1;
+    if (isFirstStep || isLastStep) {
+      this.handleDismiss();
+    } else {
+      this.carouselController.prev();
+    }
+  }
+  /**
+   * Handles dismiss (close button, Escape, backdrop click, or FRE completion).
+   * @param complete - Whether the dismiss was triggered by completing the FRE wizard.
+   * @internal
+   */
+  handleDismiss(complete = false) {
+    this.open = false;
+    const detail = {
+      complete
+    };
+    this.dispatchEvent(new CustomEvent(ModalEventNames.dismiss, {
+      detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Gets the label for the secondary button based on current FRE step.
+   * @internal
+   */
+  get secondaryButtonLabel() {
+    if (this.mode !== ModalModes.fre) {
+      return "";
+    }
+    const isFirstStep = this.carouselController.currentIndex === 0;
+    const isLastStep = this.carouselController.currentIndex >= this.carouselController.totalItems - 1;
+    if (isFirstStep) {
+      return this.tryLaterLabel || defaultTryLaterLabel();
+    }
+    if (isLastStep) {
+      return this.dismissLabel || defaultDismissLabel();
+    }
+    return this.backLabel || defaultBackLabel();
+  }
+  /**
+   * Gets the label for the primary button.
+   * @internal
+   */
+  get primaryButtonLabel() {
+    if (this.mode !== ModalModes.fre) {
+      return this.primaryLabel || defaultPrimaryLabel();
+    }
+    const isLastStep = this.carouselController.currentIndex >= this.carouselController.totalItems - 1;
+    return isLastStep ? this.doneLabel || defaultDoneLabel() : this.nextLabel || defaultNextLabel();
+  }
+  /**
+   * Subscriber implementation for CarouselController changes.
+   * Syncs currentStep attribute and emits step-change event.
+   * @internal
+   */
+  handleChange(source, propertyName) {
+    if (propertyName === "currentIndex" && this.currentStep !== source.currentIndex) {
+      this.currentStep = source.currentIndex;
+      this.emitStepChange();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this.carouselController).subscribe(this, "currentIndex");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this.carouselController).unsubscribe(this, "currentIndex");
+  }
+  /**
+   * Emits open-change event.
+   * @internal
+   */
+  emitOpenChange(open) {
+    this.dispatchEvent(new CustomEvent(ModalEventNames.openChange, {
+      detail: {
+        open
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Emits step-change event.
+   * @internal
+   */
+  emitStepChange() {
+    this.dispatchEvent(new CustomEvent(ModalEventNames.stepChange, {
+      detail: {
+        currentStep: this.carouselController.currentIndex,
+        totalSteps: this.carouselController.totalItems
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+__decorate([attr], Modal.prototype, "mode", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], Modal.prototype, "open", void 0);
+__decorate([attr({
+  attribute: "modal-title"
+})], Modal.prototype, "modalTitle", void 0);
+__decorate([attr({
+  attribute: "current-step",
+  converter: nullableNumberConverter
+})], Modal.prototype, "currentStep", void 0);
+__decorate([attr({
+  attribute: "primary-label"
+})], Modal.prototype, "primaryLabel", void 0);
+__decorate([attr({
+  attribute: "next-label"
+})], Modal.prototype, "nextLabel", void 0);
+__decorate([attr({
+  attribute: "done-label"
+})], Modal.prototype, "doneLabel", void 0);
+__decorate([attr({
+  attribute: "try-later-label"
+})], Modal.prototype, "tryLaterLabel", void 0);
+__decorate([attr({
+  attribute: "back-label"
+})], Modal.prototype, "backLabel", void 0);
+__decorate([attr({
+  attribute: "dismiss-label"
+})], Modal.prototype, "dismissLabel", void 0);
+__decorate([observable], Modal.prototype, "dialog", void 0);
+__decorate([observable], Modal.prototype, "slottedContent", void 0);
+__decorate([observable], Modal.prototype, "freItems", void 0);
+
+export { Modal };

package/esm/components/modal/modal.js.map

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

package/esm/components/modal/modal.options.js

@@ -0,0 +1,10 @@
+/**
+ * Modal mode options.
+ * @public
+ */
+const ModalModes = {
+  default: "default",
+  fre: "fre"
+};
+
+export { ModalModes };

package/esm/components/modal/modal.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.options.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,GAAG,EAAE,KAAK;CACF,CAAC"}

package/esm/components/modal/modal.styles.js

@@ -0,0 +1,14 @@
+import { css } from '@microsoft/fast-element';
+import { spacingVerticalM, spacingHorizontalL, spacingVerticalL, spacingHorizontalXL, fontSizeBase500, fontWeightSemibold, colorNeutralForeground1, spacingVerticalS, fontSizeBase300, colorNeutralForeground2 } from '@fluentui/web-components';
+
+/**
+ * Styles for the {@link @fabric-msft/fabric-web#(Modal:class)} component.
+ * The outer dialog chrome (backdrop, border-radius, shadow, max-width) is
+ * provided by the inner fabric-dialog; these styles handle modal-specific
+ * layout (close button, content area, footer, FRE nav, buttons).
+ * @public
+ */
+const styles = css`
+  :host{display:contents}.modal-body{display:flex;flex-direction:column;position:relative;max-height:85vh}.close-button{position:absolute;inset-block-start:${spacingVerticalM};inset-inline-end:${spacingHorizontalL};z-index:1}.content{flex:1;overflow:auto;padding:${spacingVerticalL} ${spacingHorizontalXL}}:host([mode="fre"]) .content{padding:0;overflow:hidden}::slotted(fabric-modal-fre-item){display:block}::slotted(fabric-modal-fre-item:not([active])){display:none !important}.footer{display:flex;align-items:center;justify-content:space-between;padding:${spacingVerticalL} ${spacingHorizontalXL};gap:${spacingHorizontalL}}.nav{flex:1;display:flex;justify-content:center}::slotted(h1),::slotted(h2),::slotted(h3){font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0 0 ${spacingVerticalS}}::slotted(p){font-size:${fontSizeBase300};color:${colorNeutralForeground2};margin:0}`;
+
+export { styles };

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;;;;;;;;;;;yBAcf,gBAAgB;wBACjB,kBAAkB;;;;;;;eAO3B,gBAAgB,IAAI,mBAAmB;;;;;;;;;;;;;;;;;;;;eAoBvC,gBAAgB,IAAI,mBAAmB;WAC3C,kBAAkB;;;;;;;;;;;;iBAYZ,eAAe;mBACb,kBAAkB;aACxB,uBAAuB;kBAClB,gBAAgB;;;;iBAIjB,eAAe;aACnB,uBAAuB;;;CAGnC,CAAC"}

package/esm/components/modal/modal.template.js

@@ -0,0 +1,23 @@
+import { ref, when, oneTime, html, slotted, repeat } from '@microsoft/fast-element';
+import { ModalModes } from './modal.options.js';
+import { dismissIcon } from '../../static/component-svgs.js';
+import { getString } from '@fabric-msft/localization';
+
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(Modal:class)} component.
+ * Uses fabric-dialog internally for native backdrop, focus trapping, and Escape handling.
+ *
+ * FRE mode tab order: dismiss button (inside fre-item) → secondary button → carousel nav → primary button.
+ * @public
+ */
+function modalTemplate() {
+  return html`<template><fabric-dialog type="modal" aria-label="${x => x.modalTitle}" ${ref("dialog")} @toggle="${(x, c) => x.handleDialogToggle(c.event)}"><div class="modal-body">${when(x => x.mode !== ModalModes.fre, html`<fabric-button class="close-button" appearance="subtle" size="small" aria-label="${oneTime(() => getString("Modal_Close"))}" @click="${x => x.handleDismiss()}">${dismissIcon}</fabric-button>`)}<div class="content" @dismiss="${x => x.handleDismiss()}">${when(x => x.mode === ModalModes.fre, html`<slot ${slotted({
+    property: "slottedContent",
+    filter: el => el.tagName === "FABRIC-MODAL-FRE-ITEM"
+  })}></slot>`)} ${when(x => x.mode !== ModalModes.fre, html`<slot></slot>`)}</div><div class="footer">${when(x => x.mode === ModalModes.fre, html`<fabric-button appearance="outline" @click="${x => x.handleSecondaryAction()}">${x => x.secondaryButtonLabel}</fabric-button>`)} ${when(x => x.mode === ModalModes.fre, html`<div class="nav"><fabric-carousel-nav :controller="${x => x.carouselController}" button-placement="hidden" current-index="${x => x.carouselController.currentIndex}">${repeat(x => x.carouselController.items, html`<fabric-carousel-nav-item :tabId="${(_item, c) => c.parent.carouselController.getTabId(c.index)}" :panelId="${(_item, c) => c.parent.carouselController.getPanelId(c.index)}" :tabLabel="${(_item, c) => c.parent.carouselController.getTabLabel(c.index)}"></fabric-carousel-nav-item>`, {
+    positioning: true
+  })}</fabric-carousel-nav></div>`)}<fabric-button appearance="primary" @click="${x => x.handlePrimaryAction()}">${x => x.primaryButtonLabel}</fabric-button></div></div></fabric-dialog></template>`;
+}
+const template = modalTemplate();
+
+export { modalTemplate, template };

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

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

package/esm/components/modal-fre-item/define.js

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

package/esm/components/modal-fre-item/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,sBAAsB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/modal-fre-item/index.js

@@ -0,0 +1,3 @@
+export { ModalFreItem } from "./modal-fre-item.js";
+export { modalFreItemDefinition as ModalFreItemDefinition } from "./modal-fre-item.definition.js";
+//# sourceMappingURL=index.js.map

package/esm/components/modal-fre-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,sBAAsB,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAC"}

package/esm/components/modal-fre-item/modal-fre-item.definition.js

@@ -0,0 +1,27 @@
+import { definition } from '../button/button.definition.js';
+import { DesignSystem } from '../design-system.js';
+import { composeDefinitions, fromFAST } from '../../util/element-definition.js';
+import { ModalFreItem } from './modal-fre-item.js';
+import { modalFreItemStyles } from './modal-fre-item.styles.js';
+import { modalFreItemTemplate_ } from './modal-fre-item.template.js';
+
+/** @internal */
+const ModalFreItemDefinition = ModalFreItem.compose({
+  name: `${DesignSystem.prefix}-modal-fre-item`,
+  template: modalFreItemTemplate_,
+  styles: modalFreItemStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+/**
+ * Composed element definition for `<fabric-modal-fre-item>`, registering the
+ * `fabric-button` dependency before the element itself.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fabric-modal-fre-item>`
+ */
+const modalFreItemDefinition = composeDefinitions(fromFAST(ModalFreItemDefinition), fromFAST(definition));
+
+export { modalFreItemDefinition };

package/esm/components/modal-fre-item/modal-fre-item.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-fre-item.definition.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/modal-fre-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,gBAAgB;AAChB,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,CAAC;IAClD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,iBAAiB;IAC7C,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,kBAAkB;IAC1B,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,kBAAkB,CACtD,QAAQ,CAAC,sBAAsB,CAAC,EAChC,QAAQ,CAAC,gBAAgB,CAAC,CAC3B,CAAC"}

package/esm/components/modal-fre-item/modal-fre-item.js

@@ -0,0 +1,72 @@
+import { attr, 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 A content item for the modal FRE (First Run Experience) wizard.
+ *
+ * Each fre-item is a self-contained step that renders its own hero content,
+ * title, description, and dismiss button. The parent `fabric-modal` assigns
+ * fre-items to a {@link CarouselController} which manages active state and
+ * ARIA linkage. Only the active item is visible.
+ *
+ * @example
+ * ```html
+ * <fabric-modal-fre-item>
+ *   <span slot="title">Welcome</span>
+ *   <span slot="description">Get started with Fabric.</span>
+ *   <img src="hero.png" alt="Welcome illustration" />
+ * </fabric-modal-fre-item>
+ * ```
+ *
+ * @attr {boolean} active - Whether this item is the currently visible step.
+ * @attr {string} label - Accessible label for this step.
+ *
+ * @prop {string} panelId - Unique ID for this panel (set by CarouselController).
+ * @prop {string} tabId - ID of the associated tab (for aria-labelledby, set by CarouselController).
+ *
+ * @slot default - Hero content (image, illustration, or any visual).
+ * @slot title - Title content for this step.
+ * @slot description - Description content for this step.
+ *
+ * @fires dismiss - Fired when the dismiss button is clicked. Bubbles and is composed.
+ *
+ * @extends FASTElement
+ * @tagname fabric-modal-fre-item
+ * @public
+ */
+class ModalFreItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether this item is the currently visible step.
+     * Managed by the CarouselController.
+     * @public
+     */
+    this.active = false;
+  }
+  /**
+   * Handles the dismiss button click.
+   * Dispatches a bubbling, composed dismiss event.
+   * @internal
+   */
+  handleDismiss() {
+    this.dispatchEvent(new CustomEvent("dismiss", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+__decorate([attr({
+  mode: "boolean"
+})], ModalFreItem.prototype, "active", void 0);
+__decorate([attr], ModalFreItem.prototype, "label", void 0);
+__decorate([observable], ModalFreItem.prototype, "panelId", void 0);
+__decorate([observable], ModalFreItem.prototype, "tabId", void 0);
+
+export { ModalFreItem };

package/esm/components/modal-fre-item/modal-fre-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-fre-item.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/modal-fre-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QAEH,WAAM,GAAY,KAAK,CAAC;IAoC1B,CAAC;IAbC;;;;OAIG;IACH,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;CACF;AApCC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAOxB;IADC,IAAI;2CACU;AAOf;IADC,UAAU;6CACM;AAOjB;IADC,UAAU;2CACI"}

package/esm/components/modal-fre-item/modal-fre-item.styles.js

@@ -0,0 +1,11 @@
+import { css } from '@microsoft/fast-element';
+import { spacingHorizontalXL, spacingHorizontalL, fontSizeBase400, fontWeightSemibold, colorNeutralForeground1, spacingVerticalXS, fontSizeBase300, lineHeightBase300, colorNeutralForeground2 } from '@fluentui/web-components';
+
+/**
+ * Styles for the {@link @fabric-msft/fabric-web#(ModalFreItem:class)} component.
+ * @public
+ */
+const modalFreItemStyles = css`
+  :host{display:none}:host([active]){display:block}.hero{overflow:hidden}.hero ::slotted(*){display:block;width:100%}.info{padding:${spacingHorizontalXL};padding-block-end:0}.info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:${spacingHorizontalL}}.title{font-size:${fontSizeBase400};font-weight:${fontWeightSemibold};color:${colorNeutralForeground1};margin:0}.description{margin:${spacingVerticalXS} 0 0;font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2}}`;
+
+export { modalFreItemStyles };

package/esm/components/modal-fre-item/modal-fre-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-fre-item.styles.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/modal-fre-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAElC;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAkB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;eAmBrC,mBAAmB;;;;;;;;WAQvB,kBAAkB;;;;iBAIZ,eAAe;mBACb,kBAAkB;aACxB,uBAAuB;;;;;cAKtB,iBAAiB;iBACd,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;CAEnC,CAAC"}

package/esm/components/modal-fre-item/modal-fre-item.template.js

@@ -0,0 +1,16 @@
+import { oneTime, html } from '@microsoft/fast-element';
+import { dismissIcon } from '../../static/component-svgs.js';
+import { getString } from '@fabric-msft/localization';
+
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(ModalFreItem:class)} component.
+ * Renders a self-contained FRE step: hero content, title with dismiss button, and description.
+ * Uses ARIA tabpanel pattern driven by the CarouselController.
+ * @public
+ */
+function modalFreItemTemplate() {
+  return html`<template role="tabpanel" id="${x => x.panelId}" aria-labelledby="${x => x.tabId}" aria-label="${x => x.label}" aria-hidden="${x => !x.active ? "true" : null}" tabindex="-1"><div class="hero"><slot></slot></div><div class="info"><div class="info-header"><h2 class="title"><slot name="title"></slot></h2><fabric-button appearance="subtle" class="dismiss-button" size="small" icon-only aria-label="${oneTime(() => getString("Modal_Close"))}" @click="${x => x.handleDismiss()}">${dismissIcon}</fabric-button></div><p class="description"><slot name="description"></slot></p></div></template>`;
+}
+const modalFreItemTemplate_ = modalFreItemTemplate();
+
+export { modalFreItemTemplate, modalFreItemTemplate_ };

package/esm/components/modal-fre-item/modal-fre-item.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-fre-item.template.js","sourceRoot":"","sources":["../../../../src/components/modal-fre-item/modal-fre-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;;;GAKG;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;qBACb,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;;;;;;;;;;;;;;0BAc7B,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;sBAC3C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;;cAEhC,WAAW;;;;;;GAMtB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAChC,oBAAoB,EAAE,CAAC"}

package/esm/components/radio-group/radio-group.js

@@ -1,4 +1,5 @@
 import { RadioGroup as RadioGroup$1 } from '@fluentui/web-components';
+import { Radio } from '../radio/radio.js';
 
 /**
  * RadioGroup
@@ -41,6 +42,24 @@ import { RadioGroup as RadioGroup$1 } from '@fluentui/web-components';
  * @tagname fabric-radio-group
  * @public
  */
-class RadioGroup extends RadioGroup$1 {}
+class RadioGroup extends RadioGroup$1 {
+  /**
+   * Re-collects `this.radios` from slotted children, restricted to elements
+   * that have already upgraded to the `Radio` class.
+   *
+   * @remarks
+   * The upstream implementation collects every descendant whose tag name
+   * ends in `-radio` (via `isRadio`), which matches bare `HTMLElement`s
+   * that haven't been upgraded yet.
+   *
+   * Filtering with `instanceof Radio` excludes pre-upgrade elements, so we
+   * never write through their shadowed accessors.
+   *
+   * @internal
+   */
+  slottedRadiosChanged() {
+    this.radios = [...this.querySelectorAll("*")].filter(x => x instanceof Radio);
+  }
+}
 
 export { RadioGroup };

package/esm/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;CAAG"}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAC9C;;;;;;;;;;;;;OAaG;IACa,oBAAoB;QAClC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAClD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,KAAK,CACf,CAAC;IACf,CAAC;CACF"}