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

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 03 Jun 2026 04:07:43 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: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
+
+- make anchor position target fixed position ([PR #36258](https://github.com/microsoft/fluentui/pull/36258) by machi@microsoft.com)
+
 ## [3.0.0-rc.23](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.23)
 
-Wed, 03 Jun 2026 04:07:43 GMT 
+Wed, 03 Jun 2026 04:07:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.22..@fluentui/web-components_v3.0.0-rc.23)
 
 ### 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,20 +28205,20 @@
           "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": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/badge.definition-async.ts",
+      "path": "src/anchor-button/anchor-button.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28227,7 +28227,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-anchor-button element.",
           "privacy": "public"
         }
       ],
@@ -28237,20 +28237,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/badge/badge.definition-async.ts"
+            "module": "src/anchor-button/anchor-button.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/define-async.ts",
+      "path": "src/anchor-button/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor-button/anchor-button.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-anchor-button element.",
+          "description": "The async definition configuration for the fluent-accordion-item element.",
           "privacy": "public"
         }
       ],
@@ -28269,14 +28269,14 @@
           "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": []
     },
@@ -28314,7 +28314,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/avatar.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-avatar element.",
+          "description": "The async definition configuration for the fluent-badge element.",
           "privacy": "public"
         }
       ],
@@ -28333,14 +28333,14 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/avatar/avatar.definition-async.ts"
+            "module": "src/badge/badge.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/define-async.ts",
+      "path": "src/badge/define-async.ts",
       "declarations": [],
       "exports": []
     },

package/dist/esm/dialog/dialog.styles.css

@@ -23,7 +23,6 @@
 
     :host([type='non-modal']) dialog {
       inset: 0;
-      position: fixed;
       z-index: 2;
       overflow: auto;
     }

package/dist/esm/dialog/dialog.styles.js

@@ -28,7 +28,6 @@ export const styles = css `
 
     :host([type='non-modal']) dialog {
       inset: 0;
-      position: fixed;
       z-index: 2;
       overflow: auto;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA2BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;;;;;kBAmBtC,eAAe,UAAU,sBAAsB;;;;CAIhE,CAAC"}
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;+BA0BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;;;;;kBAmBtC,eAAe,UAAU,sBAAsB;;;;CAIhE,CAAC"}

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/esm/dropdown/dropdown.styles.css

@@ -2,7 +2,6 @@
   :host([hidden]){display:none}:host{display:inline-flex}
 
   :host {
-    anchor-name: --dropdown-trigger;
     box-sizing: border-box;
     color: var(--colorNeutralForeground1);
     cursor: pointer;

package/dist/esm/dropdown/dropdown.styles.js

@@ -12,7 +12,6 @@ export const styles = css `
   ${display('inline-flex')}
 
   :host {
-    anchor-name: --dropdown-trigger;
     box-sizing: border-box;
     color: ${colorNeutralForeground1};
     cursor: pointer;

package/dist/esm/dropdown/dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;;MAMzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;;;;;;;qBAS1C,kBAAkB;kCACL,iBAAiB;eACpC,gBAAgB,UAAU,iBAAiB;;;iBAGzC,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;8BAWb,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;8BAIvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;8BAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;;;;;;;;;CAW/F,CAAC"}
+{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;aAIb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;;MAMzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;;;;;;;qBAS1C,kBAAkB;kCACL,iBAAiB;eACpC,gBAAgB,UAAU,iBAAiB;;;iBAGzC,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;8BAWb,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;8BAIvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;8BAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;;;;;;;;;CAW/F,CAAC"}

package/dist/esm/listbox/listbox.styles.css

@@ -9,7 +9,7 @@
     box-sizing: border-box;
     flex-direction: column;
     margin: 0;
-    min-width: 160px;
+    min-inline-size: 160px;
     padding: var(--spacingHorizontalXS);
     row-gap: var(--spacingHorizontalXXS);
     width: auto;
@@ -22,26 +22,20 @@
 
   @supports (anchor-name: --anchor) {
     :host([popover]) {
-      position: absolute;
-      margin-block-start: 0;
-      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
-      min-width: anchor-size(width);
-      position-anchor: --dropdown;
-      position-area: block-end span-inline-end;
-      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
-    }
-
-    @position-try --flip-block {
-      bottom: anchor(top);
-      top: unset;
+      position: fixed;
+      max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-inline-size: anchor-size(inline);
+      inset-block-start: anchor(end);
+      inset-inline-start: anchor(start);
+      position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
     }
   }
 
   @supports not (anchor-name: --anchor) {
     :host([popover]) {
       margin-block-start: var(--margin-offset, 0);
-      max-height: var(--listbox-max-height, 50vh);
-      position: fixed;
+      max-block-size: var(--listbox-max-height, 50vh);
+      position: absolute;
     }
 
     :host([popover]:state(flip-block)) {

package/dist/esm/listbox/listbox.styles.js

@@ -18,7 +18,7 @@ export const styles = css `
     box-sizing: border-box;
     flex-direction: column;
     margin: 0;
-    min-width: 160px;
+    min-inline-size: 160px;
     padding: ${spacingHorizontalXS};
     row-gap: ${spacingHorizontalXXS};
     width: auto;
@@ -31,26 +31,20 @@ export const styles = css `
 
   @supports (anchor-name: --anchor) {
     :host([popover]) {
-      position: absolute;
-      margin-block-start: 0;
-      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
-      min-width: anchor-size(width);
-      position-anchor: --dropdown;
-      position-area: block-end span-inline-end;
-      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
-    }
-
-    @position-try --flip-block {
-      bottom: anchor(top);
-      top: unset;
+      position: fixed;
+      max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-inline-size: anchor-size(inline);
+      inset-block-start: anchor(end);
+      inset-inline-start: anchor(start);
+      position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
     }
   }
 
   @supports not (anchor-name: --anchor) {
     :host([popover]) {
       margin-block-start: var(--margin-offset, 0);
-      max-height: var(--listbox-max-height, 50vh);
-      position: fixed;
+      max-block-size: var(--listbox-max-height, 50vh);
+      position: absolute;
     }
 
     :host([popover]${flipBlockState}) {

package/dist/esm/listbox/listbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCd,cAAc;;;;;CAKlC,CAAC"}
+{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Bd,cAAc;;;;;CAKlC,CAAC"}

package/dist/esm/menu/menu.styles.css

@@ -9,18 +9,17 @@
     margin: 0;
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
-    position-area: block-end span-inline-end;
+    inset: unset;
+    inset-block-start: anchor(end);
+    inset-inline-start: anchor(start);
     position-try-fallbacks: flip-block;
-    position: absolute;
+    position: fixed;
     z-index: 1;
   }
 
   :host([split]) ::slotted([popover]) {
-    position-area: block-end span-inline-start;
-  }
-
-  ::slotted([popover]:popover-open) {
-    inset: unset;
+    inset-inline-start: auto;
+    inset-inline-end: anchor(end);
   }
 
   ::slotted([popover]:not(:popover-open)) {

package/dist/esm/menu/menu.styles.js

@@ -15,18 +15,17 @@ export const styles = css `
     margin: 0;
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
-    position-area: block-end span-inline-end;
+    inset: unset;
+    inset-block-start: anchor(end);
+    inset-inline-start: anchor(start);
     position-try-fallbacks: flip-block;
-    position: absolute;
+    position: fixed;
     z-index: 1;
   }
 
   :host([split]) ::slotted([popover]) {
-    position-area: block-end span-inline-start;
-  }
-
-  ::slotted([popover]:popover-open) {
-    inset: unset;
+    inset-inline-start: auto;
+    inset-inline-end: anchor(end);
   }
 
   ::slotted([popover]:not(:popover-open)) {

package/dist/esm/menu/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiCF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAgCF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}

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

@@ -120,9 +120,11 @@
     ::slotted([popover]) {
       margin: 0;
       max-height: var(--menu-max-height, auto);
-      position: absolute;
+      position: fixed;
       position-anchor: --menu-trigger;
-      position-area: inline-end span-block-end;
+      inset: unset;
+      inset-block-start: anchor(start);
+      inset-inline-start: anchor(end);
       position-try-fallbacks: flip-inline, block-start, block-end;
       z-index: 1;
     }
@@ -131,10 +133,6 @@
       display: none;
     }
 
-    ::slotted([popover]:popover-open) {
-      inset: unset;
-    }
-
     /* Fallback for no anchor-positioning */
     @supports not (anchor-name: --menu-trigger) {
       ::slotted([popover]) {

package/dist/esm/menu-item/menu-item.styles.js

@@ -127,9 +127,11 @@ export const styles = css `
     ::slotted([popover]) {
       margin: 0;
       max-height: var(--menu-max-height, auto);
-      position: absolute;
+      position: fixed;
       position-anchor: --menu-trigger;
-      position-area: inline-end span-block-end;
+      inset: unset;
+      inset-block-start: anchor(start);
+      inset-inline-start: anchor(end);
       position-try-fallbacks: flip-inline, block-start, block-end;
       z-index: 1;
     }
@@ -138,10 +140,6 @@ export const styles = css `
       display: none;
     }
 
-    ::slotted([popover]:popover-open) {
-      inset: unset;
-    }
-
     /* Fallback for no anchor-positioning */
     @supports not (anchor-name: --menu-trigger) {
       ::slotted([popover]) {

package/dist/esm/menu-item/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA+D3B,aAAa;YACb,aAAa;YACb,aAAa;;;;CAIxB,CAAC"}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA6D3B,aAAa;YACb,aAAa;YACb,aAAa;;;;CAIxB,CAAC"}

package/dist/esm/tablist/tablist.styles.css

@@ -169,7 +169,7 @@
       content: '';
       inline-size: 100%;
       inset: auto auto anchor(end) anchor(center);
-      position: absolute;
+      position: fixed;
       position-anchor: --tab;
       transform: translateX(-50%);
       transition-property: inset-inline, width;

package/dist/esm/tablist/tablist.styles.js

@@ -175,7 +175,7 @@ export const styles = css `
       content: '';
       inline-size: 100%;
       inset: auto auto anchor(end) anchor(center);
-      position: absolute;
+      position: fixed;
       position-anchor: --tab;
       transform: translateX(-50%);
       transition-property: inset-inline, width;

package/dist/esm/tooltip/tooltip.js

@@ -208,7 +208,7 @@ export class Tooltip extends FASTElement {
       #${this.id} {
         inset: unset;
         position-anchor: ${anchorName};
-        position: absolute;
+        position: fixed;
         ${directionCSS}
         ${alignmentCSS}
       }

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

@@ -27,7 +27,7 @@
     padding: 4px var(--spacingHorizontalMNudge) 6px;
     position: absolute;
     position-area: var(--position-area);
-    position-try-options: var(--position-try-options);
+    position-try-fallbacks: var(--position-try-options);
     width: auto;
     z-index: 1;
   }

package/dist/esm/tooltip/tooltip.styles.js

@@ -35,7 +35,7 @@ export const styles = css `
     padding: 4px ${spacingHorizontalMNudge} 6px;
     position: absolute;
     position-area: var(--position-area);
-    position-try-options: var(--position-try-options);
+    position-try-fallbacks: var(--position-try-options);
     width: auto;
     z-index: 1;
   }