From 502b1cf8f83a407f5e150359c66b44bed35668de Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 15:51:18 +0300
Subject: [PATCH 1/9] feat: SplitButton.svelte add floating behavior

---
 src/lib/buttons/SplitButton.svelte | 23 ++++++++++++++++++++---
 src/routes/+page.svelte            |  1 -
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index 63ca910e..25a030fe 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -19,6 +19,7 @@
     children: Snippet;
     menu: Snippet;
   } & ButtonAttrs = $props();
+  const id = $props.id();
 
   const autoclose = (node: HTMLDetailsElement) => {
     const close = (e: Event) => {
@@ -35,17 +36,19 @@
   };
 </script>
 
-<div class="m3-container {variant}">
+<div class="m3-container {variant}" style:--anchor-name="--{id}">
   <button type="button" class="split m3-font-label-large" {...extra}>
     <Layer />
     {@render children()}
   </button>
-  <details class="align-{x} align-{y}" use:autoclose>
+  <details class="" use:autoclose>
     <summary class="split">
       <Layer />
       <Icon icon={iconExpand} width="1.375rem" height="1.375rem" />
     </summary>
-    {@render menu()}
+    <div class="floating-container">
+        {@render menu()}
+    </div>
   </details>
 </div>
 
@@ -56,6 +59,20 @@
     --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
   }
 
+  @supports (anchor-name: --a) {
+    details {
+        & summary {
+            anchor-name: var(--anchor-name);
+        }
+        & .floating-container {
+            position: fixed !important;
+            position-anchor: var(--anchor-name);
+            margin-left: -3rem;
+            position-try-fallbacks: top right, bottom right;
+        }
+    }
+  }
+
   .m3-container {
     display: inline-grid;
     grid-template-columns: 1fr auto;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc3eef57..06a4c06d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -63,7 +63,6 @@
     <Demo0 {showCode} />
     <Demo1 {showCode} />
     <Demo2 {showCode} />
-    <Demo3 {showCode} />
     <Demo4 {showCode} />
     <Demo5 {showCode} />
     <Demo6 {showCode} />

From 06bba952d22e55c2e2ae1966a1bc8b923081c458 Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 15:53:11 +0300
Subject: [PATCH 2/9] chore: change the priority of locations

---
 src/lib/buttons/SplitButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index 25a030fe..e90efbe9 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -68,7 +68,7 @@
             position: fixed !important;
             position-anchor: var(--anchor-name);
             margin-left: -3rem;
-            position-try-fallbacks: top right, bottom right;
+            position-try-fallbacks: bottom right, top right;
         }
     }
   }

From d6332e7e7e92474c61034f2aafc2678beb484e08 Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 16:23:41 +0300
Subject: [PATCH 3/9] chore: return the accidentally lost demo3.svelte

---
 src/lib/forms/Slider.svelte | 3 ++-
 src/routes/+page.svelte     | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/forms/Slider.svelte b/src/lib/forms/Slider.svelte
index 288edba7..3fba9c6a 100644
--- a/src/lib/forms/Slider.svelte
+++ b/src/lib/forms/Slider.svelte
@@ -34,6 +34,7 @@
     endStops?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
+  const id = $props.id();
   // @ts-expect-error deprecated backwards compatibility with ticks
   let stops = $derived(extra.ticks ? true : _stops);
   let containerWidth = $state(600);
@@ -67,7 +68,7 @@
   });
 </script>
 
-<div class="m3-container {size}" style:--handle={handle - 0.5} bind:offsetWidth={containerWidth}>
+<div class="m3-container {size}" style:--handle={handle - 0.5} style:--anchor-name="--{id}" bind:offsetWidth={containerWidth}>
   <input
     type="range"
     oninput={updateValue}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 06a4c06d..cc3eef57 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -63,6 +63,7 @@
     <Demo0 {showCode} />
     <Demo1 {showCode} />
     <Demo2 {showCode} />
+    <Demo3 {showCode} />
     <Demo4 {showCode} />
     <Demo5 {showCode} />
     <Demo6 {showCode} />

From fd2a02b123f2d0919963191f149a3d31d277623a Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 16:26:21 +0300
Subject: [PATCH 4/9] chore: remove changes in slider.svelte that are not
 related to the topic pr (https://github.com/ktibow/m3-svelte/pull/193)

---
 src/lib/forms/Slider.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/forms/Slider.svelte b/src/lib/forms/Slider.svelte
index 3fba9c6a..c721f2b1 100644
--- a/src/lib/forms/Slider.svelte
+++ b/src/lib/forms/Slider.svelte
@@ -68,7 +68,7 @@
   });
 </script>
 
-<div class="m3-container {size}" style:--handle={handle - 0.5} style:--anchor-name="--{id}" bind:offsetWidth={containerWidth}>
+<div class="m3-container {size}" style:--handle={handle - 0.5} bind:offsetWidth={containerWidth}>
   <input
     type="range"
     oninput={updateValue}

From bdd5bdd08c77abd3a3c1fa538e086b1592736c26 Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 16:52:37 +0300
Subject: [PATCH 5/9] feat: process the case when the drop -down list is
 located in the state of 'top left' and 'bottom left'

---
 src/lib/buttons/SplitButton.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index e90efbe9..81739923 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -60,7 +60,24 @@
   }
 
   @supports (anchor-name: --a) {
+    @position-try --bottom-right {
+        position-area: bottom right;
+        margin-left: -3rem;
+    }
+    @position-try --top-right {
+        position-area: top right;
+        margin-left: -3rem;
+    }
+    @position-try --bottom-left {
+        position-area: bottom left;
+        margin-right: -3rem;
+    }
+    @position-try --top-left {
+        position-area: top left;
+        margin-right: -3rem;
+    }
     details {
+        z-index: 1;
         & summary {
             anchor-name: var(--anchor-name);
         }
@@ -68,7 +85,7 @@
             position: fixed !important;
             position-anchor: var(--anchor-name);
             margin-left: -3rem;
-            position-try-fallbacks: bottom right, top right;
+            position-try-fallbacks: --bottom-right, --top-right, --bottom-left, --top-left;
         }
     }
   }

From 7297c6223be344c73d884c46ea5cef1ad6f0e6fc Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 17:27:52 +0300
Subject: [PATCH 6/9] chore: remove unused class

---
 src/lib/buttons/SplitButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index 81739923..22a1d854 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -41,7 +41,7 @@
     <Layer />
     {@render children()}
   </button>
-  <details class="" use:autoclose>
+  <details use:autoclose>
     <summary class="split">
       <Layer />
       <Icon icon={iconExpand} width="1.375rem" height="1.375rem" />

From d09237a4a67f8bcd5736305e8c06a120a8e28565 Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 17:29:19 +0300
Subject: [PATCH 7/9] chore: remove changes not regarding the current pr
 (https://github.com/ktibow/m3-svelte/pull/193)

---
 src/lib/forms/Slider.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/forms/Slider.svelte b/src/lib/forms/Slider.svelte
index c721f2b1..288edba7 100644
--- a/src/lib/forms/Slider.svelte
+++ b/src/lib/forms/Slider.svelte
@@ -34,7 +34,6 @@
     endStops?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
-  const id = $props.id();
   // @ts-expect-error deprecated backwards compatibility with ticks
   let stops = $derived(extra.ticks ? true : _stops);
   let containerWidth = $state(600);

From b66f460b123636a79f88de26167bc059c661da1a Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 17:33:09 +0300
Subject: [PATCH 8/9] feat!: add fallback styles and remove .floating-container
 container

---
 src/lib/buttons/SplitButton.svelte | 91 +++++++++++++++---------------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index 22a1d854..a5567cf2 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -41,14 +41,12 @@
     <Layer />
     {@render children()}
   </button>
-  <details use:autoclose>
+  <details class="align-{x} align-{y}" use:autoclose>
     <summary class="split">
       <Layer />
       <Icon icon={iconExpand} width="1.375rem" height="1.375rem" />
     </summary>
-    <div class="floating-container">
-        {@render menu()}
-    </div>
+    {@render menu()}
   </details>
 </div>
 
@@ -59,37 +57,6 @@
     --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
   }
 
-  @supports (anchor-name: --a) {
-    @position-try --bottom-right {
-        position-area: bottom right;
-        margin-left: -3rem;
-    }
-    @position-try --top-right {
-        position-area: top right;
-        margin-left: -3rem;
-    }
-    @position-try --bottom-left {
-        position-area: bottom left;
-        margin-right: -3rem;
-    }
-    @position-try --top-left {
-        position-area: top left;
-        margin-right: -3rem;
-    }
-    details {
-        z-index: 1;
-        & summary {
-            anchor-name: var(--anchor-name);
-        }
-        & .floating-container {
-            position: fixed !important;
-            position-anchor: var(--anchor-name);
-            margin-left: -3rem;
-            position-try-fallbacks: --bottom-right, --top-right, --bottom-left, --top-left;
-        }
-    }
-  }
-
   .m3-container {
     display: inline-grid;
     grid-template-columns: 1fr auto;
@@ -194,19 +161,53 @@
         translate var(--m3-util-easing-fast);
     }
   }
-  details > :global(:not(summary)) :global {
-    position: absolute !important;
-    &:is(details.align-inner > *) {
-      left: 0;
+
+  @supports (anchor-name: --a) {
+    @position-try --bottom-right {
+        position-area: bottom right;
+        margin-left: -3rem;
+    }
+    @position-try --top-right {
+        position-area: top right;
+        margin-left: -3rem;
     }
-    &:is(details.align-right > *) {
-      right: 0;
+    @position-try --bottom-left {
+        position-area: bottom left;
+        margin-right: -3rem;
     }
-    &:is(details.align-down > *) {
-      top: 100%;
+    @position-try --top-left {
+        position-area: top left;
+        margin-right: -3rem;
     }
-    &:is(details.align-up > *) {
-      bottom: 100%;
+    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;
+        &:is(details.align-inner > *) {
+        left: 0;
+        }
+        &:is(details.align-right > *) {
+        right: 0;
+        }
+        &:is(details.align-down > *) {
+        top: 100%;
+        }
+        &:is(details.align-up > *) {
+        bottom: 100%;
+        }
     }
   }
 

From 2ee771b20af800b4cfe070d6d26fcba0fbefd5f6 Mon Sep 17 00:00:00 2001
From: l <eh.chahkiev@smartics.ru>
Date: Thu, 25 Sep 2025 17:34:11 +0300
Subject: [PATCH 9/9] chore: lint styles

---
 src/lib/buttons/SplitButton.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index a5567cf2..83f1d954 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -197,16 +197,16 @@
     details > :global(:not(summary)) :global {
         position: absolute !important;
         &:is(details.align-inner > *) {
-        left: 0;
+            left: 0;
         }
         &:is(details.align-right > *) {
-        right: 0;
+            right: 0;
         }
         &:is(details.align-down > *) {
-        top: 100%;
+            top: 100%;
         }
         &:is(details.align-up > *) {
-        bottom: 100%;
+            bottom: 100%;
         }
     }
   }