@aquera/nile-elements 2.0.3 → 2.0.5

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -71,11 +71,120 @@ export const styles = css`
     min-width:300px;
     max-width:512px;
     width:100%;
+    margin-inline: auto;
     height:max-content;
     display:flex;
     flex-direction:column;
     row-gap:var(--nile-es-gap);
   }
+  .empty-state--tone-info .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,
+      var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-warning .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,
+      var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-error .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,
+      var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-info .nile-flat-type-icon {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+  }
+
+  .empty-state--tone-warning .nile-flat-type-icon {
+    background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
+  }
+
+  .empty-state--tone-error .nile-flat-type-icon {
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
+  }
+
+  .empty-state--inline {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: none;
+    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
+    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
+             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .empty-state--inline .empty-state__body {
+    flex-direction: row;
+    align-items: center;
+    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+  }
+
+  .empty-state--inline .empty__state__text-section {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));
+    max-width: none;
+  }
+
+  .empty-state--inline .empty-state__text,
+  .empty-state--inline .empty-state__subtext {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    text-align: left;
+  }
+  .empty-state__body--inline {
+    display: grid;
+    place-items: center;
+  }
+
+
+  .empty-state--page .empty-state__text {
+    font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));
+    line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));
+    letter-spacing: -0.02em;
+  }
+
+  .empty-state--page .empty-state__subtext {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+  }
+
+  .empty-state--page .empty-state__code {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    letter-spacing: 0.2em;
+  }
+  /* stack and page carry no padding of their own, so the dashed edge would sit
+     flush against the content — hence the roomy padding here. */
+  .empty-state--bordered {
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-radius: var(--nile-border-size-10, var(--ng-radius-xl));
+    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+    padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))
+             var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  /* A strip stays tight when it is bordered too. Spelled out as its own
+     two-class rule so specificity decides, not declaration order. */
+  .empty-state--inline.empty-state--bordered {
+    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
+             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+  }
 
   .empty-state__body {
     display:flex;
@@ -90,13 +199,13 @@ export const styles = css`
   }
 
   .empty-state__img__icon {
-    display: var(--ng-display-flex);
+    display: var(--nile-display-flex, var(--ng-display-flex));
     justify-content: center;
     align-items: center;
   }
 
   .empty-state__body--tonal {
-    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
+    background: var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
@@ -109,8 +218,7 @@ export const styles = css`
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
     border-radius: var(--nile-es-flat-option-border-radius);
-
-    background-color: white;
+    background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));
     display: grid;
     place-items: center;
     border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
@@ -121,6 +229,8 @@ export const styles = css`
     flex-direction:column;
     gap:var(--nile-es-text-gap);
     max-width:80%;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .empty-state__text {
@@ -145,7 +255,20 @@ export const styles = css`
   .empty-state-actions {
     display:flex;
     justify-content:center;
+    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    flex-wrap: wrap;
   }
+
+  .empty-state__code {
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-align: center;
+    color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));
+  }
+
 `;
 
 export default [styles];

package/src/nile-empty-state/nile-empty-state.test.ts

@@ -1,5 +1,9 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import './nile-empty-state';
+// nile-glyph lives in its own package and is NOT registered by nile-elements —
+// the component documents it as a @dependency. Register it here or every glyph
+// assertion below would be querying an element that never upgrades.
+import '@aquera/nile-glyph/nile-glyph';
 import type { NileEmptyState } from './nile-empty-state';
 
 describe('NileEmptyState', () => {
@@ -10,8 +14,7 @@ describe('NileEmptyState', () => {
   it('5. variant defaults tonal', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.variant).to.equal('tonal'); });
   it('6. text default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.text).to.equal('Empty State'); });
   it('7. subText default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.subText).to.equal('No Data'); });
-  it('8. grayscale defaults false', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.grayscale).to.be.false; });
-  it('9. svgIconSize defaults 40', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.svgIconSize).to.equal(40); });
+  it('9. svgIconSize unset by default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.svgIconSize).to.be.undefined; });
   it('10. container part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="container"]')).to.exist; });
   it('11. body part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="body"]')).to.exist; });
   it('12. text part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="text"]')).to.exist; });
@@ -27,9 +30,9 @@ describe('NileEmptyState', () => {
   it('22. flat body', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__body--flat')).to.exist; });
   it('23. text displayed', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state text="Nothing here"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__text')!.textContent).to.contain('Nothing here'); });
   it('24. subText displayed', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state sub-text="Try again"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__subtext')!.textContent).to.contain('Try again'); });
-  it('25. nile-icon in tonal', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.exist; });
-  it('26. nile-icon in content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.exist; });
-  it('27. nile-icon in flat', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.exist; });
+  it('25. nile-glyph in tonal', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-glyph')).to.exist; });
+  it('26. nile-glyph in content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-glyph')).to.exist; });
+  it('27. nile-glyph in flat', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('nile-glyph')).to.exist; });
   it('28. slot', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('slot')).to.exist; });
   it('29. slotted content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state><button>Action</button></nile-empty-state>`); expect(el.querySelector('button')).to.exist; });
   it('30. dynamic text', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.text = 'New Text'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.empty-state__text')!.textContent).to.contain('New Text'); });
@@ -62,26 +65,25 @@ describe('NileEmptyState', () => {
   it('57. localName', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.localName).to.equal('nile-empty-state'); });
   it('58. namespaceURI', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
   it('59. ownerDocument', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.ownerDocument).to.equal(document); });
-  it('60. icon default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.icon).to.contain('nile-icon-error'); });
+  it('60. icon default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.icon).to.equal('ng-x-circle'); });
   it('61. custom icon', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state icon="star"></nile-empty-state>`); expect(el.icon).to.equal('star'); });
   it('62. actions class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state-actions')).to.exist; });
   it('63. empty-state__body class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__body')).to.exist; });
   it('64. text-section class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty__state__text-section')).to.exist; });
   it('65. sub-text attr', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state sub-text="Nope"></nile-empty-state>`); expect(el.subText).to.equal('Nope'); });
-  it('66. tonal-body part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="tonal-body"]')).to.exist; });
+  it('66. tonal-body part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part~="tonal-body"]')).to.exist; });
   it('67. content-image part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="content-image"]')).to.exist; });
   it('68. flat-body part', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="flat-body"]')).to.exist; });
   it('69. no tonal in flat', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__body--tonal')).to.be.null; });
   it('70. no content in tonal', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__body--content')).to.be.null; });
   it('71. no flat in content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__body--flat')).to.be.null; });
-  it('72. icon-wrapper part content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="icon-wrapper"]')).to.exist; });
+  it('72. icon-wrapper part content', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part~="icon-wrapper"]')).to.exist; });
   it('73. classList add', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
   it('74. dataset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state data-idx="0"></nile-empty-state>`); expect(el.dataset.idx).to.equal('0'); });
   it('75. getBoundingClientRect', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.getBoundingClientRect()).to.exist; });
   it('76. size type string', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(typeof el.size).to.equal('string'); });
   it('77. variant type string', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(typeof el.variant).to.equal('string'); });
-  it('78. grayscale type boolean', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(typeof el.grayscale).to.equal('boolean'); });
-  it('79. svgIconSize type number', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(typeof el.svgIconSize).to.equal('number'); });
+  it('79. svgIconSize type number once set', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state .svgIconSize=${60}></nile-empty-state>`); expect(typeof el.svgIconSize).to.equal('number'); });
   it('80. createElement', async () => { const el = document.createElement('nile-empty-state') as NileEmptyState; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
   it('81. aria-label', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state aria-label="Empty"></nile-empty-state>`); expect(el.getAttribute('aria-label')).to.equal('Empty'); });
   it('82. role', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state role="status"></nile-empty-state>`); expect(el.getAttribute('role')).to.equal('status'); });
@@ -98,9 +100,184 @@ describe('NileEmptyState', () => {
   it('93. dispatchCustomEvent', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
   it('94. scrollIntoView', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.scrollIntoView).to.be.a('function'); });
   it('95. focus method', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.focus).to.be.a('function'); });
-  it('96. dynamic icon', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); el.icon = 'star'; await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon!.getAttribute('name')).to.equal('star'); });
-  it('97. svgIconUrl renders custom', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal" svgIconUrl="/path/icon.svg"></nile-empty-state>`); await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon!.getAttribute('customsvgpath')).to.exist; });
-  it('98. svgIconSize applies', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal" svgIconUrl="/p.svg" .svgIconSize=${60}></nile-empty-state>`); await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon!.getAttribute('size')).to.equal('60'); });
+  it('96. dynamic icon', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); el.icon = 'star'; await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-glyph'); expect(icon!.getAttribute('name')).to.equal('star'); });
+  it('97. svgIconUrl renders custom', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal" svgIconUrl="/path/icon.svg"></nile-empty-state>`); await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-glyph'); expect(icon!.getAttribute('customsvgpath')).to.exist; });
+  it('98. svgIconSize applies', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal" svgIconUrl="/p.svg" .svgIconSize=${60}></nile-empty-state>`); await el.updateComplete; const icon = el.shadowRoot!.querySelector('nile-glyph'); expect(icon!.getAttribute('size')).to.equal('60'); });
   it('99. shadow childNodes', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
-  it('100. full integration', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state text="Empty" sub-text="Nothing" variant="content" size="lg" icon="star" class="e" id="e1"><button>Retry</button></nile-empty-state>`); expect(el.text).to.equal('Empty'); expect(el.subText).to.equal('Nothing'); expect(el.variant).to.equal('content'); expect(el.size).to.equal('lg'); expect(el.icon).to.equal('star'); expect(el.id).to.equal('e1'); expect(el.querySelector('button')).to.exist; expect(el.shadowRoot!.querySelector('.empty-state--lg')).to.exist; });
+  it('100. legacy full integration', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state text="Empty" sub-text="Nothing" variant="content" size="lg" icon="star" class="e" id="e1"><button>Retry</button></nile-empty-state>`); expect(el.text).to.equal('Empty'); expect(el.subText).to.equal('Nothing'); expect(el.variant).to.equal('content'); expect(el.size).to.equal('lg'); expect(el.icon).to.equal('star'); expect(el.id).to.equal('e1'); expect(el.querySelector('button')).to.exist; expect(el.shadowRoot!.querySelector('.empty-state--lg')).to.exist; });
+
+  // ── status presets ────────────────────────────────────────────────────────
+
+  const container = (el: NileEmptyState) => el.shadowRoot!.querySelector('[part="container"]')!;
+  const glyph = (el: NileEmptyState) => el.shadowRoot!.querySelector('nile-glyph')!;
+
+  it('101. status unset by default', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.status).to.be.undefined; });
+  it('102. status=empty copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(el.text).to.equal('No data yet'); expect(el.subText).to.contain('Rows appear here'); });
+  it('103. status=empty icon', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(el.icon).to.equal('ng-database'); });
+  it('104. status=no-results copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-results"></nile-empty-state>`); expect(el.text).to.equal('No matches'); expect(el.icon).to.equal('ng-search-lg'); });
+  it('105. status=not-found copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="not-found"></nile-empty-state>`); expect(el.text).to.contain(`couldn't find that`); expect(el.icon).to.equal('ng-file-06'); });
+  it('106. status=no-access copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-access"></nile-empty-state>`); expect(el.text).to.contain(`don't have access`); expect(el.icon).to.equal('ng-lock'); });
+  it('107. status=error copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(el.text).to.equal('Something went wrong'); expect(el.icon).to.equal('ng-alert-circle'); });
+  it('108. status=offline copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="offline"></nile-empty-state>`); expect(el.text).to.equal('Connection lost'); expect(el.icon).to.equal('ng-cloud-off'); });
+  it('109. preset icon reaches the glyph', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(glyph(el).getAttribute('name')).to.equal('ng-database'); });
+  it('110. preset renders the copy', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-results"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('.empty-state__text')!.textContent).to.contain('No matches'); });
+  it('111. status reflects', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(el.getAttribute('status')).to.equal('error'); });
+  it('112. status change reruns the preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); el.status = 'offline'; await el.updateComplete; expect(el.text).to.equal('Connection lost'); });
+
+  // ── per-property overrides beat the preset ────────────────────────────────
+
+  it('113. text overrides preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" text="Mine"></nile-empty-state>`); expect(el.text).to.equal('Mine'); expect(el.subText).to.contain('Rows appear here'); });
+  it('114. sub-text overrides preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" sub-text="Mine"></nile-empty-state>`); expect(el.subText).to.equal('Mine'); expect(el.text).to.equal('No data yet'); });
+  it('115. icon overrides preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" icon="star"></nile-empty-state>`); expect(el.icon).to.equal('star'); });
+  it('116. override survives a status change', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" text="Mine"></nile-empty-state>`); el.status = 'error'; await el.updateComplete; expect(el.text).to.equal('Mine'); });
+
+  // ── tone ──────────────────────────────────────────────────────────────────
+
+  it('117. tone defaults neutral without status', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.tone).to.equal('neutral'); });
+  it('118. tone defaults from status', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-access"></nile-empty-state>`); expect(el.tone).to.equal('warning'); });
+  it('119. error status is error tone', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(el.tone).to.equal('error'); });
+  it('120. tone overridable', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-access" tone="neutral"></nile-empty-state>`); expect(el.tone).to.equal('neutral'); });
+  it('121. tone class on container', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(container(el).classList.contains('empty-state--tone-error')).to.be.true; });
+  it('122. neutral tone omits glyph color', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.be.null; });
+  it('123. warning tone sets glyph color', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="not-found"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.contain('fg-warning-primary'); });
+
+  // ── ARIA ──────────────────────────────────────────────────────────────────
+
+  it('124. no live region without status', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(container(el).getAttribute('role')).to.be.null; expect(container(el).getAttribute('aria-live')).to.be.null; });
+  it('125. status gets role=status/polite', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(container(el).getAttribute('role')).to.equal('status'); expect(container(el).getAttribute('aria-live')).to.equal('polite'); });
+  it('126. error gets role=alert/assertive', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(container(el).getAttribute('role')).to.equal('alert'); expect(container(el).getAttribute('aria-live')).to.equal('assertive'); });
+  it('127. offline gets role=alert', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="offline"></nile-empty-state>`); expect(container(el).getAttribute('role')).to.equal('alert'); });
+  it('128. no-access does not interrupt', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="no-access"></nile-empty-state>`); expect(container(el).getAttribute('aria-live')).to.equal('polite'); });
+
+  // ── layout ────────────────────────────────────────────────────────────────
+
+  it('129. layout defaults stack', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.layout).to.equal('stack'); expect(container(el).classList.contains('empty-state--stack')).to.be.true; });
+  it('130. layout=inline class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline"></nile-empty-state>`); expect(container(el).classList.contains('empty-state--inline')).to.be.true; });
+  it('131. layout=page class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="page"></nile-empty-state>`); expect(container(el).classList.contains('empty-state--page')).to.be.true; });
+  it('132. layout reflects', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="page"></nile-empty-state>`); expect(el.getAttribute('layout')).to.equal('page'); });
+  it('133. inline shrinks the glyph to 20', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('20'); });
+  it('134. stack keeps the 40px tonal glyph', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('40'); });
+  it('135. inline drops the 512px ceiling', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline"></nile-empty-state>`); expect(getComputedStyle(container(el)).maxWidth).to.equal('none'); });
+  it('136. stack keeps the 512px ceiling', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(getComputedStyle(container(el)).maxWidth).to.equal('512px'); });
+  it('137. dynamic layout', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.layout = 'inline'; await el.updateComplete; expect(container(el).classList.contains('empty-state--inline')).to.be.true; });
+
+  // ── code ──────────────────────────────────────────────────────────────────
+
+  it('138. no code part when unset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="code"]')).to.be.null; });
+  it('139. code renders', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state code="Error 404"></nile-empty-state>`); expect(el.shadowRoot!.querySelector('[part="code"]')!.textContent).to.contain('Error 404'); });
+  it('140. code sits above the title', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state code="404"></nile-empty-state>`); const section = el.shadowRoot!.querySelector('[part="text-section"]')!; expect(section.firstElementChild!.getAttribute('part')).to.equal('code'); });
+  it('141. dynamic code', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.code = '500'; await el.updateComplete; expect(el.shadowRoot!.querySelector('[part="code"]')).to.exist; });
+
+  // ── bordered ──────────────────────────────────────────────────────────────
+
+  it('147. bordered defaults false', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(el.bordered).to.be.false; expect(container(el).classList.contains('empty-state--bordered')).to.be.false; });
+  it('148. bordered class', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state bordered></nile-empty-state>`); expect(container(el).classList.contains('empty-state--bordered')).to.be.true; });
+  // The --ng-* sheet isn't loaded here, so the token has to be supplied or the
+  // whole `border` shorthand is invalid at computed-value time and drops out.
+  it('149. bordered draws a dashed edge', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state bordered style="--ng-colors-border-primary:#D5D7DA"></nile-empty-state>`); expect(getComputedStyle(container(el)).borderTopStyle).to.equal('dashed'); });
+  it('150. bordered reflects', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state bordered></nile-empty-state>`); expect(el.hasAttribute('bordered')).to.be.true; });
+
+  // --bordered and --inline both set padding at one-class specificity, so on their
+  // own the winner would be whichever rule comes last in the stylesheet. The explicit
+  // .empty-state--inline.empty-state--bordered rule settles it; these pin that intent.
+  const SPACING = '--ng-spacing-xl:20px;--ng-spacing-lg:16px;--ng-spacing-4xl:96px;--ng-spacing-3xl:64px';
+  it('150b. bordered stack uses the roomy padding', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state bordered style=${SPACING}></nile-empty-state>`); const cs = getComputedStyle(container(el)); expect(cs.paddingTop).to.equal('96px'); expect(cs.paddingLeft).to.equal('64px'); });
+  it('150c. bordered inline keeps the tight padding', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" bordered style=${SPACING}></nile-empty-state>`); const cs = getComputedStyle(container(el)); expect(cs.paddingTop).to.equal('20px'); expect(cs.paddingLeft).to.equal('16px'); });
+  it('150d. bordered does not change inline padding', async () => { const plain = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" style=${SPACING}></nile-empty-state>`); const edged = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" bordered style=${SPACING}></nile-empty-state>`); expect(getComputedStyle(container(edged)).padding).to.equal(getComputedStyle(container(plain)).padding); });
+  it('150e. bordered inline still draws the dashed edge', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" bordered style="--ng-colors-border-primary:#D5D7DA"></nile-empty-state>`); expect(getComputedStyle(container(el)).borderTopStyle).to.equal('dashed'); });
+
+  // ── regressions the specimen sheet flagged ────────────────────────────────
+
+  it('151. content variant no longer forces white', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.not.equal('white'); });
+  // Was a literal `white`, which punched a white chip into any dark page. Feed
+  // the theme token a sentinel: if the chip picks it up, it is no longer fixed.
+  it('152. flat chip background tracks the theme token', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat" style="--ng-colors-bg-primary:rgb(1, 2, 3)"></nile-empty-state>`); const chip = el.shadowRoot!.querySelector('.nile-flat-type-icon')!; expect(getComputedStyle(chip).backgroundColor).to.equal('rgb(1, 2, 3)'); });
+  it('153. svgIconUrl still wins over a preset icon', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('customsvgpath')).to.exist; expect(glyph(el).getAttribute('name')).to.be.null; });
+  it('154. svgIconColor beats the tone colour', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error" svgIconUrl="/p.svg" svgIconColor="#123456"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.equal('#123456'); });
+  // ── the preset glyphs must actually exist ─────────────────────────────────
+
+  // nile-glyph strips a name's dashes, looks it up, and silently renders nothing
+  // when it misses — so a bad preset name is invisible rather than loud. These
+  // assert the glyph ACTUALLY DRAWS, which is stronger than checking the name
+  // against a barrel: it exercises the same resolution path the browser takes,
+  // and it cannot drift from it.
+  const STATUSES = ['empty', 'no-results', 'not-found', 'no-access', 'error', 'offline'] as const;
+
+  /** The <svg> nile-glyph drew, once it has resolved the name. */
+  const drawnSvg = async (el: NileEmptyState): Promise<SVGElement> => {
+    const g = glyph(el);
+    await waitUntil(
+      () => !!g.shadowRoot?.querySelector('svg'),
+      `glyph "${el.icon}" never drew — the name does not resolve in @aquera/nile-glyph`,
+    );
+    return g.shadowRoot!.querySelector('svg')!;
+  };
+
+  STATUSES.forEach((status, i) => {
+    it(`${155 + i}. status=${status} names a glyph that actually draws`, async () => {
+      const el = await fixture<NileEmptyState>(html`<nile-empty-state status="${status}"></nile-empty-state>`);
+      expect(await drawnSvg(el)).to.exist;
+    });
+  });
+
+  // nile-glyph resolves the var expression and reflects the resolved value back,
+  // so these assert the paint method that actually reaches the SVG. Every glyph the
+  // component draws is stroked now — preset or not, either theme.
+  it('161. preset glyphs are stroked, not filled', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect(glyph(el).getAttribute('method')).to.equal('stroke'); });
+  it('162. preset glyph artwork is an outline', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); expect((await drawnSvg(el)).getAttribute('fill')).to.equal('none'); });
+  it('163. a call site with no status is stroked too', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); expect(glyph(el).getAttribute('method')).to.equal('stroke'); });
+  it('163b. content variant strokes a preset glyph', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content" status="empty"></nile-empty-state>`); expect(glyph(el).getAttribute('method')).to.equal('stroke'); });
+  it('163c. content variant strokes a caller icon as well', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content" icon="star"></nile-empty-state>`); expect(glyph(el).getAttribute('method')).to.equal('stroke'); });
+  it('164. overriding the preset icon does not change the paint method', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" icon="star"></nile-empty-state>`); expect(glyph(el).getAttribute('method')).to.equal('stroke'); });
+
+  // ── nile-glyph + ::part(icon-chrome) ──────────────────────────────────────
+  //
+  // The component draws through nile-glyph, not nile-icon: nile-icon resolves
+  // against a vendored subset and renders nothing when a name misses it, which
+  // is what held the presets on near-miss names.
+
+  const SHAPES: ReadonlyArray<readonly [string, string]> = [
+    ['variant', 'tonal'], ['variant', 'flat'], ['variant', 'content'], ['layout', 'inline'],
+  ];
+  const partsOf = (el: NileEmptyState, sel: string) =>
+    (el.shadowRoot!.querySelector(sel)!.getAttribute('part') ?? '').split(/\s+/);
+
+  it('166. never renders a nile-icon in any shape', async () => { for (const [name, value] of SHAPES) { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.setAttribute(name, value); await el.updateComplete; expect(el.shadowRoot!.querySelector('nile-icon'), `${name}="${value}"`).to.be.null; } });
+  it('167. renders exactly one glyph per shape', async () => { for (const [name, value] of SHAPES) { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.setAttribute(name, value); await el.updateComplete; expect(el.shadowRoot!.querySelectorAll('[part="body"] nile-glyph').length, `${name}="${value}"`).to.equal(1); } });
+  it('169. every shape exposes exactly one icon-chrome element', async () => { for (const [name, value] of SHAPES) { const el = await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`); el.setAttribute(name, value); await el.updateComplete; expect(el.shadowRoot!.querySelectorAll('[part~="icon-chrome"]').length, `${name}="${value}"`).to.equal(1); } });
+  it('170. tonal disc carries icon-chrome alongside tonal-body', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal"></nile-empty-state>`); const p = partsOf(el, '.empty-state__body--tonal'); expect(p).to.include('icon-chrome'); expect(p).to.include('tonal-body'); });
+  it('171. flat tile carries icon-chrome, its wrapper does not', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(partsOf(el, '.nile-flat-type-icon')).to.include('icon-chrome'); expect(partsOf(el, '.empty-state__body--flat')).to.not.include('icon-chrome'); });
+  it('172. content icon box carries icon-chrome alongside icon-wrapper', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content"></nile-empty-state>`); const p = partsOf(el, '.empty-state__img__icon'); expect(p).to.include('icon-chrome'); expect(p).to.include('icon-wrapper'); });
+  it('173. inline exposes a bare glyph box, no variant chrome', async () => { for (const v of ['tonal', 'flat', 'content'] as const) { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" variant=${v}></nile-empty-state>`); const p = partsOf(el, '.empty-state__body--inline'); expect(p, v).to.include('inline-icon'); expect(p, v).to.include('icon-chrome'); expect(el.shadowRoot!.querySelector('.empty-state__body--tonal'), v).to.be.null; expect(el.shadowRoot!.querySelector('.nile-flat-type-icon'), v).to.be.null; expect(el.shadowRoot!.querySelector('.empty-state__img__icon'), v).to.be.null; } });
+  it('174. inline still honours the status preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" status="no-results"></nile-empty-state>`); expect(glyph(el).getAttribute('name')).to.equal('ng-search-lg'); expect(container(el).getAttribute('role')).to.equal('status'); });
+  it('175. the inert nile-icon variant attribute is gone from the flat tile', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat"></nile-empty-state>`); expect(glyph(el).hasAttribute('variant')).to.be.false; });
+
+  // ── svgIconColor beats the tone, so chrome and glyph can differ ───────────
+
+  it('176. svgIconColor colours a catalogue glyph', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state icon="ng-search-lg" svgIconColor="#6941C6"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.equal('#6941C6'); });
+  it('177. svgIconColor beats the tone colour', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error" svgIconColor="#6941C6"></nile-empty-state>`); expect(el.tone).to.equal('error'); expect(glyph(el).getAttribute('color')).to.equal('#6941C6'); });
+  it('178. without svgIconColor the tone still decides', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); expect(glyph(el).getAttribute('color')).to.contain('--ng-colors-fg-error-primary'); });
+  it('179. svgIconColor applies in every shape', async () => { for (const [name, value] of SHAPES) { const el = await fixture<NileEmptyState>(html`<nile-empty-state svgIconColor="#6941C6"></nile-empty-state>`); el.setAttribute(name, value); await el.updateComplete; expect(glyph(el).getAttribute('color'), `${name}="${value}"`).to.equal('#6941C6'); } });
+
+  // The resolving accessors must report a resolved oldValue: Lit reads the new value
+  // back through the getter, so capturing the raw backing field would compare an
+  // undefined against a resolved value.
+  it('180. assigning the already-resolved value schedules nothing', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); el.icon = el.icon; expect((el as any).isUpdatePending).to.be.false; });
+  it('181. same for text and tone', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="error"></nile-empty-state>`); el.text = el.text; el.tone = el.tone; expect((el as any).isUpdatePending).to.be.false; });
+  it('182. a real change still schedules', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); el.icon = 'star'; expect((el as any).isUpdatePending).to.be.true; await el.updateComplete; expect(glyph(el).getAttribute('name')).to.equal('star'); });
+  it('183. changedProperties reports the resolved old value', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty"></nile-empty-state>`); let seen: unknown = 'unset'; (el as any).willUpdate = (c: Map<string, unknown>) => { if (c.has('icon')) seen = c.get('icon'); }; el.icon = 'star'; await el.updateComplete; expect(seen).to.equal('ng-database'); });
+  it('184. removing the attribute falls back to the preset', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="empty" icon="star"></nile-empty-state>`); el.removeAttribute('icon'); await el.updateComplete; expect(el.icon).to.equal('ng-database'); });
+
+  // svgIconSize overrides the layout-driven size rather than replacing it, so a
+  // custom SVG tracks the shape it is drawn in unless the caller says otherwise.
+  it('185. custom SVG follows the inline size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('20'); });
+  it('186. custom SVG follows the tonal size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="tonal" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('40'); });
+  it('187. custom SVG follows the flat size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('24'); });
+  it('188. custom SVG follows the flat lg size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="flat" size="lg" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('28'); });
+  it('189. custom SVG follows the content size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="content" svgIconUrl="/p.svg"></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('24'); });
+  it('190. svgIconSize overrides the layout size', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" svgIconUrl="/p.svg" .svgIconSize=${60}></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('60'); });
+  it('191. svgIconSize does not affect a catalogue glyph', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state layout="inline" .svgIconSize=${60}></nile-empty-state>`); expect(glyph(el).getAttribute('size')).to.equal('20'); });
+
+
+  it('165. full new-API integration', async () => { const el = await fixture<NileEmptyState>(html`<nile-empty-state status="not-found" layout="page" size="lg" code="Error 404" bordered><button>Go back</button></nile-empty-state>`); expect(el.text).to.contain(`couldn't find that`); expect(el.tone).to.equal('warning'); expect(container(el).getAttribute('role')).to.equal('status'); expect(container(el).classList.contains('empty-state--page')).to.be.true; expect(container(el).classList.contains('empty-state--bordered')).to.be.true; expect(el.shadowRoot!.querySelector('[part="code"]')!.textContent).to.contain('Error 404'); expect(el.querySelector('button')).to.exist; });
 });