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

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 08 Jun 2026 04:10:10 GMT and should not be manually modified.
+This log was last generated on Wed, 10 Jun 2026 04:08:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.25)
+
+Wed, 10 Jun 2026 04:08:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.24..@fluentui/web-components_v3.0.0-rc.25)
+
+### Changes
+
+- avoid dialog from focusing on non-active tab upon showing ([PR #36278](https://github.com/microsoft/fluentui/pull/36278) by machi@microsoft.com)
+
 ## [3.0.0-rc.24](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.24)
 
-Mon, 08 Jun 2026 04:10:10 GMT 
+Mon, 08 Jun 2026 04:10:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.23..@fluentui/web-components_v3.0.0-rc.24)
 
 ### Changes

package/custom-elements.json

@@ -28186,7 +28186,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/accordion-item.definition-async.ts",
+      "path": "src/avatar/avatar.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28195,7 +28195,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-accordion-item element.",
+          "description": "The async definition configuration for the fluent-avatar element.",
           "privacy": "public"
         }
       ],
@@ -28205,14 +28205,14 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/accordion-item/accordion-item.definition-async.ts"
+            "module": "src/avatar/avatar.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/define-async.ts",
+      "path": "src/avatar/define-async.ts",
       "declarations": [],
       "exports": []
     },
@@ -28250,7 +28250,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/avatar.definition-async.ts",
+      "path": "src/accordion-item/accordion-item.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28259,7 +28259,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-avatar element.",
+          "description": "The async definition configuration for the fluent-accordion-item element.",
           "privacy": "public"
         }
       ],
@@ -28269,20 +28269,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/avatar/avatar.definition-async.ts"
+            "module": "src/accordion-item/accordion-item.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/define-async.ts",
+      "path": "src/accordion-item/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/badge.definition-async.ts",
+      "path": "src/button/button.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28291,7 +28291,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-badge element.",
+          "description": "The async definition configuration for the fluent-button element.",
           "privacy": "public"
         }
       ],
@@ -28301,20 +28301,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/badge/badge.definition-async.ts"
+            "module": "src/button/button.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/define-async.ts",
+      "path": "src/button/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/button.definition-async.ts",
+      "path": "src/badge/badge.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28323,7 +28323,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-button element.",
+          "description": "The async definition configuration for the fluent-badge element.",
           "privacy": "public"
         }
       ],
@@ -28333,14 +28333,14 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/button/button.definition-async.ts"
+            "module": "src/badge/badge.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/define-async.ts",
+      "path": "src/badge/define-async.ts",
       "declarations": [],
       "exports": []
     },

package/dist/esm/dialog/dialog.template.d.ts

@@ -2,6 +2,11 @@ import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Dialog } from './dialog.js';
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export declare const template: ElementViewTemplate<Dialog>;

package/dist/esm/dialog/dialog.template.html

@@ -11,6 +11,7 @@
     @cancel="{hide()}"
     f-ref="{dialog}"
   >
+    <div tabindex="-1"></div>
     <slot></slot>
   </dialog></template>
 </f-template>

package/dist/esm/dialog/dialog.template.js

@@ -1,6 +1,11 @@
 import { html, ref } from '@microsoft/fast-element';
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export const template = html `
@@ -16,6 +21,7 @@ export const template = html `
     @cancel="${x => x.hide()}"
     ${ref('dialog')}
   >
+    <div tabindex="-1"></div>
     <slot></slot>
   </dialog>
 `;

package/dist/esm/dialog/dialog.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
+{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;;CAKlB,CAAC"}

package/dist/web-components-all.js

@@ -7386,7 +7386,7 @@ __decorateClass$B([
   volatile
 ], Dialog.prototype, "dialogRole", 1);
 
-const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><slot></slot></dialog>`;
+const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><div tabindex=-1></div><slot></slot></dialog>`;
 
 const styles$w = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;