split button floating UI

src/lib/buttons/SplitButton.svelte

@@ -18,6 +18,7 @@
     children: Snippet;
     menu: Snippet;
   } & ButtonAttrs = $props();
+  const id = $props.id();
 
   const autoclose = (node: HTMLDetailsElement) => {
     const close = (e: Event) => {
@@ -34,7 +35,7 @@
   };
 </script>
 
-<div class="m3-container {variant}">
+<div class="m3-container {variant}" style:--anchor-name="--{id}">
   <button type="button" class="split m3-layer" {...extra}>
     {@render children()}
   </button>
@@ -160,19 +161,52 @@
         translate var(--m3-easing-fast);
     }
   }
-  details > :global(:not(summary)) :global {
-    position: absolute !important;
-    details.align-inner > & {
-      left: 0;
+  @supports (anchor-name: --a) {
+    @position-try --bottom-right {
+      position-area: bottom right;
+      margin-left: -3rem;
     }
-    details.align-right > & {
-      right: 0;
+    @position-try --top-right {
+      position-area: top right;
+      margin-left: -3rem;
     }
-    details.align-down > & {
-      top: 100%;
+    @position-try --bottom-left {
+      position-area: bottom left;
+      margin-right: -3rem;
     }
-    details.align-up > & {
-      bottom: 100%;
+    @position-try --top-left {
+      position-area: top left;
+      margin-right: -3rem;
+    }
+    details {
+      z-index: 1;
+      summary {
+        anchor-name: var(--anchor-name);
+      }
+      > :global(:not(summary)) :global {
+        position: fixed !important;
+        position-anchor: var(--anchor-name);
+        margin-left: -3rem;
+        position-try-fallbacks: --bottom-right, --top-right, --bottom-left, --top-left;
+      }
+    }
+  }
+
+  @supports not (anchor-name: --a) {
+    details > :global(:not(summary)) :global {
+      position: absolute !important;
+      details.align-inner > & {
+        left: 0;
+      }
+      details.align-right > & {
+        right: 0;
+      }
+      details.align-down > & {
+        top: 100%;
+      }
+      details.align-up > & {
+        bottom: 100%;
+      }
     }
   }