@gjsify/adwaita-web 0.14.0 → 0.16.0

package/scss/_menu_button.scss

@@ -0,0 +1,151 @@
+// _menu_button.scss — adw-menu-button styling: a flat (or circular) icon button
+// that drops an Adwaita-styled popover menu (the web counterpart of
+// Adw.MenuButton / Gtk.MenuButton). The button mirrors libadwaita's flat/circular
+// `menubutton > button`; the popover reproduces `popover.menu > contents` with
+// its soft triple-shadow surface and `modelbutton`-style item rows.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss (menubutton flat/circular)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_popovers.scss (popover > contents)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss (popover.menu modelbutton)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+.adw-menu-button {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    vertical-align: middle;
+
+    // The icon button — square with the button radius by default.
+    .adw-menu-button-button {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 34px;
+        min-height: 34px;
+        margin: 0;
+        padding: 0 8px;
+        border: none;
+        border-radius: var(--button-radius);
+        background-color: var(--button-bg-color);
+        color: var(--window-fg-color);
+        cursor: pointer;
+        transition: background-color 0.1s ease;
+
+        .adw-menu-button-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: 1px;
+        }
+    }
+
+    // Flat — no resting fill (the header app-menu idiom).
+    &.flat .adw-menu-button-button {
+        background-color: transparent;
+    }
+
+    // The open state keeps a subtle fill so the button reads as "checked".
+    &.active .adw-menu-button-button {
+        background-color: var(--button-active-color);
+    }
+
+    // Circular — a round 34×34 button (window-control / FAB idiom).
+    &.circular .adw-menu-button-button {
+        padding: 0;
+        border-radius: 9999px;
+    }
+
+    &.disabled {
+        opacity: 0.45;
+
+        .adw-menu-button-button {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+
+    // --- Popover menu ---
+    // The elevated menu surface below the button, right-aligned like a header-end
+    // app menu. Reproduces libadwaita's popover.menu > contents.
+    .adw-menu-button-popover {
+        position: absolute;
+        top: calc(100% + 6px);
+        right: 0;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        min-width: 200px;
+        padding: var(--spacing-xs);
+        border-radius: var(--card-radius);
+        background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+        color: var(--popover-fg-color, var(--window-fg-color));
+        box-shadow:
+            0 0 0 1px rgba(0, 0, 0, 0.05),
+            0 1px 5px 1px rgba(0, 0, 0, 0.09),
+            0 2px 14px 3px rgba(0, 0, 0, 0.05);
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    // Optional section heading atop the menu (libadwaita label.title).
+    .adw-menu-button-title {
+        padding: 4px var(--spacing-s) 6px;
+        font-weight: 700;
+        opacity: var(--dim-opacity);
+    }
+
+    // A menu item row — a flat rounded row that fills on hover/active.
+    .adw-menu-button-item {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xs);
+        width: 100%;
+        min-height: 32px;
+        margin: 0;
+        padding: var(--spacing-xs) var(--spacing-s);
+        border: none;
+        border-radius: calc(var(--button-radius) - 2px);
+        background-color: transparent;
+        color: inherit;
+        font-family: var(--font-family);
+        font-size: var(--font-size-base);
+        text-align: start;
+        cursor: pointer;
+        transition: background-color 0.1s ease;
+
+        .adw-menu-button-item-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: -2px;
+        }
+    }
+}

package/scss/_root.scss

@@ -0,0 +1,22 @@
+// _root.scss — opt-in page surface for chrome-less layouts.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss (surface tokens)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: original opt-in helper for @gjsify/adwaita-web.
+//
+// The components theme via the `--window-*` CSS custom properties, but only
+// `adw-window` actually PAINTS the window surface (background + text colour).
+// A page laid out WITHOUT an `<adw-window>` (e.g. a plain browser view that
+// hosts rows/cards directly) therefore renders on the browser default (white)
+// and its native form controls / scrollbars don't follow the light/dark scheme.
+//
+// Applying `.adw-root` to `<body>` (or `<html>` / the `:root` element) binds the
+// Adwaita window surface + `color-scheme: light dark` to the document, so a
+// window-less layout is themed exactly like the components inside it. This is
+// OPT-IN and additive — it does not change any component's own styling.
+.adw-root {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  color-scheme: light dark;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+}

package/scss/_theme.scss

@@ -18,6 +18,11 @@
   --card-fg-color: #ffffff;
   --card-shade-color: rgba(0, 0, 6, 0.36);
   --accent-color: #78aeed;
+  --popover-bg-color: #36363a;
+  --popover-fg-color: #ffffff;
+  --popover-shade-color: rgba(0, 0, 6, 0.36);
+  // A deeper scrim in dark mode so the dimming reads against a dark window.
+  --dialog-scrim-color: rgba(0, 0, 6, 0.55);
   --button-bg-color: rgba(255, 255, 255, 0.1);
   --button-hover-color: rgba(255, 255, 255, 0.15);
   --button-active-color: rgba(255, 255, 255, 0.22);

package/scss/_variables.scss

@@ -37,6 +37,15 @@
   --accent-fg-color: #ffffff;
   --accent-color: #1c71d8;
 
+  // Popover (menus, dropdowns) — an elevated surface above the window.
+  --popover-bg-color: #ffffff;
+  --popover-fg-color: rgba(0, 0, 6, 0.8);
+  --popover-shade-color: rgba(0, 0, 6, 0.07);
+
+  // Dialog scrim — the dimming wash behind a presented dialog (Adw dims with
+  // --shade-color at double alpha; this is the equivalent neutral wash).
+  --dialog-scrim-color: rgba(0, 0, 6, 0.32);
+
   // Buttons
   --button-bg-color: rgba(0, 0, 6, 0.08);
   --button-hover-color: rgba(0, 0, 6, 0.13);

package/scss/_view_stack.scss

@@ -0,0 +1,29 @@
+// _view_stack.scss — adw-view-stack styling: a standalone named-page content
+// container that shows exactly one page at a time (the web counterpart of
+// Adw.ViewStack, decoupled from any switcher). It carries no chrome of its own —
+// a paired adw-view-switcher-bar (or a header-bar switcher) drives selection.
+// Reference: refs/libadwaita/src/adw-view-stack.c (AdwViewStack)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-stack {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    // vexpand-equivalent — fill the space a switcher shell allots to content.
+    flex: 1 1 auto;
+    min-height: 0;
+
+    // Exactly one child is shown; the rest are laid out of flow. `hidden` is set
+    // in JS too, but the class keeps the visible page a flex child that grows.
+    .adw-view-stack-child {
+        display: none;
+
+        &.active-view {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-height: 0;
+        }
+    }
+}

package/scss/_view_switcher_bar.scss

@@ -0,0 +1,94 @@
+// _view_switcher_bar.scss — adw-view-switcher-bar styling: the narrow BOTTOM
+// bar of homogeneous icon-over-label buttons bound to an adw-view-stack (the web
+// counterpart of Adw.ViewSwitcherBar). It sits at the window bottom with a top
+// hairline over a headerbar-toned surface, mirroring libadwaita's `.narrow`
+// view-switcher inside an actionbar. The active button's label is accent-tinted.
+// Reference: refs/libadwaita/src/adw-view-switcher-bar.c (AdwViewSwitcherBar)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_view-switcher.scss (.narrow policy)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss (actionbar top border)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-switcher-bar {
+    display: block;
+    box-sizing: border-box;
+    // The bottom bar over a headerbar-toned surface with a top hairline (the
+    // libadwaita `actionbar` inset top border), NOT a bottom border.
+    background-color: var(--headerbar-bg-color);
+    border-top: 1px solid var(--separator-color);
+    padding: 7px 0; // libadwaita `viewswitcherbar > box` vertical padding
+
+    // The homogeneous button row — every button gets equal width.
+    .adw-view-switcher-bar-box {
+        display: flex;
+        align-items: stretch;
+        // The `.narrow` view-switcher drops to a 6px min-height (icon-over-label).
+        min-height: 6px;
+    }
+
+    // Each button — icon stacked above a small label, a flat transparent toggle
+    // that fills on hover/active and marks the selected page with an accent
+    // label (the neutral fill stays the same across states, like libadwaita).
+    .adw-view-switcher-bar-button {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex: 1 1 0; // homogeneous — equal width
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1px;
+        margin: 0;
+        padding: 4px 3px 2px;
+        border: none;
+        border-radius: var(--button-radius);
+        background-color: transparent;
+        color: var(--window-fg-color);
+        font-family: var(--font-family);
+        font-size: 0.75rem;
+        font-weight: 700;
+        line-height: 1.2;
+        cursor: pointer;
+        transition:
+            color 0.2s ease,
+            background-color 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
+
+        .adw-view-switcher-bar-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        .adw-view-switcher-bar-label {
+            min-height: 18px;
+            line-height: 18px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: -2px;
+        }
+
+        // The selected page — its label turns accent-coloured. (The icon stays
+        // theme-fg, matching the NS twin's documented fidelity note.)
+        &.active {
+            color: var(--accent-color);
+
+            .adw-view-switcher-bar-label {
+                color: var(--accent-color);
+            }
+        }
+    }
+}

package/scss/adwaita-skin.scss

@@ -9,16 +9,20 @@
 @use 'icons.generated';
 @use 'variables';
 @use 'theme';
+@use 'root';
 @use 'window';
 @use 'headerbar';
 @use 'window_title';
 @use 'button';
 @use 'button_content';
 @use 'split_button';
+@use 'menu_button';
+@use 'drop_down';
 @use 'toggle_group';
 @use 'entry';
 @use 'preferences';
 @use 'card';
+@use 'data_grid';
 @use 'clamp';
 @use 'spinner';
 @use 'avatar';
@@ -42,12 +46,15 @@
 @use 'tab_view';
 @use 'view_switcher';
 @use 'inline_view_switcher';
+@use 'view_stack';
+@use 'view_switcher_bar';
 @use 'navigation_view';
 @use 'bottom_sheet';
 @use 'sidebar';
 @use 'about_dialog';
 @use 'alert_dialog';
 @use 'preferences_dialog';
+@use 'dialog';
 
 // Ensure the `hidden` attribute always wins: components that toggle visibility
 // via `element.hidden = true` set the HTML attribute, but a custom `display`

package/src/adw-data-grid.spec.ts

@@ -0,0 +1,243 @@
+// DOM-level behaviour tests for <adw-data-grid>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis. Asserts column parsing + alignment
+// classes, the derived grid tracks, per-cell rendering of pre-formatted strings,
+// the accounting row variants (normal / section / subtotal / total), and the
+// row-activated interaction (element-level + per-row, keyboard + pointer).
+import { describe, it, expect } from '@gjsify/unit';
+
+import type { AdwDataGrid, AdwDataGridColumn, AdwDataGridRow } from './elements/adw-data-grid.js';
+
+function makeGrid(columns?: AdwDataGridColumn[], rows?: AdwDataGridRow[]): AdwDataGrid {
+    const el = document.createElement('adw-data-grid') as AdwDataGrid;
+    if (columns) el.columns = columns;
+    if (rows) el.rows = rows;
+    document.body.appendChild(el);
+    return el;
+}
+
+const BWA_COLUMNS: AdwDataGridColumn[] = [
+    { key: 'position', label: 'BWA-Position' },
+    { key: 'total', label: 'Σ Jahr', numeric: true },
+];
+
+export const AdwDataGridTest = async () => {
+    await describe('adw-data-grid columns', async () => {
+        await it('renders one header cell per column with the label', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const header = grid.querySelector('.adw-data-grid-row.header');
+            expect(header).toBeTruthy();
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells.length).toBe(2);
+            expect(cells[0].textContent).toBe('BWA-Position');
+            expect(cells[1].textContent).toBe('Σ Jahr');
+            grid.remove();
+        });
+
+        await it('falls back to the key when no label is given', async () => {
+            const grid = makeGrid([{ key: 'amount' }], []);
+            const cell = grid.querySelector('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cell?.textContent).toBe('amount');
+            grid.remove();
+        });
+
+        await it('a numeric column right-aligns + gets the numeric class', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells[0].classList.contains('align-start')).toBe(true);
+            expect(cells[1].classList.contains('align-end')).toBe(true);
+            expect(cells[1].classList.contains('numeric')).toBe(true);
+            grid.remove();
+        });
+
+        await it('honours an explicit align + monospace flag', async () => {
+            const grid = makeGrid(
+                [
+                    { key: 'a', align: 'center' },
+                    { key: 'b', monospace: true },
+                ],
+                [],
+            );
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells[0].classList.contains('align-center')).toBe(true);
+            expect(cells[1].classList.contains('mono')).toBe(true);
+            grid.remove();
+        });
+
+        await it('derives grid-template-columns from width / flex', async () => {
+            const grid = makeGrid(
+                [
+                    { key: 'a', flex: 2 },
+                    { key: 'b', width: '80px' },
+                ],
+                [],
+            );
+            const table = grid.querySelector('.adw-data-grid-table') as HTMLElement;
+            expect(table.style.gridTemplateColumns).toBe('2fr 80px');
+            grid.remove();
+        });
+
+        await it('defaults the first column to flexible so amounts hug the right edge', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const table = grid.querySelector('.adw-data-grid-table') as HTMLElement;
+            // The CSSOM serialises the track back as `minmax(0px, 1fr)`.
+            expect(table.style.gridTemplateColumns).toBe('minmax(0px, 1fr) auto');
+            grid.remove();
+        });
+
+        await it('parses columns + rows from the JSON attributes', async () => {
+            const grid = document.createElement('adw-data-grid') as AdwDataGrid;
+            grid.setAttribute('columns', '[{"key":"a","label":"A"},{"key":"b","numeric":true}]');
+            grid.setAttribute('rows', '[{"a":"x","b":"1,00 €"}]');
+            document.body.appendChild(grid);
+            expect(grid.columns.length).toBe(2);
+            expect(grid.rows.length).toBe(1);
+            const bodyCells = grid.querySelectorAll('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(bodyCells[0].textContent).toBe('x');
+            expect(bodyCells[1].textContent).toBe('1,00 €');
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid rows', async () => {
+        await it('renders a row + a cell per column with the pre-formatted string', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'Umsatzerlöse', total: '120.000,00 €' },
+                { position: 'Sonstige Erträge', total: '5.000,00 €' },
+            ]);
+            const rows = grid.querySelectorAll('.adw-data-grid-row:not(.header)');
+            expect(rows.length).toBe(2);
+            const firstCells = rows[0].querySelectorAll('.adw-data-grid-cell');
+            expect(firstCells.length).toBe(2);
+            expect(firstCells[0].textContent).toBe('Umsatzerlöse');
+            expect(firstCells[1].textContent).toBe('120.000,00 €');
+            grid.remove();
+        });
+
+        await it('coerces a numeric cell value to a string', async () => {
+            const grid = makeGrid([{ key: 'qty', numeric: true }], [{ qty: 3 }]);
+            const cell = grid.querySelector('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(cell?.textContent).toBe('3');
+            grid.remove();
+        });
+
+        await it('renders an empty cell for a missing key', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'Only label' }]);
+            const cells = grid.querySelectorAll('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(cells[1].textContent).toBe('');
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid variants', async () => {
+        await it('a section row spans all columns with the first column value', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ variant: 'section', position: 'Betriebseinnahmen' }]);
+            const row = grid.querySelector('.adw-data-grid-row.variant-section') as HTMLElement;
+            expect(row).toBeTruthy();
+            const cells = row.querySelectorAll('.adw-data-grid-cell');
+            expect(cells.length).toBe(1);
+            expect(cells[0].textContent).toBe('Betriebseinnahmen');
+            expect((cells[0] as HTMLElement).style.gridColumn).toBe('1 / -1');
+            grid.remove();
+        });
+
+        await it('tags subtotal + total rows with their variant class', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { variant: 'subtotal', position: 'Gesamtleistung', total: '125.000,00 €' },
+                { variant: 'total', position: 'Betriebsergebnis', total: '42.000,00 €' },
+            ]);
+            expect(grid.querySelector('.adw-data-grid-row.variant-subtotal')).toBeTruthy();
+            expect(grid.querySelector('.adw-data-grid-row.variant-total')).toBeTruthy();
+            // A subtotal / total keeps the full per-column layout (not spanning).
+            const subtotalCells = grid.querySelectorAll('.variant-subtotal .adw-data-grid-cell');
+            expect(subtotalCells.length).toBe(2);
+            grid.remove();
+        });
+
+        await it('an unknown / absent variant falls back to normal', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'x' },
+                { variant: 'bogus', position: 'y' } as unknown as AdwDataGridRow,
+            ]);
+            const normals = grid.querySelectorAll('.adw-data-grid-row.variant-normal');
+            expect(normals.length).toBe(2);
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid row-activated', async () => {
+        await it('element-level interactive makes normal rows clickable + fires {index,row}', async () => {
+            const rows: AdwDataGridRow[] = [
+                { position: 'Row A', total: '1,00 €' },
+                { position: 'Row B', total: '2,00 €' },
+            ];
+            const grid = makeGrid(BWA_COLUMNS, rows);
+            grid.interactive = true;
+            let detail: { index: number; row: AdwDataGridRow } | null = null;
+            grid.addEventListener('row-activated', (e) => {
+                detail = (e as CustomEvent).detail;
+            });
+            const interactiveRows = grid.querySelectorAll('.adw-data-grid-row.interactive');
+            expect(interactiveRows.length).toBe(2);
+            (interactiveRows[1] as HTMLElement).click();
+            expect(detail).toBeTruthy();
+            expect(detail!.index).toBe(1);
+            expect(detail!.row.position).toBe('Row B');
+            grid.remove();
+        });
+
+        await it('section / subtotal / total rows never activate', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { variant: 'section', position: 'Sec' },
+                { variant: 'subtotal', position: 'Sub', total: '1,00 €' },
+                { variant: 'total', position: 'Tot', total: '2,00 €' },
+                { position: 'Data', total: '3,00 €' },
+            ]);
+            grid.interactive = true;
+            expect(grid.querySelectorAll('.adw-data-grid-row.interactive').length).toBe(1);
+            grid.remove();
+        });
+
+        await it('a per-row interactive flag opts a single row in / out', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'clickable', interactive: true },
+                { position: 'not clickable' },
+            ]);
+            // No element-level flag: only the opted-in row is interactive.
+            const interactiveRows = grid.querySelectorAll('.adw-data-grid-row.interactive');
+            expect(interactiveRows.length).toBe(1);
+            expect(interactiveRows[0].querySelector('.adw-data-grid-cell')?.textContent).toBe('clickable');
+            grid.remove();
+        });
+
+        await it('a per-row interactive:false opts out even when the element is interactive', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'a' }, { position: 'b', interactive: false }]);
+            grid.interactive = true;
+            expect(grid.querySelectorAll('.adw-data-grid-row.interactive').length).toBe(1);
+            grid.remove();
+        });
+
+        await it('Enter activates a focused interactive row', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'Row A', total: '1,00 €' }]);
+            grid.interactive = true;
+            let fired = 0;
+            grid.addEventListener('row-activated', () => fired++);
+            const row = grid.querySelector('.adw-data-grid-row.interactive') as HTMLElement;
+            expect(row.tabIndex).toBe(0);
+            row.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(fired).toBe(1);
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid caption', async () => {
+        await it('shows the caption from the attribute + hides it when empty', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const caption = grid.querySelector('.adw-data-grid-caption') as HTMLElement;
+            expect(caption.hidden).toBe(true);
+            grid.caption = 'Betriebswirtschaftliche Auswertung';
+            expect(caption.hidden).toBe(false);
+            expect(caption.textContent).toBe('Betriebswirtschaftliche Auswertung');
+            grid.remove();
+        });
+    });
+};