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

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # 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, 19 Jun 2026 04:05:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.28](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.28)
+
+Fri, 19 Jun 2026 04:05:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.27..@fluentui/web-components_v3.0.0-rc.28)
+
+### Changes
+
+- fix anchor positioning for rtl ([PR #36321](https://github.com/microsoft/fluentui/pull/36321) by machi@microsoft.com)
+
+## [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:42 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,14 +28572,14 @@
           "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": []
     },
@@ -28664,7 +28649,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/accordion-item.definition-async.ts",
+      "path": "src/avatar/avatar.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-avatar element.",
           "privacy": "public"
         }
       ],
@@ -28683,14 +28668,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": []
     },

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>

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

@@ -1,170 +1,174 @@
-
-  :host([hidden]){display:none}:host{display:block}
-
-  :host {
-    max-width: fit-content;
-    contain: content;
-  }
-
-  .heading {
-    height: 44px;
-    display: grid;
-    position: relative;
-    padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
-    border-radius: var(--borderRadiusMedium);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase300);
-    grid-template-columns: auto auto 1fr auto;
-  }
-
-  .button {
-    appearance: none;
-    background: var(--colorTransparentBackground);
-    border: none;
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    cursor: pointer;
-    font: inherit;
-    grid-column: auto / span 2;
-    grid-row: 1;
-    height: 44px;
-    outline: none;
-    padding: 0;
-    text-align: start;
-  }
-
-  .button::before {
-    content: '';
-    position: absolute;
-    inset: 0px;
-    cursor: pointer;
-    border-radius: var(--borderRadiusSmall);
-  }
-
-  :where(.default-marker-collapsed, .default-marker-expanded),
-  ::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    position: relative;
-    height: 100%;
-    padding-inline-end: var(--spacingHorizontalS);
-    grid-column: 1 / span 1;
-    grid-row: 1;
-  }
-
-  .content {
-    margin: 0 var(--spacingHorizontalM);
-  }
-
-  ::slotted([slot='start']) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-right: var(--spacingHorizontalS);
-    grid-column: 2 / span 1;
-    grid-row: 1;
-  }
-
-  button:focus-visible::after {
-    content: '';
-    position: absolute;
-    inset: 0px;
-    cursor: pointer;
-    border-radius: var(--borderRadiusSmall);
-    outline: none;
-    border: 2px solid var(--colorStrokeFocus1);
-    box-shadow: inset 0 0 0 1px var(--colorStrokeFocus2);
-  }
-
-  /* --- Disabled attr styles --- */
-
-  :host([disabled]) .button {
-    color: var(--colorNeutralForegroundDisabled);
-  }
-
-  :host([disabled]) svg {
-    filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
-  }
-
-  /* --- Expanded attr styles --- */
-
-  :host([expanded]) .content {
-    display: block;
-  }
-
-  :host([expanded]) .default-marker-collapsed,
-  :host([expanded]) ::slotted([slot='marker-collapsed']),
-  :host(:not([expanded])) :is(.default-marker-expanded, .content),
-  :host(:not([expanded])) ::slotted([slot='marker-expanded']) {
-    display: none;
-  }
-
-  :host([expanded]) ::slotted([slot='marker-expanded']),
-  :host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
-    display: flex;
-  }
-
-  /* --- Appearance attr styles --- */
-
-  .heading {
-    font-size: var(--fontSizeBase300);
-    line-height: var(--lineHeightBase300);
-  }
-
-  :host([size='small']) .heading {
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-  }
-
-  :host([size='large']) .heading {
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
-
-  :host([size='extra-large']) .heading {
-    font-size: var(--fontSizeBase500);
-    line-height: var(--lineHeightBase500);
-  }
-
-  /* --- marker-position attr styles --- */
-
-  :host([marker-position='end']) ::slotted([slot='start']) {
-    grid-column: 1 / span 1;
-  }
-
-  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
-    grid-column: 4 / span 1;
-    padding-inline-start: var(--spacingHorizontalS);
-    padding-inline-end: 0;
-  }
-
-  :host([marker-position='end']) .button {
-    grid-column: 2 / span 3;
-  }
-
-  /* --- Block attr styles --- */
-
-  :host([block]) {
-    max-width: 100%;
-  }
-
-  :host([marker-position='end']) .heading {
-    grid-template-columns: auto auto 28px;
-    padding-inline: var(--spacingHorizontalM);
-  }
-
-  :host([marker-position='end']:has([slot='start'])) .heading {
-    padding-inline: var(--spacingHorizontalMNudge) var(--spacingHorizontalM);
-  }
-
-  :host([block][marker-position='end']) .heading {
-    grid-template-columns: auto 1fr;
-  }
-
-  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
-    grid-column: 5 / span 1;
-  }
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  max-width: fit-content;
+  contain: content;
+}
+
+.heading {
+  height: 44px;
+  display: grid;
+  position: relative;
+  padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
+  border-radius: var(--borderRadiusMedium);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  grid-template-columns: auto auto 1fr auto;
+}
+
+.button {
+  appearance: none;
+  background: var(--colorTransparentBackground);
+  border: none;
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  cursor: pointer;
+  font: inherit;
+  grid-column: auto / span 2;
+  grid-row: 1;
+  height: 44px;
+  outline: none;
+  padding: 0;
+  text-align: start;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  cursor: pointer;
+  border-radius: var(--borderRadiusSmall);
+}
+
+:where(.default-marker-collapsed, .default-marker-expanded),
+::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  position: relative;
+  height: 100%;
+  padding-inline-end: var(--spacingHorizontalS);
+  grid-column: 1 / span 1;
+  grid-row: 1;
+}
+
+.content {
+  margin: 0 var(--spacingHorizontalM);
+}
+
+::slotted([slot='start']) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: var(--spacingHorizontalS);
+  grid-column: 2 / span 1;
+  grid-row: 1;
+}
+
+button:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  cursor: pointer;
+  border-radius: var(--borderRadiusSmall);
+  outline: none;
+  border: 2px solid var(--colorStrokeFocus1);
+  box-shadow: inset 0 0 0 1px var(--colorStrokeFocus2);
+}
+
+/* --- Disabled attr styles --- */
+
+:host([disabled]) .button {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) svg {
+  filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
+}
+
+/* --- Expanded attr styles --- */
+
+:host([expanded]) .content {
+  display: block;
+}
+
+:host([expanded]) .default-marker-collapsed,
+:host([expanded]) ::slotted([slot='marker-collapsed']),
+:host(:not([expanded])) :is(.default-marker-expanded, .content),
+:host(:not([expanded])) ::slotted([slot='marker-expanded']) {
+  display: none;
+}
+
+:host([expanded]) ::slotted([slot='marker-expanded']),
+:host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
+  display: flex;
+}
+
+/* --- Appearance attr styles --- */
+
+.heading {
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+:host([size='small']) .heading {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) .heading {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='extra-large']) .heading {
+  font-size: var(--fontSizeBase500);
+  line-height: var(--lineHeightBase500);
+}
+
+/* --- marker-position attr styles --- */
+
+:host([marker-position='end']) ::slotted([slot='start']) {
+  grid-column: 1 / span 1;
+}
+
+:host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
+  grid-column: 4 / span 1;
+  padding-inline-start: var(--spacingHorizontalS);
+  padding-inline-end: 0;
+}
+
+:host([marker-position='end']) .button {
+  grid-column: 2 / span 3;
+}
+
+/* --- Block attr styles --- */
+
+:host([block]) {
+  max-width: 100%;
+}
+
+:host([marker-position='end']) .heading {
+  grid-template-columns: auto auto 28px;
+  padding-inline: var(--spacingHorizontalM);
+}
+
+:host([marker-position='end']:has([slot='start'])) .heading {
+  padding-inline: var(--spacingHorizontalMNudge) var(--spacingHorizontalM);
+}
+
+:host([block][marker-position='end']) .heading {
+  grid-template-columns: auto 1fr;
+}
+
+:host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
+  grid-column: 5 / span 1;
+}