@aquera/nile-elements 1.5.4 → 1.5.6

package/src/nile-code-editor/nile-code-editor.ts

@@ -585,7 +585,13 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
+    if(this.readonly || this.disabled) {
+      return [
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false),
+      ]
+    }
+    return [];
   }
 
   getSingleLineExtension() {

package/src/nile-date-picker/nile-date-picker.ts

@@ -81,6 +81,8 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean, attribute: true, reflect: true }) portal = false;
 
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;
+
   @query('nile-dropdown') dropdown: NileDropdown;
 
  /**
@@ -116,6 +118,23 @@ export class NileDatePicker extends NileElement {
       }
     });
   }
+  
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
+  }
+  
 
   private jumpTo(date: Date) {
     this.open = true;
@@ -141,8 +160,8 @@ export class NileDatePicker extends NileElement {
 
   render(): TemplateResult {
     return html`
-      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
-        <slot slot="trigger" part="trigger" name="trigger"></slot>
+      <nile-dropdown ?disabled="${this.disabled}" .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base" .portal="${this.portal}">
+        <slot slot="trigger" part="trigger" name="trigger"></slot>  
 
         <nile-calendar
           .hideTypes="${this.hideTypes}"
@@ -179,6 +198,7 @@ export class NileDatePicker extends NileElement {
 
     const detail = event.detail;
     const triggerInput = this.querySelector("nile-input");
+    if (this.disabled) return;
 
     if (!this.range) {
       const picked = detail.value;

package/src/nile-detail/index.ts

@@ -0,0 +1 @@
+export { NileDetail } from './nile-detail';

package/src/nile-detail/nile-detail.css.ts

@@ -0,0 +1,153 @@
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .detail {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));
+    overflow: hidden;
+    width: 100%;
+    line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  }
+
+  .detail--disabled {
+    opacity: var(--nile-opacity-50, var(--ng-opacity-50));
+  }
+
+  .detail__header {
+    display: flex;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
+    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));
+    user-select: none;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .detail__header::-webkit-details-marker {
+    display: none;
+  }
+
+  .detail__header::marker {
+    content: '';
+  }
+
+  .detail__header--icon-left {
+    flex-direction: row-reverse;
+  }
+
+  .detail__header:focus {
+    outline: none;
+  }
+
+  .detail__header:focus-visible {
+    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: calc(1px + 1px);
+  }
+
+  .detail--disabled .detail__header {
+    cursor: not-allowed;
+  }
+
+  .detail--disabled .detail__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .detail__label {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .detail__header-actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .detail__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .detail__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .detail__heading-text {
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));
+  }
+
+  .detail__description {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    margin-top: 2px;
+  }
+
+  .detail__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: 250ms transform ease;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));
+    transform: rotate(90deg);
+  }
+
+  .detail--open .detail__summary-icon {
+    transform: rotate(-90deg);
+  }
+
+  .detail__body {
+    overflow: hidden;
+  }
+
+  .detail__body[hidden] {
+    display: none;
+  }
+
+  .detail__content {
+    display: block;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+`;
+
+export default [styles];

package/src/nile-detail/nile-detail.test.ts

@@ -0,0 +1,215 @@
+import { expect, fixture, html, oneEvent, aTimeout } from '@open-wc/testing';
+import './nile-detail';
+import type { NileDetail } from './nile-detail';
+
+describe('NileDetail', () => {
+
+  /* Rendering & Structure */
+
+  it('1. renders without errors', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el).to.exist; });
+  it('2. has shadow root', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. is registered as custom element', async () => { expect(customElements.get('nile-detail')).to.exist; });
+  it('4. tag name is nile-detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.tagName.toLowerCase()).to.equal('nile-detail'); });
+  it('5. uses native details element', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('details')).to.exist; });
+  it('6. uses native summary element', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')).to.exist; });
+  it('7. has static styles', async () => { expect((await import('./nile-detail')).NileDetail.styles).to.exist; });
+  it('8. shadow mode is open', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+
+  /* Default property values */
+
+  it('9. open defaults to false', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.open).to.be.false; });
+  it('10. heading defaults to empty string', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.heading).to.equal(''); });
+  it('11. description defaults to empty string', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.description).to.equal(''); });
+  it('12. expandIconPlacement defaults to right', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.expandIconPlacement).to.equal('right'); });
+  it('13. disabled defaults to false', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.disabled).to.be.false; });
+
+  /* Attribute reflection */
+
+  it('14. open attribute reflects to property', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.open).to.be.true; });
+  it('15. heading attribute reflects to property', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Applications"></nile-detail>`); expect(el.heading).to.equal('Applications'); });
+  it('16. description attribute reflects to property', async () => { const el = await fixture<NileDetail>(html`<nile-detail description="Manage your apps"></nile-detail>`); expect(el.description).to.equal('Manage your apps'); });
+  it('17. disabled attribute reflects to property', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.disabled).to.be.true; });
+  it('18. expandIconPlacement attribute reflects to property', async () => { const el = await fixture<NileDetail>(html`<nile-detail expandIconPlacement="left"></nile-detail>`); expect(el.expandIconPlacement).to.equal('left'); });
+  it('19. setting open property reflects to attribute', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); el.open = true; await el.updateComplete; expect(el.hasAttribute('open')).to.be.true; });
+  it('20. removing open attribute sets property to false', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); el.removeAttribute('open'); await el.updateComplete; expect(el.open).to.be.false; });
+
+  /* Heading and description rendering */
+
+  it('21. renders heading text in the header', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Settings"></nile-detail>`); const text = el.shadowRoot!.querySelector('.detail__heading-text'); expect(text!.textContent).to.equal('Settings'); });
+  it('22. renders description when provided', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Title" description="Subtitle here"></nile-detail>`); const desc = el.shadowRoot!.querySelector('.detail__description'); expect(desc).to.exist; expect(desc!.textContent).to.equal('Subtitle here'); });
+  it('23. does not render description when empty', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Title"></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__description')).to.be.null; });
+  it('24. updates heading dynamically', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Old"></nile-detail>`); el.heading = 'New'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail__heading-text')!.textContent).to.equal('New'); });
+  it('25. updates description dynamically', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" description="Old"></nile-detail>`); el.description = 'New'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail__description')!.textContent).to.equal('New'); });
+
+  /* CSS classes driven by state */
+
+  it('26. adds detail--open class when open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail--open')).to.exist; });
+  it('27. no detail--open class when closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail--open')).to.be.null; });
+  it('28. adds detail--disabled class when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail--disabled')).to.exist; });
+  it('29. no detail--disabled class when enabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail--disabled')).to.be.null; });
+  it('30. adds detail__header--icon-left when expandIconPlacement is left', async () => { const el = await fixture<NileDetail>(html`<nile-detail expandIconPlacement="left"></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.exist; });
+  it('31. no detail__header--icon-left when expandIconPlacement is right', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.be.null; });
+
+  /* Accessibility — ARIA & keyboard */
+
+  it('32. summary has aria-label matching heading', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps"></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-label')).to.equal('Apps'); });
+  it('33. summary has aria-label matching heading and description', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps" description="Manage apps"></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-label')).to.equal('Apps, Manage apps'); });
+  it('34. summary has aria-disabled false when enabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-disabled')).to.equal('false'); });
+  it('35. summary has aria-disabled true when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-disabled')).to.equal('true'); });
+  it('36. summary has tabindex 0 when enabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('tabindex')).to.equal('0'); });
+  it('37. summary has tabindex -1 when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('tabindex')).to.equal('-1'); });
+  it('38. label slot has aria-hidden true', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps"></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="label"]')!.getAttribute('aria-hidden')).to.equal('true'); });
+  it('39. summary has aria-expanded false when closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('summary')!.getAttribute('aria-expanded')).to.equal('false'); });
+  it('40. summary-icon container has aria-hidden true', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__summary-icon')!.getAttribute('aria-hidden')).to.equal('true'); });
+
+  /* Parts */
+
+  it('41. exposes base part', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('[part="base"]')!.tagName.toLowerCase()).to.equal('details'); });
+  it('42. exposes header part', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('[part="header"]')!.tagName.toLowerCase()).to.equal('summary'); });
+  it('43. exposes summary-icon part', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('[part="summary-icon"]')).to.exist; });
+  it('44. exposes content part on body', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('[part="content"]')).to.exist; });
+
+  /* Slots */
+
+  it('45. has header-description slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="header-description"]')).to.exist; });
+  it('46. has icon slot', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot[name="icon"]')).to.exist; });
+  it('47. has default slot for content', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
+  it('48. user can slot custom heading markup', async () => { const el = await fixture<NileDetail>(html`<nile-detail><div slot="header-description"><strong>Custom</strong></div></nile-detail>`); expect(el.querySelector('[slot="header-description"]')).to.exist; });
+  it('49. user can slot custom icon', async () => { const el = await fixture<NileDetail>(html`<nile-detail><span slot="icon">▶</span></nile-detail>`); expect(el.querySelector('[slot="icon"]')).to.exist; });
+  it('50. default slot receives content', async () => { const el = await fixture<NileDetail>(html`<nile-detail><p>Some content</p></nile-detail>`); expect(el.querySelector('p')!.textContent).to.equal('Some content'); });
+
+  /* Body visibility after first render */
+
+  it('51. body is hidden when initially closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.body.hidden).to.be.true; });
+  it('52. body is visible when initially open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.body.hidden).to.be.false; });
+  it('53. body height is 0 when initially closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.body.style.height).to.equal('0'); });
+  it('54. body height is auto when initially open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.body.style.height).to.equal('auto'); });
+
+  /* show() and hide() methods */
+
+  it('55. show method exists', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.show).to.be.a('function'); });
+  it('56. hide method exists', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.hide).to.be.a('function'); });
+  it('57. show() opens a closed detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps"><p>Content</p></nile-detail>`); el.show(); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+  it('58. hide() closes an open detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps" open><p>Content</p></nile-detail>`); el.hide(); const ev = await oneEvent(el, 'nile-after-hide'); expect(ev).to.exist; expect(el.open).to.be.false; });
+  it('59. show() is no-op when already open', async () => { const el = await fixture<NileDetail>(html`<nile-detail open><p>C</p></nile-detail>`); const result = await el.show(); expect(result).to.be.undefined; expect(el.open).to.be.true; });
+  it('60. hide() is no-op when already closed', async () => { const el = await fixture<NileDetail>(html`<nile-detail><p>C</p></nile-detail>`); const result = await el.hide(); expect(result).to.be.undefined; expect(el.open).to.be.false; });
+  it('61. show() is no-op when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled><p>C</p></nile-detail>`); const result = await el.show(); expect(result).to.be.undefined; expect(el.open).to.be.false; });
+  it('62. hide() is no-op when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail open disabled><p>C</p></nile-detail>`); const result = await el.hide(); expect(result).to.be.undefined; expect(el.open).to.be.true; });
+
+  /* Events — nile-show, nile-after-show, nile-hide, nile-after-hide */
+
+  it('63. emits nile-show when opening', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); setTimeout(() => el.show()); const ev = await oneEvent(el, 'nile-show'); expect(ev).to.exist; });
+  it('64. emits nile-after-show after open animation', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); setTimeout(() => el.show()); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; });
+  it('65. emits nile-hide when closing', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); setTimeout(() => el.hide()); const ev = await oneEvent(el, 'nile-hide'); expect(ev).to.exist; });
+  it('66. emits nile-after-hide after close animation', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); setTimeout(() => el.hide()); const ev = await oneEvent(el, 'nile-after-hide'); expect(ev).to.exist; });
+
+  /* Cancelable events */
+
+  it('67. canceling nile-show prevents opening', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); el.addEventListener('nile-show', (e: Event) => e.preventDefault()); el.open = true; await aTimeout(400); expect(el.open).to.be.false; });
+  it('68. canceling nile-hide prevents closing', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); el.addEventListener('nile-hide', (e: Event) => e.preventDefault()); el.open = false; await aTimeout(400); expect(el.open).to.be.true; });
+
+  /* Disabled prevents interaction */
+
+  it('69. clicking summary does not open when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" disabled><p>C</p></nile-detail>`); el.shadowRoot!.querySelector('summary')!.click(); await el.updateComplete; expect(el.open).to.be.false; });
+  it('70. clicking summary does not close when disabled', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open disabled><p>C</p></nile-detail>`); el.shadowRoot!.querySelector('summary')!.click(); await el.updateComplete; expect(el.open).to.be.true; });
+  it('71. enabling a disabled detail allows interaction again', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" disabled><p>C</p></nile-detail>`); el.disabled = false; await el.updateComplete; el.show(); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+
+  /* Dynamic state changes */
+
+  it('72. toggling open on then off removes detail--open class', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); el.open = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail--open')).to.exist; el.open = false; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail--open')).to.be.null; });
+  it('73. toggling disabled on then off removes detail--disabled class', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); el.disabled = true; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail--disabled')).to.exist; el.disabled = false; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail--disabled')).to.be.null; });
+  it('74. switching expandIconPlacement from right to left updates class', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.be.null; el.expandIconPlacement = 'left'; await el.updateComplete; expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.exist; });
+  it('75. native details open attribute updates when open changes', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('details')!.open).to.be.false; el.open = true; await el.updateComplete; });
+
+  /* Keyboard interaction */
+
+  it('76. Enter key on summary opens the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+  it('77. Space key on summary opens the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+  it('78. Enter key on summary closes an open detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-hide'); expect(ev).to.exist; expect(el.open).to.be.false; });
+  it('79. ArrowDown key opens the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+  it('80. ArrowUp key closes the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-hide'); expect(ev).to.exist; expect(el.open).to.be.false; });
+  it('81. ArrowRight key opens the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; expect(el.open).to.be.true; });
+  it('82. ArrowLeft key closes the detail', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>C</p></nile-detail>`); const summary = el.shadowRoot!.querySelector('summary')!; summary.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true })); const ev = await oneEvent(el, 'nile-after-hide'); expect(ev).to.exist; expect(el.open).to.be.false; });
+
+  /* Multiple instances are independent */
+
+  it('83. two details operate independently', async () => { const c = await fixture(html`<div><nile-detail heading="A"><p>A</p></nile-detail><nile-detail heading="B"><p>B</p></nile-detail></div>`); const [a, b] = Array.from(c.querySelectorAll('nile-detail')) as NileDetail[]; a.show(); await oneEvent(a, 'nile-after-show'); expect(a.open).to.be.true; expect(b.open).to.be.false; });
+  it('84. opening one does not close the other', async () => { const c = await fixture(html`<div><nile-detail heading="A" open><p>A</p></nile-detail><nile-detail heading="B"><p>B</p></nile-detail></div>`); const [a, b] = Array.from(c.querySelectorAll('nile-detail')) as NileDetail[]; b.show(); await oneEvent(b, 'nile-after-show'); expect(a.open).to.be.true; expect(b.open).to.be.true; });
+
+  /* DOM lifecycle */
+
+  it('85. isConnected is true when in DOM', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.isConnected).to.be.true; });
+  it('86. isConnected is false after removal', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('87. can be created via document.createElement', async () => { const el = document.createElement('nile-detail') as NileDetail; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+
+  /* Generic HTML attributes pass through */
+
+  it('88. class attribute works', async () => { const el = await fixture<NileDetail>(html`<nile-detail class="custom"></nile-detail>`); expect(el.classList.contains('custom')).to.be.true; });
+  it('89. id attribute works', async () => { const el = await fixture<NileDetail>(html`<nile-detail id="d1"></nile-detail>`); expect(el.id).to.equal('d1'); });
+  it('90. hidden attribute works', async () => { const el = await fixture<NileDetail>(html`<nile-detail hidden></nile-detail>`); expect(el.hidden).to.be.true; });
+  it('91. data attribute works', async () => { const el = await fixture<NileDetail>(html`<nile-detail data-section="apps"></nile-detail>`); expect(el.dataset.section).to.equal('apps'); });
+  it('92. style attribute works', async () => { const el = await fixture<NileDetail>(html`<nile-detail style="margin-top:10px"></nile-detail>`); expect(el.style.marginTop).to.equal('10px'); });
+  it('93. aria-label passes through', async () => { const el = await fixture<NileDetail>(html`<nile-detail aria-label="Section"></nile-detail>`); expect(el.getAttribute('aria-label')).to.equal('Section'); });
+
+  /* Icon element */
+
+  it('94. renders nile-icon by default', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('nile-icon')).to.exist; });
+  it('95. icon container exists', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el.shadowRoot!.querySelector('.detail__summary-icon')).to.exist; });
+
+  /* Open/close sequence */
+
+  it('96. open then close returns to original state', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); el.show(); await oneEvent(el, 'nile-after-show'); expect(el.open).to.be.true; el.hide(); await oneEvent(el, 'nile-after-hide'); expect(el.open).to.be.false; expect(el.body.hidden).to.be.true; });
+  it('97. rapid show then hide settles correctly', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T"><p>C</p></nile-detail>`); el.show(); await aTimeout(50); el.hide(); await oneEvent(el, 'nile-after-hide'); expect(el.open).to.be.false; });
+
+  /* Full integration */
+
+  it('98. full integration with all properties set', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Apps" description="Manage" expandIconPlacement="left" class="panel" id="p1"><p>Content</p></nile-detail>`); expect(el.heading).to.equal('Apps'); expect(el.description).to.equal('Manage'); expect(el.expandIconPlacement).to.equal('left'); expect(el.id).to.equal('p1'); expect(el.open).to.be.false; expect(el.disabled).to.be.false; expect(el.shadowRoot!.querySelector('details')).to.exist; expect(el.shadowRoot!.querySelector('summary')).to.exist; expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.exist; expect(el.querySelector('p')!.textContent).to.equal('Content'); });
+  it('99. combined disabled and open set at init', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open disabled><p>C</p></nile-detail>`); expect(el.open).to.be.true; expect(el.disabled).to.be.true; expect(el.shadowRoot!.querySelector('.detail--open')).to.exist; expect(el.shadowRoot!.querySelector('.detail--disabled')).to.exist; expect(el.shadowRoot!.querySelector('summary')!.getAttribute('tabindex')).to.equal('-1'); });
+  it('100. dispatchEvent works for custom events', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); let detail: any; el.addEventListener('custom-event', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('custom-event', { detail: { test: true } })); expect(detail.test).to.be.true; });
+
+  /* Partial / missing properties — user does not pass everything */
+
+  it('101. works with no properties at all', async () => { const el = await fixture<NileDetail>(html`<nile-detail></nile-detail>`); expect(el).to.exist; expect(el.open).to.be.false; expect(el.heading).to.equal(''); expect(el.description).to.equal(''); expect(el.disabled).to.be.false; expect(el.shadowRoot!.querySelector('details')).to.exist; });
+  it('102. works with only heading, no description', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Section"></nile-detail>`); expect(el.heading).to.equal('Section'); expect(el.shadowRoot!.querySelector('.detail__description')).to.be.null; expect(el.shadowRoot!.querySelector('.detail__heading-text')!.textContent).to.equal('Section'); });
+  it('103. works with only description, no heading', async () => { const el = await fixture<NileDetail>(html`<nile-detail description="Some info"></nile-detail>`); expect(el.heading).to.equal(''); expect(el.description).to.equal('Some info'); expect(el.shadowRoot!.querySelector('.detail__heading-text')!.textContent).to.equal(''); expect(el.shadowRoot!.querySelector('.detail__description')!.textContent).to.equal('Some info'); });
+  it('104. works with only open, no heading or content', async () => { const el = await fixture<NileDetail>(html`<nile-detail open></nile-detail>`); expect(el.open).to.be.true; expect(el.heading).to.equal(''); expect(el.body.hidden).to.be.false; });
+  it('105. works with only disabled, no heading or content', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled></nile-detail>`); expect(el.disabled).to.be.true; expect(el.shadowRoot!.querySelector('.detail--disabled')).to.exist; });
+  it('106. works with content but no heading or description', async () => { const el = await fixture<NileDetail>(html`<nile-detail><p>Just content</p></nile-detail>`); expect(el.heading).to.equal(''); expect(el.querySelector('p')!.textContent).to.equal('Just content'); });
+  it('107. works with only expandIconPlacement set', async () => { const el = await fixture<NileDetail>(html`<nile-detail expandIconPlacement="left"></nile-detail>`); expect(el.expandIconPlacement).to.equal('left'); expect(el.shadowRoot!.querySelector('.detail__header--icon-left')).to.exist; });
+  it('108. works with heading and open, no content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Empty" open></nile-detail>`); expect(el.open).to.be.true; expect(el.heading).to.equal('Empty'); expect(el.children.length).to.equal(0); });
+  it('109. works with empty string heading attribute', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading=""></nile-detail>`); expect(el.heading).to.equal(''); expect(el.shadowRoot!.querySelector('.detail__heading-text')!.textContent).to.equal(''); });
+  it('110. works with only slotted heading, no heading property', async () => { const el = await fixture<NileDetail>(html`<nile-detail><div slot="header-description"><b>Custom Header</b></div></nile-detail>`); expect(el.heading).to.equal(''); expect(el.querySelector('[slot="header-description"]')).to.exist; });
+  it('111. works with only slotted icon, no other props', async () => { const el = await fixture<NileDetail>(html`<nile-detail><span slot="icon">→</span></nile-detail>`); expect(el.querySelector('[slot="icon"]')!.textContent).to.equal('→'); });
+  it('112. works with disabled and content but no heading', async () => { const el = await fixture<NileDetail>(html`<nile-detail disabled><p>Locked</p></nile-detail>`); expect(el.disabled).to.be.true; expect(el.querySelector('p')!.textContent).to.equal('Locked'); const result = await el.show(); expect(result).to.be.undefined; expect(el.open).to.be.false; });
+  it('113. works with open and disabled but no content', async () => { const el = await fixture<NileDetail>(html`<nile-detail open disabled></nile-detail>`); expect(el.open).to.be.true; expect(el.disabled).to.be.true; expect(el.children.length).to.equal(0); });
+
+  /* User can pass anything inside the content */
+
+  it('114. accepts plain text as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open>Hello World</nile-detail>`); expect(el.textContent).to.contain('Hello World'); });
+  it('115. accepts a paragraph as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>Paragraph</p></nile-detail>`); expect(el.querySelector('p')!.textContent).to.equal('Paragraph'); });
+  it('116. accepts multiple paragraphs as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="T" open><p>One</p><p>Two</p><p>Three</p></nile-detail>`); expect(el.querySelectorAll('p').length).to.equal(3); });
+  it('117. accepts a table as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Data" open><table><tr><td>Cell</td></tr></table></nile-detail>`); expect(el.querySelector('table')).to.exist; expect(el.querySelector('td')!.textContent).to.equal('Cell'); });
+  it('118. accepts a form as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Settings" open><form><input type="text" value="test"><button type="submit">Save</button></form></nile-detail>`); expect(el.querySelector('form')).to.exist; expect(el.querySelector('input')).to.exist; expect(el.querySelector('button')!.textContent).to.equal('Save'); });
+  it('119. accepts an image as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Photo" open><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="pixel"></nile-detail>`); expect(el.querySelector('img')).to.exist; expect(el.querySelector('img')!.alt).to.equal('pixel'); });
+  it('120. accepts an unordered list as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Items" open><ul><li>A</li><li>B</li><li>C</li></ul></nile-detail>`); expect(el.querySelectorAll('li').length).to.equal(3); });
+  it('121. accepts an ordered list as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Steps" open><ol><li>First</li><li>Second</li></ol></nile-detail>`); expect(el.querySelector('ol')).to.exist; expect(el.querySelectorAll('li').length).to.equal(2); });
+  it('122. accepts a video element as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Media" open><video src="test.mp4"></video></nile-detail>`); expect(el.querySelector('video')).to.exist; });
+  it('123. accepts an iframe as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Embed" open><iframe title="embed"></iframe></nile-detail>`); expect(el.querySelector('iframe')).to.exist; });
+  it('124. accepts deeply nested HTML as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Nested" open><div><section><article><p>Deep</p></article></section></div></nile-detail>`); expect(el.querySelector('article p')!.textContent).to.equal('Deep'); });
+  it('125. accepts a canvas element as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Draw" open><canvas width="100" height="100"></canvas></nile-detail>`); expect(el.querySelector('canvas')).to.exist; });
+  it('126. accepts links as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Links" open><a href="#">Link 1</a><a href="#">Link 2</a></nile-detail>`); expect(el.querySelectorAll('a').length).to.equal(2); });
+  it('127. accepts code blocks as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Code" open><pre><code>const x = 1;</code></pre></nile-detail>`); expect(el.querySelector('code')!.textContent).to.equal('const x = 1;'); });
+  it('128. accepts styled divs as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Styled" open><div style="background:red;padding:10px">Red box</div></nile-detail>`); const div = el.querySelector('div')!; expect(div.style.background).to.equal('red'); expect(div.textContent).to.equal('Red box'); });
+  it('129. accepts SVG as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Graphic" open><svg width="10" height="10"><circle cx="5" cy="5" r="5"></circle></svg></nile-detail>`); expect(el.querySelector('svg')).to.exist; expect(el.querySelector('circle')).to.exist; });
+  it('130. accepts another web component as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Nested Component" open><nile-detail heading="Inner"><p>Inner content</p></nile-detail></nile-detail>`); const inner = el.querySelector('nile-detail') as NileDetail; expect(inner).to.exist; expect(inner.heading).to.equal('Inner'); });
+  it('131. accepts mixed content types together', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Mixed" open><p>Text</p><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="img"><ul><li>Item</li></ul><table><tr><td>Cell</td></tr></table></nile-detail>`); expect(el.querySelector('p')).to.exist; expect(el.querySelector('img')).to.exist; expect(el.querySelector('ul')).to.exist; expect(el.querySelector('table')).to.exist; });
+  it('132. accepts empty content gracefully', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Empty" open></nile-detail>`); expect(el).to.exist; expect(el.children.length).to.equal(0); });
+  it('133. accepts content with data attributes', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Data" open><div data-id="123" data-type="card">Item</div></nile-detail>`); const div = el.querySelector('div')!; expect(div.dataset.id).to.equal('123'); expect(div.dataset.type).to.equal('card'); });
+  it('134. accepts input elements and they remain functional', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Form" open><input type="text" id="inp"></nile-detail>`); const input = el.querySelector('input')! as HTMLInputElement; input.value = 'typed'; expect(input.value).to.equal('typed'); });
+  it('135. accepts textarea as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Notes" open><textarea>Some notes</textarea></nile-detail>`); expect(el.querySelector('textarea')!.value).to.equal('Some notes'); });
+  it('136. accepts select dropdown as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Options" open><select><option value="a">A</option><option value="b">B</option></select></nile-detail>`); expect(el.querySelectorAll('option').length).to.equal(2); });
+  it('137. accepts checkbox inputs as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Prefs" open><label><input type="checkbox" checked> Agree</label></nile-detail>`); const cb = el.querySelector('input[type="checkbox"]') as HTMLInputElement; expect(cb.checked).to.be.true; });
+  it('138. accepts radio buttons as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Choice" open><input type="radio" name="r" value="1"><input type="radio" name="r" value="2"></nile-detail>`); expect(el.querySelectorAll('input[type="radio"]').length).to.equal(2); });
+  it('139. accepts definition list as content', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Glossary" open><dl><dt>Term</dt><dd>Definition</dd></dl></nile-detail>`); expect(el.querySelector('dt')!.textContent).to.equal('Term'); expect(el.querySelector('dd')!.textContent).to.equal('Definition'); });
+  it('140. content with event listeners still works', async () => { const el = await fixture<NileDetail>(html`<nile-detail heading="Interactive" open><button id="btn">Click</button></nile-detail>`); let clicked = false; el.querySelector('#btn')!.addEventListener('click', () => { clicked = true; }); (el.querySelector('#btn') as HTMLElement).click(); expect(clicked).to.be.true; });
+});

package/src/nile-detail/nile-detail.ts

@@ -0,0 +1,140 @@
+import { html, TemplateResult, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-detail.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import {
+  animateShow,
+  animateHide,
+  showDetail,
+  hideDetail,
+  handleSummaryClick,
+  handleSummaryKeyDown,
+} from './nile-detail.utils';
+import type { CSSResultGroup } from 'lit';
+
+@customElement('nile-detail')
+export class NileDetail extends NileElement {
+
+  static styles: CSSResultGroup = styles;
+
+  @query('details') detail: HTMLDetailsElement;
+  @query('summary') header: HTMLElement;
+  @query('.detail__body') body: HTMLElement;
+
+  @property({ attribute: true, type: Boolean, reflect: true }) open = false;
+
+  @property({ attribute: true, type: String, reflect: true }) heading = '';
+
+  @property({ attribute: true, type: String, reflect: true }) description = '';
+
+  @property({ attribute: true, reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';
+
+  @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;
+
+  @state() private _detailOpen = false;
+
+  firstUpdated() {
+    this._detailOpen = this.open;
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? 'auto' : '0';
+  }
+
+  private _handleSummaryClick(event: Event) {
+    event.preventDefault();
+    handleSummaryClick(this);
+  }
+
+  private _handleSummaryKeyDown(event: KeyboardEvent) {
+    handleSummaryKeyDown(event, this);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      this._detailOpen = true;
+      await animateShow(this);
+    } else {
+      await animateHide(this);
+      this._detailOpen = false;
+    }
+  }
+
+  async show() {
+    return showDetail(this);
+  }
+
+  async hide() {
+    return hideDetail(this);
+  }
+
+  private get _summaryLabel(): string {
+    return [this.heading, this.description].filter(Boolean).join(', ');
+  }
+
+  render(): TemplateResult {
+    return html`
+      <details
+        part="base"
+        ?open=${this._detailOpen}
+        class=${classMap({
+          'detail': true,
+          'detail--open': this.open,
+          'detail--disabled': this.disabled,
+        })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class=${classMap({
+            'detail__header': true,
+            'detail__header--icon-left': this.expandIconPlacement === 'left',
+          })}
+          aria-label=${this._summaryLabel || nothing}
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @click=${this._handleSummaryClick}
+          @keydown=${this._handleSummaryKeyDown}
+        >
+          <slot name="label" part="label" class="detail__label">
+            <span part="label-text" class="detail__heading-text">${this.heading}</span>
+            ${this.description
+              ? html`<span part="description" class="detail__description">${this.description}</span>`
+              : ''}
+          </slot>
+
+          <slot name="header-actions" part="header-actions" class="detail__header-actions"></slot>
+
+          <slot name="prefix" part="prefix" class="detail__prefix"></slot>
+
+          <span part="summary-icon" class="detail__summary-icon" aria-hidden="true">
+            <slot name="expand-icon">
+              <nile-icon
+                name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                library="system"
+              ></nile-icon>
+            </slot>
+          </span>
+
+          <slot name="suffix" part="suffix" class="detail__suffix"></slot>
+
+        </summary>
+
+        <div part="content" class="detail__body">
+          <slot id="content" class="detail__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+}
+
+export default NileDetail;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-detail': NileDetail;
+  }
+}