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

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();
   }
   /**
@@ -10274,8 +10279,8 @@ __decorateClass$8([attr], Spinner.prototype, "appearance", 2);
 const styles$a = css`
   ${display("inline-flex")}
 
-  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;inset-inline-end:50%}.end{overflow:hidden;inset-inline-start:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-inline-end-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-inline-end-color:Highlight}`));
+  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`));
 
 const template$a = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
@@ -10305,7 +10310,7 @@ const styles$9 = css`
   ${display("inline-flex")}
 
   :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}`));
+    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}`));
 
 const definition$9 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,
@@ -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({