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

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 11 Jun 2026 04:07:21 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Jun 2026 04:07:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.27)
+
+Fri, 12 Jun 2026 04:07:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.26..@fluentui/web-components_v3.0.0-rc.27)
+
+### Changes
+
+- feat(web-components): generate SSR templates and stylesheets into src/ and copy into dist during compile ([PR #36259](https://github.com/microsoft/fluentui/pull/36259) by 863023+radium-v@users.noreply.github.com)
+- fix: make sure autofocus works on all focusable custom elements during initial page load ([PR #36296](https://github.com/microsoft/fluentui/pull/36296) by machi@microsoft.com)
+
 ## [3.0.0-rc.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.26)
 
-Thu, 11 Jun 2026 04:07:21 GMT 
+Thu, 11 Jun 2026 04:07:32 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.25..@fluentui/web-components_v3.0.0-rc.26)
 
 ### Changes

package/README.md

@@ -88,6 +88,32 @@ import CEM from '@fluentui/custom-elements.json' with { type: 'json' };
 
 To start the component development environment, run `yarn start`.
 
+### SSR templates and stylesheets
+
+Each component ships a declarative-shadow-DOM template (`*.template.html`) and an extracted stylesheet (`*.styles.css`) next to its `*.template.ts` and `*.styles.ts` sources. These files are generated from the TypeScript sources and committed to the repo so the DSD output is visible without running a build.
+
+After editing a `*.template.ts` or `*.styles.ts`, regenerate the matching HTML and CSS with:
+
+```sh
+yarn generate:ssr
+```
+
+To check that the committed files match what the generators would produce (for example, before opening a PR), run:
+
+```sh
+yarn check:ssr
+```
+
+`yarn compile` does not regenerate these files; it copies them from `src/` into `dist/esm/` alongside the compiled JS.
+
+Use the `yarn check:ssr` summary to avoid clobbering intentional SSR-only edits:
+
+- `stale`: the committed source and generated file are unchanged, but regeneration disagrees with disk. Rebase if needed, then run `yarn generate:ssr`, review the generated diff, and commit it with the related source or generator change.
+- `hand-edited`: the generated HTML/CSS changed without a matching `*.template.ts` or `*.styles.ts` change. Do not overwrite it blindly; either move the intended delta into the TypeScript source or generator before regenerating, or reapply and call out the intentional SSR-only edit in the PR.
+- `conflicts`: both the TypeScript source and generated file changed, and regeneration still disagrees with disk. Treat this like a merge conflict: inspect the current generated-file diff, regenerate, then preserve only the intentional SSR delta before committing.
+
+Keep generated-file updates scoped to the component you changed. If `yarn check:ssr` reports unrelated stale files, leave them out of your PR and coordinate a dedicated cleanup.
+
 ### Known issue with Storybook site hot-reloading during development
 
 Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:

package/custom-elements.json

@@ -9401,6 +9401,35 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/autofocus.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "maybeSetAutoFocus",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Artificial sets the focus to the given element, if no other element in the\ndocument is currently focused and the given element meets the following\nconditions:\n\n- is connected to DOM\n- has `autofocus` attribute\n- is visible\n\nFor more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "maybeSetAutoFocus",
+          "declaration": {
+            "name": "maybeSetAutoFocus",
+            "module": "src/utils/autofocus.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "./dist/esm/button/button.base.js",
@@ -25498,26 +25527,6 @@
               ],
               "description": "Clicks the inner control when the component is clicked."
             },
-            {
-              "kind": "method",
-              "name": "focusinHandler",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "boolean | void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "FocusEvent"
-                  },
-                  "description": "the event object"
-                }
-              ],
-              "description": "Focuses the inner control when the component is focused."
-            },
             {
               "kind": "method",
               "name": "select",
@@ -26140,30 +26149,6 @@
                 "module": "src/text-input/text-input.base.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "focusinHandler",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "boolean | void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "FocusEvent"
-                  },
-                  "description": "the event object"
-                }
-              ],
-              "description": "Focuses the inner control when the component is focused.",
-              "inheritedFrom": {
-                "name": "BaseTextInput",
-                "module": "src/text-input/text-input.base.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "select",
@@ -28536,7 +28521,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor-button/anchor-button.definition-async.ts",
+      "path": "src/accordion-item/accordion-item.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28545,7 +28530,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-anchor-button element.",
+          "description": "The async definition configuration for the fluent-accordion-item element.",
           "privacy": "public"
         }
       ],
@@ -28555,20 +28540,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/anchor-button/anchor-button.definition-async.ts"
+            "module": "src/accordion-item/accordion-item.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor-button/define-async.ts",
+      "path": "src/accordion-item/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/avatar.definition-async.ts",
+      "path": "src/anchor-button/anchor-button.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28577,7 +28562,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-anchor-button element.",
           "privacy": "public"
         }
       ],
@@ -28587,20 +28572,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/avatar/avatar.definition-async.ts"
+            "module": "src/anchor-button/anchor-button.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/define-async.ts",
+      "path": "src/anchor-button/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/badge.definition-async.ts",
+      "path": "src/avatar/avatar.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28609,7 +28594,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-avatar element.",
           "privacy": "public"
         }
       ],
@@ -28619,20 +28604,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/badge/badge.definition-async.ts"
+            "module": "src/avatar/avatar.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/define-async.ts",
+      "path": "src/avatar/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",
@@ -28641,7 +28626,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"
         }
       ],
@@ -28651,20 +28636,20 @@
           "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": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/accordion-item.definition-async.ts",
+      "path": "src/button/button.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28673,7 +28658,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-button element.",
           "privacy": "public"
         }
       ],
@@ -28683,14 +28668,14 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/accordion-item/accordion-item.definition-async.ts"
+            "module": "src/button/button.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/define-async.ts",
+      "path": "src/button/define-async.ts",
       "declarations": [],
       "exports": []
     },

package/dist/esm/accordion/accordion.styles.css

@@ -1,8 +1,12 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: flex;
+}
 
-  :host([hidden]){display:none}:host{display:flex}
-
-  :host {
-    flex-direction: column;
-    width: 100%;
-    contain: content;
-  }
+:host {
+  flex-direction: column;
+  width: 100%;
+  contain: content;
+}

package/dist/esm/accordion/accordion.template.html

@@ -1,5 +1,6 @@
 <f-template name="fluent-accordion" shadowrootmode="open">
-<template>{{styles}}
-      <slot f-slotted="{slottedAccordionItems filter elements()}"></slot>
-    </template>
+  <template>
+    {{styles}}
+    <slot f-slotted="{slottedAccordionItems filter elements()}"></slot>
+  </template>
 </f-template>