@fluentui/web-components 3.0.0-rc.8 → 3.0.0-rc.9

package/dist/web-components.d.ts

@@ -2232,8 +2232,11 @@ export declare class BaseProgressBar extends FASTElement {
     elementInternals: ElementInternals;
     /**
      * The validation state of the progress bar
-     * @public
+     * The validation state of the progress bar
+     *
      * HTML Attribute: `validation-state`
+     *
+     * @public
      */
     validationState: ProgressBarValidationState | null;
     /**
@@ -2244,8 +2247,11 @@ export declare class BaseProgressBar extends FASTElement {
     validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
     /**
      * The value of the progress
-     * @internal
+     * The value of the progress
+     *
      * HTML Attribute: `value`
+     *
+     * @internal
      */
     value?: number;
     /**
@@ -2256,8 +2262,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected valueChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The minimum value
-     * @internal
+     * The minimum value
+     *
      * HTML Attribute: `min`
+     *
+     * @internal
      */
     min?: number;
     /**
@@ -2269,8 +2278,11 @@ export declare class BaseProgressBar extends FASTElement {
     protected minChanged(prev: number | undefined, next: number | undefined): void;
     /**
      * The maximum value
-     * @internal
+     * The maximum value
+     *
      * HTML Attribute: `max`
+     *
+     * @internal
      */
     max?: number;
     /**
@@ -2600,6 +2612,11 @@ export declare class BaseTextArea extends FASTElement {
      * @internal
      */
     labelEl: HTMLLabelElement;
+    /**
+     * The root container element.
+     * @internal
+     */
+    rootEl: HTMLDivElement;
     /**
      * The `<textarea>` element.
      * @internal
@@ -3399,8 +3416,11 @@ declare class BaseTreeItem extends FASTElement {
     constructor();
     /**
      * When true, the control will be appear expanded by user interaction.
-     * @public
+     * When true, the control will be appear expanded by user interaction.
+     *
      * HTML Attribute: `expanded`
+     *
+     * @public
      */
     expanded: boolean;
     /**
@@ -3428,8 +3448,11 @@ declare class BaseTreeItem extends FASTElement {
     protected selectedChanged(prev: boolean, next: boolean): void;
     /**
      * When true, the control has no child tree items
-     * @public
+     * When true, the control has no child tree items
+     *
      * HTML Attribute: empty
+     *
+     * @public
      */
     empty: boolean;
     private styles;
@@ -6168,10 +6191,11 @@ export declare class CounterBadge extends FASTElement {
      */
     dot: boolean;
     /**
-     * @internal
      * Function to set the count
      * This is the default slotted content for the counter badge
      * If children are slotted, that will override the value returned
+     *
+     * @internal
      */
     setCount(): string | void;
 }
@@ -6348,58 +6372,68 @@ export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => Matc
  */
 export declare class Dialog extends FASTElement {
     /**
-     * @public
      * The dialog element
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /**
-     * @public
      * The ID of the element that describes the dialog
+     *
+     * @public
      */
     ariaDescribedby?: string;
     /**
-     * @public
      * The ID of the element that labels the dialog
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
-     * @public
      * The label of the dialog
+     *
+     * @public
      */
     ariaLabel: string | null;
     /**
-     * @public
      * The type of the dialog modal
+     *
+     * @public
      */
     type: DialogType;
     protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
     /** @internal */
     connectedCallback(): void;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitBeforeToggle: () => void;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitToggle: () => void;
     /**
-     * @public
      * Method to show the dialog
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide(): void;
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */
@@ -6635,20 +6669,23 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
 export declare class Drawer extends FASTElement {
     protected roleAttrObserver: MutationObserver;
     /**
-     * @public
      * Determines whether the drawer should be displayed as modal or non-modal
      * When rendered as a modal, an overlay is applied over the rest of the view.
+     *
+     * @public
      */
     type: DrawerType;
     protected typeChanged(): void;
     /**
-     * @public
      * The ID of the element that labels the drawer.
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
-     * @public
      * The ID of the element that describes the drawer.
+     *
+     * @public
      */
     ariaDescribedby?: string;
     /**""
@@ -6664,8 +6701,9 @@ export declare class Drawer extends FASTElement {
      */
     size: DrawerSize;
     /**
-     * @public
      * The dialog element.
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /** @internal */
@@ -6673,25 +6711,29 @@ export declare class Drawer extends FASTElement {
     /** @internal */
     disconnectedCallback(): void;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitToggle: () => void;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitBeforeToggle: () => void;
     /**
-     * @public
      * Method to show the drawer
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the drawer
+     *
+     * @public
      */
     hide(): void;
     /**
@@ -6702,8 +6744,9 @@ export declare class Drawer extends FASTElement {
      */
     clickHandler(event: Event): boolean;
     /**
-     * @public
      * Handles cancel events on the drawer.
+     *
+     * @public
      */
     cancelHandler(): void;
     protected observeRoleAttr(): void;
@@ -8773,8 +8816,9 @@ export declare class MessageBar extends FASTElement {
      */
     intent?: MessageBarIntent;
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     dismissMessageBar: () => void;
 }
@@ -8789,8 +8833,9 @@ export declare class MessageBar extends FASTElement {
 export declare const MessageBarDefinition: FASTElementDefinition<typeof MessageBar>;
 
 /**
- * @public
  * The `intent` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarIntent: {
     readonly success: "success";
@@ -8802,8 +8847,9 @@ export declare const MessageBarIntent: {
 export declare type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
 
 /**
- * @public
  * The `layout` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarLayout: {
     readonly multiline: "multiline";
@@ -8813,8 +8859,9 @@ export declare const MessageBarLayout: {
 export declare type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
 
 /**
- * @public
  * The `shape` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarShape: {
     readonly rounded: "rounded";
@@ -8848,14 +8895,20 @@ export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
-     * @public
+     * The thickness of the progress bar
+     *
      * HTML Attribute: `thickness`
+     *
+     * @public
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
-     * @public
+     * The shape of the progress bar
+     *
      * HTML Attribute: `shape`
+     *
+     * @public
      */
     shape?: ProgressBarShape;
 }
@@ -11360,15 +11413,21 @@ export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
 export declare class Tree extends BaseTree {
     /**
      * The size of the tree item element
-     * @public
+     * The size of the tree item element
+     *
      * HTML Attribute: size
+     *
+     * @public
      */
     size: TreeItemSize;
     protected sizeChanged(): void;
     /**
      * The appearance variants of the tree item element
-     * @public
+     * The appearance variants of the tree item element
+     *
      * HTML Attribute: appearance
+     *
+     * @public
      */
     appearance: TreeItemAppearance;
     protected appearanceChanged(): void;

package/dist/web-components.js

@@ -6583,10 +6583,11 @@ class CounterBadge extends FASTElement {
     this.setCount();
   }
   /**
-   * @internal
    * Function to set the count
    * This is the default slotted content for the counter badge
    * If children are slotted, that will override the value returned
+   *
+   * @internal
    */
   setCount() {
     const count = this.count ?? 0;
@@ -6664,9 +6665,10 @@ class Dialog extends FASTElement {
     super(...arguments);
     this.type = DialogType.modal;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitBeforeToggle = () => {
       this.$emit("beforetoggle", {
@@ -6675,9 +6677,10 @@ class Dialog extends FASTElement {
       });
     };
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitToggle = () => {
       this.$emit("toggle", {
@@ -6707,8 +6710,9 @@ class Dialog extends FASTElement {
     this.typeChanged(void 0, this.type);
   }
   /**
-   * @public
    * Method to show the dialog
+   *
+   * @public
    */
   show() {
     Updates.enqueue(() => {
@@ -6722,8 +6726,9 @@ class Dialog extends FASTElement {
     });
   }
   /**
-   * @public
    * Method to hide the dialog
+   *
+   * @public
    */
   hide() {
     this.emitBeforeToggle();
@@ -6731,8 +6736,9 @@ class Dialog extends FASTElement {
     this.emitToggle();
   }
   /**
-   * @public
    * Handles click events on the dialog overlay for light-dismiss
+   *
+   * @public
    * @param event - The click event
    * @returns boolean
    */
@@ -6936,9 +6942,10 @@ class Drawer extends FASTElement {
     this.position = DrawerPosition.start;
     this.size = DrawerSize.medium;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitToggle = () => {
       this.$emit("toggle", {
@@ -6947,9 +6954,10 @@ class Drawer extends FASTElement {
       });
     };
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitBeforeToggle = () => {
       this.$emit("beforetoggle", {
@@ -6981,8 +6989,9 @@ class Drawer extends FASTElement {
     this.roleAttrObserver.disconnect();
   }
   /**
-   * @public
    * Method to show the drawer
+   *
+   * @public
    */
   show() {
     Updates.enqueue(() => {
@@ -6996,8 +7005,9 @@ class Drawer extends FASTElement {
     });
   }
   /**
-   * @public
    * Method to hide the drawer
+   *
+   * @public
    */
   hide() {
     this.emitBeforeToggle();
@@ -7018,8 +7028,9 @@ class Drawer extends FASTElement {
     return true;
   }
   /**
-   * @public
    * Handles cancel events on the drawer.
+   *
+   * @public
    */
   cancelHandler() {
     this.hide();
@@ -9397,8 +9408,9 @@ class MessageBar extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     this.dismissMessageBar = () => {
       this.$emit("dismiss", {});
@@ -12558,7 +12570,7 @@ class BaseTextArea extends FASTElement {
       this.autoSizerEl.classList.add("auto-sizer");
       this.autoSizerEl.ariaHidden = "true";
     }
-    this.shadowRoot.prepend(this.autoSizerEl);
+    this.rootEl?.prepend(this.autoSizerEl);
     if (!this.autoSizerObserver) {
       this.autoSizerObserver = new ResizeObserver((_, observer) => {
         const blockSizePropName = window.getComputedStyle(this).writingMode.startsWith("horizontal") ? "height" : "width";
@@ -12707,7 +12719,7 @@ const styles$6 = css`
     :host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
 
 function textAreaTemplate() {
-  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
+  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root" ${ref("rootEl")}><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
 }
 const template$6 = textAreaTemplate();