@fluentui/web-components 3.0.0-beta.44 → 3.0.0-beta.46

package/dist/web-components.js

@@ -5151,7 +5151,7 @@ var __decorateClass$o = (decorators, target, key, kind) => {
   if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-class Button extends FASTElement {
+class BaseButton extends FASTElement {
   constructor() {
     super();
     this.disabledFocusable = false;
@@ -5162,22 +5162,8 @@ class Button extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.iconOnly = false;
     this.elementInternals.role = "button";
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
@@ -5198,14 +5184,6 @@ class Button extends FASTElement {
   get form() {
     return this.elementInternals.form;
   }
-  /**
-   * Handles changes to icon only custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  iconOnlyChanged(prev, next) {
-    toggleState(this.elementInternals, "icon", next);
-  }
   /**
    * A reference to all associated label elements.
    *
@@ -5214,32 +5192,6 @@ class Button extends FASTElement {
   get labels() {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
   /**
    * Removes the form submission fallback control when the type changes.
    *
@@ -5399,52 +5351,105 @@ class Button extends FASTElement {
  *
  * @public
  */
-Button.formAssociated = true;
-__decorateClass$o([attr], Button.prototype, "appearance", 2);
+BaseButton.formAssociated = true;
 __decorateClass$o([attr({
   mode: "boolean"
-})], Button.prototype, "autofocus", 2);
-__decorateClass$o([observable], Button.prototype, "defaultSlottedContent", 2);
+})], BaseButton.prototype, "autofocus", 2);
+__decorateClass$o([observable], BaseButton.prototype, "defaultSlottedContent", 2);
 __decorateClass$o([attr({
   mode: "boolean"
-})], Button.prototype, "disabled", 2);
+})], BaseButton.prototype, "disabled", 2);
 __decorateClass$o([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
-})], Button.prototype, "disabledFocusable", 2);
+})], BaseButton.prototype, "disabledFocusable", 2);
 __decorateClass$o([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
-})], Button.prototype, "tabIndex", 2);
+})], BaseButton.prototype, "tabIndex", 2);
 __decorateClass$o([attr({
   attribute: "formaction"
-})], Button.prototype, "formAction", 2);
+})], BaseButton.prototype, "formAction", 2);
 __decorateClass$o([attr({
   attribute: "form"
-})], Button.prototype, "formAttribute", 2);
+})], BaseButton.prototype, "formAttribute", 2);
 __decorateClass$o([attr({
   attribute: "formenctype"
-})], Button.prototype, "formEnctype", 2);
+})], BaseButton.prototype, "formEnctype", 2);
 __decorateClass$o([attr({
   attribute: "formmethod"
-})], Button.prototype, "formMethod", 2);
+})], BaseButton.prototype, "formMethod", 2);
 __decorateClass$o([attr({
   attribute: "formnovalidate",
   mode: "boolean"
-})], Button.prototype, "formNoValidate", 2);
+})], BaseButton.prototype, "formNoValidate", 2);
 __decorateClass$o([attr({
   attribute: "formtarget"
-})], Button.prototype, "formTarget", 2);
+})], BaseButton.prototype, "formTarget", 2);
+__decorateClass$o([attr], BaseButton.prototype, "name", 2);
+__decorateClass$o([attr], BaseButton.prototype, "type", 2);
+__decorateClass$o([attr], BaseButton.prototype, "value", 2);
+class Button extends BaseButton {
+  constructor() {
+    super(...arguments);
+    this.iconOnly = false;
+  }
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to icon only custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  iconOnlyChanged(prev, next) {
+    toggleState(this.elementInternals, "icon", next);
+  }
+}
+__decorateClass$o([attr], Button.prototype, "appearance", 2);
+__decorateClass$o([attr], Button.prototype, "shape", 2);
+__decorateClass$o([attr], Button.prototype, "size", 2);
 __decorateClass$o([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$o([attr], Button.prototype, "name", 2);
-__decorateClass$o([attr], Button.prototype, "shape", 2);
-__decorateClass$o([attr], Button.prototype, "size", 2);
-__decorateClass$o([attr], Button.prototype, "type", 2);
-__decorateClass$o([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
 function buttonTemplate$1(options = {}) {
@@ -6744,7 +6749,7 @@ const hasMessageState = css.partial`:is([state--has-message], :state(has-message
 const styles$k = css`
   ${display("inline-grid")}
 
-  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;padding:${spacingVerticalS} ${spacingHorizontalS};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([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}`;
 
 const template$l = 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",
@@ -8605,7 +8610,7 @@ __decorateClass$8([attr({
 const styles$b = css`
   ${display("flex")}
 
-  :host{-webkit-tap-highlight-color:transparent;cursor:pointer}:host(${disabledState}),: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(${disabledState}),: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}}`;
 
 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>`;