@fluentui/web-components 3.0.0-beta.80 → 3.0.0-beta.82

package/dist/web-components.js

@@ -5278,7 +5278,7 @@ applyMixins(AnchorButton, StartEnd);
 const baseButtonStyles = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){flex-shrink:0}:host(:not(${iconOnlyState})) :is([slot='end'],:host(:not(${iconOnlyState}))::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
+  :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']){flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
 const styles$C = css`
   ${baseButtonStyles}
 
@@ -7688,7 +7688,7 @@ class BaseDropdown extends FASTElement {
       return true;
     }
     const optionIndex = this.isCombobox ? this.enabledOptions.findIndex(x => x.text === this.control.value) : this.enabledOptions.indexOf(e.target);
-    this.selectOption(optionIndex);
+    this.selectOption(optionIndex, true);
     return true;
   }
   /**
@@ -7712,15 +7712,18 @@ class BaseDropdown extends FASTElement {
       this.listbox.showPopover();
       return true;
     }
-    if (isDropdownOption(target) && !this.multiple) {
+    if (isDropdownOption(target)) {
       if (target.disabled) {
         return;
       }
-      if (this.isCombobox) {
-        this.control.value = target.text;
-        this.updateFreeformOption();
+      this.selectOption(this.enabledOptions.indexOf(target), true);
+      if (!this.multiple) {
+        if (this.isCombobox) {
+          this.control.value = target.text;
+          this.updateFreeformOption();
+        }
+        this.listbox.hidePopover();
       }
-      this.listbox.hidePopover();
     }
     return true;
   }
@@ -7845,7 +7848,7 @@ class BaseDropdown extends FASTElement {
       case "Tab":
         {
           if (this.open) {
-            this.selectOption(this.activeIndex);
+            this.selectOption(this.activeIndex, true);
             if (this.multiple) {
               break;
             }
@@ -7898,11 +7901,14 @@ class BaseDropdown extends FASTElement {
    * @param index - The index of the option to select.
    * @public
    */
-  selectOption(index = this.selectedIndex) {
+  selectOption(index = this.selectedIndex, shouldEmit = false) {
     this.listbox.selectOption(index);
     this.control.value = this.displayValue;
     this.setValidity();
     this.updateFreeformOption();
+    if (shouldEmit) {
+      this.$emit("change");
+    }
   }
   /**
    * Sets the validity of the element.
@@ -8657,6 +8663,9 @@ class Listbox extends FASTElement {
    * @public
    */
   clickHandler(e) {
+    if (this.dropdown) {
+      return true;
+    }
     const target = e.target;
     if (isDropdownOption(target)) {
       this.selectOption(this.enabledOptions.indexOf(target));
@@ -10883,35 +10892,6 @@ class Slider extends FASTElement {
     this.max = "";
     this.step = "";
     this.mode = SliderMode.singleValue;
-    this.keypressHandler = event => {
-      if (this.disabled) {
-        return;
-      }
-      switch (event.key) {
-        case keyHome:
-          event.preventDefault();
-          this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.minAsNumber}` : `${this.maxAsNumber}`;
-          break;
-        case keyEnd:
-          event.preventDefault();
-          this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.maxAsNumber}` : `${this.minAsNumber}`;
-          break;
-        case keyArrowRight:
-        case keyArrowUp:
-          if (!event.shiftKey) {
-            event.preventDefault();
-            this.increment();
-          }
-          break;
-        case keyArrowLeft:
-        case keyArrowDown:
-          if (!event.shiftKey) {
-            event.preventDefault();
-            this.decrement();
-          }
-          break;
-      }
-    };
     this.setupTrackConstraints = () => {
       const clientRect = this.track.getBoundingClientRect();
       this.trackWidth = this.track.clientWidth;
@@ -10923,12 +10903,6 @@ class Slider extends FASTElement {
         this.trackWidth = 1;
       }
     };
-    this.setupListeners = (remove = false) => {
-      this.addEventListener("keydown", this.keypressHandler);
-      if (remove) {
-        this.removeEventListener("keydown", this.keypressHandler);
-      }
-    };
     /**
      *  Handle mouse moves during a thumb drag operation
      *  If the event handler is null it removes the events
@@ -10944,6 +10918,7 @@ class Slider extends FASTElement {
       });
       windowFn("touchend", this.handleWindowPointerUp);
       this.isDragging = event !== null;
+      return true;
     };
     /**
      *  Handle mouse moves during a thumb drag operation
@@ -10953,7 +10928,8 @@ class Slider extends FASTElement {
         return;
       }
       const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : event;
-      const eventValue = this.orientation === Orientation.vertical ? sourceEvent.pageY - document.documentElement.scrollTop : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft;
+      const thumbWidth = this.thumb.getBoundingClientRect().width;
+      const eventValue = this.orientation === Orientation.vertical ? sourceEvent.pageY - document.documentElement.scrollTop : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
       this.value = `${this.calculateNewValue(eventValue)}`;
     };
     /**
@@ -10978,12 +10954,14 @@ class Slider extends FASTElement {
         windowFn("pointerup", this.handleWindowPointerUp);
         documentFn("mouseleave", this.handleWindowPointerUp);
         windowFn("pointermove", this.handlePointerMove);
+        const thumbWidth = this.thumb.getBoundingClientRect().width;
         if (event) {
           this.setupTrackConstraints();
-          const controlValue = this.orientation === Orientation.vertical ? event.pageY - document.documentElement.scrollTop : event.pageX - document.documentElement.scrollLeft - this.trackLeft;
+          const controlValue = this.orientation === Orientation.vertical ? event.pageY - document.documentElement.scrollTop : event.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
           this.value = `${this.calculateNewValue(controlValue)}`;
         }
       }
+      return true;
     };
     this.elementInternals.role = "slider";
     this.elementInternals.ariaOrientation = this.orientation ?? SliderOrientation.horizontal;
@@ -11275,7 +11253,6 @@ class Slider extends FASTElement {
     this.setDisabledSideEffect(this.disabled);
     this.updateStepMultiplier();
     this.setupTrackConstraints();
-    this.setupListeners();
     this.setupDefaultValue();
     this.setSliderPosition();
     Observable.getNotifier(this).subscribe(this, "max");
@@ -11288,7 +11265,6 @@ class Slider extends FASTElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.setupListeners(true);
     Observable.getNotifier(this).unsubscribe(this, "max");
     Observable.getNotifier(this).unsubscribe(this, "min");
     Observable.getNotifier(this).unsubscribe(this, "step");
@@ -11315,6 +11291,36 @@ class Slider extends FASTElement {
     const decrementedValString = decrementedVal > this.minAsNumber ? `${decrementedVal}` : `${this.minAsNumber}`;
     this.value = decrementedValString;
   }
+  handleKeydown(event) {
+    if (this.disabled) {
+      return true;
+    }
+    switch (event.key) {
+      case keyHome:
+        event.preventDefault();
+        this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.minAsNumber}` : `${this.maxAsNumber}`;
+        break;
+      case keyEnd:
+        event.preventDefault();
+        this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.maxAsNumber}` : `${this.minAsNumber}`;
+        break;
+      case keyArrowRight:
+      case keyArrowUp:
+        if (!event.shiftKey) {
+          event.preventDefault();
+          this.increment();
+        }
+        break;
+      case keyArrowLeft:
+      case keyArrowDown:
+        if (!event.shiftKey) {
+          event.preventDefault();
+          this.decrement();
+        }
+        break;
+    }
+    return true;
+  }
   /**
    * Places the thumb based on the current value
    */
@@ -11420,13 +11426,13 @@ const styles$b = css`
 
   :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host(${smallState}){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host(${verticalState}){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host:after,.track{height:var(--track-size);width:100%}:host:after{background-image:linear-gradient(
       var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%
-    );border-radius:var(--border-radius);content:'';grid-row:1 / -1;grid-column:1 / -1}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}:host(${verticalState})::after,:host(${verticalState}) .track{height:100%;width:var(--track-size)}:host(${verticalState}) .track{top:var(--track-overhang);bottom:var(--track-overhang)}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host(${verticalState}) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
+    );border-radius:var(--border-radius);content:'';grid-row:1 / -1;grid-column:1 / -1}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}:host(${verticalState})::after,:host(${verticalState}) .track{height:100%;width:var(--track-size)}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host(${verticalState}) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
       var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
     )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host(${verticalState}) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}`.withBehaviors(forcedColorsStylesheetBehavior(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)}"><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 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>`;
 }
 const template$b = sliderTemplate({
   thumb: `<div class="thumb"></div>`