pireon-ui/apps/playground/src/app/app.html

<header class="page-header">
  <div class="page-header__top">
    <div>
      <h1>@pi/ui</h1>
      <p>
        Catálogo de la librería migrada a Angular 22: componentes standalone,
        señales, OnPush y Signal Forms.
      </p>
    </div>

    <div class="theme-toggles">
      <label class="theme-toggle">
        <span>Tema alternativo</span>
        <pi-slide-toggle [(checked)]="alternativeTheme" />
      </label>
      <label class="theme-toggle">
        <span>Modo oscuro</span>
        <pi-slide-toggle [(checked)]="darkMode" />
      </label>
    </div>
  </div>

  <nav class="page-nav">
    @for (link of navLinks; track link.path) {
    <a
      [routerLink]="link.path"
      routerLinkActive="is-active"
      [routerLinkActiveOptions]="{ exact: true }"
      >{{ link.label }}</a
    >
    }
  </nav>

  <p class="theme-hint">
    Tema:
    <strong>{{ alternativeTheme() ? 'alternative' : 'default' }}</strong> ·
    <code
      >{{ alternativeTheme() ? 'pi-shell__alternative' : 'pi-shell__default'
      }}</code
    >
    en el <code>&lt;body&gt;</code>. Los dos temas comparten exactamente los
    mismos selectores: solo cambian los tokens <code>--pi-color-*</code> y
    <code>--pi-theme-*</code> que definen <code>themes/_default.scss</code> y
    <code>themes/_alternative.scss</code>.
  </p>
</header>

<router-outlet />