From f14352de7409da56542b9101de0f17cc6a00215c Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Sat, 28 Sep 2024 16:44:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid/src/stories/examples.stories.ts      | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

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 = {
           </div>
 
           <sl-grid .dataSource=${this.dataSource}>
+            <sl-grid-selection-column></sl-grid-selection-column>
             <sl-grid-column path="firstName"></sl-grid-column>
             <sl-grid-column path="lastName"></sl-grid-column>
             <sl-grid-column path="email"></sl-grid-column>
@@ -177,6 +200,12 @@ export const Filtering: Story = {
             <sl-grid-column path="membership"></sl-grid-column>
           </sl-grid>
 
+          <sl-button-bar>
+            <sl-button>Action 1</sl-button>
+            <sl-button>Action 2</sl-button>
+            <sl-button>Action 3</sl-button>
+          </sl-button-bar>
+
           <div class="sidebar">
             <h2>Filters</h2>