@fluentui/web-components 3.0.0-rc.26 → 3.0.0-rc.27

package/dist/esm/spinner/spinner.styles.css

@@ -1,155 +1,159 @@
-
-  :host([hidden]){display:none}:host{display:inline-flex}
-
-  :host {
-    --duration: 1.5s;
-    --indicatorSize: var(--strokeWidthThicker);
-    --size: 32px;
-    height: var(--size);
-    width: var(--size);
-    contain: strict;
-    content-visibility: auto;
-  }
-
-  :host([size='tiny']) {
-    --indicatorSize: var(--strokeWidthThick);
-    --size: 20px;
-  }
-  :host([size='extra-small']) {
-    --indicatorSize: var(--strokeWidthThick);
-    --size: 24px;
-  }
-  :host([size='small']) {
-    --indicatorSize: var(--strokeWidthThick);
-    --size: 28px;
-  }
-  :host([size='large']) {
-    --indicatorSize: var(--strokeWidthThicker);
-    --size: 36px;
-  }
-  :host([size='extra-large']) {
-    --indicatorSize: var(--strokeWidthThicker);
-    --size: 40px;
-  }
-  :host([size='huge']) {
-    --indicatorSize: var(--strokeWidthThickest);
-    --size: 44px;
-  }
-
-  .progress,
-  .background,
-  .spinner,
-  .start,
-  .end,
-  .indicator {
-    position: absolute;
-    inset: 0;
-  }
-
-  .progress,
-  .spinner,
-  .indicator {
-    animation: none var(--duration) infinite var(--curveEasyEase);
-  }
-
-  .progress {
-    animation-timing-function: linear;
-    animation-name: spin-linear;
-  }
-
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  --duration: 1.5s;
+  --indicatorSize: var(--strokeWidthThicker);
+  --size: 32px;
+  height: var(--size);
+  width: var(--size);
+  contain: strict;
+  content-visibility: auto;
+}
+
+:host([size='tiny']) {
+  --indicatorSize: var(--strokeWidthThick);
+  --size: 20px;
+}
+:host([size='extra-small']) {
+  --indicatorSize: var(--strokeWidthThick);
+  --size: 24px;
+}
+:host([size='small']) {
+  --indicatorSize: var(--strokeWidthThick);
+  --size: 28px;
+}
+:host([size='large']) {
+  --indicatorSize: var(--strokeWidthThicker);
+  --size: 36px;
+}
+:host([size='extra-large']) {
+  --indicatorSize: var(--strokeWidthThicker);
+  --size: 40px;
+}
+:host([size='huge']) {
+  --indicatorSize: var(--strokeWidthThickest);
+  --size: 44px;
+}
+
+.progress,
+.background,
+.spinner,
+.start,
+.end,
+.indicator {
+  position: absolute;
+  inset: 0;
+}
+
+.progress,
+.spinner,
+.indicator {
+  animation: none var(--duration) infinite var(--curveEasyEase);
+}
+
+.progress {
+  animation-timing-function: linear;
+  animation-name: spin-linear;
+}
+
+.background {
+  border: var(--indicatorSize) solid var(--colorBrandStroke2);
+  border-radius: 50%;
+}
+
+:host([appearance='inverted']) .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: var(--colorBrandStroke1);
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: var(--indicatorSize) solid transparent;
+  border-block-start-color: currentcolor;
+  border-right-color: currentcolor;
+}
+
+:host([appearance='inverted']) .indicator {
+  color: var(--colorNeutralStrokeOnBrand2);
+}
+
+.start .indicator {
+  rotate: 135deg; /* Starts 9 o'clock */
+  inset: 0 -100% 0 0;
+  animation-name: spin-start;
+}
+
+.end .indicator {
+  rotate: 135deg; /* Ends at 3 o'clock */
+  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);
+  }
+}
+
+@media (forced-colors: active) {
   .background {
-    border: var(--indicatorSize) solid var(--colorBrandStroke2);
-    border-radius: 50%;
-  }
-
-  :host([appearance='inverted']) .background {
-    border-color: rgba(255, 255, 255, 0.2);
-  }
-
-  .spinner {
-    animation-name: spin-swing;
-  }
-
-  .start {
-    overflow: hidden;
-    right: 50%;
+    display: none;
   }
-
-  .end {
-    overflow: hidden;
-    left: 50%;
-  }
-
   .indicator {
-    color: var(--colorBrandStroke1);
-    box-sizing: border-box;
-    border-radius: 50%;
-    border: var(--indicatorSize) solid transparent;
-    border-block-start-color: currentcolor;
-    border-right-color: currentcolor;
-  }
-
-  :host([appearance='inverted']) .indicator {
-    color: var(--colorNeutralStrokeOnBrand2);
-  }
-
-  .start .indicator {
-    rotate: 135deg; /* Starts 9 o'clock */
-    inset: 0 -100% 0 0;
-    animation-name: spin-start;
-  }
-
-  .end .indicator {
-    rotate: 135deg; /* Ends at 3 o'clock */
-    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);
-    }
-  }
-
-  @media (forced-colors: active) {
-    .background {
-      display: none;
-    }
-    .indicator {
-      border-color: Canvas;
-      border-block-start-color: Highlight;
-      border-right-color: Highlight;
-    }
+    border-color: Canvas;
+    border-block-start-color: Highlight;
+    border-right-color: Highlight;
   }
+}

package/dist/esm/spinner/spinner.template.html

@@ -1,13 +1,18 @@
-<f-template name="fluent-spinner" shadowrootmode="open"><template>{{styles}}<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>
+<f-template name="fluent-spinner" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <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>
-    </div>
-  </slot></template></f-template>
+    </slot>
+  </template>
+</f-template>

package/dist/esm/switch/switch.styles.css

@@ -1,121 +1,125 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
 
-  :host([hidden]){display:none}:host{display:inline-flex}
+:host {
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  outline: none;
+  user-select: none;
+  contain: content;
+  padding: 0 var(--spacingHorizontalXXS);
+  width: 40px;
+  height: 20px;
+  background-color: var(--colorTransparentBackground);
+  border: 1px solid var(--colorNeutralStrokeAccessible);
+  border-radius: var(--borderRadiusCircular);
+}
 
-  :host {
-    box-sizing: border-box;
-    align-items: center;
-    flex-direction: row;
-    outline: none;
-    user-select: none;
-    contain: content;
-    padding: 0 var(--spacingHorizontalXXS);
-    width: 40px;
-    height: 20px;
-    background-color: var(--colorTransparentBackground);
-    border: 1px solid var(--colorNeutralStrokeAccessible);
-    border-radius: var(--borderRadiusCircular);
-  }
+:host(:enabled) {
+  cursor: pointer;
+}
 
-  :host(:enabled) {
-    cursor: pointer;
-  }
+:host(:hover) {
+  background: none;
+  border-color: var(--colorNeutralStrokeAccessibleHover);
+}
+:host(:active) {
+  border-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+:host(:disabled),
+:host([readonly]) {
+  border: 1px solid var(--colorNeutralStrokeDisabled);
+  background-color: none;
+  pointer: default;
+}
+:host(:state(checked)) {
+  background: var(--colorCompoundBrandBackground);
+  border-color: var(--colorCompoundBrandBackground);
+}
+:host(:state(checked):hover) {
+  background: var(--colorCompoundBrandBackgroundHover);
+  border-color: var(--colorCompoundBrandBackgroundHover);
+}
+:host(:state(checked):active) {
+  background: var(--colorCompoundBrandBackgroundPressed);
+  border-color: var(--colorCompoundBrandBackgroundPressed);
+}
+:host(:state(checked):disabled) {
+  background: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+.checked-indicator {
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  margin-inline-start: 0;
+  background-color: var(--colorNeutralForeground3);
+  transition-duration: var(--durationNormal);
+  transition-timing-function: var(--curveEasyEase);
+  transition-property: margin-inline-start;
+}
+:host(:state(checked)) .checked-indicator {
+  background-color: var(--colorNeutralForegroundInverted);
+  margin-inline-start: calc(100% - 14px);
+}
+:host(:state(checked):hover) .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedHover);
+}
+:host(:state(checked):active) .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedPressed);
+}
+:host(:hover) .checked-indicator {
+  background-color: var(--colorNeutralForeground3Hover);
+}
+:host(:active) .checked-indicator {
+  background-color: var(--colorNeutralForeground3Pressed);
+}
+:host(:disabled) .checked-indicator,
+:host([readonly]) .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
+:host(:state(checked):disabled) .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
 
-  :host(:hover) {
-    background: none;
-    border-color: var(--colorNeutralStrokeAccessibleHover);
-  }
-  :host(:active) {
-    border-color: var(--colorNeutralStrokeAccessiblePressed);
-  }
-  :host(:disabled),
-  :host([readonly]) {
-    border: 1px solid var(--colorNeutralStrokeDisabled);
-    background-color: none;
-    pointer: default;
-  }
-  :host(:state(checked)) {
-    background: var(--colorCompoundBrandBackground);
-    border-color: var(--colorCompoundBrandBackground);
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:not([slot='input']):focus-visible) {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  outline-offset: 1px;
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media (forced-colors: active) {
+  :host {
+    border-color: InactiveBorder;
   }
+  :host(:state(checked)),
+  :host(:state(checked):active),
   :host(:state(checked):hover) {
-    background: var(--colorCompoundBrandBackgroundHover);
-    border-color: var(--colorCompoundBrandBackgroundHover);
-  }
-  :host(:state(checked):active) {
-    background: var(--colorCompoundBrandBackgroundPressed);
-    border-color: var(--colorCompoundBrandBackgroundPressed);
-  }
-  :host(:state(checked):disabled) {
-    background: var(--colorNeutralBackgroundDisabled);
-    border-color: var(--colorNeutralStrokeDisabled);
-  }
-  .checked-indicator {
-    height: 14px;
-    width: 14px;
-    border-radius: 50%;
-    margin-inline-start: 0;
-    background-color: var(--colorNeutralForeground3);
-    transition-duration: var(--durationNormal);
-    transition-timing-function: var(--curveEasyEase);
-    transition-property: margin-inline-start;
+    background: Highlight;
+    border-color: Highlight;
   }
-  :host(:state(checked)) .checked-indicator {
-    background-color: var(--colorNeutralForegroundInverted);
-    margin-inline-start: calc(100% - 14px);
-  }
-  :host(:state(checked):hover) .checked-indicator {
-    background: var(--colorNeutralForegroundInvertedHover);
+  .checked-indicator,
+  :host(:hover) .checked-indicator,
+  :host(:active) .checked-indicator {
+    background-color: ActiveCaption;
   }
+  :host(:state(checked)) .checked-indicator,
+  :host(:state(checked):hover) .checked-indicator,
   :host(:state(checked):active) .checked-indicator {
-    background: var(--colorNeutralForegroundInvertedPressed);
-  }
-  :host(:hover) .checked-indicator {
-    background-color: var(--colorNeutralForeground3Hover);
-  }
-  :host(:active) .checked-indicator {
-    background-color: var(--colorNeutralForeground3Pressed);
+    background-color: ButtonFace;
   }
   :host(:disabled) .checked-indicator,
-  :host([readonly]) .checked-indicator {
-    background: var(--colorNeutralForegroundDisabled);
-  }
   :host(:state(checked):disabled) .checked-indicator {
-    background: var(--colorNeutralForegroundDisabled);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  :host(:not([slot='input']):focus-visible) {
-    border-color: var(--colorTransparentStroke);
-    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
-    outline-offset: 1px;
-    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      border-color: InactiveBorder;
-    }
-    :host(:state(checked)),
-    :host(:state(checked):active),
-    :host(:state(checked):hover) {
-      background: Highlight;
-      border-color: Highlight;
-    }
-    .checked-indicator,
-    :host(:hover) .checked-indicator,
-    :host(:active) .checked-indicator {
-      background-color: ActiveCaption;
-    }
-    :host(:state(checked)) .checked-indicator,
-    :host(:state(checked):hover) .checked-indicator,
-    :host(:state(checked):active) .checked-indicator {
-      background-color: ButtonFace;
-    }
-    :host(:disabled) .checked-indicator,
-    :host(:state(checked):disabled) .checked-indicator {
-      background-color: GrayText;
-    }
+    background-color: GrayText;
   }
+}

package/dist/esm/switch/switch.template.html

@@ -1,10 +1,11 @@
 <f-template name="fluent-switch" shadowrootmode="open">
-<template
-      @click="{clickHandler($e)}"
-      @input="{inputHandler($e)}"
-      @keydown="{keydownHandler($e)}"
-      @keyup="{keyupHandler($e)}"
-    >{{styles}}
-      <slot name="switch"><span class="checked-indicator" part="checked-indicator"></span></slot>
-    </template>
+  <template
+    @click="{clickHandler($e)}"
+    @input="{inputHandler($e)}"
+    @keydown="{keydownHandler($e)}"
+    @keyup="{keyupHandler($e)}"
+  >
+    {{styles}}
+    <slot name="switch"><span class="checked-indicator" part="checked-indicator"></span></slot>
+  </template>
 </f-template>

package/dist/esm/tab/tab.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { attr, css, FASTElement } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 /**
  * Tab extends the FASTTab and is a child of the TabList
  *
@@ -34,6 +35,7 @@ export class Tab extends FASTElement {
       }
     `;
         this.$fastController.addStyles(this.styles);
+        maybeSetAutoFocus(this);
     }
     setDisabledSideEffect(disabled) {
         if (disabled) {

package/dist/esm/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQvD;;;;GAIG;AACH,MAAM,OAAO,GAAI,SAAQ,WAAW;IASxB,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAgBD;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAKjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAEpB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;;0BAEK,IAAI,CAAC,WAAqB;;KAE/C,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAEO,qBAAqB,CAAC,QAAiB;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;CACF;AArDQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACA;AAyD5B,WAAW,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAQ1D;;;;GAIG;AACH,MAAM,OAAO,GAAI,SAAQ,WAAW;IASxB,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAgBD;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAKjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAEpB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;;0BAEK,IAAI,CAAC,WAAqB;;KAE/C,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE5C,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEO,qBAAqB,CAAC,QAAiB;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;CACF;AAvDQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACA;AA2D5B,WAAW,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC"}