diff --git a/packages/components/grid/src/stories/examples.stories.ts b/packages/components/grid/src/stories/examples.stories.ts
index 0b7cebaff..952236125 100644
--- a/packages/components/grid/src/stories/examples.stories.ts
+++ b/packages/components/grid/src/stories/examples.stories.ts
@@ -1,3 +1,5 @@
+import '@sl-design-system/button/register.js';
+import '@sl-design-system/button-bar/register.js';
import '@sl-design-system/checkbox/register.js';
import { type Person, getPeople } from '@sl-design-system/example-data';
import '@sl-design-system/filter/register.js';
@@ -112,6 +114,7 @@ export const Filtering: Story = {
min-inline-size: 0;
&::part(table) {
+ anchor-name: --grid-anchor;
margin-block-end: 1rem;
}
@@ -121,6 +124,25 @@ export const Filtering: Story = {
}
}
+ sl-button-bar {
+ background: #fff;
+ border: 1px solid #ccc;
+ border-radius: 0.5rem;
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
+ inset-block-start: calc(anchor(bottom) + 1rem);
+ justify-self: anchor-center;
+ padding: 0.5rem 1rem;
+ position: fixed;
+ position-anchor: --grid-anchor;
+ position-try: --viewport-block-end;
+ }
+
+ @position-try --viewport-block-end {
+ position-anchor: initial;
+ inset-block-start: auto;
+ inset-block-end: 1rem;
+ }
+
.sidebar {
display: flex;
flex-direction: column;
@@ -169,6 +191,7 @@ export const Filtering: Story = {