@rabassoft/schema-engine-angular-aria 0.1.0

package/source-build/prepare-schema-engine.mjs

@@ -0,0 +1,49 @@
+import {
+  cpSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const sourceBuildDirectory = dirname(fileURLToPath(import.meta.url));
+const pilotPackage = resolve(sourceBuildDirectory, '..');
+const packageRoots = Object.freeze([
+  {
+    directory: resolve(sourceBuildDirectory, '../../../core/package'),
+    name: '@rabassoft/schema-engine',
+  },
+  {
+    directory: resolve(sourceBuildDirectory, '../../../angular/package'),
+    name: '@rabassoft/schema-engine-angular',
+  },
+]);
+
+for (const { directory, name } of packageRoots) {
+  const manifest = JSON.parse(
+    readFileSync(join(directory, 'package.json'), 'utf8'),
+  );
+  if (manifest.name !== name)
+    throw new Error(`Unexpected sibling package: ${name}`);
+  const target = join(pilotPackage, 'node_modules', ...name.split('/'));
+  rmSync(target, { recursive: true, force: true });
+  mkdirSync(target, { recursive: true });
+  cpSync(join(directory, 'rebuilt-dist'), join(target, 'dist'), {
+    recursive: true,
+  });
+  writeFileSync(
+    join(target, 'package.json'),
+    `${JSON.stringify(
+      {
+        name: manifest.name,
+        version: manifest.version,
+        type: manifest.type,
+        exports: manifest.exports,
+      },
+      null,
+      2,
+    )}\n`,
+  );
+}

package/source-build/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "declaration": true,
+    "declarationMap": true,
+    "exactOptionalPropertyTypes": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2022", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "../rebuilt-dist",
+    "rootDir": "../src",
+    "sourceMap": true,
+    "strict": true,
+    "target": "ES2022",
+    "useDefineForClassFields": false,
+    "useUnknownInCatchVariables": true,
+    "verbatimModuleSyntax": true
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictInjectionParameters": true,
+    "strictTemplates": true
+  },
+  "include": ["../src/**/*.ts"]
+}

package/src/index.ts

@@ -0,0 +1,254 @@
+// Copyright (C) 2026 Ricardo Rabassó Rodríguez, operating as Rabassoft
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  makeEnvironmentProviders,
+  signal,
+  type EnvironmentProviders,
+  type OnInit,
+} from '@angular/core';
+import { Tab, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
+import {
+  SchemaPresentationEntryOutletComponent,
+  SchemaPresentationPanelOutletComponent,
+  provideSchemaPresentationContainer,
+  type AngularPresentationContainerDefinition,
+  type AngularPresentationContainerRegistration,
+  type AngularPresentationContainerRenderer,
+  type AngularPresentationContainerRenderModel,
+} from '@rabassoft/schema-engine-angular';
+
+@Component({
+  selector: 'schema-aria-presentation-section',
+  standalone: true,
+  imports: [SchemaPresentationEntryOutletComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (section(); as model) {
+      <fieldset>
+        <legend [id]="model.legendId">{{ model.label }}</legend>
+        @for (
+          child of model.definition.children;
+          track child.kind === 'form-node' ? child.node.key : child.key
+        ) {
+          <schema-presentation-entry-outlet [entry]="child" />
+        }
+      </fieldset>
+    }
+  `,
+})
+class AngularAriaPresentationSectionComponent implements AngularPresentationContainerRenderer {
+  readonly presentation =
+    input.required<AngularPresentationContainerRenderModel>();
+  protected readonly section = () => {
+    const model = this.presentation();
+    return model.kind === 'section' ? model : undefined;
+  };
+}
+
+@Component({
+  selector: 'schema-aria-presentation-tabs',
+  standalone: true,
+  imports: [
+    Tabs,
+    TabList,
+    Tab,
+    TabPanel,
+    SchemaPresentationPanelOutletComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (tabs(); as model) {
+      <div ngTabs>
+        <div
+          ngTabList
+          orientation="horizontal"
+          focusMode="roving"
+          selectionMode="follow"
+          [wrap]="true"
+          [(selectedTab)]="selectedTab"
+          [id]="model.tablistId"
+          [attr.aria-label]="model.label"
+        >
+          @for (panel of model.panels; track panel.definition.key) {
+            <button
+              ngTab
+              type="button"
+              [id]="panel.tabId"
+              [value]="panel.tabpanelId"
+            >
+              {{ panel.label }}
+            </button>
+          }
+        </div>
+        @for (panel of model.panels; track panel.definition.key) {
+          <div
+            ngTabPanel
+            [preserveContent]="true"
+            [id]="panel.tabpanelId"
+            [value]="panel.tabpanelId"
+            [hidden]="selectedTab() !== panel.tabpanelId"
+            [attr.inert]="selectedTab() !== panel.tabpanelId ? '' : null"
+          >
+            <schema-presentation-panel-outlet [panel]="panel.definition" />
+          </div>
+        }
+      </div>
+    }
+  `,
+})
+class AngularAriaPresentationTabsComponent
+  implements AngularPresentationContainerRenderer, OnInit
+{
+  readonly presentation =
+    input.required<AngularPresentationContainerRenderModel>();
+  protected readonly selectedTab = signal<string | undefined>(undefined);
+  protected readonly tabs = () => {
+    const model = this.presentation();
+    return model.kind === 'tabs' ? model : undefined;
+  };
+
+  ngOnInit(): void {
+    this.selectedTab.set(this.tabs()?.panels[0]?.tabpanelId);
+  }
+}
+
+@Component({
+  selector: 'schema-aria-presentation-accordion',
+  standalone: true,
+  imports: [SchemaPresentationPanelOutletComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (accordion(); as model) {
+      <div
+        role="group"
+        [id]="model.accordionId"
+        [attr.aria-label]="model.label"
+      >
+        @for (
+          panel of model.panels;
+          track panel.definition.key;
+          let index = $index
+        ) {
+          <button
+            type="button"
+            [id]="panel.triggerId"
+            [attr.aria-expanded]="expanded().has(index)"
+            [attr.aria-controls]="panel.regionId"
+            (click)="toggle(index)"
+          >
+            {{ panel.label }}
+          </button>
+          <div
+            role="region"
+            [id]="panel.regionId"
+            [attr.aria-labelledby]="panel.triggerId"
+            [hidden]="!expanded().has(index)"
+            [attr.inert]="!expanded().has(index) ? '' : null"
+          >
+            <schema-presentation-panel-outlet [panel]="panel.definition" />
+          </div>
+        }
+      </div>
+    }
+  `,
+})
+class AngularAriaPresentationAccordionComponent implements AngularPresentationContainerRenderer {
+  readonly presentation =
+    input.required<AngularPresentationContainerRenderModel>();
+  protected readonly expanded = signal<ReadonlySet<number>>(new Set());
+  protected readonly accordion = () => {
+    const model = this.presentation();
+    return model.kind === 'accordion' ? model : undefined;
+  };
+
+  protected toggle(index: number): void {
+    const next = new Set(this.expanded());
+    if (next.has(index)) next.delete(index);
+    else next.add(index);
+    this.expanded.set(next);
+  }
+}
+
+@Component({
+  selector: 'schema-aria-presentation-grid',
+  standalone: true,
+  imports: [SchemaPresentationEntryOutletComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (grid(); as model) {
+      <div
+        class="se-aria-grid"
+        role="group"
+        [id]="model.gridId"
+        [attr.aria-label]="model.label"
+        [style.--se-aria-grid-columns]="model.definition.columns"
+      >
+        @for (item of model.items; track item.definition.key) {
+          <div
+            class="se-aria-grid-cell"
+            [id]="item.cellId"
+            [style.--se-aria-grid-span]="item.definition.span"
+          >
+            <schema-presentation-entry-outlet [entry]="item.definition.child" />
+          </div>
+        }
+      </div>
+    }
+  `,
+})
+class AngularAriaPresentationGridComponent implements AngularPresentationContainerRenderer {
+  readonly presentation =
+    input.required<AngularPresentationContainerRenderModel>();
+  protected readonly grid = () => {
+    const model = this.presentation();
+    return model.kind === 'grid' ? model : undefined;
+  };
+}
+
+const registrations: readonly AngularPresentationContainerRegistration[] =
+  Object.freeze([
+    registration(
+      'angular-aria-section',
+      AngularAriaPresentationSectionComponent,
+      'section',
+    ),
+    registration(
+      'angular-aria-tabs',
+      AngularAriaPresentationTabsComponent,
+      'tabs',
+    ),
+    registration(
+      'angular-aria-accordion',
+      AngularAriaPresentationAccordionComponent,
+      'accordion',
+    ),
+    registration(
+      'angular-aria-grid',
+      AngularAriaPresentationGridComponent,
+      'grid',
+    ),
+  ]);
+
+function registration(
+  id: string,
+  renderer: AngularPresentationContainerRegistration['renderer'],
+  kind: AngularPresentationContainerDefinition['kind'],
+): AngularPresentationContainerRegistration {
+  return Object.freeze({
+    id,
+    renderer,
+    tester: (definition: AngularPresentationContainerDefinition) =>
+      definition.kind === kind ? 10 : null,
+    priority: 0,
+  });
+}
+
+export function provideSchemaEngineAngularAriaContainers(): EnvironmentProviders {
+  return makeEnvironmentProviders(
+    registrations.map((value) => provideSchemaPresentationContainer(value)),
+  );
+}

package/styles.css

@@ -0,0 +1,63 @@
+/* Copyright (C) 2026 Ricardo Rabassó Rodríguez, operating as Rabassoft */
+/* SPDX-License-Identifier: AGPL-3.0-only */
+
+schema-aria-presentation-section,
+schema-aria-presentation-tabs,
+schema-aria-presentation-accordion,
+schema-aria-presentation-grid {
+  --se-aria-container-surface: Canvas;
+  --se-aria-container-text: CanvasText;
+  --se-aria-container-border: currentColor;
+  --se-aria-container-accent: LinkText;
+  --se-aria-container-radius: 0.5rem;
+  --se-aria-container-gap: 1rem;
+
+  display: block;
+  color: var(--se-aria-container-text);
+}
+
+schema-aria-presentation-section fieldset,
+schema-aria-presentation-tabs [ngtabs],
+schema-aria-presentation-accordion > [role='group'],
+schema-aria-presentation-grid .se-aria-grid {
+  padding: var(--se-aria-container-gap);
+  border: 1px solid var(--se-aria-container-border);
+  border-radius: var(--se-aria-container-radius);
+  background: var(--se-aria-container-surface);
+}
+
+schema-aria-presentation-tabs [ngtablist] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--se-aria-container-gap);
+}
+
+schema-aria-presentation-tabs [ngtab][aria-selected='true'] {
+  color: var(--se-aria-container-accent);
+}
+
+schema-aria-presentation-accordion > [role='group'] {
+  display: grid;
+  gap: var(--se-aria-container-gap);
+}
+
+schema-aria-presentation-grid .se-aria-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--se-aria-grid-columns), minmax(0, 1fr));
+  gap: var(--se-aria-container-gap);
+}
+
+schema-aria-presentation-grid .se-aria-grid-cell {
+  min-width: 0;
+  grid-column: span var(--se-aria-grid-span);
+}
+
+@media (max-width: 40rem) {
+  schema-aria-presentation-grid .se-aria-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  schema-aria-presentation-grid .se-aria-grid-cell {
+    grid-column: span 1;
+  }
+}