@fluentui/web-components 3.0.0-beta.115 → 3.0.0-beta.116

package/dist/esm/textarea/textarea.template.js

@@ -1,5 +1,4 @@
 import { html, ref, slotted } from '@microsoft/fast-element';
-import { whitespaceFilter } from '../utils/index.js';
 /**
  * Generates a template for the TextArea component.
  *
@@ -9,13 +8,7 @@ export function textAreaTemplate() {
     return html `
     <template>
       <label ${ref('labelEl')} for="control" part="label">
-        <slot
-          name="label"
-          ${slotted({
-        property: 'labelSlottedNodes',
-        filter: whitespaceFilter,
-    })}
-        ></slot>
+        <slot name="label" ${slotted('labelSlottedNodes')}></slot>
       </label>
       <div class="root" part="root">
         <textarea
@@ -37,12 +30,7 @@ export function textAreaTemplate() {
         ></textarea>
       </div>
       <div hidden>
-        <slot
-          ${slotted({
-        property: 'defaultSlottedNodes',
-        filter: whitespaceFilter,
-    })}
-        ></slot>
+        <slot ${slotted('defaultSlottedNodes')}></slot>
       </div>
     </template>
   `;

package/dist/esm/textarea/textarea.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;;;YAGjB,OAAO,CAAC;QACR,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;;YAKA,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;;YAKnC,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;6BACA,OAAO,CAAC,mBAAmB,CAAC;;;;YAI7C,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;gBAI/B,OAAO,CAAC,qBAAqB,CAAC;;;GAG3C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}

package/dist/web-components.d.ts

@@ -2084,6 +2084,7 @@ export declare class BaseDropdown extends FASTElement {
  * @public
  */
 export declare class BaseField extends FASTElement {
+    private slottedInputObserver;
     /**
      * The slotted label elements.
      *
@@ -2614,6 +2615,7 @@ export declare class BaseTextArea extends FASTElement {
      */
     defaultSlottedNodes: Node[];
     protected defaultSlottedNodesChanged(): void;
+    private filteredLabelSlottedNodes;
     /**
      * The list of nodes that are assigned to the `label` slot.
      * @internal
@@ -6214,6 +6216,9 @@ export declare class Dialog extends FASTElement {
      * The type of the dialog modal
      */
     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
@@ -6466,6 +6471,7 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
  * @method clickHandler - Handles click events on the drawer.
+ * @method cancelHandler - Handles cancel events on the drawer.
  * @method emitToggle - Emits an event after the dialog's open state changes.
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
@@ -6474,12 +6480,14 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
  * @tag fluent-drawer
  */
 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.
      */
     type: DrawerType;
+    protected typeChanged(): void;
     /**
      * @public
      * The ID of the element that labels the drawer.
@@ -6507,6 +6515,10 @@ export declare class Drawer extends FASTElement {
      * The dialog element.
      */
     dialog: HTMLDialogElement;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
     /**
      * @public
      * Method to emit an event after the dialog's open state changes
@@ -6536,6 +6548,13 @@ export declare class Drawer extends FASTElement {
      * Handles click events on the drawer.
      */
     clickHandler(event: Event): boolean;
+    /**
+     * @public
+     * Handles cancel events on the drawer.
+     */
+    cancelHandler(): void;
+    protected observeRoleAttr(): void;
+    protected updateDialogRole(): void;
 }
 
 /**

package/dist/web-components.js

@@ -6719,6 +6719,26 @@ class Dialog extends FASTElement {
       });
     };
   }
+  typeChanged(prev, next) {
+    if (!this.dialog) {
+      return;
+    }
+    if (next === DialogType.alert) {
+      this.dialog.setAttribute("role", "alertdialog");
+    } else {
+      this.dialog.removeAttribute("role");
+    }
+    if (next !== DialogType.nonModal) {
+      this.dialog.setAttribute("aria-modal", "true");
+    } else {
+      this.dialog.removeAttribute("aria-modal");
+    }
+  }
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged(void 0, this.type);
+  }
   /**
    * @public
    * Method to show the dialog
@@ -6765,7 +6785,7 @@ __decorateClass$D([attr({
 })], Dialog.prototype, "ariaLabelledby", 2);
 __decorateClass$D([attr], Dialog.prototype, "type", 2);
 
-const template$y = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$y = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
 const styles$x = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -6968,6 +6988,28 @@ class Drawer extends FASTElement {
       });
     };
   }
+  typeChanged() {
+    if (!this.dialog) {
+      return;
+    }
+    this.updateDialogRole();
+    if (this.type === DrawerType.modal) {
+      this.dialog.setAttribute("aria-modal", "true");
+    } else {
+      this.dialog.removeAttribute("aria-modal");
+    }
+  }
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged();
+    this.observeRoleAttr();
+  }
+  /** @internal */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.roleAttrObserver.disconnect();
+  }
   /**
    * @public
    * Method to show the drawer
@@ -7005,6 +7047,32 @@ class Drawer extends FASTElement {
     }
     return true;
   }
+  /**
+   * @public
+   * Handles cancel events on the drawer.
+   */
+  cancelHandler() {
+    this.hide();
+  }
+  observeRoleAttr() {
+    if (this.roleAttrObserver) {
+      return;
+    }
+    this.roleAttrObserver = new MutationObserver(() => {
+      this.updateDialogRole();
+    });
+    this.roleAttrObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["role"]
+    });
+  }
+  updateDialogRole() {
+    console.log(this.role);
+    if (!this.dialog) {
+      return;
+    }
+    this.dialog.role = this.type === DrawerType.modal ? "dialog" : this.role;
+  }
 }
 __decorateClass$A([attr], Drawer.prototype, "type", 2);
 __decorateClass$A([attr({
@@ -7025,7 +7093,7 @@ const styles$u = css`
   :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
 
 function drawerTemplate() {
-  return html`<dialog class="dialog" part="dialog" role="${x => x.type === "modal" ? "dialog" : x.role}" aria-modal="${x => x.type === "modal" ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" type="${x => x.type}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+  return html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.cancelHandler()}" ${ref("dialog")}><slot></slot></dialog>`;
 }
 const template$v = drawerTemplate();
 
@@ -7977,9 +8045,9 @@ class BaseField extends FASTElement {
    * @internal
    */
   slottedInputsChanged(prev, next) {
-    if (next?.length) {
-      this.input = next?.[0];
-      this.setStates();
+    const filtered = next?.filter(node => node.nodeType === Node.ELEMENT_NODE) ?? [];
+    if (filtered?.length) {
+      this.input = filtered?.[0];
     }
   }
   /**
@@ -7992,6 +8060,11 @@ class BaseField extends FASTElement {
     if (next) {
       this.setStates();
       this.setLabelProperties();
+      this.slottedInputObserver.observe(this.input, {
+        attributes: true,
+        attributeFilter: ["disabled", "required", "readonly"],
+        subtree: true
+      });
     }
   }
   /**
@@ -8022,8 +8095,12 @@ class BaseField extends FASTElement {
     this.addEventListener("invalid", this.invalidHandler, {
       capture: true
     });
+    this.slottedInputObserver = new MutationObserver(() => {
+      this.setStates();
+    });
   }
   disconnectedCallback() {
+    this.slottedInputObserver.disconnect();
     this.removeEventListener("invalid", this.invalidHandler, {
       capture: true
     });
@@ -8095,7 +8172,7 @@ class BaseField extends FASTElement {
     }
   }
   setValidationStates() {
-    if (!this.input.validity) {
+    if (!this.input?.validity) {
       return;
     }
     for (const [flag, value] of Object.entries(ValidationFlags)) {
@@ -8131,14 +8208,7 @@ const styles$r = css`
 
   :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*' / '';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
-  property: "slottedInputs",
-  attributes: true,
-  attributeFilter: ["disabled", "required", "readonly"],
-  subtree: true,
-  selector: '[slot="input"]',
-  filter: elements()
-})}><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
+const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input" ${slotted("slottedInputs")}></slot><slot name="message" part="message" ${slotted({
   property: "messageSlot",
   filter: elements("[flag]")
 })}></slot></template>`;
@@ -11062,7 +11132,7 @@ const styles$d = css`
     .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
 
 function sliderTemplate(options = {}) {
-  return html`<template tabindex="${x => x.disabled ? null : 0}" @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
+  return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
 }
 const template$d = sliderTemplate({
   thumb: `<div class="thumb"></div>`
@@ -12104,6 +12174,8 @@ class BaseTextArea extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
+    this.filteredLabelSlottedNodes = [];
+    this.labelSlottedNodes = [];
     this.userInteracted = false;
     this.preConnectControlEl = document.createElement("textarea");
     this.autoResize = false;
@@ -12120,10 +12192,11 @@ class BaseTextArea extends FASTElement {
     this.value = next;
   }
   labelSlottedNodesChanged() {
+    this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
     if (this.labelEl) {
-      this.labelEl.hidden = !this.labelSlottedNodes.length;
+      this.labelEl.hidden = !this.filteredLabelSlottedNodes.length;
     }
-    this.labelSlottedNodes.forEach(node => {
+    this.filteredLabelSlottedNodes.forEach(node => {
       node.disabled = this.disabled;
       node.required = this.required;
     });
@@ -12157,8 +12230,8 @@ class BaseTextArea extends FASTElement {
   }
   requiredChanged() {
     this.elementInternals.ariaRequired = `${!!this.required}`;
-    if (this.labelSlottedNodes?.length) {
-      this.labelSlottedNodes.forEach(node => node.required = this.required);
+    if (this.filteredLabelSlottedNodes?.length) {
+      this.filteredLabelSlottedNodes.forEach(node => node.required = this.required);
     }
   }
   resizeChanged(prev, next) {
@@ -12393,8 +12466,8 @@ class BaseTextArea extends FASTElement {
     if (this.controlEl) {
       this.controlEl.disabled = disabled;
     }
-    if (this.labelSlottedNodes?.length) {
-      this.labelSlottedNodes.forEach(node => node.disabled = this.disabled);
+    if (this.filteredLabelSlottedNodes?.length) {
+      this.filteredLabelSlottedNodes.forEach(node => node.disabled = this.disabled);
     }
   }
   toggleUserValidityState() {
@@ -12567,13 +12640,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({
-    property: "labelSlottedNodes",
-    filter: whitespaceFilter
-  })}></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({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></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"><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();