semmet-angular 0.45.0 → 0.46.0

package/src/toolbar/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,51 +1,44 @@
-import { Component, ElementRef, input, signal, viewChildren } from '@angular/core';
+import { Directive, ElementRef, computed, contentChildren, inject, input, model } from '@angular/core';
 
-interface <%= classify(name) %>Action {
-  id: number;
-  label: string;
-}
-
-const DEFAULT_ACTIONS: readonly <%= classify(name) %>Action[] = [
-  { id: 1, label: 'Bold' },
-  { id: 2, label: 'Italic' },
-  { id: 3, label: 'Underline' },
-];
+type <%= classify(name) %>Id = string;
 
-@Component({
-  selector: '<%= selector %>',
-  imports: [],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
+@Directive({
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
+  host: {
+    role: 'toolbar',
+    '[attr.aria-label]': 'label() || null',
+  },
 })
 export class <%= classify(name) %> {
-  private readonly buttons = viewChildren<ElementRef<HTMLButtonElement>>('toolbarButton');
+  private readonly items = contentChildren(<%= classify(name) %>Item, { descendants: true });
 
-  readonly label = input('Text formatting');
-  readonly actions = input<readonly <%= classify(name) %>Action[]>(DEFAULT_ACTIONS);
+  readonly label = input('');
+  readonly activeId = model<<%= classify(name) %>Id | null>(null);
 
-  protected readonly activeId = signal(DEFAULT_ACTIONS[0].id);
+  private readonly resolvedActiveId = computed<<%= classify(name) %>Id | null>(() => {
+    const activeId = this.activeId();
+    const items = this.items();
+    if (activeId !== null && items.some((item) => item.value() === activeId)) {
+      return activeId;
+    }
 
-  private readonly pressedIds = signal<ReadonlySet<number>>(new Set());
+    return items[0]?.value() ?? null;
+  });
 
-  protected isPressed(id: number): boolean {
-    return this.pressedIds().has(id);
+  isActive(value: <%= classify(name) %>Id): boolean {
+    return this.resolvedActiveId() === value;
   }
 
-  protected toggle(id: number): void {
-    this.activeId.set(id);
-    const next = new Set(this.pressedIds());
-    if (next.has(id)) {
-      next.delete(id);
-    } else {
-      next.add(id);
-    }
-    this.pressedIds.set(next);
+  setActive(item: <%= classify(name) %>Item): void {
+    this.activeId.set(item.value());
   }
 
   // Left/Right/Home/End move focus across toolbar buttons with roving tabindex (APG toolbar pattern).
-  protected navigateToolbar(event: KeyboardEvent, index: number): void {
-    const items = this.buttons();
-    if (items.length === 0) {
+  navigate(current: <%= classify(name) %>Item, event: KeyboardEvent): void {
+    const items = this.items();
+    const index = items.indexOf(current);
+    if (index === -1) {
       return;
     }
 
@@ -68,7 +61,36 @@ export class <%= classify(name) %> {
     }
 
     event.preventDefault();
-    this.activeId.set(this.actions()[nextIndex].id);
-    items[nextIndex].nativeElement.focus();
+    const next = items[nextIndex];
+    this.activeId.set(next.value());
+    next.focus();
+  }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    '[attr.aria-pressed]': 'pressed()',
+    '[attr.tabindex]': 'active() ? 0 : -1',
+    '(click)': 'toggle()',
+    '(keydown)': 'root.navigate(this, $event)',
+  },
+})
+export class <%= classify(name) %>Item {
+  protected readonly root = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly value = input.required<<%= classify(name) %>Id>();
+  readonly pressed = model(false);
+  readonly active = computed(() => this.root.isActive(this.value()));
+
+  toggle(): void {
+    this.root.setActive(this);
+    this.pressed.update((value) => !value);
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
   }
 }

package/src/toolbar/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularToolbar",
   "title": "Semmet Angular Toolbar Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Toolbar component with roving-tabindex keyboard navigation, following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates headless Angular Toolbar directives (root, item) with roving-tabindex keyboard navigation, coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,39 +0,0 @@
-:host {
-  display: block;
-}
-
-[role='tree'],
-[role='group'] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-[role='group'] {
-  padding-left: 1rem;
-}
-
-[role='treeitem'] {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-[role='treeitem']:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-[role='treeitem'][aria-expanded]::before {
-  content: '';
-  width: 0.4rem;
-  height: 0.4rem;
-  flex-shrink: 0;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  transform: rotate(-45deg);
-}
-
-[role='treeitem'][aria-expanded='true']::before {
-  transform: rotate(45deg);
-}

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -4,14 +4,13 @@ test.describe('<%= classify(name) %>', () => {
   test('navigates and collapses mounted tree view with keyboard', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const tree = page.locator('[<%= camelize(name) %>]').first();
     test.skip(
-      (await component.count()) === 0,
-      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+      (await tree.count()) === 0,
+      'Mount an element with [<%= camelize(name) %>] in a route or host component to enable this generated e2e test.'
     );
 
-    const tree = component.getByRole('tree').first();
-    const items = component.getByRole('treeitem');
+    const items = tree.getByRole('treeitem');
     await expect(tree).toBeVisible();
     await expect(items.first()).toHaveAttribute('aria-expanded', 'true');
 

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,36 +1,17 @@
 <!-- Semmet Angular: Tree View — https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>Item and <%= classify(name) %>Group in that
+parent component. This directive set never owns markup: nest <ul>/<li> as deep as the tree needs —
+each level's group is always rendered, `[<%= camelize(name) %>Group]` hides it declaratively while collapsed.
 
-<<%= selector %> label="Files" [tree]="fileTree" />
--->
-<ul role="tree" [attr.aria-label]="label()">
-  @for (root of tree(); track root.id) {
-    <li
-      #treeItem
-      role="treeitem"
-      [attr.aria-expanded]="hasChildren(root) ? isExpanded(root.id) : null"
-      [tabIndex]="activeId() === root.id ? 0 : -1"
-      (click)="activateItem(root)"
-      (keydown)="handleKeydown($event, root.id)"
-    >
-      {{ root.label }}
-      @if (hasChildren(root) && isExpanded(root.id)) {
-        <ul role="group">
-          @for (child of root.children; track child.id) {
-            <li
-              #treeItem
-              role="treeitem"
-              [tabIndex]="activeId() === child.id ? 0 : -1"
-              (click)="activateItem(child)"
-              (keydown)="handleKeydown($event, child.id)"
-            >
-              {{ child.label }}
-            </li>
-          }
-        </ul>
-      }
-    </li>
-  }
+<ul <%= camelize(name) %> label="Files">
+  <li <%= camelize(name) %>Item value="documents" [expanded]="true">
+    Documents
+    <ul <%= camelize(name) %>Group>
+      <li <%= camelize(name) %>Item value="resume">Resume.pdf</li>
+      <li <%= camelize(name) %>Item value="cover-letter">Cover Letter.docx</li>
+    </ul>
+  </li>
 </ul>
+-->

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -1,12 +1,31 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 
-import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+import {
+  <%= classify(name) %>,
+  <%= classify(name) %>Group,
+  <%= classify(name) %>Item,
+} from './<%= dasherize(name) %>';
 
 @Component({
-  imports: [<%= classify(name) %>],
-  template: `<<%= selector %> />`,
+  imports: [<%= classify(name) %>, <%= classify(name) %>Group, <%= classify(name) %>Item],
+  template: `
+    <ul <%= camelize(name) %> label="Files">
+      <li <%= camelize(name) %>Item value="documents" [expanded]="true">
+        Documents
+        <ul <%= camelize(name) %>Group>
+          <li <%= camelize(name) %>Item value="work" [expanded]="true">
+            Work
+            <ul <%= camelize(name) %>Group>
+              <li <%= camelize(name) %>Item value="resume">Resume.pdf</li>
+              <li <%= camelize(name) %>Item value="cover-letter">Cover Letter.docx</li>
+            </ul>
+          </li>
+          <li <%= camelize(name) %>Item value="personal">Personal.txt</li>
+        </ul>
+      </li>
+    </ul>
+  `,
 })
 class HostComponent {}
 
@@ -24,61 +43,79 @@ describe('<%= classify(name) %>', () => {
     host = fixture.nativeElement as HTMLElement;
   });
 
-  it('renders tree semantics with expanded root and roving tabindex', () => {
+  function items(): HTMLElement[] {
+    return Array.from(host.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+  }
+
+  function groups(): HTMLElement[] {
+    return Array.from(host.querySelectorAll<HTMLElement>('[role="group"]'));
+  }
+
+  it('decorates consumer-owned markup with tree semantics and roving tabindex, 3 levels deep', () => {
     const tree = host.querySelector<HTMLElement>('[role="tree"]');
-    const items = Array.from(host.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+    const [documents, work, resume, coverLetter, personal] = items();
 
     expect(tree?.getAttribute('aria-label')).toBe('Files');
-    expect(items.map((item) => item.textContent?.trim())).toEqual([
-      'Documents Resume.pdf Cover Letter.docx',
-      'Resume.pdf',
-      'Cover Letter.docx',
-    ]);
-    expect(items[0].getAttribute('aria-expanded')).toBe('true');
-    expect(items[0].getAttribute('tabindex')).toBe('0');
-    expect(items[1].getAttribute('tabindex')).toBe('-1');
+    expect(documents.getAttribute('aria-expanded')).toBe('true');
+    expect(work.getAttribute('aria-expanded')).toBe('true');
+    expect(documents.getAttribute('tabindex')).toBe('0');
+    expect(work.getAttribute('tabindex')).toBe('-1');
+    expect(resume.getAttribute('tabindex')).toBe('-1');
+    expect(coverLetter.getAttribute('tabindex')).toBe('-1');
+    expect(personal.getAttribute('tabindex')).toBe('-1');
+    expect(groups().every((group) => !group.hidden)).toBe(true);
+  });
+
+  it('clicking a nested item does not also collapse its ancestors (no event-bubbling leakage)', () => {
+    const [documents, work, resume] = items();
+
+    resume.click();
+    fixture.detectChanges();
+
+    expect(documents.getAttribute('aria-expanded')).toBe('true');
+    expect(work.getAttribute('aria-expanded')).toBe('true');
   });
 
-  it('moves focus with arrow keys and collapses/expands branches', () => {
-    const getItems = () => Array.from(host.querySelectorAll<HTMLElement>('[role="treeitem"]'));
-    let items = getItems();
+  it('collapsing a nested branch does not affect a sibling branch or the ancestor', () => {
+    const [documents, work] = items();
 
-    fixture.debugElement.queryAll(By.css('[role="treeitem"]'))[0].triggerEventHandler(
-      'keydown',
-      new KeyboardEvent('keydown', { key: 'ArrowDown' }),
-    );
+    work.click();
     fixture.detectChanges();
 
-    items = getItems();
-    expect(items[0].getAttribute('tabindex')).toBe('-1');
-    expect(items[1].getAttribute('tabindex')).toBe('0');
+    expect(work.getAttribute('aria-expanded')).toBe('false');
+    expect(documents.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('moves focus with ArrowDown/ArrowLeft between parent and child without leaking to grandparents', () => {
+    const [documents, work] = items();
 
-    fixture.debugElement.queryAll(By.css('[role="treeitem"]'))[1].triggerEventHandler(
-      'keydown',
-      new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-    );
+    work.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
     fixture.detectChanges();
 
-    items = getItems();
-    expect(items[0].getAttribute('tabindex')).toBe('0');
+    const [, , resume] = items();
+    expect(document.activeElement).toBe(resume);
+    expect(resume.getAttribute('tabindex')).toBe('0');
+
+    resume.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(work);
+    expect(documents.getAttribute('aria-expanded')).toBe('true');
+    expect(work.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('collapses and re-expands a branch with ArrowLeft/ArrowRight, keeping child items mounted', () => {
+    const [documents] = items();
 
-    fixture.debugElement.queryAll(By.css('[role="treeitem"]'))[0].triggerEventHandler(
-      'keydown',
-      new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-    );
+    documents.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
     fixture.detectChanges();
 
-    items = getItems();
-    expect(items).toHaveLength(1);
-    expect(items[0].getAttribute('aria-expanded')).toBe('false');
+    expect(documents.getAttribute('aria-expanded')).toBe('false');
+    expect(items().length).toBe(5);
 
-    fixture.debugElement.query(By.css('[role="treeitem"]')).triggerEventHandler(
-      'keydown',
-      new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-    );
+    documents.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     fixture.detectChanges();
 
-    expect(getItems()).toHaveLength(3);
-    expect(getItems()[0].getAttribute('aria-expanded')).toBe('true');
+    expect(documents.getAttribute('aria-expanded')).toBe('true');
   });
 });

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,143 +1,160 @@
-import { Component, ElementRef, computed, input, signal, viewChildren } from '@angular/core';
+import { Directive, ElementRef, computed, contentChildren, inject, input, model } from '@angular/core';
 
-interface <%= classify(name) %>Node {
-  id: number;
-  label: string;
-  children?: <%= classify(name) %>Node[];
-}
-
-interface VisibleNode {
-  node: <%= classify(name) %>Node;
-  parentId: number | null;
-}
+type <%= classify(name) %>Id = string;
 
-const DEFAULT_TREE: readonly <%= classify(name) %>Node[] = [
-  {
-    id: 1,
-    label: 'Documents',
-    children: [
-      { id: 2, label: 'Resume.pdf' },
-      { id: 3, label: 'Cover Letter.docx' },
-    ],
+@Directive({
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
+  host: {
+    role: 'tree',
+    '[attr.aria-label]': 'label() || null',
   },
-];
-
-@Component({
-  selector: '<%= selector %>',
-  imports: [],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  private readonly treeItems = viewChildren<ElementRef<HTMLElement>>('treeItem');
+  private readonly items = contentChildren(<%= classify(name) %>Item, { descendants: true });
 
-  readonly label = input('Files');
-  readonly tree = input<readonly <%= classify(name) %>Node[]>(DEFAULT_TREE);
+  readonly label = input('');
+  readonly activeId = model<<%= classify(name) %>Id | null>(null);
 
-  private readonly expandedIds = signal<ReadonlySet<number>>(new Set([1]));
-  protected readonly activeId = signal(1);
+  private readonly visibleItems = computed(() => this.items().filter((item) => item.visible()));
 
-  protected readonly visibleNodes = computed<VisibleNode[]>(() => {
-    const result: VisibleNode[] = [];
-    const walk = (nodes: readonly <%= classify(name) %>Node[], parentId: number | null): void => {
-      for (const node of nodes) {
-        result.push({ node, parentId });
-        if (node.children && this.expandedIds().has(node.id)) {
-          walk(node.children, node.id);
-        }
-      }
-    };
-    walk(this.tree(), null);
-    return result;
-  });
-
-  protected isExpanded(id: number): boolean {
-    return this.expandedIds().has(id);
-  }
+  private readonly resolvedActiveId = computed<<%= classify(name) %>Id | null>(() => {
+    const activeId = this.activeId();
+    const visible = this.visibleItems();
+    if (activeId !== null && visible.some((item) => item.value() === activeId)) {
+      return activeId;
+    }
 
-  protected hasChildren(node: <%= classify(name) %>Node): boolean {
-    return !!node.children && node.children.length > 0;
-  }
+    return visible[0]?.value() ?? null;
+  });
 
-  protected toggle(id: number): void {
-    const next = new Set(this.expandedIds());
-    if (next.has(id)) {
-      next.delete(id);
-    } else {
-      next.add(id);
-    }
-    this.expandedIds.set(next);
+  isActive(value: <%= classify(name) %>Id): boolean {
+    return this.resolvedActiveId() === value;
   }
 
-  protected activateItem(node: <%= classify(name) %>Node): void {
-    this.focusItem(node.id);
-    if (this.hasChildren(node)) {
-      this.toggle(node.id);
-    }
+  setActive(item: <%= classify(name) %>Item): void {
+    this.activeId.set(item.value());
   }
 
-  // Up/Down move between visible nodes; Right expands or moves into children; Left collapses
-  // or moves to the parent; Home/End jump to the first/last visible node (APG tree keyboard support).
-  protected handleKeydown(event: KeyboardEvent, id: number): void {
-    const visible = this.visibleNodes();
-    const index = visible.findIndex((entry) => entry.node.id === id);
+  // Up/Down move between visible items; Right expands or moves into children; Left collapses
+  // or moves to the parent; Home/End jump to the first/last visible item (APG tree pattern).
+  navigate(current: <%= classify(name) %>Item, event: KeyboardEvent): void {
+    const visible = this.visibleItems();
+    const index = visible.indexOf(current);
     if (index === -1) {
       return;
     }
-    const current = visible[index];
 
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
         if (index < visible.length - 1) {
-          this.focusItem(visible[index + 1].node.id);
+          this.focusItem(visible[index + 1]);
         }
         break;
       case 'ArrowUp':
         event.preventDefault();
         if (index > 0) {
-          this.focusItem(visible[index - 1].node.id);
+          this.focusItem(visible[index - 1]);
         }
         break;
       case 'ArrowRight':
         event.preventDefault();
-        if (this.hasChildren(current.node)) {
-          if (!this.isExpanded(current.node.id)) {
-            this.toggle(current.node.id);
+        if (current.hasChildren()) {
+          if (!current.expanded()) {
+            current.expanded.set(true);
           } else if (index < visible.length - 1) {
-            this.focusItem(visible[index + 1].node.id);
+            this.focusItem(visible[index + 1]);
           }
         }
         break;
       case 'ArrowLeft':
         event.preventDefault();
-        if (this.hasChildren(current.node) && this.isExpanded(current.node.id)) {
-          this.toggle(current.node.id);
-        } else if (current.parentId !== null) {
-          this.focusItem(current.parentId);
+        if (current.hasChildren() && current.expanded()) {
+          current.expanded.set(false);
+        } else if (current.parent) {
+          this.focusItem(current.parent);
         }
         break;
       case 'Home':
         event.preventDefault();
-        this.focusItem(visible[0].node.id);
+        if (visible.length > 0) {
+          this.focusItem(visible[0]);
+        }
         break;
       case 'End':
         event.preventDefault();
-        this.focusItem(visible[visible.length - 1].node.id);
+        if (visible.length > 0) {
+          this.focusItem(visible[visible.length - 1]);
+        }
         break;
       case 'Enter':
       case ' ':
         event.preventDefault();
-        if (this.hasChildren(current.node)) {
-          this.toggle(current.node.id);
+        if (current.hasChildren()) {
+          current.expanded.update((value) => !value);
         }
         break;
     }
   }
 
-  private focusItem(id: number): void {
-    this.activeId.set(id);
-    const index = this.visibleNodes().findIndex((entry) => entry.node.id === id);
-    this.treeItems()[index]?.nativeElement.focus();
+  private focusItem(item: <%= classify(name) %>Item): void {
+    this.activeId.set(item.value());
+    item.focus();
+  }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    role: 'treeitem',
+    '[attr.aria-expanded]': 'hasChildren() ? expanded() : null',
+    '[attr.tabindex]': 'root.isActive(value()) ? 0 : -1',
+    '(click)': 'activate($event)',
+    '(keydown)': 'handleKeydown($event)',
+  },
+})
+export class <%= classify(name) %>Item {
+  readonly root = inject(<%= classify(name) %>);
+  readonly parent = inject(<%= classify(name) %>Item, { skipSelf: true, optional: true });
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly childItems = contentChildren(<%= classify(name) %>Item, { descendants: true });
+
+  readonly value = input.required<<%= classify(name) %>Id>();
+  readonly expanded = model(false);
+
+  readonly hasChildren = computed(() => this.childItems().length > 0);
+  readonly visible = computed((): boolean => !this.parent || (this.parent.expanded() && this.parent.visible()));
+
+  // Nested items live inside their ancestors' DOM subtree, so click/keydown must not
+  // bubble up and also re-trigger the parent item's own handlers.
+  activate(event: MouseEvent): void {
+    event.stopPropagation();
+    this.root.setActive(this);
+    if (this.hasChildren()) {
+      this.expanded.update((value) => !value);
+    }
+  }
+
+  handleKeydown(event: KeyboardEvent): void {
+    event.stopPropagation();
+    this.root.navigate(this, event);
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
   }
 }
+
+@Directive({
+  selector: '[<%= camelize(name) %>Group]',
+  exportAs: '<%= camelize(name) %>Group',
+  host: {
+    role: 'group',
+    '[hidden]': '!parent?.expanded()',
+  },
+})
+export class <%= classify(name) %>Group {
+  protected readonly parent = inject(<%= classify(name) %>Item, { optional: true });
+}

package/src/tree-view/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularTreeView",
   "title": "Semmet Angular Tree View Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Tree View component with roving tabindex and arrow-key navigation, following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates headless Angular Tree View directives (root, item, group) with roving tabindex and arrow-key navigation over consumer-owned, arbitrarily nested markup, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {