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

package/dist/esm/toggle-button/toggle-button.template.html

@@ -1,12 +1,10 @@
 <f-template name="fluent-toggle-button" shadowrootmode="open">
-<template
-      @click="{clickHandler($e)}"
-      @keypress="{keypressHandler($e)}"
-    >{{styles}}
-       <slot name="start" f-ref="{start}"></slot> 
-      <span class="content" part="content">
-        <slot f-slotted="{defaultSlottedContent}"></slot>
-      </span>
-       <slot name="end" f-ref="{end}"></slot> 
-    </template>
+  <template @click="{clickHandler($e)}" @keypress="{keypressHandler($e)}">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="content" part="content">
+      <slot f-slotted="{defaultSlottedContent}"></slot>
+    </span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>

package/dist/esm/tooltip/tooltip.styles.css

@@ -1,86 +1,90 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
 
-  :host([hidden]){display:none}:host{display:inline-flex}
+:host(:not(:popover-open)) {
+  display: none;
+}
 
-  :host(:not(:popover-open)) {
-    display: none;
-  }
+:host {
+  --position-area: block-start;
+  --position-try-options: flip-block;
+  --block-offset: var(--spacingVerticalXS);
+  --inline-offset: var(--spacingHorizontalXS);
+  background: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  border: 1px solid var(--colorTransparentStroke);
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  display: inline-flex;
+  filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  inset: unset;
+  line-height: var(--lineHeightBase200);
+  margin: unset; /* Remove browser default for [popover] */
+  max-width: 240px;
+  overflow: visible;
+  padding: 4px var(--spacingHorizontalMNudge) 6px;
+  position: absolute;
+  position-area: var(--position-area);
+  position-try-fallbacks: var(--position-try-options);
+  width: auto;
+  z-index: 1;
+}
 
+@supports (inset-area: block-start) {
   :host {
-    --position-area: block-start;
-    --position-try-options: flip-block;
-    --block-offset: var(--spacingVerticalXS);
-    --inline-offset: var(--spacingHorizontalXS);
-    background: var(--colorNeutralBackground1);
-    border-radius: var(--borderRadiusMedium);
-    border: 1px solid var(--colorTransparentStroke);
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    display: inline-flex;
-    filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    inset: unset;
-    line-height: var(--lineHeightBase200);
-    margin: unset; /* Remove browser default for [popover] */
-    max-width: 240px;
-    overflow: visible;
-    padding: 4px var(--spacingHorizontalMNudge) 6px;
-    position: absolute;
-    position-area: var(--position-area);
+    inset-area: var(--position-area);
     position-try-fallbacks: var(--position-try-options);
-    width: auto;
-    z-index: 1;
   }
+}
 
-  @supports (inset-area: block-start) {
-    :host {
-      inset-area: var(--position-area);
-      position-try-fallbacks: var(--position-try-options);
-    }
-  }
+:host(:is([positioning^='above'], [positioning^='below'], :not([positioning]))) {
+  margin-block: var(--block-offset);
+}
 
-  :host(:is([positioning^='above'], [positioning^='below'], :not([positioning]))) {
-    margin-block: var(--block-offset);
-  }
-
-  :host(:is([positioning^='before'], [positioning^='after'])) {
-    margin-inline: var(--inline-offset);
-    --position-try-options: flip-inline;
-  }
+:host(:is([positioning^='before'], [positioning^='after'])) {
+  margin-inline: var(--inline-offset);
+  --position-try-options: flip-inline;
+}
 
-  :host([positioning='above-start']) {
-    --position-area: block-start span-inline-end;
-  }
-  :host([positioning='above']) {
-    --position-area: block-start;
-  }
-  :host([positioning='above-end']) {
-    --position-area: block-start span-inline-start;
-  }
-  :host([positioning='below-start']) {
-    --position-area: block-end span-inline-end;
-  }
-  :host([positioning='below']) {
-    --position-area: block-end;
-  }
-  :host([positioning='below-end']) {
-    --position-area: block-end span-inline-start;
-  }
-  :host([positioning='before-top']) {
-    --position-area: inline-start span-block-end;
-  }
-  :host([positioning='before']) {
-    --position-area: inline-start;
-  }
-  :host([positioning='before-bottom']) {
-    --position-area: inline-start span-block-start;
-  }
-  :host([positioning='after-top']) {
-    --position-area: inline-end span-block-end;
-  }
-  :host([positioning='after']) {
-    --position-area: inline-end;
-  }
-  :host([positioning='after-bottom']) {
-    --position-area: inline-end span-block-start;
-  }
+:host([positioning='above-start']) {
+  --position-area: block-start span-inline-end;
+}
+:host([positioning='above']) {
+  --position-area: block-start;
+}
+:host([positioning='above-end']) {
+  --position-area: block-start span-inline-start;
+}
+:host([positioning='below-start']) {
+  --position-area: block-end span-inline-end;
+}
+:host([positioning='below']) {
+  --position-area: block-end;
+}
+:host([positioning='below-end']) {
+  --position-area: block-end span-inline-start;
+}
+:host([positioning='before-top']) {
+  --position-area: inline-start span-block-end;
+}
+:host([positioning='before']) {
+  --position-area: inline-start;
+}
+:host([positioning='before-bottom']) {
+  --position-area: inline-start span-block-start;
+}
+:host([positioning='after-top']) {
+  --position-area: inline-end span-block-end;
+}
+:host([positioning='after']) {
+  --position-area: inline-end;
+}
+:host([positioning='after-bottom']) {
+  --position-area: inline-end span-block-start;
+}

package/dist/esm/tooltip/tooltip.template.html

@@ -1 +1,6 @@
-<f-template name="fluent-tooltip" shadowrootmode="open"><template>{{styles}}<slot></slot></template></f-template>
+<f-template name="fluent-tooltip" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

package/dist/esm/tree/tree.styles.css

@@ -1,6 +1,10 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
 
-  :host([hidden]){display:none}:host{display:block}
-
-  :host {
-    outline: none;
-  }
+:host {
+  outline: none;
+}

package/dist/esm/tree/tree.template.html

@@ -1,12 +1,13 @@
 <f-template name="fluent-tree" shadowrootmode="open">
-<template
+  <template
     tabindex="0"
     focusgroup="menu inline block nowrap nomemory"
     @click="{clickHandler($e)}"
     @keydown="{keydownHandler($e)}"
     @change="{changeHandler($e)}"
     @toggle="{itemToggleHandler()}"
-  >{{styles}}
+  >
+    {{styles}}
     <slot f-ref="{defaultSlot}" @slotchange="{handleDefaultSlotChange()}"></slot>
   </template>
 </f-template>

package/dist/esm/tree-item/tree-item.base.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { isTreeItem } from './tree-item.options.js';
 /**
  * Base class for Tree Item Custom HTML Element.
@@ -57,6 +58,7 @@ export class BaseTreeItem extends FASTElement {
         if (isTreeItem(this.parentElement)) {
             this.slot ||= 'item';
         }
+        maybeSetAutoFocus(this);
     }
     /**
      * Handles changes to the expanded attribute

package/dist/esm/tree-item/tree-item.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}

package/dist/esm/tree-item/tree-item.styles.css

@@ -1,157 +1,161 @@
-
-  :host([hidden]){display:none}:host{display:block}
-
-  :host {
-    outline: none;
-    font-size: var(--fontSizeBase300);
-    line-height: var(--lineHeightBase300);
-  }
-
-  :host(:focus-visible) .positioning-region {
-    box-shadow: var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalXXS)
-      var(--colorStrokeFocus2) inset;
-  }
-
-  /**
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  outline: none;
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+:host(:focus-visible) .positioning-region {
+  box-shadow: var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalXXS)
+    var(--colorStrokeFocus2) inset;
+}
+
+/**
    * Default variants:
    * Size - medium
    * Appearance - subtle
    */
-  .positioning-region {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    height: var(--spacingVerticalXXXL);
-    padding-inline-start: calc(var(--indent) * var(--spacingHorizontalXXL));
-    padding-inline-end: var(--spacingVerticalS);
-    border-radius: var(--borderRadiusMedium);
-    background-color: var(--colorSubtleBackground);
-    color: var(--colorNeutralForeground2);
-    gap: var(--spacingHorizontalXS);
-  }
-
-  @media (prefers-contrast: more) {
-    :host(:focus-visible) .positioning-region {
-      outline: 1px solid var(--colorStrokeFocus2);
-    }
-  }
-
-  .content {
-    display: flex;
-    align-items: center;
-    gap: var(--spacingHorizontalXS);
-  }
-
-  .chevron {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    justify-content: center;
-    width: var(--spacingHorizontalXXL);
-    height: var(--spacingVerticalXXL);
-    transition: transform var(--durationFaster) var(--curveEasyEaseMax);
-    transform: rotate(0deg);
-  }
-
-  .chevron:dir(rtl) {
-    transform: rotate(180deg);
-  }
-
-  .chevron svg {
-    inline-size: 12px;
-    block-size: 12px;
-  }
-
-  .aside {
-    display: flex;
-    align-items: center;
-  }
-
-  .positioning-region:hover {
-    background-color: var(--colorSubtleBackgroundHover);
-    color: var(--colorNeutralForeground2Hover);
-  }
-
-  .positioning-region:active {
-    background-color: var(--colorSubtleBackgroundPressed);
-    color: var(--colorNeutralForeground2Pressed);
-  }
-
-  ::slotted([slot='start']),
-  ::slotted([slot='end']),
-  ::slotted(:not([slot])) {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  ::slotted([slot='start']) {
-    flex-shrink: 0;
-  }
-
-  ::slotted(:not([slot])) {
-    padding-inline: var(--spacingHorizontalXXS);
-  }
-
-  .items {
-    display: none;
-  }
-
-  :host([expanded]) .items {
-    display: block;
-  }
-
-  :host([empty]) .chevron,
-  :host([empty]) .items {
-    visibility: hidden;
-  }
-
-  :host([selected]) .positioning-region {
-    background-color: var(--colorSubtleBackgroundSelected);
-    color: var(--colorNeutralForeground2Selected);
-  }
-
-  :host([selected]) .content,
-  :host([selected]) .chevron {
-    color: var(--colorNeutralForeground3Selected);
-  }
-
-  :host([size='small']) .positioning-region {
-    height: var(--spacingVerticalXXL);
-    padding-inline-start: calc(var(--indent) * var(--spacingHorizontalM));
-  }
-
-  :host([appearance='subtle-alpha']) .positioning-region:hover {
-    background-color: var(--colorSubtleBackgroundLightAlphaHover);
-  }
-
-  :host([appearance='subtle-alpha']) .positioning-region:active {
-    background-color: var(--colorSubtleBackgroundLightAlphaPressed);
-  }
-
-  :host([appearance='subtle-alpha'][selected]) .positioning-region {
-    background-color: var(--colorSubtleBackgroundLightAlphaSelected);
-    color: var(--colorNeutralForeground2Selected);
-  }
-
-  :host([appearance='transparent']) .positioning-region {
-    background-color: var(--colorTransparentBackground);
-  }
-
-  :host([appearance='transparent']) .positioning-region:hover {
-    background-color: var(--colorTransparentBackgroundHover);
-  }
-
-  :host([appearance='transparent']) .positioning-region:active {
-    background-color: var(--colorTransparentBackgroundPressed);
-  }
-
-  :host([appearance='transparent'][selected]) .positioning-region {
-    background-color: var(--colorTransparentBackgroundSelected);
-    color: var(--colorNeutralForeground2Selected);
-  }
-
-  :host([expanded]) .chevron {
-    transform: rotate(90deg);
-  }
+.positioning-region {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  height: var(--spacingVerticalXXXL);
+  padding-inline-start: calc(var(--indent) * var(--spacingHorizontalXXL));
+  padding-inline-end: var(--spacingVerticalS);
+  border-radius: var(--borderRadiusMedium);
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  gap: var(--spacingHorizontalXS);
+}
+
+@media (prefers-contrast: more) {
+  :host(:focus-visible) .positioning-region {
+    outline: 1px solid var(--colorStrokeFocus2);
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalXS);
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--spacingHorizontalXXL);
+  height: var(--spacingVerticalXXL);
+  transition: transform var(--durationFaster) var(--curveEasyEaseMax);
+  transform: rotate(0deg);
+}
+
+.chevron:dir(rtl) {
+  transform: rotate(180deg);
+}
+
+.chevron svg {
+  inline-size: 12px;
+  block-size: 12px;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+}
+
+.positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+.positioning-region:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+::slotted([slot='start']),
+::slotted([slot='end']),
+::slotted(:not([slot])) {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+::slotted([slot='start']) {
+  flex-shrink: 0;
+}
+
+::slotted(:not([slot])) {
+  padding-inline: var(--spacingHorizontalXXS);
+}
+
+.items {
+  display: none;
+}
+
+:host([expanded]) .items {
+  display: block;
+}
+
+:host([empty]) .chevron,
+:host([empty]) .items {
+  visibility: hidden;
+}
+
+:host([selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([selected]) .content,
+:host([selected]) .chevron {
+  color: var(--colorNeutralForeground3Selected);
+}
+
+:host([size='small']) .positioning-region {
+  height: var(--spacingVerticalXXL);
+  padding-inline-start: calc(var(--indent) * var(--spacingHorizontalM));
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundLightAlphaHover);
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:active {
+  background-color: var(--colorSubtleBackgroundLightAlphaPressed);
+}
+
+:host([appearance='subtle-alpha'][selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundLightAlphaSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([appearance='transparent']) .positioning-region {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='transparent']) .positioning-region:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='transparent']) .positioning-region:active {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='transparent'][selected]) .positioning-region {
+  background-color: var(--colorTransparentBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([expanded]) .chevron {
+  transform: rotate(90deg);
+}

package/dist/esm/tree-item/tree-item.template.html

@@ -1,15 +1,16 @@
 <f-template name="fluent-tree-item" shadowrootmode="open">
-<template tabindex="0" ?focusgroupstart="{{selected}}">{{styles}}
+  <template tabindex="0" ?focusgroupstart="{{selected}}">
+    {{styles}}
     <div class="positioning-region" part="positioning-region">
       <div class="content" part="content">
         <span class="chevron" part="chevron" aria-hidden="true">
           <slot name="chevron">
-  <svg viewBox="0 0 12 12" fill="currentColor">
-    <path
-      d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"
-    ></path>
-  </svg>
-</slot>
+            <svg viewBox="0 0 12 12" fill="currentColor">
+              <path
+                d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"
+              ></path>
+            </svg>
+          </slot>
         </span>
         <slot name="start"></slot>
         <slot></slot>

package/dist/esm/utils/autofocus.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Artificial sets the focus to the given element, if no other element in the
+ * document is currently focused and the given element meets the following
+ * conditions:
+ *
+ * - is connected to DOM
+ * - has `autofocus` attribute
+ * - is visible
+ *
+ * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
+ */
+export declare function maybeSetAutoFocus(element: HTMLElement): void;

package/dist/esm/utils/autofocus.js

@@ -0,0 +1,25 @@
+import { Updates } from '@microsoft/fast-element';
+/**
+ * Artificial sets the focus to the given element, if no other element in the
+ * document is currently focused and the given element meets the following
+ * conditions:
+ *
+ * - is connected to DOM
+ * - has `autofocus` attribute
+ * - is visible
+ *
+ * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
+ */
+export function maybeSetAutoFocus(element) {
+    const doc = element.ownerDocument;
+    if (element?.isConnected &&
+        element?.hasAttribute('autofocus') &&
+        // Note: opacity=0 is considered visible based on the native `autofocus` implementation
+        element?.checkVisibility?.({ contentVisibilityAuto: true, visibilityProperty: true }) &&
+        [null, element, doc.body, doc.documentElement].includes(doc.activeElement)) {
+        Updates.enqueue(() => {
+            element.focus();
+        });
+    }
+}
+//# sourceMappingURL=autofocus.js.map

package/dist/esm/utils/autofocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofocus.js","sourceRoot":"","sources":["../../../src/utils/autofocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAoB;IACpD,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;IAClC,IACE,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC;QAClC,uFAAuF;QACvF,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QACrF,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAmC,CAAC,EAChG,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC"}