update stylesheets

Author: radium-v

packages/web-components/src/dialog/dialog.styles.css

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

packages/web-components/src/dropdown/dropdown.styles.css

@@ -6,7 +6,6 @@
 }
 
 :host {
-  anchor-name: --dropdown-trigger;
   box-sizing: border-box;
   color: var(--colorNeutralForeground1);
   cursor: pointer;

packages/web-components/src/listbox/listbox.styles.css

@@ -13,7 +13,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;
@@ -26,26 +26,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)) {

packages/web-components/src/menu-item/menu-item.styles.css

@@ -124,9 +124,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;
   }
@@ -135,10 +137,6 @@
     display: none;
   }
 
-  ::slotted([popover]:popover-open) {
-    inset: unset;
-  }
-
   /* Fallback for no anchor-positioning */
   @supports not (anchor-name: --menu-trigger) {
     ::slotted([popover]) {

packages/web-components/src/menu/menu.styles.css

@@ -13,18 +13,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)) {

packages/web-components/src/tablist/tablist.styles.css

@@ -173,7 +173,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;

packages/web-components/src/tooltip/tooltip.styles.css

@@ -31,7 +31,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;
 }