@fluentui/web-components 3.0.0-beta.106 → 3.0.0-beta.107

package/dist/web-components.js

@@ -5961,7 +5961,7 @@ class BaseButton extends FASTElement {
     if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
       return;
     }
-    if (!this.name && !this.formAction && !this.formEnctype && !this.form && !this.formMethod && !this.formNoValidate && !this.formTarget) {
+    if (!this.name && !this.formAction && !this.formEnctype && !this.formAttribute && !this.formMethod && !this.formNoValidate && !this.formTarget) {
       this.elementInternals.form.requestSubmit();
       return;
     }
@@ -6069,6 +6069,14 @@ class BaseCheckbox extends FASTElement {
   constructor() {
     super(...arguments);
     this.initialValue = "on";
+    /**
+     * Tracks whether the space key was pressed down while the checkbox was focused.
+     * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+     * submit button and field validation is triggered.
+     *
+     * @internal
+     */
+    this._keydownPressed = false;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -6287,7 +6295,8 @@ class BaseCheckbox extends FASTElement {
     return true;
   }
   /**
-   * Prevents scrolling when the user presses the space key.
+   * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+   * down while the checkbox was focused.
    *
    * @param e - the event object
    * @internal
@@ -6296,6 +6305,7 @@ class BaseCheckbox extends FASTElement {
     if (e.key !== " ") {
       return true;
     }
+    this._keydownPressed = true;
   }
   /**
    * Toggles the checked state when the user releases the space key.
@@ -6304,9 +6314,10 @@ class BaseCheckbox extends FASTElement {
    * @internal
    */
   keyupHandler(e) {
-    if (e.key !== " ") {
+    if (!this._keydownPressed || e.key !== " ") {
       return true;
     }
+    this._keydownPressed = false;
     this.click();
   }
   /**
@@ -6481,7 +6492,7 @@ const disabledState = stateSelector("disabled");
 stateSelector("error");
 const flipBlockState = stateSelector("flip-block");
 const focusVisibleState = stateSelector("focus-visible");
-const hasMessageState = stateSelector("has-message");
+stateSelector("has-message");
 const indeterminateState = stateSelector("indeterminate");
 const multipleState = stateSelector("multiple");
 const openState = stateSelector("open");
@@ -6490,6 +6501,7 @@ const placeholderShownState = stateSelector("placeholder-shown");
 const pressedState = stateSelector("pressed");
 const rangeOverflowState = stateSelector("range-overflow");
 const rangeUnderflowState = stateSelector("range-underflow");
+const requiredState = stateSelector("required");
 const selectedState = stateSelector("selected");
 const stepMismatchState = stateSelector("step-mismatch");
 const submenuState = stateSelector("submenu");
@@ -7209,6 +7221,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     if (next) {
       next.dropdown = this;
       next.popover = "manual";
+      next.tabIndex = -1;
       this.listboxSlot.assign(next);
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
@@ -7895,15 +7908,6 @@ class BaseField extends FASTElement {
    */
   messageSlotChanged(prev, next) {
     toggleState(this.elementInternals, "has-message", !!next.length);
-    if (!next.length) {
-      this.removeEventListener("invalid", this.invalidHandler, {
-        capture: true
-      });
-      return;
-    }
-    this.addEventListener("invalid", this.invalidHandler, {
-      capture: true
-    });
   }
   /**
    * Sets the `input` property to the first slotted input.
@@ -7953,6 +7957,18 @@ class BaseField extends FASTElement {
     }
     return true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+    super.disconnectedCallback();
+  }
   /**
    * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
    *
@@ -8053,7 +8069,7 @@ __decorateClass$w([attr({
 const styles$r = css`
   ${display("inline-grid")}
 
-  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}: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([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}: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};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}`;
+  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}: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;position:relative;z-index:1}::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",
@@ -8142,7 +8158,7 @@ const styles$p = css`
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
-  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
+  return html`<slot></slot><span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="${x => !x.required}">*</span>`;
 }
 const template$q = labelTemplate();
 
@@ -10206,7 +10222,7 @@ __decorateClass$k([attr({
 const styles$g = css`
   ${display("flex")}
 
-  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
+  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}:host([slot='input']){margin:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 function radioGroupTemplate() {
   return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
@@ -12965,7 +12981,7 @@ __decorateClass$6([attr], Text.prototype, "align", 2);
 const styles$4 = css`
   ${display("inline")}
 
-  :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
 
 const template$4 = html`<slot></slot>`;