@digital-realty/ix-grid 1.0.49-alpha.1 → 1.0.49-alpha.2

package/dist/test/ix-grid-column-filter.test.js

@@ -1,36 +1,36 @@
-import { html } from 'lit';
-import { fixture, expect, elementUpdated } from '@open-wc/testing';
-import '../components/IxGridColumnFilter.js';
-const columns = [
-    {
-        name: 'firstName',
-        header: 'First name',
-        hidden: false,
-    },
-    {
-        name: 'lastName',
-        header: 'Last name',
-        hidden: true,
-    },
-    {
-        name: 'middleName',
-        header: 'Middle name',
-        hidden: false,
-    },
-];
-describe('IxGridColumnFilter', () => {
-    it('renders the grid column filter component', async () => {
-        const el = await fixture(html `<ix-grid-column-filter></ix-grid-column-filter>`);
-        expect(el).to.not.be.null;
-    });
-    it('renders the grid column filters list', async () => {
-        var _a, _b;
-        const el = await fixture(html `<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`);
-        const list = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list');
-        list.click();
-        await elementUpdated(el);
-        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('ix-switch');
-        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
-    });
-});
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridColumnFilter.js';
+const columns = [
+    {
+        name: 'firstName',
+        header: 'First name',
+        hidden: false,
+    },
+    {
+        name: 'lastName',
+        header: 'Last name',
+        hidden: true,
+    },
+    {
+        name: 'middleName',
+        header: 'Middle name',
+        hidden: false,
+    },
+];
+describe('IxGridColumnFilter', () => {
+    it('renders the grid column filter component', async () => {
+        const el = await fixture(html `<ix-grid-column-filter></ix-grid-column-filter>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders the grid column filters list', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`);
+        const list = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list');
+        list.click();
+        await elementUpdated(el);
+        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('ix-switch');
+        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
+    });
+});
 //# sourceMappingURL=ix-grid-column-filter.test.js.map

package/dist/test/ix-grid-row-filter.test.d.ts

@@ -1 +1 @@
-import '../components/IxGridRowFilter.js';
+import '../components/IxGridRowFilter.js';

package/dist/test/ix-grid-row-filter.test.js

@@ -1,37 +1,37 @@
-import { html } from 'lit';
-import { fixture, expect, elementUpdated } from '@open-wc/testing';
-import '../components/IxGridRowFilter.js';
-const columns = [
-    {
-        name: 'firstName',
-        header: 'First name',
-        filterable: true,
-    },
-    {
-        name: 'lastName',
-        header: 'Last name',
-        filterable: true,
-    },
-    {
-        name: 'middleName',
-        header: 'Middle name',
-        filterable: false,
-    },
-    {
-        name: 'email',
-        header: 'Email',
-        filterable: true,
-    },
-];
-describe('IxGridRowFilter', () => {
-    it('renders and popluates the grid row filter', async () => {
-        var _a, _b;
-        const el = await fixture(html `<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`);
-        const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
-        openMenu.click();
-        await elementUpdated(el);
-        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('select[data-v="firstName"] option');
-        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
-    });
-});
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridRowFilter.js';
+const columns = [
+    {
+        name: 'firstName',
+        header: 'First name',
+        filterable: true,
+    },
+    {
+        name: 'lastName',
+        header: 'Last name',
+        filterable: true,
+    },
+    {
+        name: 'middleName',
+        header: 'Middle name',
+        filterable: false,
+    },
+    {
+        name: 'email',
+        header: 'Email',
+        filterable: true,
+    },
+];
+describe('IxGridRowFilter', () => {
+    it('renders and popluates the grid row filter', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`);
+        const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+        openMenu.click();
+        await elementUpdated(el);
+        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('select[data-v="firstName"] option');
+        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
+    });
+});
 //# sourceMappingURL=ix-grid-row-filter.test.js.map

package/dist/test/ix-grid.test.d.ts

@@ -1,2 +1,2 @@
-import '../components/ix-grid-no-rows.js';
-import '../ix-grid.js';
+import '../ix-grid-no-rows.js';
+import '../ix-grid.js';

package/dist/test/ix-grid.test.js

@@ -1,57 +1,57 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import '../components/ix-grid-no-rows.js';
-import '../ix-grid.js';
-const rows = [
-    {
-        name: 'one',
-    },
-    {
-        name: 'two',
-    },
-    {
-        name: 'three',
-    },
-];
-const columns = [
-    {
-        name: 'one',
-        header: 'one',
-        bodyRenderer: row => html ` <span>${row.name}</span>`,
-    },
-    {
-        name: 'two',
-        header: 'one',
-        bodyRenderer: row => html ` <span>${row.name}</span>`,
-    },
-    {
-        name: 'three',
-        header: 'one',
-        bodyRenderer: row => html ` <span>${row.name}</span>`,
-    },
-];
-describe('IxGrid', () => {
-    it('renders a grid', async () => {
-        const el = await fixture(html `<ix-grid></ix-grid>`);
-        expect(el).to.not.be.null;
-    });
-    it('renders the correct number of rows', async () => {
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../ix-grid-no-rows.js';
+import '../ix-grid.js';
+const rows = [
+    {
+        name: 'one',
+    },
+    {
+        name: 'two',
+    },
+    {
+        name: 'three',
+    },
+];
+const columns = [
+    {
+        name: 'one',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+    },
+    {
+        name: 'two',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+    },
+    {
+        name: 'three',
+        header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
+    },
+];
+describe('IxGrid', () => {
+    it('renders a grid', async () => {
+        const el = await fixture(html `<ix-grid></ix-grid>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders the correct number of rows', async () => {
         const el = await fixture(html `<ix-grid
       .columns=${columns}
       .rows=${rows}
-    ></ix-grid>`);
-        expect(rows.length).to.equal(3);
-        expect(el).to.not.be.null;
-    });
-    it('renders no rows component state', async () => {
-        var _a;
+    ></ix-grid>`);
+        expect(rows.length).to.equal(3);
+        expect(el).to.not.be.null;
+    });
+    it('renders no rows component state', async () => {
+        var _a;
         const el = await fixture(html `<ix-grid
       .columns=${columns}
       .rows=${[]}
       ><ix-grid-no-rows slot="no-rows"></ix-grid-no-rows
-    ></ix-grid>`);
-        const noRows = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="no-rows"]');
-        expect(noRows).to.not.be.null;
-    });
-});
+    ></ix-grid>`);
+        const noRows = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="no-rows"]');
+        expect(noRows).to.not.be.null;
+    });
+});
 //# sourceMappingURL=ix-grid.test.js.map

package/dist/test/ix-grid.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,IAAI;gBACF,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,EAAE;;gBAEA,CAAC,CAAC;QAEd,MAAM,MAAM,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACpE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../components/ix-grid-no-rows.js';\nimport '../ix-grid.js';\n\nconst rows = [\n  {\n    name: 'one',\n  },\n  {\n    name: 'two',\n  },\n  {\n    name: 'three',\n  },\n];\n\nconst columns = [\n  {\n    name: 'one',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'two',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'three',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n];\n\ndescribe('IxGrid', () => {\n  it('renders a grid', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders the correct number of rows', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      .columns=${columns}\n      .rows=${rows}\n    ></ix-grid>`);\n\n    expect(rows.length).to.equal(3);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders no rows component state', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      .columns=${columns}\n      .rows=${[]}\n      ><ix-grid-no-rows slot=\"no-rows\"></ix-grid-no-rows\n    ></ix-grid>`);\n\n    const noRows = el.shadowRoot?.querySelector('slot[name=\"no-rows\"]');\n    expect(noRows).to.not.be.null;\n  });\n});\n"]}
+{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,IAAI;gBACF,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,EAAE;;gBAEA,CAAC,CAAC;QAEd,MAAM,MAAM,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACpE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../ix-grid-no-rows.js';\nimport '../ix-grid.js';\n\nconst rows = [\n  {\n    name: 'one',\n  },\n  {\n    name: 'two',\n  },\n  {\n    name: 'three',\n  },\n];\n\nconst columns = [\n  {\n    name: 'one',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'two',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'three',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n];\n\ndescribe('IxGrid', () => {\n  it('renders a grid', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders the correct number of rows', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      .columns=${columns}\n      .rows=${rows}\n    ></ix-grid>`);\n\n    expect(rows.length).to.equal(3);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders no rows component state', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      .columns=${columns}\n      .rows=${[]}\n      ><ix-grid-no-rows slot=\"no-rows\"></ix-grid-no-rows\n    ></ix-grid>`);\n\n    const noRows = el.shadowRoot?.querySelector('slot[name=\"no-rows\"]');\n    expect(noRows).to.not.be.null;\n  });\n});\n"]}

package/dist/test/ix-pagination.test.d.ts

@@ -1 +1 @@
-import '../components/IxPagination.js';
+import '../components/IxPagination.js';

package/dist/test/ix-pagination.test.js

@@ -1,28 +1,28 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import '../components/IxPagination.js';
-describe('IxPagination', () => {
-    it('renders pagination', async () => {
-        const el = await fixture(html `<ix-pagination></ix-pagination>`);
-        expect(el).to.not.be.null;
-    });
-    it('renders pagination page size select', async () => {
-        var _a;
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../components/IxPagination.js';
+describe('IxPagination', () => {
+    it('renders pagination', async () => {
+        const el = await fixture(html `<ix-pagination></ix-pagination>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders pagination page size select', async () => {
+        var _a;
         const el = await fixture(html `<ix-pagination
       .pageSizes=${[1, 2, 3]}
-    ></ix-pagination>`);
-        const pageSizeSelect = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ix-select-option');
-        expect(pageSizeSelect === null || pageSizeSelect === void 0 ? void 0 : pageSizeSelect.length).to.equal(3);
-    });
-    it('renders pagination range info', async () => {
-        var _a;
+    ></ix-pagination>`);
+        const pageSizeSelect = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ix-select-option');
+        expect(pageSizeSelect === null || pageSizeSelect === void 0 ? void 0 : pageSizeSelect.length).to.equal(3);
+    });
+    it('renders pagination range info', async () => {
+        var _a;
         const el = await fixture(html `<ix-pagination
       pageSize="10"
       page="2"
       recordCount="99"
-    ></ix-pagination>`);
-        const pageRangeInfo = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('p')[1];
-        expect(pageRangeInfo === null || pageRangeInfo === void 0 ? void 0 : pageRangeInfo.innerText).to.equal('11 - 20 of 99');
-    });
-});
+    ></ix-pagination>`);
+        const pageRangeInfo = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('p')[1];
+        expect(pageRangeInfo === null || pageRangeInfo === void 0 ? void 0 : pageRangeInfo.innerText).to.equal('11 - 20 of 99');
+    });
+});
 //# sourceMappingURL=ix-pagination.test.js.map

package/package.json

@@ -3,17 +3,17 @@
   "description": "Webcomponent ix-grid following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.49-alpha.1",
+  "version": "1.0.49-alpha.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./ix-grid.js": "./dist/ix-grid.js",
-    "./ix-grid-nav.js": "./dist/components/ix-grid-nav.js",
+    "./ix-grid-nav.js": "./dist/ix-grid-nav.js",
     "./ix-grid.min.js": "./dist/ix-grid.min.js",
-    "./ix-grid-no-rows.js": "./dist/components/ix-grid-no-rows.js",
-    "./IxGridNav": "./dist/react/IxGridNav.js"
+    "./ix-grid-no-rows.js": "./dist/ix-grid-no-rows.js",
+    "./IxGridNav": "./dist/IxGridNav.js"
   },
   "publishConfig": {
     "access": "public"
@@ -29,12 +29,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-button": "^3.2.32-alpha.1",
-    "@digital-realty/ix-icon": "^1.0.37-alpha.1",
-    "@digital-realty/ix-icon-button": "^1.0.41-alpha.1",
-    "@digital-realty/ix-menu": "^1.0.5-alpha.1",
-    "@digital-realty/ix-select": "^1.0.39-alpha.1",
-    "@digital-realty/ix-switch": "^2.1.12-alpha.1",
+    "@digital-realty/ix-button": "^3.2.32-alpha.0",
+    "@digital-realty/ix-icon": "^1.0.37-alpha.0",
+    "@digital-realty/ix-icon-button": "^1.0.41-alpha.0",
+    "@digital-realty/ix-menu": "^1.0.5-alpha.0",
+    "@digital-realty/ix-select": "^1.0.39-alpha.0",
+    "@digital-realty/ix-switch": "^2.1.12-alpha.0",
     "@lit/react": "^1.0.5",
     "@vaadin/grid": "^24.3.11",
     "lit": "^2.0.2",
@@ -103,5 +103,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "22ec023bfc49506327d74412840e42412735bb09"
+  "gitHead": "60da388c5cabac1ab856f981c965c44ed46d27a0"
 }

package/src/{react/IxGridNav.ts → IxGridNav.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { IxGridNavigation } from '../components/IxGridNav.js';
+import { IxGridNavigation } from './components/IxGridNav.js';
 
 export const IxGridNav = createComponent({
   tagName: 'ix-grid-nav',

package/src/components/IxGridNoRows.ts

@@ -6,23 +6,24 @@ export class IxGridNoRows extends LitElement {
   static styles = css`
     .container {
       display: flex;
-      align-items: center;
       justify-content: center;
-      padding: 1rem;
+      align-items: center;
       flex-direction: column;
+      text-align: center;
+      padding: 3.125rem 0;
     }
     .icon {
-      margin: 4rem 0 0;
-      width: var(--no-rows-icon-size, 48px);
-      height: var(--no-rows-icon-size, 48px);
-      --ix-icon-font-size: var(--no-rows-icon-size, 48px);
-      --ix-icon-line-height: var(--no-rows-icon-line-height, 1);
+      user-select: none;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      font-size: 1.5rem;
+      color: rgb(255, 152, 0);
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
     .warning,
     .error {
       user-select: none;
-      width: 48px;
-      height: 44px;
       color: var(--clr-warning, #ff9800);
     }
     .critical {
@@ -32,7 +33,15 @@ export class IxGridNoRows extends LitElement {
       font-family: var(--ix-font-family, 'Red Hat Display');
     }
     h2.dlr-text-heading {
-      margin-top: 10px;
+      margin: 0.5rem 0 0;
+      font-family: 'Red Hat Display', sans-serif;
+      font-style: normal;
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: 0em;
+      color: rgb(9, 34, 65);
+      text-align: center;
+      font-weight: 700;
     }
   `;
 
@@ -42,9 +51,11 @@ export class IxGridNoRows extends LitElement {
 
   @property({ type: String }) message: string = 'No data to display';
 
+  @property({ type: String }) iconFontSize: string = '3rem';
+
   render() {
     return html`
-      <div class="container">
+      <div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
         <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
         <h2 class="dlr-text-heading">${this.message}</h2>
       </div>

package/src/components/grid-row-filter-styles.ts

@@ -257,7 +257,7 @@ export const IxGridRowFilterStyles = css`
     position: absolute;
     top: 6px;
     left: 14px;
-    z-index: 98;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;

package/src/{components/ix-grid-nav.ts → ix-grid-nav.ts}

@@ -1,3 +1,3 @@
-import { IxGridNavigation } from './IxGridNav.js';
+import { IxGridNavigation } from './components/IxGridNav.js';
 
 window.customElements.define('ix-grid-nav', IxGridNavigation);

package/src/ix-grid-no-rows.ts

@@ -0,0 +1,3 @@
+import { IxGridNoRows } from './components/IxGridNoRows.js';
+
+window.customElements.define('ix-grid-no-rows', IxGridNoRows);

package/src/test/ix-grid.test.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { fixture, expect } from '@open-wc/testing';
 import { IxGrid } from '../IxGrid.js';
-import '../components/ix-grid-no-rows.js';
+import '../ix-grid-no-rows.js';
 import '../ix-grid.js';
 
 const rows = [