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

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"}

package/dist/web-components-all.js

@@ -6266,6 +6266,16 @@ const definition$B = Badge.compose({
 
 definition$B.define(FluentDesignSystem.registry);
 
+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();
+    });
+  }
+}
+
 var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$H = (decorators, target, key, kind) => {
@@ -6358,6 +6368,7 @@ class BaseButton extends FASTElement {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
     this.setTabIndex();
+    maybeSetAutoFocus(this);
   }
   /**
    * This fallback creates a new slot, then creates a submit button to mirror the custom element's
@@ -6498,9 +6509,6 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$H([
-  attr({ mode: "boolean" })
-], BaseButton.prototype, "autofocus", 2);
 __decorateClass$H([
   observable
 ], BaseButton.prototype, "defaultSlottedContent", 2);
@@ -6824,6 +6832,7 @@ class BaseCheckbox extends FASTElement {
     this.disabled = !!this.disabledAttribute;
     this.setAriaChecked();
     this.setValidity();
+    maybeSetAutoFocus(this);
   }
   /**
    * Updates the form value when a user changes the `checked` state.
@@ -6950,9 +6959,6 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$F([
-  attr({ mode: "boolean" })
-], BaseCheckbox.prototype, "autofocus", 2);
 __decorateClass$F([
   observable
 ], BaseCheckbox.prototype, "disabled", 2);
@@ -7420,7 +7426,7 @@ class DialogBody extends FASTElement {
 
 const template$v = html`<template><div class=title part=title><slot name=title></slot><slot name=title-action></slot><slot name=close @click=${(x, c) => x.clickHandler(c.event)}></slot></div><div class=content part=content><slot></slot></div><div class=actions part=actions><slot name=action></slot></div></template>`;
 
-const styles$v = css`${display("grid")} :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body/inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
+const styles$v = css`${display("grid")} :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body/inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}}`;
 
 const definition$v = DialogBody.compose({
   name: tagName$v,
@@ -7729,7 +7735,7 @@ __decorateClass$y([
   volatile
 ], Drawer.prototype, "dialogRole", 1);
 
-const styles$t = css`${display("block")} :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
+const styles$t = css`${display("block")} :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{background:${colorNeutralBackground1};border-radius:0;border:${strokeWidthThin} solid ${colorTransparentStroke};border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});box-shadow:${shadow64};box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};height:100%;line-height:${lineHeightBase300};margin-inline-end:auto;margin-inline-start:0;max-height:100vh;max-width:calc(100vw - ${spacingHorizontalXXL});outline:none;padding:0;bottom:0;top:0;width:var(--drawer-width,592px);z-index:var(--drawer-elevation,1000)}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
 
 function drawerTemplate() {
   return html`<dialog class=dialog part=dialog aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} aria-modal=${(x) => x.dialogModal} role=${(x) => x.dialogRole} size=${(x) => x.size} position=${(x) => x.position} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.cancelHandler()} ${ref("dialog")}><slot></slot></dialog>`;
@@ -8383,7 +8389,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this._insertingControl = false;
   }
   /**
-   * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+   * Handles printable character input by moving {@link Dropdown#activeIndex} to the next option whose label matches the
    * accumulated search string. When the string is a single character (or the same character repeated), matching
    * options are cycled through; otherwise the string is treated as a prefix match.
    *
@@ -8586,6 +8592,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     Updates.enqueue(() => {
       this.insertControl();
     });
+    maybeSetAutoFocus(this);
   }
   disconnectedCallback() {
     _BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
@@ -8731,7 +8738,7 @@ __decorateClass$w([
   attr
 ], Dropdown.prototype, "size", 2);
 
-const styles$r = css`${display("inline-flex")} :host{box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
+const styles$r = css`${display("inline-flex")} :host{box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}}`;
 
 const definition$r = Dropdown.compose({
   name: tagName$r,
@@ -9605,6 +9612,7 @@ class MenuItem extends FASTElement {
     super.connectedCallback();
     this.elementInternals.role = this.role ?? MenuItemRole.menuitem;
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
+    maybeSetAutoFocus(this);
   }
 }
 __decorateClass$p([
@@ -12339,6 +12347,7 @@ class Slider extends FASTElement {
       notifier.subscribe(this, "min");
       notifier.subscribe(this, "step");
     });
+    maybeSetAutoFocus(this);
   }
   /**
    * @internal
@@ -12682,6 +12691,7 @@ class Tab extends FASTElement {
     }
     this.styles = css`:host{--textContent:'${this.textContent}'}`;
     this.$fastController.addStyles(this.styles);
+    maybeSetAutoFocus(this);
   }
   setDisabledSideEffect(disabled) {
     if (disabled) {
@@ -13183,6 +13193,7 @@ class BaseTextArea extends FASTElement {
       this.setValidity();
       this.preConnectControlEl = null;
       this.maybeCreateAutoSizerEl();
+      maybeSetAutoFocus(this);
     });
   }
   /**
@@ -13727,21 +13738,9 @@ class BaseTextInput extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
     this.setFormValue(this.value);
     this.setValidity();
-  }
-  /**
-   * Focuses the inner control when the component is focused.
-   *
-   * @param e - the event object
-   * @public
-   */
-  focusinHandler(e) {
-    if (e.target === this) {
-      this.control?.focus();
-    }
-    return true;
+    maybeSetAutoFocus(this);
   }
   /**
    * Resets the value to its initial value when the form is reset.
@@ -13875,9 +13874,6 @@ BaseTextInput.formAssociated = true;
 __decorateClass$8([
   attr
 ], BaseTextInput.prototype, "autocomplete", 2);
-__decorateClass$8([
-  attr({ mode: "boolean" })
-], BaseTextInput.prototype, "autofocus", 2);
 __decorateClass$8([
   attr({ attribute: "current-value" })
 ], BaseTextInput.prototype, "currentValue", 2);
@@ -13967,7 +13963,7 @@ applyMixins(TextInput, StartEnd);
 const styles$5 = css`${display("block")} :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 function textInputTemplate(options = {}) {
-  return html`<template @focusin=${(x, c) => x.focusinHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><label part=label for=control class=label ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class=root part=root>${startSlotTemplate(options)} <input class=control part=control id=control @change=${(x, c) => x.changeHandler(c.event)} @input=${(x, c) => x.inputHandler(c.event)} ?autofocus=${(x) => x.autofocus} autocomplete=${(x) => x.autocomplete} ?disabled=${(x) => x.disabled} list=${(x) => x.list} maxlength=${(x) => x.maxlength} minlength=${(x) => x.minlength} ?multiple=${(x) => x.multiple} name=${(x) => x.name} pattern=${(x) => x.pattern} placeholder=${(x) => x.placeholder} ?readonly=${(x) => x.readOnly} ?required=${(x) => x.required} size=${(x) => x.size} spellcheck=${(x) => x.spellcheck} type=${(x) => x.type} value=${(x) => x.value} ${ref("control")}> ${endSlotTemplate(options)}</div></template>`;
+  return html`<template @keydown=${(x, c) => x.keydownHandler(c.event)}><label part=label for=control class=label ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class=root part=root>${startSlotTemplate(options)} <input class=control part=control id=control @change=${(x, c) => x.changeHandler(c.event)} @input=${(x, c) => x.inputHandler(c.event)} autocomplete=${(x) => x.autocomplete} ?disabled=${(x) => x.disabled} list=${(x) => x.list} maxlength=${(x) => x.maxlength} minlength=${(x) => x.minlength} ?multiple=${(x) => x.multiple} name=${(x) => x.name} pattern=${(x) => x.pattern} placeholder=${(x) => x.placeholder} ?readonly=${(x) => x.readOnly} ?required=${(x) => x.required} size=${(x) => x.size} spellcheck=${(x) => x.spellcheck} type=${(x) => x.type} value=${(x) => x.value} ${ref("control")}> ${endSlotTemplate(options)}</div></template>`;
 }
 const template$5 = textInputTemplate();
 
@@ -14701,6 +14697,7 @@ class BaseTreeItem extends FASTElement {
     if (isTreeItem(this.parentElement)) {
       this.slot || (this.slot = "item");
     }
+    maybeSetAutoFocus(this);
   }
   /**
    * Handles changes to the expanded attribute