@aquera/nile-elements 2.0.3 → 2.0.4

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; });
 });

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

@@ -6,11 +6,74 @@
  */
 
 import { html, nothing, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
 import { ifDefined } from 'lit/directives/if-defined.js';
+
+/** What happened. Selects an icon, tone, default copy and ARIA role. */
+export type NileEmptyStateStatus =
+  | 'empty'
+  | 'no-results'
+  | 'not-found'
+  | 'no-access'
+  | 'error'
+  | 'offline';
+
+/** How loud the state looks. Defaults from `status`, always overridable. */
+export type NileEmptyStateTone = 'neutral' | 'info' | 'warning' | 'error';
+
+/** What shape the state occupies. */
+export type NileEmptyStateLayout = 'stack' | 'inline' | 'page';
+
+interface StatusPreset {
+  icon: string;
+  tone: NileEmptyStateTone;
+  text: string;
+  subText: string;
+  role: 'status' | 'alert';
+  live: 'polite' | 'assertive';
+}
+
+const STATUS_PRESETS: Record<NileEmptyStateStatus, StatusPreset> = {
+  'empty': {
+    icon: 'ng-database', tone: 'neutral', role: 'status', live: 'polite',
+    text: 'No data yet', subText: `Rows appear here once there's something to show.`,
+  },
+  'no-results': {
+    icon: 'ng-search-lg', tone: 'neutral', role: 'status', live: 'polite',
+    text: 'No matches', subText: 'Try removing a filter or broadening your search.',
+  },
+  'not-found': {
+    icon: 'ng-file-06', tone: 'warning', role: 'status', live: 'polite',
+    text: `We couldn't find that`, subText: 'It may have been moved or deleted.',
+  },
+  'no-access': {
+    icon: 'ng-lock', tone: 'warning', role: 'status', live: 'polite',
+    text: `You don't have access`, subText: 'Ask an admin to grant you access to this resource.',
+  },
+  'error': {
+    icon: 'ng-alert-circle', tone: 'error', role: 'alert', live: 'assertive',
+    text: 'Something went wrong', subText: `We couldn't load this. Try again.`,
+  },
+  'offline': {
+    icon: 'ng-cloud-off', tone: 'error', role: 'alert', live: 'assertive',
+    text: 'Connection lost', subText: 'Check your connection and try again.',
+  },
+};
+
+const TONE_GLYPH_COLOR: Record<NileEmptyStateTone, string | undefined> = {
+  neutral: undefined,
+  info: 'var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))',
+  warning: 'var(--nile-colors-yellow-700, var(--ng-colors-fg-warning-primary))',
+  error: 'var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))',
+};
+
+const DEFAULT_ICON = 'ng-x-circle';
+const DEFAULT_TEXT = 'Empty State';
+const DEFAULT_SUB_TEXT = 'No Data';
+
 /**
  * Nile empty-state component.
  *
@@ -28,78 +91,175 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  @property() size: 'sm' | 'md' | 'lg'  = 'md';
+  @property({ type: String, attribute: true }) size: 'sm' | 'md' | 'lg' = 'md';
 
-  @property() variant:
+  @property({ type: String, attribute: true }) variant:
     | 'flat'
     | 'content'
     | 'tonal' = 'tonal';
 
-  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
-  @property({type:Boolean}) grayscale: boolean = false;
+  @property({ type: String, attribute: true, reflect: true }) status?: NileEmptyStateStatus;
+  @property({ type: String, attribute: true, reflect: true }) layout: NileEmptyStateLayout = 'stack';
+  @property({ type: String, attribute: true }) code?: string;
+  @property({ type: Boolean, attribute: true, reflect: true }) bordered: boolean = false;
+  @property({ type: String, attribute: true }) svgIconUrl: string;
+  /**
+   * Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,
+   * the SVG matches whatever size the current variant/layout draws at.
+   */
+  @property({ type: Number, attribute: true }) svgIconSize?: number;
+  @property({ type: String, attribute: true }) svgIconColor: string;
+
+  private _icon?: string;
+  private _text?: string;
+  private _subText?: string;
+  private _tone?: NileEmptyStateTone;
+  @property({ type: String, attribute: true })
+  get icon(): string {
+    return this._icon ?? this.preset?.icon ?? DEFAULT_ICON;
+  }
+
+  set icon(value: string | null) {
+    const old = this.icon;
+    this._icon = value ?? undefined;
+    this.requestUpdate('icon', old);
+  }
+
+  /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */
+  @property({ type: String, attribute: true })
+  get text(): string {
+    return this._text ?? this.preset?.text ?? DEFAULT_TEXT;
+  }
 
-  @property() text: String = 'Empty State';
-  @property({attribute:'sub-text'}) subText: String = 'No Data';
-  @property() svgIconUrl: string;
-  @property({type: Number}) svgIconSize: number = 40;
-  @property({type: String}) svgIconColor: string;
+  set text(value: string | null) {
+    const old = this.text;
+    this._text = value ?? undefined;
+    this.requestUpdate('text', old);
+  }
+
+  /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */
+  @property({ type: String, attribute: 'sub-text' })
+  get subText(): string {
+    return this._subText ?? this.preset?.subText ?? DEFAULT_SUB_TEXT;
+  }
+
+  set subText(value: string | null) {
+    const old = this.subText;
+    this._subText = value ?? undefined;
+    this.requestUpdate('subText', old);
+  }
+
+  @property({ type: String, attribute: true, reflect: true })
+  get tone(): NileEmptyStateTone {
+    return this._tone ?? this.preset?.tone ?? 'neutral';
+  }
+
+  set tone(value: NileEmptyStateTone | null) {
+    const old = this.tone;
+    this._tone = value ?? undefined;
+    this.requestUpdate('tone', old);
+  }
 
   /* #endregion */
 
   /* #region Methods */
 
+  /** The preset backing the current `status`, or undefined when none is set. */
+  private get preset(): StatusPreset | undefined {
+    return this.status ? STATUS_PRESETS[this.status] : undefined;
+  }
+
+  private get glyphColor(): string | undefined {
+    return this.svgIconColor ?? TONE_GLYPH_COLOR[this.tone];
+  }
+
+  /** ARIA wiring  */
+  private get liveRegion(): { role: string; live: string } | undefined {
+    const preset = this.preset;
+    if (!preset) return undefined;
+    return { role: preset.role, live: preset.live };
+  }
+
+  private renderGlyph(size: number | string): TemplateResult {
+    const color = this.glyphColor;
+    return this.svgIconUrl ? html`
+      <nile-glyph
+        customSvgPath="${this.svgIconUrl}"
+        size="${this.svgIconSize ?? size}"
+        method="stroke"
+        color="${ifDefined(color)}"
+        noFill
+      ></nile-glyph>
+    ` : html`
+      <nile-glyph
+        name="${this.icon}"
+        method="stroke"
+        size="${size}"
+        color="${ifDefined(color)}"
+      ></nile-glyph>
+    `;
+  }
+
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
+    const live = this.liveRegion;
+    const inline = this.layout === 'inline';
+
     return html`
       <div part="container" class="${classMap({
         'empty-state': true,
         'empty-state--sm': this.size == 'sm',
         'empty-state--md': this.size == 'md',
-        'empty-state--lg': this.size == 'lg'
-      })}">
+        'empty-state--lg': this.size == 'lg',
+        'empty-state--stack': this.layout === 'stack',
+        'empty-state--inline': inline,
+        'empty-state--page': this.layout === 'page',
+        'empty-state--bordered': this.bordered,
+        [`empty-state--tone-${this.tone}`]: true,
+      })}"
+        role="${ifDefined(live?.role)}"
+        aria-live="${ifDefined(live?.live)}"
+      >
         <div part="body" class="${classMap({ 'empty-state__body': true })}">
 
-          ${this.variant == 'content' ? html`
+          ${inline ? html`
+            <span part="inline-icon icon-chrome" class="empty-state__body--inline">
+              ${this.renderGlyph(20)}
+            </span>` : nothing
+          }
+
+          ${!inline && this.variant == 'content' ? html`
             <div part="content-image"  class="empty-state__body--content">
               ${!this.icon && !this.svgIconUrl ? nothing : html`
-                <div part="icon-wrapper" class="empty-state__img__icon">
-                  ${this.svgIconUrl ? html`
-                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
-                  ` : html`
-                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
-                  `}
+                <div part="icon-wrapper icon-chrome" class="empty-state__img__icon">
+                  ${
+                    this.renderGlyph(this.size == 'lg' ? 28 : 24)}
                 </div>`
               }
             </div>`: nothing
           }
 
-          ${this.variant == 'tonal' ? html`
-            <div part="tonal-body" class="empty-state__body--tonal">
-              ${this.svgIconUrl ? html`
-                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-              ` : html`
-                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
-              `}
+          ${!inline && this.variant == 'tonal' ? html`
+            <div part="tonal-body icon-chrome" class="empty-state__body--tonal">
+              ${this.renderGlyph(40)}
             </div>`: nothing
           }
 
-          ${this.variant == 'flat' ? html`
+          ${!inline && this.variant == 'flat' ? html`
             <div part="flat-body" class="empty-state__body--flat">
-					<span class="nile-flat-type-icon">
-						${this.svgIconUrl ? html`
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
-            ` : html`
-              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
-            `}
+					<span part="icon-chrome" class="nile-flat-type-icon">
+						${this.renderGlyph(this.size == 'lg' ? 28 : 24)}
 					</span>
             </div>`: nothing
           }
 
           <div part="text-section" class="empty__state__text-section">
+            ${this.code ? html`
+              <div part="code" class="empty-state__code">${this.code}</div>
+            ` : nothing}
             <div part="text" class="empty-state__text">${this.text}</div>
             <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
           </div>
@@ -108,6 +268,7 @@ export class NileEmptyState extends NileElement {
         <div part="actions" class="empty-state-actions">
           <slot></slot>
         </div>
+
       </div>
     `;
   }