@fluentui/web-components 3.0.0-beta.75 → 3.0.0-beta.76

package/dist/web-components.js

@@ -7510,7 +7510,7 @@ class BaseField extends FASTElement {
    * @internal
    */
   setStates() {
-    if (this.$fastController.isConnected) {
+    if (this.elementInternals && this.input) {
       toggleState(this.elementInternals, "disabled", !!this.input.disabled);
       toggleState(this.elementInternals, "readonly", !!this.input.readOnly);
       toggleState(this.elementInternals, "required", !!this.input.required);
@@ -8895,7 +8895,6 @@ class Radio extends BaseCheckbox {
   disabledChanged(prev, next) {
     super.disabledChanged(prev, next);
     if (next) {
-      this.checked = false;
       this.tabIndex = -1;
     }
     this.$emit("disabled", next, {
@@ -9166,6 +9165,9 @@ class RadioGroup extends FASTElement {
     this.dirtyState = true;
     const radioIndex = this.enabledRadios.indexOf(e.target);
     this.checkRadio(radioIndex);
+    this.radios?.filter(x => x.disabled)?.forEach(item => {
+      item.checked = false;
+    });
     return true;
   }
   /**
@@ -9174,13 +9176,16 @@ class RadioGroup extends FASTElement {
    * @param index - the index of the radio to check
    * @internal
    */
-  checkRadio(index = this.checkedIndex) {
+  checkRadio(index = this.checkedIndex, shouldEmit = false) {
     let checkedIndex = this.checkedIndex;
     this.enabledRadios.forEach((item, i) => {
       const shouldCheck = i === index;
       item.checked = shouldCheck;
       if (shouldCheck) {
         checkedIndex = i;
+        if (shouldEmit) {
+          item.$emit("change");
+        }
       }
     });
     this.checkedIndex = checkedIndex;
@@ -9301,7 +9306,7 @@ class RadioGroup extends FASTElement {
       return true;
     }
     const nextIndex = checkedIndex + increment;
-    this.checkedIndex = this.getEnabledIndexInBounds(nextIndex);
+    this.checkRadio(this.getEnabledIndexInBounds(nextIndex), true);
     this.enabledRadios[this.checkedIndex]?.focus();
   }
   /**
@@ -12439,6 +12444,16 @@ class Tooltip extends FASTElement {
     this.blurAnchorHandler = () => this.hideTooltip(0);
     this.elementInternals.role = "tooltip";
   }
+  /**
+   * Updates the fallback styles when the positioning changes.
+   *
+   * @internal
+   */
+  positioningChanged() {
+    if (!SUPPORTS_CSS_ANCHOR_POSITIONING) {
+      this.setFallbackStyles();
+    }
+  }
   /**
    * Reference to the anchor element
    * @internal
@@ -12455,60 +12470,18 @@ class Tooltip extends FASTElement {
     const anchorName = this.anchorElement.style.anchorName || `--${this.anchor}`;
     const describedBy = this.anchorElement.getAttribute("aria-describedby");
     this.anchorElement.setAttribute("aria-describedby", describedBy ? `${describedBy} ${this.id}` : this.id);
+    this.anchorElement.addEventListener("focus", this.focusAnchorHandler);
+    this.anchorElement.addEventListener("blur", this.blurAnchorHandler);
+    this.anchorElement.addEventListener("mouseenter", this.mouseenterAnchorHandler);
+    this.anchorElement.addEventListener("mouseleave", this.mouseleaveAnchorHandler);
     if (SUPPORTS_CSS_ANCHOR_POSITIONING) {
       if (!SUPPORTS_HTML_ANCHOR_POSITIONING) {
         this.anchorElement.style.anchorName = anchorName;
         this.style.positionAnchor = anchorName;
       }
-    } else {
-      if (!this.anchorPositioningStyleElement) {
-        this.anchorPositioningStyleElement = document.createElement("style");
-        document.head.append(this.anchorPositioningStyleElement);
-      }
-      let [direction, alignment] = this.positioning?.split("-") ?? [];
-      if (alignment === void 0 && (direction === "above" || direction === "below")) {
-        alignment = "centerX";
-      }
-      if (alignment === void 0 && (direction === "before" || direction === "after")) {
-        alignment = "centerY";
-      }
-      const directionCSSMap = {
-        above: `bottom: anchor(${anchorName} top);`,
-        below: `top: anchor(${anchorName} bottom);`,
-        before: `right: anchor(${anchorName} left);`,
-        after: `left: anchor(${anchorName} right);`
-      };
-      const directionCSS = directionCSSMap[direction] ?? directionCSSMap.above;
-      const alignmentCSSMap = {
-        start: `left: anchor(${anchorName} left);`,
-        end: `right: anchor(${anchorName} right);`,
-        top: `top: anchor(${anchorName} top);`,
-        bottom: `bottom: anchor(${anchorName} bottom);`,
-        centerX: `left: anchor(${anchorName} center); translate: -50% 0;`,
-        centerY: `top: anchor(${anchorName} center); translate: 0 -50%;`
-      };
-      const alignmentCSS = alignmentCSSMap[alignment] ?? alignmentCSSMap.centerX;
-      this.anchorPositioningStyleElement.textContent = `
-          #${this.anchor} {
-            anchor-name: ${anchorName};
-          }
-          #${this.id} {
-            inset: unset;
-            ${directionCSS}
-            ${alignmentCSS}
-            position: absolute;
-          }
-        `;
-      if (window.CSS_ANCHOR_POLYFILL) {
-        window.CSS_ANCHOR_POLYFILL.call({
-          element: this.anchorPositioningStyleElement
-        });
-      }
+      return;
     }
-    this.anchorElement.addEventListener("focus", this.focusAnchorHandler);
-    this.anchorElement.addEventListener("blur", this.blurAnchorHandler);
-    this.anchorElement.addEventListener("mouseenter", this.mouseenterAnchorHandler);
-    this.anchorElement.addEventListener("mouseleave", this.mouseleaveAnchorHandler);
+    Updates.enqueue(() => this.setFallbackStyles());
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -12543,6 +12516,59 @@ class Tooltip extends FASTElement {
       this.hidePopover();
     }, delay);
   }
+  setFallbackStyles() {
+    if (!this.anchorElement) {
+      return;
+    }
+    const anchorName = this.anchorElement.style.anchorName || `--${this.anchor}`;
+    if (!this.anchorPositioningStyleElement) {
+      this.anchorPositioningStyleElement = document.createElement("style");
+      document.head.append(this.anchorPositioningStyleElement);
+    }
+    let [direction, alignment] = this.positioning?.split("-") ?? [];
+    if (!alignment) {
+      if (direction === "above" || direction === "below") {
+        alignment = "centerX";
+      }
+      if (direction === "before" || direction === "after") {
+        alignment = "centerY";
+      }
+    }
+    const directionCSSMap = {
+      above: `bottom: anchor(top);`,
+      below: `top: anchor(bottom);`,
+      before: `right: anchor(left);`,
+      after: `left: anchor(right);`
+    };
+    const directionCSS = directionCSSMap[direction] ?? directionCSSMap.above;
+    const alignmentCSSMap = {
+      start: `left: anchor(left);`,
+      end: `right: anchor(right);`,
+      top: `top: anchor(top);`,
+      bottom: `bottom: anchor(bottom);`,
+      centerX: `left: anchor(center); translate: -50% 0;`,
+      centerY: `top: anchor(center); translate: 0 -50%;`
+    };
+    const alignmentCSS = alignmentCSSMap[alignment] ?? alignmentCSSMap.centerX;
+    this.anchorPositioningStyleElement.textContent = /* css */
+    `
+      #${this.anchor} {
+        anchor-name: ${anchorName};
+      }
+      #${this.id} {
+        inset: unset;
+        position-anchor: ${anchorName};
+        position: absolute;
+        ${directionCSS}
+        ${alignmentCSS}
+      }
+    `;
+    if (window.CSS_ANCHOR_POLYFILL) {
+      window.CSS_ANCHOR_POLYFILL.call({
+        element: this.anchorPositioningStyleElement
+      });
+    }
+  }
 }
 __decorateClass([attr], Tooltip.prototype, "id", 2);
 __decorateClass([attr({