fix components

apps/playground/src/app/app.config.ts

@@ -5,7 +5,10 @@ import {
   provideBrowserGlobalErrorListeners,
 } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { provideStore } from '@ngrx/store';
+
+import { routes } from './app.routes';
 import {
   TranslateLoader,
   TranslationObject,
@@ -48,6 +51,12 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideAnimationsAsync(),
 
+    provideRouter(
+      routes,
+      // Al cambiar de página se vuelve arriba; el catálogo es muy largo.
+      withInMemoryScrolling({ scrollPositionRestoration: 'top' }),
+    ),
+
     // Los iconos son SVG registrados en el MatIconRegistry (assets/icons).
     provideAppInitializer(() => inject(IconRegistryService).init()),
 

apps/playground/src/app/app.html

@@ -0,0 +1,48 @@
+<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 />

apps/playground/src/app/app.routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'componentes' },
+  {
+    path: 'componentes',
+    title: 'Componentes · @pi/ui',
+    loadComponent: () =>
+      import('./pages/catalog/catalog.page').then((m) => m.CatalogPage),
+  },
+  {
+    path: 'layouts',
+    title: 'Layouts · @pi/ui',
+    loadComponent: () =>
+      import('./pages/layouts/layouts.page').then((m) => m.LayoutsPage),
+  },
+  { path: '**', redirectTo: 'componentes' },
+];

apps/playground/src/app/app.scss

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+.page-header {
+  margin-bottom: 2rem;
+
+  &__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--pg-heading);
+  }
+
+  p {
+    margin: 0.5rem 0 0;
+    color: var(--pg-text-muted);
+    max-width: 60ch;
+  }
+}
+
+.theme-toggles {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  color: var(--pg-text-muted);
+  white-space: nowrap;
+}
+
+.theme-hint {
+  margin: 0.75rem 0 0;
+  font-size: 0.8rem;
+  color: var(--pg-text-muted);
+  max-width: 70ch;
+
+  code {
+    padding: 0.05rem 0.3rem;
+    border-radius: 4px;
+    background: var(--pg-badge-bg);
+    color: var(--pg-badge-text);
+    font-size: 0.95em;
+  }
+}
+
+.page-nav {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+
+  a {
+    padding: 0.35rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid var(--pg-card-border);
+    color: var(--pg-text-muted);
+    font-size: 0.85rem;
+    text-decoration: none;
+
+    &.is-active {
+      border-color: transparent;
+      background: var(--pg-badge-bg);
+      color: var(--pg-badge-text);
+      font-weight: 600;
+    }
+  }
+}

apps/playground/src/app/app.ts

@@ -0,0 +1,59 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  inject,
+  signal,
+} from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+import { PiSlideToggleComponent, ShellClass } from '@pi/ui';
+
+/**
+ * Shell del playground: cabecera, navegación y estado de tema. El contenido de
+ * cada página vive en `pages/` y entra por el `<router-outlet>`.
+ */
+@Component({
+  selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, PiSlideToggleComponent],
+})
+export class App {
+  protected readonly navLinks = [
+    { path: '/componentes', label: 'Componentes' },
+    { path: '/layouts', label: 'Layouts' },
+  ];
+
+  /* --- Tema y modo oscuro -------------------------------------------------- */
+
+  private readonly document = inject(DOCUMENT);
+
+  protected readonly darkMode = signal(false);
+
+  /**
+   * Tema visual de la librería. `ShellClass` devuelve las dos clases que hay
+   * que poner juntas (`pi-shell pi-shell__<tema>`); van en el `<body>` porque
+   * los overlays de Material (diálogos, snackbars) se montan fuera de
+   * `<app-root>` y también deben heredarlas.
+   */
+  protected readonly alternativeTheme = signal(false);
+
+  constructor() {
+    effect(() => {
+      this.document.documentElement.classList.toggle(
+        'dark-mode',
+        this.darkMode(),
+      );
+    });
+
+    effect(() => {
+      const shell = this.alternativeTheme()
+        ? ShellClass.Alternative
+        : ShellClass.Default;
+      this.document.body.className = shell;
+    });
+  }
+}

apps/playground/src/app/pages/catalog/catalog.page.html

@@ -1,11 +1,4 @@
-<header class="page-header">
-  <h1>@pi/ui</h1>
-  <p>
-    Catálogo de la librería migrada a Angular 22: componentes standalone,
-    señales, OnPush y Signal Forms.
-  </p>
 <span class="event">Último evento: {{ lastEvent() }}</span>
-</header>
 
 <main>
   <div class="col">
@@ -48,6 +41,18 @@
 
         <pi-search-field [formField]="f.search" placeholder="Buscar…" />
 
+        <pi-icon-field [formField]="f.website" icon="globe">
+          <pi-label>Web</pi-label>
+        </pi-icon-field>
+
+        <pi-phone-field [formField]="f.phone">
+          <pi-label>Teléfono</pi-label>
+        </pi-phone-field>
+
+        <pi-number-field [formField]="f.weight">
+          <pi-label>Peso (kg)</pi-label>
+        </pi-number-field>
+
         <label class="inline">
           <span>Newsletter</span>
           <pi-slide-toggle [formField]="f.newsletter" />
@@ -59,6 +64,45 @@
           label="Volumen"
           [maxValue]="100"
         />
+
+        <div class="range-slider-caption">
+          <span
+            >Rango de precio (pi-range-slider no pinta su propia etiqueta)</span
+          >
+          <pi-range-slider
+            [formField]="f.priceRange"
+            unit="€"
+            [minValue]="0"
+            [maxValue]="100"
+          />
+        </div>
+
+        <pi-date-field [formField]="f.birthDate">
+          <pi-label>Fecha de nacimiento</pi-label>
+        </pi-date-field>
+
+        <pi-radio-group
+          [formField]="f.shipping"
+          [options]="shippingOptions"
+          [columns]="1"
+        />
+
+        <pi-checkbox [formField]="f.terms" label="Acepto los términos" />
+
+        <pi-file-upload
+          [formField]="f.attachments"
+          [multiple]="true"
+          accept="image/*,.pdf"
+          [maxSizeBytes]="2097152"
+          [maxFiles]="3"
+          label="Arrastra ficheros o pulsa para elegir"
+          hint="Imágenes o PDF · máx. 2 MB · hasta 3"
+          (rejected)="log('rechazados: ' + $event.length)"
+        />
+
+        <button pi-primary w100 (click)="submitForm()">
+          Enviar (muestra los errores)
+        </button>
       </div>
     </app-section>
   </div>
@@ -87,6 +131,24 @@
       <pi-chevron-button (toggle)="log('chevron')" />
       <pi-close-button (toggle)="log('close')" />
       <pi-hamburger (toggle)="log('hamburger')" />
+      <pi-radio-button
+        [isActive]="radioActive()"
+        [isDisabled]="false"
+        (execute)="radioActive.set(!radioActive())"
+      />
+      <pi-switch-button
+        [content]="['Mensual', 'Anual']"
+        contentType="text"
+        [(isActive)]="switchActive"
+        (toggledTo)="log('switch ' + $event)"
+      />
+      <pi-toggle-button
+        text="Favorito"
+        icon="star-fill"
+        [isActive]="toggleActive()"
+        [isDisabled]="false"
+        (execute)="toggleActive.set(!toggleActive())"
+      />
     </app-section>
 
     <app-section title="Iconos y texto">
@@ -99,10 +161,58 @@
         appearance="fill"
         [isStroked]="true"
       />
+      <pi-icon
+        icon="info"
+        color="primary"
+        size="large"
+        pi-tooltip
+        tooltipText="Esto usa PiTooltipDirective"
+        tooltipPosition="above"
+      />
       <pi-text-viewer value="Texto con el visor" fontSize="m" color="black" />
       <pi-divider color="primary" width="large" label="Separador" />
     </app-section>
 
+    <app-section
+      title="Cabecera y listado"
+      hint="pi-headline para portadas de sección, pi-list-item para filas de listado. pi-headline resuelve pathImg contra un CDN externo fijo, así que la ilustración solo carga con red."
+    >
+      <div class="stack full">
+        <pi-headline pathImg="404.svg" alt="Ilustración">
+          <pi-headline-label-content>
+            <h4>Bienvenido</h4>
+          </pi-headline-label-content>
+          <pi-headline-description-content>
+            <p>Gestiona tu cuenta desde aquí.</p>
+          </pi-headline-description-content>
+        </pi-headline>
+
+        <pi-list-item borderType="bottom" color="white" [isClickable]="true">
+          <pi-list-item-left-icon>
+            <pi-icon icon="user" color="primary" />
+          </pi-list-item-left-icon>
+          <pi-list-item-left-content>
+            <span>Perfil</span>
+          </pi-list-item-left-content>
+          <pi-list-item-right-icon>
+            <pi-icon icon="chevron-forward" color="grey" />
+          </pi-list-item-right-icon>
+        </pi-list-item>
+
+        <pi-list-item borderType="bottom" color="white" [isClickable]="true">
+          <pi-list-item-left-icon>
+            <pi-icon icon="notification-on" color="primary" />
+          </pi-list-item-left-icon>
+          <pi-list-item-left-content>
+            <span>Notificaciones</span>
+          </pi-list-item-left-content>
+          <pi-list-item-right-content>
+            <pi-chip-status status="pending" label="3" />
+          </pi-list-item-right-content>
+        </pi-list-item>
+      </div>
+    </app-section>
+
     <app-section title="Chips">
       <pi-chip label="Etiqueta" color="primary" />
       <pi-chip-status status="success" label="Correcto" />
@@ -114,6 +224,359 @@
         [isActive]="true"
         (execute)="log('chip-action')"
       />
+      <pi-chip-time
+        date="2026-07-28"
+        time="2026-07-28T09:30:00Z"
+        [isActive]="false"
+      />
+      <pi-chip-date date="2026-07-28" [isActive]="false" />
+      <pi-tile label="Ingresos" value="12.4K €" icon="coin" />
+    </app-section>
+
+    <app-section title="Card">
+      <pi-card
+        alignment="flex-start"
+        gap="m"
+        innerPadding="l"
+        context="public"
+        [isClickable]="true"
+        (execute)="log('card')"
+      >
+        <pi-card-top-content>
+          <h4>Título de la tarjeta</h4>
+        </pi-card-top-content>
+        <pi-card-center-content>
+          <p>Contenido de ejemplo para pi-card.</p>
+        </pi-card-center-content>
+      </pi-card>
+    </app-section>
+
+    <app-section
+      title="Panel"
+      hint="pi-expansion-panel[type=form] usa Reactive Forms clásico, no Signal Forms."
+    >
+      <div class="stack full">
+        <pi-panel
+          title="Resumen"
+          subtitle="Últimos 30 días"
+          height="medium"
+          outline="grey"
+          status=""
+          innerPadding="l"
+        >
+          <pi-panel-center-content>
+            <p>Contenido central del panel.</p>
+          </pi-panel-center-content>
+          <pi-panel-bottom-content>
+            <button pi-ghost (click)="log('panel bottom action')">
+              Ver más
+            </button>
+          </pi-panel-bottom-content>
+        </pi-panel>
+
+        <pi-expansion-panel
+          type="form"
+          title="Datos de contacto"
+          height="small"
+          outline="grey"
+          status=""
+          innerPadding="l"
+          [(isCollapsed)]="isPanelCollapsed"
+          (edit)="log('expansion-panel edit')"
+        >
+          <pi-panel-center-content>
+            <p>{{ f.contactEmail().value() || 'Sin email' }}</p>
+          </pi-panel-center-content>
+          <pi-panel-expandable-content>
+            <input
+              [formField]="f.contactEmail"
+              placeholder="email@ejemplo.com"
+            />
+          </pi-panel-expandable-content>
+        </pi-expansion-panel>
+      </div>
+    </app-section>
+
+    <app-section title="Accordion">
+      <div class="stack full">
+        <pi-accordion
+          color="primary"
+          appearance="outline"
+          [(expandedItemIndex)]="expandedAccordionIndex"
+        >
+          <pi-accordion-item
+            title="Facturación"
+            subtitle="Datos de pago"
+            status="info"
+            statusLabel="Pendiente"
+          >
+            <ng-template pi-accordion-item-expandable-content>
+              <p>Contenido expandible del ítem 1.</p>
+            </ng-template>
+          </pi-accordion-item>
+          <pi-accordion-item
+            title="Envío"
+            status="success"
+            statusLabel="Completo"
+          >
+            <ng-template pi-accordion-item-expandable-content>
+              <p>Detalles de envío.</p>
+            </ng-template>
+          </pi-accordion-item>
+        </pi-accordion>
+      </div>
+    </app-section>
+
+    <app-section title="Tab">
+      <div class="stack full">
+        <pi-tab
+          [tabButtons]="tabs"
+          [isSmallDevice]="false"
+          (tabChange)="log('tab ' + $event)"
+        >
+          <ng-template pi-tab-content
+            >Contenido de la pestaña General.</ng-template
+          >
+          <ng-template pi-tab-content
+            >Contenido de la pestaña Facturación.</ng-template
+          >
+          <ng-template pi-tab-content
+            >Contenido de la pestaña Avanzado.</ng-template
+          >
+        </pi-tab>
+      </div>
+    </app-section>
+
+    <app-section title="Banner">
+      <div class="stack full">
+        <pi-banner
+          mode="dark"
+          title="Nueva funcionalidad"
+          message="Descubre el nuevo panel de control."
+          buttonText="Ver más"
+          pathImg="404.svg"
+          extension="svg"
+          (execute)="log('banner')"
+        />
+      </div>
+    </app-section>
+
+    <app-section title="Note">
+      <div class="stack full">
+        <pi-note
+          title="Aviso"
+          text="Tu suscripción caduca pronto."
+          status="pending"
+          gap="s"
+        >
+          <pi-note-action-content>
+            <button pi-ghost (click)="log('note action')">Renovar</button>
+          </pi-note-action-content>
+        </pi-note>
+      </div>
+    </app-section>
+
+    <app-section
+      title="Select"
+      hint="pi-select* usa Signal Forms como el resto: [formField] enlaza el valor completo de la opción elegida. #optionTemplate/#selectedTemplate son content children obligatorios de la librería; sin ellos, Angular lanza NG0951."
+    >
+      <div class="stack full">
+        <pi-select
+          [formField]="f.country"
+          keyIdProperty="id"
+          label="País"
+          placeholder="Selecciona un país"
+          [options]="countries"
+        >
+          <ng-template #optionTemplate let-option>
+            <pi-select-option [id]="option.id" [label]="option.name" />
+          </ng-template>
+          <ng-template #selectedTemplate></ng-template>
+        </pi-select>
+
+        <pi-select-multiple
+          [formField]="f.tags"
+          keyIdProperty="id"
+          label="Etiquetas"
+          placeholder="Selecciona etiquetas"
+          [options]="tags"
+          [hasSelectAllOptions]="true"
+          selectAllLabel="Todas"
+        >
+          <ng-template #optionTemplate let-option>
+            <pi-select-option
+              type="multiple"
+              [id]="option.id"
+              [label]="option.name"
+            />
+          </ng-template>
+          <ng-template #selectedTemplate></ng-template>
+        </pi-select-multiple>
+
+        <pi-select-period
+          [formField]="f.period"
+          keyIdProperty="id"
+          label="Periodo"
+          placeholder="Selecciona un periodo"
+          [options]="countries"
+        >
+          <ng-template #optionTemplate let-option>
+            <pi-select-option [id]="option.id" [label]="option.name" />
+          </ng-template>
+          <ng-template #selectedTemplate></ng-template>
+        </pi-select-period>
+
+        <pi-select-carousel
+          [formField]="f.plan"
+          keyIdProperty="id"
+          [options]="plans"
+          [itemsDesktop]="3"
+          [device]="device"
+        >
+          <ng-template #optionTemplate let-option>
+            <pi-select-option
+              [id]="option.id"
+              [label]="option.name"
+              [description]="option.description"
+              flexDirection="column"
+            />
+          </ng-template>
+          <ng-template #selectedTemplate></ng-template>
+        </pi-select-carousel>
+      </div>
+    </app-section>
+
+    <app-section
+      title="Modal y notificaciones"
+      hint="pi-modal y pi-snack-bar no se usan como etiquetas: se abren desde TypeScript vía MatDialog y NotificationService."
+    >
+      <button pi-primary (click)="openDemoModal()">Abrir modal</button>
+      <button pi-outline (click)="showSuccessNotification()">
+        Notificación de éxito
+      </button>
+      <button pi-outline (click)="showErrorNotification()">
+        Notificación de error
+      </button>
+    </app-section>
+
+    <app-section title="Data grid">
+      <div class="stack full">
+        <pi-data-grid
+          [data]="employees"
+          [columns]="3"
+          [rows]="1"
+          [index]="0"
+          [isActive]="false"
+          mode="list"
+          dataDirection="column"
+          (clickItem)="log('data-grid item')"
+        >
+          <ng-template #valuesTemplate let-value let-i="index">
+            <span pi-cell [index]="i">{{ value.name }} — {{ value.role }}</span>
+          </ng-template>
+        </pi-data-grid>
+      </div>
+    </app-section>
+
+    <app-section title="Data table">
+      <div class="stack full">
+        <pi-base-data-table dataDirection="row" type="header">
+          <pi-data-table-item
+            heading="Concepto"
+            [values]="['Cliente', 'Importe', 'Fecha']"
+          >
+            <ng-template #item let-value="value">
+              <pi-cell-type type="text" [display]="value" />
+            </ng-template>
+          </pi-data-table-item>
+        </pi-base-data-table>
+
+        @for (row of invoiceRows; track row) {
+        <pi-base-data-table dataDirection="row" type="data">
+          <pi-data-table-item [values]="row">
+            <ng-template #item let-value="value" let-i="index">
+              <pi-cell-type
+                [type]="i === 1 ? 'amount' : 'text'"
+                [display]="value"
+              />
+            </ng-template>
+          </pi-data-table-item>
+        </pi-base-data-table>
+        }
+      </div>
+    </app-section>
+
+    <app-section title="Chart">
+      <div class="stack full">
+        <pi-chart
+          type="line"
+          [device]="device"
+          [xAxisMarks]="['Ene', 'Feb', 'Mar', 'Abr']"
+          [datasets]="chartDatasets"
+        />
+      </div>
+    </app-section>
+
+    <app-section title="Carousel">
+      <div class="stack full">
+        <pi-carousel
+          [itemsDesktop]="3"
+          [itemsTablet]="2"
+          [itemsMobile]="1"
+          [hideSwipeButtons]="false"
+          [device]="device"
+          color="primary"
+          (itemChanged)="log('carousel ' + $event)"
+        >
+          @for (item of carouselItems; track item.id) {
+          <ng-template pi-carousel-item>
+            <div class="demo-card">{{ item.label }}</div>
+          </ng-template>
+          }
+        </pi-carousel>
+      </div>
+    </app-section>
+
+    <app-section
+      title="Stepper"
+      hint="Cubre WrapperTypeClass.Steps, que estaba declarado sin componente ni CSS."
+    >
+      <div class="stack full">
+        <pi-stepper
+          #stepper
+          [steps]="steps"
+          [(selectedIndex)]="stepperIndex"
+          (stepChange)="log('paso ' + $event)"
+        />
+        <div class="inline">
+          <button pi-ghost small (click)="stepper.previous()">Anterior</button>
+          <button pi-ghost small (click)="stepper.next()">Siguiente</button>
+        </div>
+      </div>
+    </app-section>
+
+    <app-section
+      title="Dynamic menu"
+      hint="ComponentFamilyClass ya declaraba la familia dynamic-menu y util/menu traía la clase base; faltaba el componente."
+    >
+      <div class="stack full">
+        <pi-dynamic-menu
+          label="Navegación"
+          [menuItems]="menuEntries"
+          (selectEntry)="log('menú: ' + $any($event).label)"
+        />
+      </div>
+    </app-section>
+
+    <app-section
+      title="Skeleton"
+      hint="Resuelve el TODO que quedaba en pi-data-grid; también es el respaldo cuando no se pasa plantilla."
+    >
+      <div class="stack full">
+        <pi-skeleton [lines]="3" />
+        <pi-skeleton shape="block" width="100%" height="4rem" />
+        <pi-skeleton shape="circle" width="3rem" />
+      </div>
     </app-section>
 
     <app-section
@@ -130,5 +593,14 @@
         (changePage)="log('página ' + $event)"
       />
     </app-section>
+
+    <app-section
+      title="Página no encontrada"
+      hint="pi-not-found: página completa (pi-headline + botón volver), no un widget en línea."
+    >
+      <div class="not-found-frame">
+        <pi-not-found />
+      </div>
+    </app-section>
   </div>
 </main>

apps/playground/src/app/pages/catalog/catalog.page.scss

@@ -1,24 +1,5 @@
 :host {
   display: block;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem 4rem;
-}
-
-.page-header {
-  margin-bottom: 2rem;
-
-  h1 {
-    margin: 0;
-    font-size: 2rem;
-    font-weight: 700;
-    color: #5c82e9;
-  }
-
-  p {
-    margin: 0.5rem 0 0;
-    color: #6b7280;
-    max-width: 60ch;
 }
 
 .event {
@@ -26,12 +7,11 @@
   margin-top: 0.75rem;
   padding: 0.25rem 0.6rem;
   border-radius: 999px;
-    background: #eef2ff;
+  background: var(--pg-badge-bg);
-    color: #4c5fd7;
+  color: var(--pg-badge-text);
   font-size: 0.8rem;
   font-variant-numeric: tabular-nums;
 }
-}
 
 main {
   display: grid;
@@ -67,16 +47,47 @@ main {
 .state {
   margin: 0;
   font-size: 0.85rem;
-  color: #374151;
+  color: var(--pg-state-text);
 }
 
 pre {
   margin: 0;
   padding: 0.9rem;
   border-radius: 8px;
-  background: #0f172a;
+  background: var(--pg-code-bg);
-  color: #cbd5f5;
+  color: var(--pg-code-text);
   font-size: 0.78rem;
   line-height: 1.5;
   overflow-x: auto;
 }
+
+.range-slider-caption {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+
+  > span {
+    font-size: 0.75rem;
+    color: var(--pg-text-muted);
+  }
+}
+
+.demo-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  border-radius: 8px;
+  background: var(--pg-badge-bg);
+  color: var(--pg-badge-text);
+  font-size: 0.85rem;
+}
+
+.not-found-frame {
+  width: 100%;
+  max-height: 22rem;
+  overflow: auto;
+  border: 1px dashed var(--pg-card-border);
+  border-radius: 8px;
+}

apps/playground/src/app/pages/catalog/catalog.page.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core';
 import {
   FormField,
   email,
@@ -7,43 +12,118 @@ import {
   min,
   required,
 } from '@angular/forms/signals';
+import { MatDialog } from '@angular/material/dialog';
 
 import {
+  PiAccordionComponent,
+  PiAccordionItemContentDirective,
+  PiAccordionItemDirective,
   PiActionButtonComponent,
+  PiBannerComponent,
+  PiBaseDataTableComponent,
+  PiCardBottomContentDirective,
+  PiCardCenterContentDirective,
+  PiCardComponent,
+  PiCardTopContentDirective,
+  PiCarouselComponent,
+  PiCarouselItemDirective,
+  PiCellDirective,
+  PiCellTypeComponent,
+  PiChartComponent,
   PiChevronButtonComponent,
   PiChipActionComponent,
   PiChipComponent,
+  PiChipDateComponent,
   PiChipStatusComponent,
+  PiChipTimeComponent,
   PiChipValueComponent,
   PiCloseButtonComponent,
+  PiColorPrimaryDirective,
   PiCurrencyFieldComponent,
+  PiDataGridComponent,
+  PiDataTableItemComponent,
+  Dataset,
+  DatasetColor,
+  Device,
   PiDividerComponent,
   PiEmailFieldComponent,
+  PiExpansionPanelComponent,
   PiGhostButtonDirective,
   PiHamburgerComponent,
+  PiHeadlineComponent,
+  PiHeadlineDescriptionContentDirective,
+  PiHeadlineLabelContentDirective,
   PiIconButtonComponent,
   PiIconComponent,
+  PiIconFieldComponent,
   PiIncrementalNumberFieldComponent,
   PiIncrementalRangeFieldComponent,
   PiLabelDirective,
   PiLargeButtonDirective,
+  PiListItemComponent,
+  PiListItemLeftContentDirective,
+  PiListItemLeftIconDirective,
+  PiListItemRightContentDirective,
+  PiListItemRightIconDirective,
+  ModalConfigKeys,
+  ModalStyleType,
+  ModalType,
+  NotificationService,
+  PiModalComponent,
+  PiNoteActionContentDirective,
+  PiNoteComponent,
+  PiNotFoundComponent,
+  getModalConfigs,
+  PiNumberFieldComponent,
   PiOutlineButtonDirective,
   PiPaginatorComponent,
+  PiPanelBottomContentDirective,
+  PiPanelCenterContentDirective,
+  PiPanelComponent,
+  PiPanelExpandableContentDirective,
   PiPasswordFieldComponent,
+  PiPhoneFieldComponent,
   PiProgressBarComponent,
+  PiRadioButtonComponent,
   PiRange,
+  PiRangeSliderComponent,
   PiSearchFieldComponent,
+  PiSelectCarouselComponent,
+  PiSelectComponent,
+  PiSelectMultipleComponent,
+  PiSelectOptionComponent,
+  PiSelectPeriodComponent,
   PiSlideToggleComponent,
   PiSliderComponent,
   PiSmallButtonDirective,
   PiProgressSpinnerComponent,
+  PiSwitchButtonComponent,
+  PiTabComponent,
+  PiTabContentDirective,
+  TabButton,
   PiTextFieldComponent,
   PiTextViewerComponent,
   PiTextareaComponent,
+  PiTileComponent,
+  PiToggleButtonComponent,
+  PiTooltipDirective,
   PiW100ButtonDirective,
+  PiCheckboxComponent,
+  PiRadioGroupComponent,
+  PiDateFieldComponent,
+  PiFileUploadComponent,
+  PiDynamicMenuComponent,
+  PiSkeletonComponent,
+  PiStepperComponent,
 } from '@pi/ui';
 
-import { ShowcaseSection } from './showcase-section';
+import { ShowcaseSection } from '../showcase-section';
+
+interface SelectOptionValue {
+  id: number;
+  name: string;
+  description?: string;
+}
 
 interface DemoModel {
   name: string;
@@ -57,13 +137,26 @@ interface DemoModel {
   volume: number;
   newsletter: boolean;
   search: string;
+  website: string;
+  phone: string;
+  weight: number | null;
+  priceRange: PiRange;
+  contactEmail: string;
+  country: SelectOptionValue | null;
+  tags: SelectOptionValue[];
+  period: SelectOptionValue | null;
+  plan: SelectOptionValue | null;
+  terms: boolean;
+  shipping: string | null;
+  birthDate: Date | null;
+  attachments: File[];
 }
 
 @Component({
-  selector: 'app-root',
+  selector: 'app-catalog',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './app.html',
+  templateUrl: './catalog.page.html',
-  styleUrl: './app.scss',
+  styleUrl: './catalog.page.scss',
   imports: [
     FormField,
     ShowcaseSection,
@@ -75,10 +168,14 @@ interface DemoModel {
     PiIconButtonComponent,
     PiGhostButtonDirective,
     PiOutlineButtonDirective,
+    PiColorPrimaryDirective,
     PiLabelDirective,
     PiLargeButtonDirective,
     PiSmallButtonDirective,
     PiW100ButtonDirective,
+    PiRadioButtonComponent,
+  PiSwitchButtonComponent,
+    PiToggleButtonComponent,
     // Contenido
     PiIconComponent,
     PiTextViewerComponent,
@@ -87,6 +184,19 @@ interface DemoModel {
     PiChipStatusComponent,
     PiChipValueComponent,
     PiChipActionComponent,
+    PiChipTimeComponent,
+    PiChipDateComponent,
+    PiTileComponent,
+    PiHeadlineComponent,
+    PiHeadlineLabelContentDirective,
+    PiHeadlineDescriptionContentDirective,
+    PiListItemComponent,
+    PiListItemLeftIconDirective,
+    PiListItemLeftContentDirective,
+    PiListItemRightContentDirective,
+    PiListItemRightIconDirective,
+    PiTooltipDirective,
+    PiNotFoundComponent,
     // Feedback
     PiProgressSpinnerComponent,
     PiProgressBarComponent,
@@ -102,9 +212,54 @@ interface DemoModel {
     PiSearchFieldComponent,
     PiSlideToggleComponent,
     PiSliderComponent,
+    PiRangeSliderComponent,
+    PiIconFieldComponent,
+    PiPhoneFieldComponent,
+    PiNumberFieldComponent,
+    // Contenedores
+    PiCardComponent,
+    PiCardTopContentDirective,
+    PiCardCenterContentDirective,
+    PiCardBottomContentDirective,
+    PiPanelComponent,
+    PiPanelCenterContentDirective,
+    PiPanelBottomContentDirective,
+    PiExpansionPanelComponent,
+    PiPanelExpandableContentDirective,
+    PiAccordionComponent,
+    PiAccordionItemDirective,
+    PiAccordionItemContentDirective,
+    PiTabComponent,
+    PiTabContentDirective,
+    PiBannerComponent,
+    PiNoteComponent,
+    PiNoteActionContentDirective,
+    // Selects
+    PiSelectComponent,
+    PiSelectMultipleComponent,
+    PiSelectPeriodComponent,
+    PiSelectCarouselComponent,
+    PiSelectOptionComponent,
+    // Datos
+    PiDataGridComponent,
+    PiCellDirective,
+    PiBaseDataTableComponent,
+    PiDataTableItemComponent,
+    PiCellTypeComponent,
+    PiChartComponent,
+    PiCarouselComponent,
+    PiCarouselItemDirective,
+    // Componentes nuevos
+    PiCheckboxComponent,
+    PiRadioGroupComponent,
+    PiDateFieldComponent,
+    PiFileUploadComponent,
+    PiDynamicMenuComponent,
+    PiSkeletonComponent,
+    PiStepperComponent,
   ],
 })
-export class App {
+export class CatalogPage {
   /* --- Signal Forms ----------------------------------------------------- */
 
   private readonly model = signal<DemoModel>({
@@ -119,6 +274,19 @@ export class App {
     volume: 40,
     newsletter: false,
     search: '',
+    website: '',
+    phone: '',
+    weight: null,
+    priceRange: { from: 20, to: 80 },
+    contactEmail: '',
+    country: null,
+    tags: [],
+    period: null,
+    plan: null,
+    terms: false,
+    shipping: null,
+    birthDate: null,
+    attachments: [],
   });
 
   protected readonly f = form(this.model, (m) => {
@@ -131,12 +299,155 @@ export class App {
   /** Se muestra en el panel lateral para ver el modelo en vivo. */
   protected readonly modelJson = () => JSON.stringify(this.model(), null, 2);
 
+  protected readonly countries = [
+    { id: 1, name: 'España' },
+    { id: 2, name: 'Portugal' },
+    { id: 3, name: 'Francia' },
+  ];
+
+  protected readonly tags = [
+    { id: 1, name: 'Urgente' },
+    { id: 2, name: 'Facturación' },
+    { id: 3, name: 'Soporte' },
+    { id: 4, name: 'Ventas' },
+  ];
+
+  protected readonly plans = [
+    { id: 1, name: 'Básico', description: '9 €/mes' },
+    { id: 2, name: 'Pro', description: '29 €/mes' },
+    { id: 3, name: 'Empresas', description: '99 €/mes' },
+  ];
+
+  /**
+   * Los campos ya calculan sus errores en cuanto se marcan como `touched`
+   * (así lo exige `ErrorStateMatcher` de Material); antes de eso el usuario
+   * no ha interactuado y no tiene sentido mostrarlos. Este botón simula el
+   * envío del formulario para revelarlos todos de golpe.
+   */
+  protected submitForm(): void {
+    this.f().markAsTouched();
+    this.log('formulario enviado');
+  }
+
   /* --- Estado de los demás componentes ---------------------------------- */
 
   protected readonly currentPage = signal(1);
   protected readonly lastEvent = signal('—');
 
+  protected readonly radioActive = signal(false);
+  protected readonly switchActive = signal(true);
+  protected readonly toggleActive = signal(false);
+  protected readonly isPanelCollapsed = signal(false);
+  protected readonly expandedAccordionIndex = signal<number | null>(0);
+
+  protected readonly tabs: TabButton[] = [
+    { label: 'General' },
+    { label: 'Facturación', icon: 'euro' },
+    { label: 'Avanzado', isDisabled: true },
+  ];
+
+  protected readonly shippingOptions = [
+    { value: 'standard', label: 'Estándar (3-5 días)' },
+    { value: 'express', label: 'Exprés (24 h)' },
+    { value: 'pickup', label: 'Recoger en tienda', disabled: true },
+  ];
+
+  protected readonly stepperIndex = signal(1);
+
+  protected readonly steps = [
+    { label: 'Cuenta', description: 'Datos de acceso' },
+    { label: 'Perfil', description: 'Información personal' },
+    { label: 'Pago', description: 'Método de cobro' },
+  ];
+
+  protected readonly menuEntries = [
+    { label: 'Panel', icon: 'dashboard', isActive: true },
+    {
+      label: 'Operaciones',
+      icon: 'briefcase',
+      entries: [
+        { label: 'En curso', icon: 'time-detail' },
+        { label: 'Cerradas', icon: 'check' },
+      ],
+    },
+    { label: 'Ajustes', icon: 'user', isDisabled: true },
+  ];
+
   protected log(what: string): void {
     this.lastEvent.set(`${what} · ${new Date().toLocaleTimeString('es-ES')}`);
   }
+
+  /* --- Modal y notificaciones --------------------------------------------- */
+
+  /**
+   * `pi-modal` y `pi-snack-bar` no se usan como etiquetas en una plantilla:
+   * viven detrás de `MatDialog`/`MatSnackBar` y se abren desde TypeScript.
+   */
+  private readonly dialog = inject(MatDialog);
+  private readonly notification = inject(NotificationService);
+
+  protected openDemoModal(): void {
+    this.dialog.open(
+      PiModalComponent,
+      getModalConfigs(ModalConfigKeys.Small, {
+        type: ModalType.DIALOG,
+        pathImg: '404.svg',
+        label: 'Confirmar acción',
+        description: '¿Seguro que quieres continuar?',
+        style: ModalStyleType.PRIMARY,
+        buttonText: { primaryAction: 'Aceptar', secondaryAction: 'Cancelar' },
+      }),
+    );
+    this.log('modal abierto');
+  }
+
+  protected showSuccessNotification(): void {
+    this.notification.success(
+      'Guardado correctamente',
+      'Los cambios ya están disponibles',
+    );
+  }
+
+  protected showErrorNotification(): void {
+    this.notification.error(
+      'Ha ocurrido un error',
+      'Inténtalo de nuevo más tarde',
+    );
+  }
+
+  /* --- Datos: grid, tabla, gráfico, carrusel ------------------------------ */
+
+  protected readonly employees = [
+    { name: 'Ana López', role: 'Diseño' },
+    { name: 'Luis Marín', role: 'Backend' },
+    { name: 'Marta Ruiz', role: 'Ventas' },
+  ];
+
+  protected readonly invoiceRows = [
+    ['Ana López', '150,00 €', '12/07/2026'],
+    ['Luis Marín', '89,50 €', '15/07/2026'],
+  ];
+
+  protected readonly device: Device = 'DESKTOP';
+
+  protected readonly chartDatasets: Dataset[] = [
+    {
+      label: 'Ingresos',
+      data: [120, 190, 150, 220],
+      borderColor: DatasetColor.primary,
+      backgroundColor: DatasetColor.primary,
+      cubicInterpolationMode: 'monotone',
+      unit: ' €',
+      unitPosition: 'after',
+    },
+  ];
+
+  protected readonly carouselItems = [
+    { id: 1, label: 'Elemento 1' },
+    { id: 2, label: 'Elemento 2' },
+    { id: 3, label: 'Elemento 3' },
+    { id: 4, label: 'Elemento 4' },
+    { id: 5, label: 'Elemento 5' },
+    { id: 6, label: 'Elemento 6' },
+  ];
 }

apps/playground/src/app/pages/layouts/layouts.page.html

@@ -0,0 +1,82 @@
+<app-section
+  title="Cómo se usan"
+  hint="El layout es una clase en el contenedor de la vista, normalmente vía @HostBinding('class') con una constante de LayoutTypeClass. Casi todos esperan un .pi-container-layout como padre."
+>
+  <pre class="snippet">
+&#64;Component({{ '{' }} ... {{ '}' }})
+export class MiVista {{ '{' }}
+  &#64;HostBinding('class') cls = LayoutTypeClass.VerticallyCentered;
+{{ '}' }}</pre>
+</app-section>
+
+<app-section
+  title="Autónomos"
+  hint="Su CSS actúa sobre el propio contenedor, así que se ven con bloques sueltos. Las vistas van recortadas porque algunos se dimensionan en vh."
+>
+  <label class="clip-toggle">
+    <input
+      type="checkbox"
+      [checked]="clipped()"
+      (change)="clipped.set($any($event.target).checked)"
+    />
+    <span>Recortar vistas previas</span>
+  </label>
+</app-section>
+
+@for (layout of standalone; track layout.classes) {
+<app-section [title]="layout.name" [hint]="layout.description">
+  <div class="demo">
+    <code class="demo__classes">{{ layout.classes }}</code>
+
+    <div class="demo__frame" [class.is-clipped]="clipped()">
+      <div class="pi-container-layout">
+        <div [class]="layout.classes">
+          @for (block of layout.blocks; track block) {
+          <div class="demo__block">{{ block }}</div>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</app-section>
+}
+
+<app-section
+  title="Dependen de composición"
+  hint="Estos no cambian nada con bloques sueltos: su CSS apunta a los componentes de wrapper o a estados del shell. Se listan con lo que necesitan alrededor para hacer algo."
+>
+  <div class="needs">
+    @for (layout of compositional; track layout.classes) {
+    <div class="needs__item">
+      <strong>{{ layout.name }}</strong>
+      <code>{{ layout.classes }}</code>
+      <p>{{ layout.needs }}</p>
+    </div>
+    }
+  </div>
+</app-section>
+
+<app-section
+  title="Alturas"
+  hint="Se combinan con cualquier layout para fijar una altura mínima. Hay variantes por dispositivo con heights(mobile, tablet, desktop)."
+>
+  <div class="heights">
+    @for (h of heights; track h.cls) {
+    <div class="heights__item">
+      <code>{{ h.cls }}</code>
+      <span>{{ h.hint }}</span>
+    </div>
+    }
+  </div>
+</app-section>
+
+<app-section
+  title="Sin CSS en la capa genérica"
+  hint="Siguen expuestos en LayoutTypeClass, pero su CSS eran composiciones de app (estados del aside, tipos de usuario) que vivían en la carpeta de marca y no se han traído a common/."
+>
+  <div class="missing">
+    <code>pi-layout__00-authentication</code>
+    <code>pi-layout__01-dashboard</code>
+    <code>pi-layout__05a-splitted-paywall</code>
+  </div>
+</app-section>

apps/playground/src/app/pages/layouts/layouts.page.scss

@@ -0,0 +1,125 @@
+:host {
+  display: block;
+}
+
+.snippet {
+  margin: 0;
+  padding: 0.9rem;
+  border-radius: 8px;
+  background: var(--pg-code-bg);
+  color: var(--pg-code-text);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.clip-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--pg-text-muted);
+  cursor: pointer;
+}
+
+.demo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  width: 100%;
+
+  &__classes {
+    align-self: flex-start;
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+    background: var(--pg-badge-bg);
+    color: var(--pg-badge-text);
+    font-size: 0.75rem;
+  }
+
+  // Marco que aísla la vista previa: el layout real se dimensiona dentro.
+  &__frame {
+    width: 100%;
+    border: 1px dashed var(--pg-card-border);
+    border-radius: 8px;
+    overflow: auto;
+    resize: vertical;
+
+    &.is-clipped {
+      max-height: 16rem;
+    }
+  }
+
+  &__block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 3rem;
+    padding: 0.75rem;
+    border-radius: 6px;
+    background: var(--pg-badge-bg);
+    color: var(--pg-badge-text);
+    font-size: 0.8rem;
+    // Marca los huecos que reparte el layout.
+    outline: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  }
+}
+
+.heights,
+.missing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+
+  code {
+    padding: 0.2rem 0.55rem;
+    border-radius: 4px;
+    background: var(--pg-badge-bg);
+    color: var(--pg-badge-text);
+    font-size: 0.78rem;
+  }
+}
+
+.heights__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  span {
+    font-size: 0.75rem;
+    color: var(--pg-text-muted);
+  }
+}
+
+.needs {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.3rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid var(--pg-card-border);
+
+    strong {
+      font-size: 0.9rem;
+    }
+    code {
+      padding: 0.15rem 0.5rem;
+      border-radius: 4px;
+      background: var(--pg-badge-bg);
+      color: var(--pg-badge-text);
+      font-size: 0.75rem;
+    }
+    p {
+      margin: 0;
+      font-size: 0.82rem;
+      color: var(--pg-text-muted);
+      max-width: 70ch;
+    }
+  }
+}

apps/playground/src/app/pages/layouts/layouts.page.ts

@@ -0,0 +1,117 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { LayoutHeight, LayoutTypeClass } from '@pi/ui';
+
+import { ShowcaseSection } from '../showcase-section';
+
+interface LayoutDemo {
+  /** Nombre corto para el título del apartado. */
+  name: string;
+  /** Constante de `LayoutTypeClass`, tal cual se aplica en el HostBinding. */
+  classes: string;
+  /** Qué hace realmente el CSS de este layout. */
+  description: string;
+  /** Bloques de relleno que se pintan dentro de la vista previa. */
+  blocks: string[];
+}
+
+@Component({
+  selector: 'app-layouts',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './layouts.page.html',
+  styleUrl: './layouts.page.scss',
+  imports: [ShowcaseSection],
+})
+export class LayoutsPage {
+  /**
+   * Layouts que se sostienen solos: su CSS actúa sobre el propio contenedor,
+   * así que la vista previa con bloques sueltos ya enseña lo que hacen.
+   */
+  protected readonly standalone: LayoutDemo[] = [
+    {
+      name: 'Vertically centered',
+      classes: LayoutTypeClass.VerticallyCentered,
+      description:
+        'Columna flex centrada verticalmente (justify-content: center). Típico de login, errores o estados vacíos.',
+      blocks: ['Bloque centrado'],
+    },
+    {
+      name: 'Space between',
+      classes: LayoutTypeClass.SpaceBetween,
+      description:
+        'Columna flex con justify-content: space-between: empuja el primer bloque arriba y el último abajo.',
+      blocks: ['Cabecera', 'Pie'],
+    },
+    {
+      name: 'Full width auto',
+      classes: LayoutTypeClass.FullWidthAuto,
+      description:
+        'Añade margin: auto sobre el full width, para centrar el bloque cuando no ocupa todo el ancho.',
+      blocks: ['Contenido centrado'],
+    },
+    {
+      name: 'Pricing',
+      classes: LayoutTypeClass.Pricing,
+      description:
+        'Rejilla de 3 columnas (repeat(3, 1fr)) para tarifas; tiene variante 1fr 3fr con tarjeta destacada.',
+      blocks: ['Básico', 'Pro', 'Empresas'],
+    },
+  ];
+
+  /**
+   * Estos no se pueden enseñar con bloques sueltos: su CSS apunta a los
+   * componentes de wrapper o a estados del shell de la aplicación, así que
+   * fuera de esa composición no cambian nada visible.
+   */
+  protected readonly compositional = [
+    {
+      name: 'Full width',
+      classes: LayoutTypeClass.FullWidth,
+      needs:
+        'Un ancestro con `aside-is-open`: los anchos máximos se calculan a partir del aside y el navbar.',
+    },
+    {
+      name: 'Splitted',
+      classes: LayoutTypeClass.Splitted,
+      needs:
+        'No parte en dos por sí solo: es una columna a 100vh y las mitades las aportan los slots izquierdo/derecho de `pi-main-wrapper`.',
+    },
+    {
+      name: 'Edge to edge',
+      classes: LayoutTypeClass.EdgeToEdge,
+      needs:
+        'Un `pi-wrapper__header` como hijo dentro de `.pi-container-layout`: lo que ajusta es su espaciado superior.',
+    },
+    {
+      name: 'List',
+      classes: LayoutTypeClass.List,
+      needs:
+        'Wrappers (`pi-wrapper`, `pi-wrapper__list`) y un `pi-data-grid`: limita sus anchos y centra la rejilla.',
+    },
+    {
+      name: 'List auto',
+      classes: LayoutTypeClass.ListAuto,
+      needs: 'Igual que List, para listados con scroll infinito.',
+    },
+    {
+      name: 'Form',
+      classes: LayoutTypeClass.Form,
+      needs:
+        'Ir anidado dentro de un `pi-layout__05-splitted`: solo ahí recibe padding y scrollbar propios.',
+    },
+  ];
+
+  /** Alturas mínimas, aplicables sobre cualquier layout. */
+  protected readonly heights = [
+    { label: 'small', cls: LayoutHeight.Small, hint: '33.33vh' },
+    { label: 'medium', cls: LayoutHeight.Medium, hint: '40vh' },
+    { label: 'large', cls: LayoutHeight.Large, hint: '75vh' },
+    { label: 'full', cls: LayoutHeight.Full, hint: '100vh' },
+  ];
+
+  /**
+   * Las vistas previas van recortadas: varios layouts piden `vh` y ocuparían
+   * pantallas enteras. Se puede soltar el recorte para verlos a tamaño real.
+   */
+  protected readonly clipped = signal(true);
+}

apps/playground/src/app/pages/showcase-section.ts

@@ -17,14 +17,14 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   `,
   styles: `
     section {
-      background: #fff;
+      background: var(--pg-card-bg);
-      border: 1px solid #e7e9ee;
+      border: 1px solid var(--pg-card-border);
       border-radius: 12px;
       padding: 1.5rem;
       margin-bottom: 1.5rem;
     }
     header {
-      border-bottom: 1px solid #eef0f4;
+      border-bottom: 1px solid var(--pg-card-header-border);
       margin-bottom: 1.25rem;
       padding-bottom: 0.75rem;
     }
@@ -34,12 +34,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
       font-weight: 600;
       letter-spacing: 0.02em;
       text-transform: uppercase;
-      color: #5c82e9;
+      color: var(--pg-heading);
     }
     p {
       margin: 0.35rem 0 0;
       font-size: 0.85rem;
-      color: #6b7280;
+      color: var(--pg-text-muted);
     }
     .content {
       display: flex;

apps/playground/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="is-desktop">
   <head>
     <meta charset="utf-8" />
     <title>playground</title>
@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <!-- Valor inicial; App lo reescribe según el tema elegido (ver ShellClass). -->
+  <body class="pi-shell pi-shell__default">
     <app-root></app-root>
   </body>
 </html>

apps/playground/src/styles.scss

@@ -13,6 +13,14 @@
 @use '../../../libs/ui/src/lib/styles/common/components' as *;
 @use '../../../libs/ui/src/lib/styles/common/layouts' as *;
 @use '../../../libs/ui/src/lib/styles/common/wrappers' as *;
+// Overrides de Material (campos, checkbox, diálogos, sliders, menús...). Es lo
+// que hace que los componentes se vean «pi» y no Material de serie; el
+// `@import` de `@typeform/embed` que estorbaba está en `common/index.scss`, no
+// aquí, así que este partial sí se puede cargar.
+@use '../../../libs/ui/src/lib/styles/common/vendors' as *;
+// Capa de temas: declara los tokens --pi-theme-* que consume `common/`.
+// Va después de `common` para que sus overrides ganen.
+@use '../../../libs/ui/src/lib/styles/themes' as *;
 
 html {
   @include mat.theme(
@@ -27,6 +35,90 @@ html {
   );
 
   color-scheme: light;
+
+  // Chrome propio del playground (cabecera, tarjetas de sección, bloque de
+  // estado). Los componentes de @pi/ui usan --pi-color-*, sobrescritas más
+  // abajo para el modo oscuro.
+  --pg-page-bg: #f7f8fa;
+  --pg-page-text: #1c1c1e;
+  --pg-heading: #5c82e9;
+  --pg-text-muted: #6b7280;
+  --pg-badge-bg: #eef2ff;
+  --pg-badge-text: #4c5fd7;
+  --pg-card-bg: #fff;
+  --pg-card-border: #e7e9ee;
+  --pg-card-header-border: #eef0f4;
+  --pg-state-text: #374151;
+  --pg-code-bg: #0f172a;
+  --pg-code-text: #cbd5f5;
+}
+
+// Modo oscuro: se activa añadiendo la clase `dark-mode` al <html> (ver
+// App.darkMode en apps/playground/src/app/app.ts). @pi/ui no está diseñada
+// con un tema oscuro propio, así que esto es una reasignación best-effort de
+// sus variables --pi-color-* neutras (blancos/negros/grises/fondos); las
+// paletas de marca (primary/accent/warn/success/highlighted) se mantienen
+// igual y pueden perder algo de contraste en algunos componentes.
+html.dark-mode {
+  @include mat.theme(
+    (
+      color: (
+        theme-type: dark,
+        primary: mat.$azure-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  color-scheme: dark;
+
+  --pg-page-bg: #14161a;
+  --pg-page-text: #e5e7eb;
+  --pg-heading: #8cacf2;
+  --pg-text-muted: #9aa1ac;
+  --pg-badge-bg: #1f2a4d;
+  --pg-badge-text: #b9c4ff;
+  --pg-card-bg: #1c1f26;
+  --pg-card-border: #2a2f3a;
+  --pg-card-header-border: #262b35;
+  --pg-state-text: #cbd2db;
+  --pg-code-bg: #0a0d16;
+  --pg-code-text: #cbd5f5;
+
+  // --- @pi/ui: neutros -------------------------------------------------
+  --pi-color-white: #1c1f26;
+  --pi-color-white-900: #252932;
+  --pi-color-black: #f1f2f4;
+  --pi-color-black-200: #c7cbd4;
+
+  --pi-color-grey-10: #111318;
+  --pi-color-grey-25: #161920;
+  --pi-color-grey-50: #1b1e26;
+  --pi-color-grey-75: #20232c;
+  --pi-color-grey-100: #2a2e38;
+  --pi-color-grey-200: #3a3f4b;
+  --pi-color-grey-300: #565c6b;
+  --pi-color-grey-400: #7a8190;
+  --pi-color-grey: #9aa1ac;
+  --pi-color-grey-900: #e4e6ea;
+
+  --pi-color-background-300: #4b505c;
+  --pi-color-background-400: #1c1f26;
+  --pi-color-background-500: #181b22;
+}
+
+// El tema alternativo usa escalones claros de su marca como superficie de los
+// campos (`--pi-theme-field-surface`). Como el bloque de arriba solo reasigna
+// neutros, en oscuro esos campos se quedaban en claro: aquí se oscurecen los
+// pocos escalones que actúan de superficie, manteniendo el tinte violeta.
+html.dark-mode .pi-shell__alternative {
+  --pi-color-primary-10: #16131f;
+  --pi-color-primary-25: #1a1626;
+  --pi-color-primary-50: #201a30;
+  --pi-color-primary-75: #2a2140;
+  --pi-color-primary-100: #3a2d5c;
 }
 
 body {
@@ -36,6 +128,6 @@ body {
     system-ui,
     -apple-system,
     sans-serif;
-  background: #f7f8fa;
+  background: var(--pg-page-bg);
-  color: #1c1c1e;
+  color: var(--pg-page-text);
 }

libs/ui/src/index.ts

@@ -9,11 +9,17 @@ export * from './lib/util/common';
 export * from './lib/util/dato-cms';
 export * from './lib/util/device-configs';
 export * from './lib/util/environments';
-export * from './lib/util/form-control';
 export * from './lib/util/icon-registry';
 export * from './lib/util/infinite-scroll';
 // ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
-export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
+export {
+  getListMode,
+  ListConfigsFacade,
+  listConfigsReducer,
+  ListModeActionsType,
+  resetListMode,
+  setListMode,
+} from './lib/util/list-configs';
 export type { ListConfigsState, ListMode } from './lib/util/list-configs';
 export * from './lib/util/loaders';
 export * from './lib/util/local-storage';
@@ -40,10 +46,12 @@ export * from './lib/ui/data-grid';
 export * from './lib/ui/data-table';
 export * from './lib/ui/divider';
 export * from './lib/ui/error-status-code';
+export * from './lib/ui/file-upload';
 export * from './lib/ui/form-field';
 export * from './lib/ui/icon';
 export * from './lib/ui/image';
 export * from './lib/ui/list-item';
+export * from './lib/ui/menu';
 export * from './lib/ui/modal';
 export * from './lib/ui/note';
 export * from './lib/ui/notification';
@@ -51,11 +59,36 @@ export * from './lib/ui/paginator';
 export * from './lib/ui/panel';
 export * from './lib/ui/progress';
 export * from './lib/ui/select';
-// ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
 export * from './lib/ui/slider';
 export * from './lib/ui/spinner';
+export * from './lib/ui/stepper';
 export * from './lib/ui/tab';
 // ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
-export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
+export {
+  PiBaseTextViewerComponent,
+  PiTextAreaExpansionComponent,
+  PiTextCenteredDirective,
+  PiTextColorDirective,
+  PiTextCoveredDirective,
+  PiTextGroupDirective,
+  PiTextGroupIndicatorDirective,
+  PiTextLargeDirective,
+  PiTextLetterSpacingDirective,
+  PiTextMediumDirective,
+  PiTextSizeDirective,
+  PiTextSmallDirective,
+  PiTextViewerComponent,
+  PiTextViewerLinkComponent,
+  PiTextWeightBlackDirective,
+  PiTextWeightBoldDirective,
+  PiTextWeightLightDirective,
+  PiTextWeightMediumDirective,
+  PiTextWeightNormalDirective,
+  PiTextXLargeDirective,
+  PiTextXSmallDirective,
+  PiTextXXLargeDirective,
+  PiTextXXSmallDirective,
+  PiTextXXXLargeDirective,
+} from './lib/ui/text';
 export * from './lib/ui/tooltip';
 export * from './lib/ui/wrapper';

libs/ui/src/lib/styles/common/base/_pi-reset.scss

@@ -538,7 +538,17 @@ template {
 
 button,
 .pi-input,
-[class*='mat-'] {
+// `[class*='mat-']` alcanza a cualquier elemento de Angular Material. Hay que
+// excluir los que forman tabla: el datepicker monta el calendario con una
+// `<table>` real, y forzarla a `display: block` le quita el contexto de
+// formato de tabla y colapsa la rejilla de días en una sola columna.
+//
+// La exclusión va dentro de `:where()` a propósito: `:where()` no aporta
+// especificidad, así que la regla sigue valiendo (0,1,0) como antes. Con un
+// `:not(table):not(tr)...` normal subiría a (0,1,7) y pasaría a ganarle a
+// reglas de Material que hasta ahora respetaba (los afijos de icono de los
+// campos, entre otras).
+[class*='mat-']:not(:where(table, thead, tbody, tfoot, tr, th, td)) {
   display: block;
 }
 

libs/ui/src/lib/styles/common/components/_pi-card.scss

@@ -290,7 +290,7 @@
     justify-content: space-between;
     width: -webkit-fill-available;
     padding: var(--pi-spacing-xx-large);
-    border-radius: var(--pi-border-radius-large);
+    border-radius: var(--pi-theme-card-radius);
     transition: var(--pi-animation);
 
     &:hover {
@@ -318,7 +318,7 @@
 
     // Has Shadow
     &.has-shadow {
-      box-shadow: var(--pi-box-shadow-panel);
+      box-shadow: var(--pi-theme-card-shadow, var(--pi-box-shadow-panel));
     }
     &:not(.has-shadow) {
       box-shadow: none;
@@ -505,7 +505,7 @@
   }
 }
 
-.pi-shell__deale-website,
+// Solo la API `context` de `pi-card`; el tema ya viaja por tokens.
 .is-public {
   .pi-card {
     // Color

libs/ui/src/lib/styles/common/components/_pi-note.scss

@@ -8,7 +8,7 @@
   $min-width: auto
 ) {
   .pi-shell {
-    &.pi-shell__deale-saas {
+    &.pi-shell__default {
       & > div {
         &.has-bottom-sticky-note {
           & > section {

libs/ui/src/lib/styles/common/components/_pi-text.scss

@@ -71,7 +71,7 @@
   }
 }
 
-.pi-shell__deale-saas {
+.pi-shell__default {
   h3 {
     font: {
       size: var(--pi-font-size-medium);

libs/ui/src/lib/styles/common/components/pi-button/_pi-button-fixed.scss

@@ -0,0 +1,78 @@
+// Posicionamiento fijo de botones flotantes (FAB). Es una utilidad de layout,
+// no de tema: aplica igual en todos los shells.
+
+@mixin fixedButtonSideSpacing(
+  $top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
+  $side-spacing: var(--pi-spacing-medium),
+  $bottom-left-spacing: calc(
+      var(--pi-spacing-medium) + env(safe-area-inset-bottom)
+    ),
+  $bottom-right-spacing: calc(
+      5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)
+    )
+) {
+  .pi-shell {
+    // Fixed
+    button,
+    .pi-icon-button,
+    .pi-action-button {
+      &.is-fixed {
+        position: fixed;
+        z-index: 999;
+        &.is-fixed--top-left,
+        &.is-fixed--top-right {
+          top: $top-spacing;
+          right: $side-spacing;
+        }
+        &.is-fixed--bottom-left {
+          bottom: $bottom-left-spacing;
+          left: $side-spacing;
+        }
+        &.is-fixed--bottom-right {
+          bottom: $bottom-right-spacing;
+          right: $side-spacing;
+        }
+      }
+    }
+  }
+}
+
+html,
+.cdk-overlay-container {
+  // Mobile
+  &.is-mobile {
+    @include fixedButtonSideSpacing(
+      calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
+      var(--pi-spacing-medium),
+      calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
+      calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+    );
+  }
+  &.is-tablet {
+    &.is-tablet__small {
+      @include fixedButtonSideSpacing(
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+        var(--pi-spacing-x-large),
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+        calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+      );
+    }
+    &.is-tablet__large {
+      @include fixedButtonSideSpacing(
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+        var(--pi-spacing-x-large),
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+        calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+      );
+    }
+  }
+  // Tablet & Desktop
+  &.is-desktop {
+    @include fixedButtonSideSpacing(
+      calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+      var(--pi-spacing-x-large),
+      calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+      calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+    );
+  }
+}

libs/ui/src/lib/styles/common/components/pi-button/_pi-button-theme.scss

@@ -1,11 +1,11 @@
-@mixin privateButtonsSizes {
+@mixin themeButtonsSizes {
   &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
       .pi-button__x-large
     ):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
       .pi-button__icon--single
     ) {
     &:not(.pi-button__x-small):not(.pi-button__xx-small) {
-      height: var(--pi-spacing-xxx-large);
+      height: var(--pi-theme-button-height);
     }
   }
 
@@ -36,15 +36,22 @@
 }
 
 // Fill
-@mixin privateButtonFillColor($color) {
+@mixin themeButtonFillColor($color) {
   // Default color
   &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
       .pi-color__white
     ) {
     background-color: var(--pi-color-#{$color});
+    // Un tema puede inyectar aquí un degradado; por defecto es `none` y manda
+    // el `background-color` de arriba.
+    background-image: var(--pi-theme-button-fill-#{$color}, none);
+    box-shadow: var(--pi-theme-button-shadow);
     color: var(--pi-color-white);
+    font-weight: var(--pi-theme-button-font-weight);
     &:disabled {
       background-color: var(--pi-color-#{$color}-200);
+      background-image: none;
+      box-shadow: none;
     }
     &:hover {
       &:enabled {
@@ -64,7 +71,7 @@
 }
 
 // Ghost
-@mixin privateButtonGhostColor($color) {
+@mixin themeButtonGhostColor($color) {
   color: var(--pi-color-#{$color});
   &:hover {
     &:enabled {
@@ -77,7 +84,7 @@
 }
 
 // Outline
-@mixin privateButtonOutlineColor($color) {
+@mixin themeButtonOutlineColor($color) {
   background-color: transparent;
   box-sizing: border-box;
   transition: all 0.16s ease-in;
@@ -101,7 +108,7 @@
   }
 }
 
-@mixin privateButtonsColors {
+@mixin themeButtonsColors {
   // Default
   &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
       .pi-button__toggle
@@ -134,20 +141,20 @@
     // Fill
     // Primary
     &.pi-color__primary {
-      @include privateButtonFillColor(primary);
+      @include themeButtonFillColor(primary);
     }
     // Accent
     &.pi-color__accent {
-      @include privateButtonFillColor(accent);
+      @include themeButtonFillColor(accent);
     }
     // Warn
     &.pi-color__warn {
-      @include privateButtonFillColor(warn);
+      @include themeButtonFillColor(warn);
     }
 
     // Highlighted
     &.pi-color__highlighted {
-      @include privateButtonFillColor(highlighted);
+      @include themeButtonFillColor(highlighted);
     }
 
     // Ghost
@@ -161,19 +168,19 @@
         ):not(.pi-color__black):not(.pi-color__highlighted):not(
           .pi-color__grey
         ) {
-        @include privateButtonGhostColor(primary);
+        @include themeButtonGhostColor(primary);
       }
       // Ghost & Accent
       &.pi-color__accent {
-        @include privateButtonGhostColor(accent);
+        @include themeButtonGhostColor(accent);
       }
       // Ghost & Warn
       &.pi-color__warn {
-        @include privateButtonGhostColor(warn);
+        @include themeButtonGhostColor(warn);
       }
       // Ghost & Highlighted
       &.pi-color__highlighted {
-        @include privateButtonGhostColor(Highlighted);
+        @include themeButtonGhostColor(Highlighted);
       }
       // Ghost & White
       &.pi-color__white {
@@ -224,24 +231,24 @@
       &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
           .pi-color__white
         ):not(.pi-color__highlighted):not(.pi-color__black) {
-        @include privateButtonOutlineColor(primary);
+        @include themeButtonOutlineColor(primary);
       }
       // Outline & Accent
       &.pi-color__accent {
-        @include privateButtonOutlineColor(accent);
+        @include themeButtonOutlineColor(accent);
       }
       // Outline & Warn
       &.pi-color__warn {
-        @include privateButtonOutlineColor(warn);
+        @include themeButtonOutlineColor(warn);
       }
 
       // Outline & Highlighted
       &.pi-color__highlighted {
-        @include privateButtonOutlineColor(highlighted);
+        @include themeButtonOutlineColor(highlighted);
       }
 
       &.pi-color__black {
-        @include privateButtonOutlineColor(grey);
+        @include themeButtonOutlineColor(grey);
       }
       // Outline & White
       &.pi-color__white {
@@ -267,24 +274,30 @@
   }
 }
 
+// Implementación única de los botones para todos los temas: lo que cambia
+// entre uno y otro son los tokens `--pi-theme-button-*`, no estos selectores.
 .pi-shell {
-  &.pi-shell__deale-saas {
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
-    .is-private {
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
-      button {
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
     // Colors
-        @include privateButtonsColors;
+    @include themeButtonsColors;
     // Sizes
-        @include privateButtonsSizes;
+    @include themeButtonsSizes;
-      }
-    }
   }
 }
 
 .cdk-overlay-container {
-  button {
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
     // Colors
-    @include privateButtonsColors;
+    @include themeButtonsColors;
     // Sizes
-    @include privateButtonsSizes;
+    @include themeButtonsSizes;
   }
 }

libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss

@@ -3,6 +3,10 @@
   font: {
     family: 'Soehne', Helvetica, Arial, sans-serif;
   }
+  // Tematizable: ver `styles/themes/_default.scss`.
+  letter-spacing: var(--pi-theme-button-letter-spacing);
+  text-transform: var(--pi-theme-button-text-transform);
+  transition: var(--pi-theme-button-transition);
   &:hover {
     &:not(:disabled):not(.pi-button__toggle) {
       cursor: pointer;
@@ -30,14 +34,14 @@
         .pi-button__toggle
       ) {
       &:not(.pi-button__x-small) {
-        border-radius: var(--pi-border-radius-medium);
+        border-radius: var(--pi-theme-button-radius);
-        -webkit-border-radius: var(--pi-border-radius-medium);
+        -webkit-border-radius: var(--pi-theme-button-radius);
-        -moz-border-radius: var(--pi-border-radius-medium);
+        -moz-border-radius: var(--pi-theme-button-radius);
       }
       &.pi-button__x-small {
-        border-radius: 0.75rem;
+        border-radius: min(0.75rem, var(--pi-theme-button-radius));
-        -webkit-border-radius: 0.75rem;
+        -webkit-border-radius: min(0.75rem, var(--pi-theme-button-radius));
-        -moz-border-radius: 0.75rem;
+        -moz-border-radius: min(0.75rem, var(--pi-theme-button-radius));
       }
     }
 
@@ -138,7 +142,11 @@
 }
 html,
 .cdk-overlay-container {
-  button {
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
     // Default properties
     @include defaultButtonsProperties;
 

libs/ui/src/lib/styles/common/components/pi-button/index.scss

@@ -1,3 +1,5 @@
-@forward 'pi-button-private';
+// `theme` implementa los botones una sola vez para todos los temas (lo que
-@forward 'pi-button-public';
+// varía son los tokens `--pi-theme-button-*`); `fixed` es utilidad de layout.
+@forward 'pi-button-theme';
+@forward 'pi-button-fixed';
 @forward 'pi-button';

libs/ui/src/lib/styles/common/layouts/_pi-02-full-width-layout.scss

@@ -9,7 +9,7 @@
         )
     )
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       // Aside is open
       &.aside-is-open {

libs/ui/src/lib/styles/common/layouts/_pi-07-list-layout.scss

@@ -61,7 +61,7 @@
 }
 
 @mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       .pi-layout {
         &.pi-layout__07-list {
@@ -75,7 +75,7 @@
 @mixin paginatorWidth(
   $width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       .pi-layout {
         &.pi-layout__07-list {
@@ -88,7 +88,7 @@
   }
 }
 
-.pi-shell__deale-saas {
+.pi-shell {
   & > div {
     // Grid mode (Infinite scroll)
     &.is-mode-grid {
@@ -111,7 +111,7 @@ html {
   }
   // Mobile & Tablet
   &:not(.is-desktop) {
-    .pi-shell__deale-saas {
+    .pi-shell {
       .pi-icon-button {
         &.is-sticky {
           position: absolute;
@@ -126,7 +126,7 @@ html {
     }
     // Small device
     @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
+      .pi-shell {
         & > div {
           .pi-layout {
             &.pi-layout__07-list {

libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss

@@ -3,7 +3,7 @@
   $no-padding-width: 100%
 ) {
   .pi-shell {
-    &.pi-shell__deale-website {
+    &.pi-shell__alternative {
       .pi-container-layout {
         .pi-layout {
           &:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {

libs/ui/src/lib/styles/common/layouts/index.scss

@@ -1,3 +1,14 @@
+// Tipos de layout genéricos. Estaban en `deale-saas/layouts` por herencia, pero
+// no dependen de ninguna marca: solo de las variables globales de `abstracts`.
+@forward 'pi-02-full-width-layout';
+@forward 'pi-02a-full-width-auto-layout';
+@forward 'pi-03-vertically-centered-layout';
+@forward 'pi-04-space-between-layout';
+@forward 'pi-05-splitted-layout';
+@forward 'pi-06-edge-to-edge-layout';
+@forward 'pi-07-list-layout';
+@forward 'pi-07a-list-auto-layout';
+@forward 'pi-08-form-layout';
 @forward 'pi-09-pricing-layout';
 @forward 'pi-container-layout';
 @forward 'pi-layout';

libs/ui/src/lib/styles/common/vendors/_mat-datepicker.scss

@@ -0,0 +1,49 @@
+// Datepicker
+//
+// El reset (`base/_pi-reset.scss`) declara `[class*='mat-'] { display: block }`.
+// Ese selector empata en especificidad con las clases propias de Material
+// (`.mat-calendar-controls`, etc.) y, al cargarse después, le gana: la
+// cabecera del calendario pierde su `display: flex` y los controles se apilan.
+//
+// Aquí se devuelve el layout que Material necesita. Va en `vendors/` porque se
+// carga tras `base/`, así que estas reglas mandan sin subir especificidad.
+//
+// La rejilla de días no hace falta tocarla: el reset ya excluye los elementos
+// de tabla, que era lo que colapsaba el calendario a una sola columna.
+
+.mat-datepicker-content {
+  // Cabecera: mes/año a la izquierda y flechas a la derecha.
+  .mat-calendar-controls {
+    display: flex;
+    align-items: center;
+  }
+
+  // Empuja las flechas al extremo opuesto del selector de periodo.
+  .mat-calendar-spacer {
+    flex: 1 1 auto;
+  }
+
+  // Los botones del calendario son `<button>`, que el reset también pasa a
+  // `block`; en línea vuelven a colocarse dentro de la fila de controles.
+  .mat-calendar-period-button,
+  .mat-calendar-previous-button,
+  .mat-calendar-next-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // El contenido del selector de periodo (texto + flecha) también es flex.
+  .mat-calendar-period-button .mdc-button__label {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  // Etiqueta solo para lectores de pantalla ("Comparison range"). Material la
+  // oculta, pero su clase contiene `mat-`, así que el reset la devolvía a
+  // `display: block` y aparecía como texto suelto bajo el calendario, además
+  // de ensanchar la celda y descuadrar la rejilla.
+  .mat-calendar-body-hidden-label {
+    display: none;
+  }
+}

libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss

@@ -1,4 +1,4 @@
-.pi-shell__deale-saas {
+.pi-shell__default {
   .mat-mdc-expansion-panel {
     &:not([class*='mat-elevation-z']) {
       box-shadow: unset;

libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss

@@ -13,7 +13,7 @@
       [class*='mdc-notched-outline__'] {
         max-width: unset;
         width: var(--pi-spacing-small);
-        border-width: 1px;
+        border-width: var(--pi-theme-field-border-width);
       }
     }
 
@@ -45,10 +45,12 @@
     }
 
     .mdc-notched-outline__leading {
-      border-radius: 0.875rem 0 0 0.875rem;
+      border-radius: var(--pi-theme-field-radius) 0 0
+        var(--pi-theme-field-radius);
     }
     .mdc-notched-outline__trailing {
-      border-radius: 0 0.875rem 0.875rem 0;
+      border-radius: 0 var(--pi-theme-field-radius) var(--pi-theme-field-radius)
+        0;
     }
 
     .mat-mdc-form-field-label {
@@ -108,13 +110,14 @@
     &:not(.mat-focused):not(.mat-form-field-invalid) {
       &:not(.mdc-text-field--disabled) {
         [class*='mdc-notched-outline__'] {
-          border-color: var(--pi-color-grey-200);
+          border-width: var(--pi-theme-field-border-width);
+          border-color: var(--pi-theme-field-border-color);
         }
       }
       &:hover {
         &:not(.mdc-text-field--disabled) {
           [class*='mdc-notched-outline__'] {
-            border-color: var(--pi-color-grey-300);
+            border-color: var(--pi-theme-field-border-color-hover);
           }
         }
       }
@@ -123,7 +126,7 @@
     &.mat-focused {
       &:not(.mdc-text-field--disabled) {
         [class*='mdc-notched-outline__'] {
-          border-color: var(--pi-color-primary);
+          border-color: var(--pi-theme-field-border-color-focus);
         }
       }
     }
@@ -221,7 +224,10 @@
     }
     &:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
       .mdc-floating-label {
-        color: var(--pi-color-grey-300);
+        color: var(--pi-theme-field-label-color);
+        text-transform: var(--pi-theme-field-label-transform, none);
+        letter-spacing: var(--pi-theme-field-label-letter-spacing, normal);
+        font-weight: var(--pi-theme-field-label-weight, inherit);
       }
     }
     &.mdc-text-field--invalid {
@@ -335,7 +341,7 @@
       }
 
       [class*='mdc-notched-outline__'] {
-        background-color: var(--pi-color-white);
+        background-color: var(--pi-theme-field-surface);
         z-index: -99;
       }
 

libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss

@@ -1,5 +1,5 @@
-.pi-shell__deale-saas,
+.pi-shell__default,
-.pi-shell__deale-website {
+.pi-shell__alternative {
   .ngx-slider {
     & > .ngx-slider-pointer {
       background-color: var(--pi-color-primary);

libs/ui/src/lib/styles/common/vendors/index.scss

@@ -1,6 +1,7 @@
 @forward 'ch2-button';
 @forward 'mat-checkbox';
 @forward 'mat-chip';
+@forward 'mat-datepicker';
 @forward 'mat-dialog';
 @forward 'mat-expansion-panel';
 @forward 'mat-form-field';

libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss

@@ -113,7 +113,7 @@
 html {
   &.is-mobile {
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight;
       }
     }
@@ -168,7 +168,7 @@ html {
   // Tablet
   &.is-tablet {
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight(var(--pi-height-layout-header));
       }
     }
@@ -211,7 +211,7 @@ html {
     }
 
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight(var(--pi-height-layout-header));
       }
     }

libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss

@@ -1,7 +1,7 @@
 @mixin mainWrapperCentered(
   $height: calc(100% - var(--pi-height-header-mobile))
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell__default {
     & > div {
       // NOT Is fullscreen
       &:not(.is-fullscreen) {

libs/ui/src/lib/styles/configs.ts

@@ -2,13 +2,18 @@
 export const shellTheming = (ShellClass: string) =>
   `pi-shell pi-shell__${ShellClass}`;
 
+/**
+ * Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
+ * `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
+ *
+ * Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
+ * `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
+ */
 export const ShellClass = {
-  // Deale Landings (Public)
+  /** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
-  DealeLandings: shellTheming('deale-landings'),
+  Default: shellTheming('default'),
-  // Deale SaaS (Private)
+  /** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
-  DealeSaaS: shellTheming('deale-saas'),
+  Alternative: shellTheming('alternative'),
-  // Deale Website (Public)
-  DealeWebsite: shellTheming('deale-website'),
 };
 
 // View component level
@@ -105,6 +110,10 @@ export const UserTypeClass = {
 // Layouts (Add to any view)
 export const LayoutTypeClass = {
   // Specifics
+  //
+  // Authentication y Dashboard son composiciones de aplicación (estados del
+  // aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
+  // que los use. Ver la página «Layouts» del playground.
   Authentication: 'pi-layout pi-layout__00-authentication',
   Dashboard: 'pi-layout pi-layout__01-dashboard',
   // TODO: Delete old dashboard layout when ready other users
@@ -113,8 +122,11 @@ export const LayoutTypeClass = {
   // Full Width
   FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
   // Full Width Centered
+  // El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
+  // `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
+  // no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
   FullWidthAuto:
-    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
+    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
   // Main Vertically Centered
   VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
   // Main Space Between
@@ -130,18 +142,12 @@ export const LayoutTypeClass = {
   List: 'pi-layout pi-layout__07-list',
   // Infinite Scroll
   ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
-  // List Left
-  PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
   // Form Layout
   Form: 'pi-layout pi-layout__08-form',
   // Pricing Layout
   Pricing: 'pi-layout pi-layout__09-pricing',
 };
 
-export const WebsiteScreenTypeClass = {
-  ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
-};
-
 // Wrappers
 export const wrapperType = (wrapperClass: string) =>
   `pi-wrapper pi-wrapper__${wrapperClass}`;

libs/ui/src/lib/styles/deale-saas/index.scss

@@ -1,4 +0,0 @@
-@use 'layouts' as *;
-@use 'theming' as *;
-@use 'shell' as *;
-@use 'wrappers' as *;

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss

@@ -1,367 +0,0 @@
-@use 'pi-00a-authentication-layout-auth';
-@use 'pi-00b-authentication-layout-recover-password';
-@use 'pi-00c-authentication-layout-user-profile';
-@use 'pi-00d-authentication-layout-default-space';
-@use 'pi-00e-authentication-layout-impersonation';
-
-@mixin authenticationLayoutSizes(
-  $width: calc(100% - var(--pi-spacing-xx-large)),
-  $max-width: calc(100% - var(--pi-spacing-xx-large)),
-  $height: 90vh
-) {
-  & > .pi-component {
-    width: $width;
-    max-width: $max-width;
-    & > .pi-panel {
-      width: -webkit-fill-available;
-      & > section {
-        height: $height;
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutsButtonSize() {
-}
-
-@mixin authenticationLayoutSpacings($spacing, $gap) {
-  .pi-layout__00-authentication {
-    &:not(.pi-layout__00-authentication--auth):not(
-        .pi-layout__00-authentication--default-space
-      ) {
-      .pi-panel {
-        .pi-panel-content__top,
-        .pi-panel-content__bottom {
-          gap: var(--pi-spacing-#{$gap});
-        }
-        &.pi-panel__inner-padding--xxxxl {
-          &.pi-panel__inner-padding {
-            &.pi-panel__flex-direction--column {
-              & > section {
-                & > * {
-                  padding-left: $spacing;
-                  padding-right: $spacing;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutMobileSmall {
-  // Mobile S
-  @media screen and (max-height: 41.6875rem) {
-    .pi-wrapper {
-      .pi-wrapper__gap--l {
-        gap: var(--pi-spacing-small);
-      }
-    }
-    .pi-panel {
-      &.pi-panel__inner-padding--xxxl {
-        &.pi-panel__inner-padding {
-          &.pi-panel__flex-direction--column {
-            & > section {
-              & > * {
-                padding-top: var(--pi-spacing-x-large);
-                padding-bottom: var(--pi-spacing-x-large);
-                padding-left: var(--pi-spacing-x-large);
-                padding-right: var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.pi-layout__00-authentication {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  width: 100%;
-
-  & > .pi-component {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    & > .pi-panel {
-      background:
-        linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
-        linear-gradient(
-            to right,
-            var(--pi-color-primary-50),
-            var(--pi-color-primary-25)
-          )
-          border-box;
-      background-color: rgba(255, 255, 255, 0.66);
-      animation: gradient 0.5s linear infinite;
-      animation-direction: alternate-reverse;
-      background-size: 150% 300%;
-      border: 0.0625rem solid transparent;
-      box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
-      .pi-panel-content__right {
-        & > * {
-          max-width: 21.25rem;
-          height: fit-content;
-        }
-      }
-      .pi-list-item {
-        .pi-text-viewer {
-          article {
-            label,
-            span {
-              line-height: 105%;
-            }
-          }
-        }
-      }
-    }
-    .pi-wrapper__form + .pi-wrapper__action {
-      margin-top: var(--pi-spacing-xxxx-large);
-    }
-    .pi-wrapper__action {
-      .pi-text-centered {
-        margin-top: var(--pi-spacing-x-large);
-      }
-    }
-  }
-  &:not(.pi-layout__00-authentication--auth) {
-    // Panel in other authentication layouts
-    .pi-panel {
-      .pi-panel-content__bottom {
-        position: sticky;
-        bottom: 0;
-      }
-
-      .pi-panel-content__top,
-      .pi-panel-content__bottom {
-        display: flex;
-        gap: var(--pi-spacing-x-small);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
-    .pi-layout__00-authentication {
-      @include authenticationLayoutSizes;
-      // Mobile S
-      @include authenticationLayoutMobileSmall;
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__small {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(80%, 80%, 80vh);
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(80%, 80%, 85vh);
-        }
-      }
-    }
-    &.is-tablet__large {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            calc(100% - 4rem),
-            calc(100% - 4rem),
-            70vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            calc(100% - 4rem),
-            calc(100% - 4rem),
-            calc(100vh - 4rem)
-          );
-        }
-      }
-    }
-  }
-
-  // Tablet & Mobile
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout__00-authentication {
-        & > .pi-component {
-          // Panel in authentication layout
-          & > .pi-panel {
-            .pi-panel-content__bottom {
-              // Action wrapper in panel bottom content
-              .pi-wrapper {
-                &.pi-wrapper__action {
-                  width: -webkit-fill-available;
-                  // Hide 'Press enter' text viewer on mobile and tablet
-                  & > *:last-child {
-                    display: none;
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Not Auth Layout
-        &:not(.pi-layout__00-authentication--auth) {
-          // Panel in other authentication layouts
-          & > .pi-component {
-            .pi-panel {
-              & > section {
-                overflow: hidden;
-
-                .pi-panel-content__center {
-                  flex-grow: 1;
-                  overflow-y: auto;
-                  // Generic Scroll
-                  &::-webkit-scrollbar {
-                    width: var(--pi-spacing-xxx-small);
-                  }
-
-                  &::-webkit-scrollbar-track {
-                    box-shadow: none;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-primary-50);
-                    border-radius: var(--pi-border-radius-small);
-
-                    &:hover {
-                      transition: var(--pi-animation);
-                      background-color: var(--pi-color-primary-100);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          .pi-panel {
-            position: relative;
-            // Add logo to bottom right corner of panel
-            &::after {
-              content: '';
-              position: absolute;
-              height: 100%;
-              width: 4.375rem;
-              right: var(--pi-spacing-xxx-large);
-              bottom: var(--pi-spacing-xxx-large);
-              background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
-              background-repeat: no-repeat;
-              background-position: bottom right;
-            }
-          }
-        }
-      }
-    }
-    .pi-shell {
-      .is-public {
-        .pi-layout__00-authentication {
-          &:not(.pi-layout__00-authentication--auth):not(
-              .pi-layout__00-authentication--recover-password
-            ):not(.pi-layout__00-authentication--impersonation) {
-            .pi-panel {
-              & > section {
-                .pi-panel-content__top,
-                .pi-panel-content__bottom {
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ):not(.pi-button__icon--single):not(
-                        .pi-button__xx-small
-                      ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                        .ch2-btn
-                      ) {
-                      min-width: 9.5rem;
-                    }
-                  }
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ).pi-button:not(.pi-button__icon):not(
-                        .pi-button__x-small
-                      ):not(.pi-button__small):not(.pi-button__large):not(
-                        .pi-button__large
-                      ):not(.pi-button__trimed):not(.pi-button__xx-small):not(
-                        .pi-button__trimmed
-                      ) {
-                      min-width: 11.5rem;
-                      padding: var(--pi-spacing-xxxx-small)
-                        var(--pi-spacing-x-large);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.is-desktop {
-    @include authenticationLayoutSpacings(4rem, x-large);
-    // Desktop S
-    &.is-desktop__small {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            75%,
-            var(--pi-public-width-container),
-            70vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            72%,
-            var(--pi-public-width-container),
-            76vh
-          );
-        }
-      }
-    }
-    // Desktop M & L
-    &.is-desktop__medium,
-    &.is-desktop__large {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            72%,
-            var(--pi-public-width-container),
-            78vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            66.66%,
-            var(--pi-public-width-container),
-            78vh
-          );
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss

@@ -1,83 +0,0 @@
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__00-authentication {
-          &.pi-layout__00-authentication--auth {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__left {
-                display: none;
-              }
-              .pi-panel-content__right {
-                padding-top: var(--pi-spacing-xxx-large);
-                @media screen and (max-height: 41.6875rem) {
-                  transform: scale(0.95);
-                  &.pi-wrapper {
-                    &.pi-wrapper__gap--xl {
-                      gap: unset;
-                    }
-                  }
-                }
-              }
-            }
-            // Headline in authentication layout
-            .pi-headline {
-              &.pi-headline__type--logo {
-                & > figure {
-                  max-width: 5.75rem;
-                }
-              }
-            }
-          }
-
-          // Panel in Root auth form
-          &.pi-layout__00-authentication--root-org {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__center {
-                .pi-wrapper {
-                  &:first-child {
-                    margin-top: var(--pi-spacing-medium);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large Device
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__00-authentication {
-          &.pi-layout__00-authentication--auth {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__left {
-                display: grid;
-                grid-template-rows: repeat(2, 1fr);
-                & > *:nth-child(n + 1) {
-                  align-self: end;
-                }
-              }
-            }
-            // Headline in authentication layout
-            .pi-headline {
-              &.pi-headline__type--logo {
-                & > figure {
-                  max-width: 4.6875rem;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss

@@ -1,32 +0,0 @@
-html {
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout__00-authentication {
-        &.pi-layout__00-authentication--recover-password {
-          .pi-panel {
-            & > section {
-              .pi-panel-content__top,
-              .pi-panel-content__bottom {
-                button {
-                  &:not(.pi-close-button):not(.pi-hamburger):not(
-                      .mdc-switch
-                    ):not(.pi-button__toggle):not(
-                      .pi-button__type--menu-item
-                    ):not(.pi-button__icon--single):not(
-                      .pi-button__xx-small
-                    ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                      .ch2-btn
-                    ) {
-                    min-width: 13.5rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss

@@ -1,112 +0,0 @@
-@mixin authenticationLayoutSelectMenuTypeCustom(
-  $columnsNum: 1,
-  $card-height: unset
-) {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--user-profile {
-      .pi-select {
-        .pi-select-options-menu {
-          padding: unset;
-          background-color: transparent;
-        }
-        &.pi-select__menu-type--custom-grid {
-          .pi-select-options-menu {
-            & > div {
-              display: grid;
-              grid-template-columns: repeat(#{$columnsNum}, 1fr);
-              grid-gap: var(--pi-spacing-large);
-              .pi-card {
-                min-height: $card-height;
-              }
-            }
-          }
-        }
-      }
-      // Grid wrapper 3 cols in Authentiocation User Type layout
-      .pi-wrapper {
-        &.pi-wrapper__grid {
-          &.pi-wrapper__grid--columns-3 {
-            &.is-responsive {
-              grid-template-columns: repeat(#{$columnsNum}, 1fr);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutMobile {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--user-profile {
-      .pi-select-option__large {
-        width: -webkit-fill-available;
-      }
-      .pi-card {
-        .pi-card-content__bottom {
-          display: none;
-        }
-      }
-      .pi-panel__gap--xxxl {
-        & > section {
-          gap: var(--pi-spacing-x-small);
-        }
-      }
-    }
-  }
-}
-
-.pi-layout__00-authentication {
-  &.pi-layout__00-authentication--user-profile {
-    .pi-card {
-      &.is-active {
-        .pi-card-content__bottom {
-          & > span {
-            font: {
-              weight: 400;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include authenticationLayoutSelectMenuTypeCustom;
-    @include authenticationLayoutMobile;
-  }
-  &:not(.is-desktop) {
-    @media screen and (max-width: 62rem) {
-      .pi-layout__00-authentication {
-        &.pi-layout__00-authentication--user-profile {
-          .pi-panel-content__center {
-            padding-top: var(--pi-spacing-medium);
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet Small
-    &.is-tablet__small {
-      @include authenticationLayoutSelectMenuTypeCustom;
-    }
-    // Tablet L
-    &.is-tablet__large {
-      @include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    &.is-desktop__small {
-      @include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
-    }
-    &:not(.is-desktop__small) {
-      @include authenticationLayoutSelectMenuTypeCustom(3);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss

@@ -1,47 +0,0 @@
-@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--default-space {
-      .pi-panel {
-        .pi-panel-content__top,
-        .pi-panel-content__bottom {
-          gap: var(--pi-spacing-#{$gap});
-        }
-        &.pi-panel__inner-padding--xxxxl {
-          &.pi-panel__inner-padding {
-            &.pi-panel__flex-direction--column {
-              & > section {
-                & > * {
-                  padding-left: $spacing;
-                  padding-right: $spacing;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include authenticationDefaultSpaceLayoutSpacings(
-      var(--pi-spacing-xxx-large),
-      x-small
-    );
-  }
-  &.is-tablet {
-    &.is-tablet__small {
-      @include authenticationDefaultSpaceLayoutSpacings(
-        var(--pi-spacing-xxxx-large),
-        small
-      );
-    }
-    &.is-tablet__large {
-      @include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
-    }
-  }
-  &.is-desktop {
-    @include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss

@@ -1,32 +0,0 @@
-html {
-  &:not(.is-mobile) {
-    .pi-shell {
-      .is-public {
-        .pi-layout__00-authentication {
-          &.pi-layout__00-authentication--impersonation {
-            .pi-panel {
-              & > section {
-                .pi-panel-content__top,
-                .pi-panel-content__bottom {
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ):not(.pi-button__icon--single):not(
-                        .pi-button__xx-small
-                      ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                        .ch2-btn
-                      ) {
-                      min-width: 13.5rem;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss

@@ -1,239 +0,0 @@
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    .pi-panel__primary {
-      border: none;
-      background-color: var(--pi-color-primary);
-    }
-  }
-}
-
-.is-advisor {
-  .pi-layout {
-    &.pi-layout__01-dashboard-old {
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    &.is-company {
-      .pi-wrapper {
-        &.pi-wrapper__main {
-          & > section {
-            align-items: stretch;
-            .pi-panel {
-              height: 100%;
-              & > section {
-                height: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    &.is-investor {
-      & > div {
-        & > div {
-          & > * {
-            display: block;
-            .pi-panel {
-              height: 100%;
-            }
-          }
-        }
-      }
-      .pi-panel {
-        & > section {
-          height: 100%;
-          // Press component
-          & > div {
-            a {
-              & > .pi-headline {
-                & > figure {
-                  width: unset;
-                  img {
-                    height: 1.75rem;
-                    width: 1.75rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-html {
-  // Mobile
-  &.is-mobile {
-    .is-advisor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-company {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-
-    .pi-layout {
-      &.pi-layout__01-dashboard-old {
-        &.is-investor {
-          .pi-panel {
-            & > section {
-              // Deal manager component
-              & > .pi-headline {
-                flex-direction: row;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    .is-advisor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-company {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-investor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    // Tablet S
-    &.is-tablet__small {
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-  }
-  // Large device
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .is-mode-list {
-        .pi-layout {
-          &.pi-layout__01-dashboard-old {
-            .pi-data-grid {
-              &.pi-data-grid__data-direction--row {
-                height: calc(100% - 2.6563rem);
-                .pi-data-grid__content {
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: space-between;
-                  height: calc(100% - 4.6563rem);
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .pi-close-button
-                      ):not(.pi-hamburger):not(.pi-button__xx-small) {
-                      height: 2.4rem;
-                      min-height: unset;
-                      padding-left: var(--pi-spacing-medium);
-                      padding-right: var(--pi-spacing-medium);
-                    }
-                  }
-                  .pi-chip-label {
-                    max-width: 15ch;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .is-advisor {
-    }
-    .is-company {
-    }
-    .is-investor {
-    }
-    // Desktop S
-    &.is-desktop__small {
-      .pi-layout__01-dashboard-old {
-        width: 90%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-
-    // Desktop M
-    &.is-desktop__medium {
-      .pi-layout__01-dashboard-old {
-        width: 85%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-
-    // Desktop L
-    &.is-desktop__large {
-      .pi-layout__01-dashboard-old {
-        width: 75%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss

@@ -1,55 +0,0 @@
-@mixin dashboardLayoutWidth(
-  $width: calc(100% - var(--pi-spacing-x-large)),
-  $max-width: calc(100% - var(--pi-spacing-x-large)),
-  $margin: var(--pi-height-header-mobile) auto 0
-) {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      width: $width;
-      max-width: $max-width;
-      margin: $margin;
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard {
-    display: grid;
-    align-items: center;
-  }
-}
-
-html {
-  // Maobile & Tablet
-  &:not(.is-desktop) {
-    // Small devices
-    @include dashboardLayoutWidth;
-  }
-  // Large device
-  &:not(.is-mobile) {
-    // Tablet L & Desktop S, M & L > 2400px
-    @media screen and (min-width: 62rem) and (max-width: 140rem) {
-      @include dashboardLayoutWidth(
-        calc(100% - var(--pi-spacing-x-large)),
-        calc(100% - var(--pi-spacing-x-large)),
-        unset
-      );
-    }
-    // X Large device
-    @media screen and (min-width: 140rem) {
-      @include dashboardLayoutWidth(
-        calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
-              --pi-spacing-x-large
-            )
-        ),
-        calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
-              --pi-spacing-x-large
-            )
-        ),
-        unset
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss

@@ -1,333 +0,0 @@
-$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
-
-:root {
-  // Company Dashboard Spacings
-  --pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
-}
-
-@mixin companyDashboardGridMobileAndTablet {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        display: flex;
-        flex-direction: column;
-        gap: var(--pi-spacing-medium);
-        & > *:nth-child(n + 1) {
-          display: block;
-          width: -webkit-fill-available;
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        & > *:nth-child(2) {
-          &.is-empty {
-            & > .pi-panel {
-              .pi-panel-content__center {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-height: calc(
-                  100vh - var(--pi-spacing-xxxx-large) - var(
-                      --pi-height-header
-                    ) -
-                    23.65rem
-                );
-                .pi-note {
-                  width: $width;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardGridDesktopSmall {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-areas:
-          'item1 item1'
-          'item2 item3'
-          'item4 item5';
-        & > *:nth-child(2),
-        & > *:nth-child(3) {
-          & > * {
-            max-width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardGridDesktop {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        grid-template-columns: repeat(6, 1fr);
-        grid-template-areas:
-          'item1 item1 item1 item1 item3 item3'
-          'item2 item2 item2 item2 item3 item3'
-          'item4 item4 item5 item5 item3 item3';
-
-        & > *:nth-child(3) {
-          & > * {
-            min-height: calc(
-              100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)
-            );
-          }
-          .pi-panel-content {
-            // Center
-            &.pi-panel-content__center {
-              padding: unset;
-
-              &:nth-child(2) {
-                & > *:nth-child(n + 1) {
-                  padding-left: var(--pi-spacing-x-large);
-                  padding-right: var(--pi-spacing-x-large);
-                  & > article {
-                    padding-left: var(--pi-spacing-x-small);
-                    padding-right: var(--pi-spacing-x-small);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Accordion horizontal in Insights panel
-@mixin companyDashboardHorizontalAccordionDesktop {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        .pi-accordion {
-          &.pi-accordion__direction--horizontal {
-            & > section {
-              &:nth-child(1) {
-                header {
-                  .pi-list-item {
-                    flex-direction: column;
-                    gap: unset;
-                    .pi-list-item-icon {
-                      &.pi-list-item-icon__left {
-                        max-width: 100%;
-                        width: 100%;
-                        // Insights chip
-                        .pi-chip__large {
-                          &:not(.pi-chip__single-icon) {
-                            height: calc(
-                              var(--pi-spacing-xxxx-large) - var(
-                                  --pi-spacing-xxx-small
-                                )
-                            );
-                            max-width: 100%;
-                            width: 100%;
-                          }
-                        }
-                      }
-                    }
-                    .pi-list-item-content {
-                      &.pi-list-item-content__left {
-                        display: flex;
-                        align-items: flex-end;
-                        text-align: center;
-                        font: {
-                          size: var(--pi-font-size-x-small);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard {
-    &.is-company {
-      @for $i from 1 through 5 {
-        & > *:nth-child(#{$i}) {
-          grid-area: item#{$i};
-          align-self: flex-start;
-        }
-      }
-      grid-gap: var(--pi-spacing-medium);
-      // Overviews
-      & > *:nth-child(1) {
-        .pi-card {
-          min-height: var(--pi-seller-dashboard-overviews-height);
-
-          .pi-card-content {
-            &.pi-card-content__top {
-              padding-left: var(--pi-spacing-large);
-              padding-top: var(--pi-spacing-medium);
-              padding-right: var(--pi-spacing-large);
-            }
-            &.pi-card-content__bottom {
-              flex-direction: row;
-              align-items: center;
-              min-height: var(--pi-spacing-xxxx-large);
-            }
-          }
-          &:hover {
-            border-color: var(--pi-color-primary-100);
-          }
-        }
-      }
-      // TO·DO List
-      & > *:nth-child(3) {
-        .pi-panel {
-          .pi-panel-content {
-            & > .pi-divider {
-              padding-top: var(--pi-spacing-xxx-small);
-              & + * {
-                padding-top: var(--pi-spacing-medium);
-              }
-            }
-
-            & > .pi-text-viewer {
-              padding-left: var(--pi-spacing-x-small);
-              padding-right: var(--pi-spacing-x-small);
-            }
-
-            // Top
-            &.pi-panel-content__top {
-              padding-left: var(--pi-spacing-xx-large);
-              padding-right: var(--pi-spacing-xx-large);
-              & > span {
-                line-height: 105%;
-              }
-            }
-          }
-        }
-        &:not(.is-empty) {
-          & > *:nth-child(3) {
-            .pi-panel {
-              .pi-panel-content {
-                // Center
-                &.pi-panel-content__center {
-                  padding: unset;
-
-                  &:nth-child(2) {
-                    .pi-icon__appearance--fill {
-                      &.pi-color__primary {
-                        background-color: var(--pi-color-primary-50);
-                      }
-                    }
-                    & > *:nth-child(n + 1) {
-                      padding-left: var(--pi-spacing-x-large);
-                      padding-right: var(--pi-spacing-x-large);
-                      & > article {
-                        padding-left: var(--pi-spacing-x-small);
-                        padding-right: var(--pi-spacing-x-small);
-                      }
-                    }
-                    .pi-wrapper__flex-direction--column {
-                      // Only scroll for desktop M & L
-                      @media screen and (min-width: 90rem) {
-                        max-height: calc(
-                          100vh - var(--pi-spacing-xxxx-large) - var(
-                              --pi-height-header
-                            ) -
-                            24rem
-                        );
-                        max-width: calc(100% - var(--pi-spacing-xxx-small));
-                        overflow-y: auto;
-                        // Generic Scroll
-                        &::-webkit-scrollbar {
-                          width: var(--pi-spacing-xxxx-small);
-                        }
-
-                        &::-webkit-scrollbar-track {
-                          box-shadow: none;
-                        }
-
-                        &::-webkit-scrollbar-thumb {
-                          background-color: var(--pi-color-primary-100);
-                          border-radius: var(--pi-border-radius-small);
-
-                          &:hover {
-                            transition: var(--pi-animation);
-                            background-color: var(--pi-color-primary-200);
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      // Deal manager CTA
-      & > *:nth-child(5) {
-        .pi-headline {
-          height: var(--pi-spacing-xxx-large);
-          width: var(--pi-spacing-xxx-large);
-          &::after {
-            content: '';
-            position: relative;
-            z-index: 99;
-            height: var(--pi-spacing-xx-small);
-            width: var(--pi-spacing-xx-small);
-            margin-top: -4rem;
-            margin-left: 2.25rem;
-            border-radius: 50%;
-            background-color: var(--pi-color-success);
-          }
-        }
-        .pi-list-item-icon {
-          &.pi-list-item-icon__right {
-            display: flex;
-            align-items: center;
-            gap: var(--pi-spacing-xxx-small);
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    @include companyDashboardGridMobileAndTablet;
-  }
-
-  &.is-desktop {
-    // Desktop S
-    &.is-desktop__small {
-      @include companyDashboardGridDesktopSmall;
-      @include companyDashboardInsightsPanelEmptyState;
-    }
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include companyDashboardHorizontalAccordionDesktop;
-    }
-    // Desktop M & L
-    &:not(.is-desktop__small) {
-      @include companyDashboardGridDesktop;
-      @include companyDashboardInsightsPanelEmptyState(50%);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss

@@ -1,429 +0,0 @@
-.pi-layout {
-  &.pi-05a-splitted-paywall-layout {
-    width: 100vw;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position-x: right;
-
-    .pi-main-wrapper-content {
-      min-height: unset;
-      // Left
-      &.pi-main-wrapper-content__left {
-        display: flex;
-        flex-direction: column;
-        header {
-          h1 + * {
-            margin-top: var(--pi-spacing-x-small);
-          }
-        }
-      }
-      // Right
-      &.pi-main-wrapper-content__right {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    * + .mat-mdc-radio-group {
-      padding-top: var(--pi-spacing-x-large);
-    }
-    .mat-mdc-radio-group {
-      display: flex;
-      flex-direction: column;
-      label {
-        margin-bottom: unset;
-      }
-    }
-    .mat-mdc-radio-label-content {
-      padding-left: var(--pi-spacing-medium);
-    }
-
-    .pi-panel {
-      box-shadow: var(--pi-box-shadow);
-      transition: var(--pi-animation);
-      width: 100%;
-      max-width: 30rem;
-      &.is-active {
-        border: 1px solid var(--pi-color-primary-100);
-        background-color: var(--pi-color-primary-50);
-      }
-
-      &:hover {
-        cursor: pointer;
-        box-shadow: var(--pi-box-shadow-hover);
-        &:not(.is-active) {
-          border: 1px solid var(--pi-color-primary-200);
-        }
-      }
-      // Padding
-      &.has-padding {
-        width: 100%;
-        padding: var(--pi-spacing-large);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
-          @media screen and (max-height: 46.25rem) {
-            min-height: calc(198vh + var(--pi-height-footer));
-          }
-          .pi-main-wrapper-content {
-            // Right
-            &.pi-main-wrapper-content__right {
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-height-footer) -
-                  8rem
-              );
-            }
-            // Left
-            &.pi-main-wrapper-content__left {
-              // Header
-              & > header {
-                transform: scale(0.92);
-                .pi-color__black-primary {
-                  & > article {
-                    display: flex;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-            }
-          }
-
-          // Radio panels
-          .mat-mdc-radio-group {
-            gap: var(--pi-spacing-small);
-            width: 100%;
-            transform: scale(0.92);
-          }
-
-          .pi-button {
-            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
-                .pi-button__small
-              ):not(.pi-button__large) {
-              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
-            }
-          }
-        }
-      }
-    }
-  }
-  &.is-tablet {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
-          .pi-wrapper__main {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                & > header {
-                  max-width: 66.66%;
-                  margin: 0 auto;
-                }
-              }
-              &.pi-main-wrapper-content__right {
-                min-height: calc(
-                  100vh - var(--pi-spacing-xx-large) - var(
-                      --pi-spacing-xx-large
-                    ) - var(--pi-height-footer) -
-                    20rem
-                );
-              }
-            }
-          }
-          .pi-button {
-            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
-                .pi-button__small
-              ):not(.pi-button__large) {
-              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
-              min-width: 11rem;
-            }
-          }
-        }
-      }
-    }
-    // Tablet S
-    &.is-tablet__small {
-      .pi-wrapper__main {
-        .pi-main-wrapper-content {
-          & > * + *:not(:last-child) {
-            width: 66.66%;
-            margin: var(--pi-spacing-x-large) auto;
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-wrapper__main {
-        .pi-main-wrapper-content {
-          & > * + *:not(:last-child) {
-            width: 50%;
-            margin: var(--pi-spacing-x-large) auto;
-          }
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          // Main
-          .pi-wrapper {
-            &.pi-wrapper__main {
-              & > section {
-                padding-bottom: var(--pi-height-header);
-              }
-              .pi-main-wrapper-content {
-                width: 100%;
-                // Left
-                &.pi-main-wrapper-content__left {
-                  & > header {
-                    justify-content: center;
-                    text-align: center;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    h3 {
-                      display: block;
-                    }
-                  }
-                  form {
-                    & > h4 {
-                      text-align: center;
-                    }
-                  }
-                  // Action wrapper
-                  .pi-wrapper__action {
-                    position: fixed;
-                    bottom: 0;
-                    left: 0;
-                    z-index: 999;
-                    height: var(--pi-height-footer);
-                    width: 100%;
-                    margin-top: unset;
-                    background-color: var(--pi-color-white-rgba-06);
-                    box-shadow: var(--pi-box--shadow-top);
-                  }
-                }
-                // Right
-                &.pi-main-wrapper-content__right {
-                  gap: var(--pi-spacing-xxxx-large);
-                  padding-top: 6rem;
-                  background-image: unset;
-
-                  & > form {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                    align-items: center;
-                    width: 100%;
-                  }
-                }
-              }
-            }
-          }
-          .mat-mdc-radio-group {
-            align-items: center;
-          }
-          .mat-mdc-radio-label-content {
-            h3 {
-              font: {
-                size: var(--pi-font-size-xx-large);
-              }
-            }
-          }
-          // Mobile and Tablet S
-          @media screen and (max-width: 62rem) {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                // Header
-                & > header {
-                  h1 {
-                    font: {
-                      size: var(--pi-font-size-x-large);
-                    }
-                  }
-                }
-              }
-            }
-          }
-          // Action wrapper
-          .pi-wrapper__action {
-            justify-content: space-around;
-          }
-        }
-      }
-    }
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            .mat-mdc-radio-group > * {
-              width: -webkit-fill-available;
-            }
-          }
-        }
-      }
-    }
-  } // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L and Desktop
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                // Header
-                & > header {
-                  h1 {
-                    font: {
-                      size: var(--pi-font-size-xx-large);
-                    }
-                  }
-                }
-              }
-            }
-
-            .mat-mdc-radio-label-content {
-              h3 {
-                font: {
-                  size: 2.375rem;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          height: 100vh;
-          overflow-y: hidden;
-          .pi-wrapper__main {
-            .pi-main-wrapper-content {
-              // Left
-              &.pi-main-wrapper-content__left {
-                justify-content: space-between;
-                max-width: 50%;
-                .pi-panel {
-                  &.has-padding {
-                    max-width: 32rem;
-                  }
-                }
-                .pi-wrapper {
-                  &.pi-wrapper__action {
-                    gap: var(--pi-spacing-x-large);
-                  }
-                }
-              }
-              // Right
-              &.pi-main-wrapper-content__right {
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-    }
-    &.is-desktop__small {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            padding: var(--pi-spacing-xxx-large);
-            gap: var(--pi-spacing-xx-large);
-            .pi-main-wrapper-content {
-              height: calc(
-                100vh - var(--pi-spacing-xxx-large) - var(
-                    --pi-spacing-xxx-large
-                  )
-              );
-              // Left
-              &.pi-main-wrapper-content__left {
-                .mat-mdc-radio-group {
-                  max-width: 70%;
-                }
-              }
-
-              // Right
-              &.pi-main-wrapper-content__right {
-                gap: var(--pi-spacing-medium);
-              }
-            }
-          }
-        }
-      }
-    }
-    &.is-desktop__medium {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            padding: var(--pi-spacing-xxx-large);
-            gap: var(--pi-spacing-xxx-large);
-            .pi-main-wrapper-content {
-              // Left
-              &.pi-main-wrapper-content__left {
-                height: calc(
-                  100vh - var(--pi-spacing-xxx-large) - var(
-                      --pi-spacing-xxx-large
-                    )
-                );
-                .mat-mdc-radio-group {
-                  max-width: 66.66%;
-                }
-              }
-              // Right
-              &.pi-main-wrapper-content__right {
-                gap: var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  &.is-desktop__large {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-xxxx-large);
-          gap: var(--pi-spacing-xxxx-large);
-
-          .pi-main-wrapper-content {
-            height: calc(
-              100vh - var(--pi-spacing-xxxx-large) - var(
-                  --pi-spacing-xxxx-large
-                )
-            );
-            // Left
-            &.pi-main-wrapper-content__left {
-              .mat-mdc-radio-group {
-                max-width: 50%;
-              }
-              .pi-wrapper__action {
-                margin-top: 5rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss

@@ -1,3 +0,0 @@
-.pi-container-layout {
-  padding-bottom: var(--pi-spacing-xxxx-large);
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss

@@ -1,217 +0,0 @@
-@mixin layoutHeight(
-  $height: calc(
-      100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
-          --pi-spacing-x-large
-        ) - var(--pi-spacing-x-large)
-    )
-) {
-  .pi-layout {
-    &.pi-layout__main,
-    &.pi-layout__01-dashboard {
-      height: $height;
-    }
-  }
-}
-
-@mixin layoutWidth(
-  $max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
-  $margin: var(--pi-height-header-mobile) auto 0
-) {
-  .pi-layout {
-    // Default scroll
-    &.pi-layout__main {
-      max-width: $max-width;
-      margin: $margin;
-    }
-  }
-}
-
-.pi-layout {
-  &:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
-    display: block;
-  }
-
-  // Default scroll
-  &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-      .pi-layout__05-splitted
-    ):not(.pi-layout__08-form) {
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-  &.pi-layout__main {
-    & > *:nth-child(1) {
-      margin-top: var(--pi-spacing-xx-large);
-    }
-    & > *:nth-child(n + 2) {
-      margin-top: var(--pi-spacing-x-large);
-    }
-    & > .pi-component {
-      display: block;
-      & > .pi-panel {
-        box-shadow: var(--pi-box-shadow);
-      }
-    }
-  }
-
-  &.pi-layout__no-padding {
-    padding: 0;
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include layoutHeight;
-    @include layoutWidth;
-    .has-bottom-sticky-note {
-      .pi-layout {
-        &.pi-layout__01-dashboard,
-        &.pi-layout__main {
-          padding-bottom: 11.5rem;
-        }
-        &.pi-layout__07-list {
-          & > .pi-wrapper__list {
-            & > section {
-              padding-bottom: 5rem;
-            }
-          }
-        }
-      }
-    }
-    .pi-layout {
-      // Default scroll
-      &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-          .pi-layout__05-splitted
-        ):not(.pi-layout__08-form) {
-        max-width: calc(
-          100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)
-        );
-      }
-      &.pi-layout__main {
-        padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
-        & > *:nth-child(-n + 3) {
-          margin-top: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      .has-bottom-sticky-note {
-        @include layoutHeight(
-          calc(
-            100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) -
-              2rem
-          )
-        );
-        .pi-layout {
-          &.pi-layout__main,
-          &.pi-layout__01-dashboard {
-            padding-bottom: 5rem;
-          }
-          &.pi-layout__07-list {
-            & > .pi-wrapper__list {
-              & > section {
-                padding-bottom: 5rem;
-              }
-            }
-          }
-        }
-      }
-
-      @include layoutHeight(
-        calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))
-      );
-      @include layoutWidth(
-        calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
-        var(--pi-height-header-tablet) auto 0
-      );
-      .pi-layout {
-        // Default scroll
-        &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-            .pi-layout__05-splitted
-          ):not(.pi-layout__08-form) {
-          max-width: calc(
-            100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-          );
-        }
-        &.pi-layout__main {
-          padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
-          & > *:nth-child(-n + 3) {
-            margin-top: var(--pi-spacing-x-large);
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .has-bottom-sticky-note {
-        .pi-layout {
-          &.pi-layout__main,
-          &.pi-layout__01-dashboard {
-            padding-bottom: 5rem;
-          }
-          &.pi-layout__07-list {
-            & > .pi-wrapper__list {
-              & > section {
-                padding-bottom: 5rem;
-              }
-            }
-          }
-        }
-      }
-      @include layoutHeight(
-        calc(100vh - var(--pi-height-header-tablet) - 3.25rem)
-      );
-      @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-desktop) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__main {
-          .pi-layout {
-            &.pi-layout__main {
-              & > *:nth-child(-n + 3) {
-                margin-top: var(--pi-spacing-xx-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    .has-bottom-sticky-note {
-      .pi-layout {
-        &.pi-layout__main,
-        &.pi-layout__01-dashboard {
-          padding-bottom: 5rem;
-        }
-        &.pi-layout__07-list {
-          & > .pi-wrapper__list {
-            & > section {
-              padding-bottom: 5rem;
-            }
-          }
-        }
-      }
-    }
-    @include layoutHeight(
-      calc(
-        100vh - var(--pi-height-header-tablet) - var(
-            --pi-spacing-x-large
-          ) - var(--pi-spacing-large)
-      )
-    );
-    @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/index.scss

@@ -1,18 +0,0 @@
-@forward 'pi-00-authentication-layout';
-@forward 'pi-01-dashboard-layout';
-@forward 'pi-01a-dashboard-layout-company';
-@forward 'pi-01b-dashboard-layout-investor';
-@forward 'pi-01c-dashboard-layout-advisor';
-@forward 'pi-01-dashboard-layout-old';
-@forward 'pi-02-full-width-layout';
-@forward 'pi-02a-full-width-auto-layout';
-@forward 'pi-03-vertically-centered-layout';
-@forward 'pi-04-space-between-layout';
-@forward 'pi-05-splitted-layout';
-@forward 'pi-05a-splitted-paywall-layout';
-@forward 'pi-06-edge-to-edge-layout';
-@forward 'pi-07-list-layout';
-@forward 'pi-07a-list-auto-layout';
-@forward 'pi-08-form-layout';
-@forward 'pi-container-layout';
-@forward 'pi-layout';

libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss

@@ -1,384 +0,0 @@
-@mixin asideActionWrapper() {
-  gap: var(--pi-spacing-medium);
-  & > *:nth-child(n + 1) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 50%;
-    width: -webkit-fill-available;
-  }
-
-  button {
-    &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-        .pi-button__toggle
-      ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-        .pi-button__trimmed
-      ):not(.pi-button__toggle) {
-      min-width: unset;
-      padding-left: unset;
-      padding-right: unset;
-    }
-  }
-  .pi-button__w100 {
-    button {
-      &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-          .pi-button__toggle
-        ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-          .pi-button__trimmed
-        ):not(.pi-button__toggle) {
-        min-width: 100%;
-      }
-    }
-  }
-}
-.pi-shell__deale-saas {
-  & > div {
-    .pi-saas-aside {
-      display: block;
-      position: fixed;
-      z-index: 99;
-      padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
-        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
-      overflow: hidden;
-      transition: var(--pi-animation);
-      & > .pi-close-button {
-        position: absolute;
-        margin-top: -1rem;
-      }
-      & > .pi-icon {
-        position: absolute;
-        height: var(--pi-spacing-xxx-large);
-        width: var(--pi-spacing-xxx-large);
-        margin-left: var(--pi-spacing-x-small);
-        margin-top: -0.475rem;
-        transition: var(--pi-animation);
-      }
-      &.pi-saas-aside__white {
-        background-color: var(--pi-color-white);
-        border: 1px solid var(--pi-color-white-900);
-        .pi-buyer-companies-list-filters {
-          .pi-accordion + .pi-wrapper {
-            padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
-          }
-        }
-      }
-      .pi-accordion-item-content__header {
-        & > .pi-text-viewer {
-          &.pi-text-viewer__font-size--m-xs {
-            label {
-              font: {
-                size: var(--pi-font-size-small);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Aside is open
-    &.aside-is-open {
-      .pi-saas-aside {
-        opacity: 1;
-      }
-    }
-
-    // Aside is closed
-    &.aside-is-closed {
-      .pi-saas-aside {
-        transform: translateX(
-          calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))
-        );
-      }
-    }
-    // Aside is closable
-    &.aside-is-closable {
-      .pi-dynamic-menu {
-        & > *:nth-child(2) {
-          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
-
-          .pi-wrapper__action {
-            flex-direction: column;
-            @include asideActionWrapper;
-          }
-        }
-
-        & > *:nth-child(3) {
-          @include asideActionWrapper;
-        }
-      }
-    }
-
-    // Dynamic menu
-    .pi-dynamic-menu {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      overflow-y: scroll;
-
-      .pi-panel {
-        width: 100%;
-      }
-
-      & > *:nth-child(1) {
-        flex-shrink: 0;
-        height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
-        .pi-headline {
-          max-width: 50%;
-          margin: auto;
-        }
-      }
-      & > *:nth-child(2) {
-        &.pi-wrapper__flex {
-          overflow-y: auto;
-          height: 100%;
-          // Generic Scroll
-          &::-webkit-scrollbar {
-            width: 0.1875rem;
-          }
-
-          &::-webkit-scrollbar-track {
-            box-shadow: none;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            border-radius: var(--pi-border-radius-small);
-
-            &:hover {
-              transition: var(--pi-animation);
-            }
-          }
-        }
-
-        & > .pi-list-item {
-          border-radius: var(--pi-border-radius-medium);
-          padding: var(--pi-spacing-medium);
-        }
-      }
-      & > *:nth-child(3) {
-        flex-shrink: 0;
-        width: calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-        );
-        margin: 0 auto;
-        .pi-icon-button {
-          margin-bottom: var(--pi-spacing-x-large);
-          width: -webkit-fill-available;
-        }
-      }
-      &.pi-saas-admin-user-profile {
-        .pi-icon__x-large {
-          &.is-stroked {
-            &.pi-icon__appearance--fill {
-              height: 7rem;
-              width: 7rem;
-              border-radius: 50%;
-              .mat-icon {
-                height: 4rem;
-                width: 4rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Aside is NOT closable
-  &:not(.aside-is-closable) {
-    .pi-dynamic-menu {
-      & > *:nth-child(1) {
-        padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-          calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-aside {
-          & > .pi-close-button {
-            margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
-          }
-        }
-        // Aside is open
-        &.aside-is-open {
-          .pi-saas-aside {
-            transform: translateX(var(--pi-spacing-x-large));
-          }
-        }
-      }
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          // Not fullscreen
-          &:not(.is-fullscreen) {
-            .pi-saas-aside {
-              top: 0;
-              height: calc(
-                100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)
-              );
-              width: 100%;
-              & > .pi-close-button {
-                margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
-              }
-
-              & > *:nth-child(2) {
-                height: calc(
-                  100% - env(safe-area-inset-top) - env(
-                      safe-area-inset-bottom
-                    ) - var(--pi-height-header-aside) - var(
-                      --pi-height-footer-aside
-                    )
-                );
-              }
-            }
-            // Aside is open
-            &.aside-is-open {
-              overflow: hidden;
-              .pi-saas-aside {
-                transform: translateX(0);
-                transition-duration: 0.4s;
-              }
-
-              & > section,
-              & > .pi-saas-navbar {
-                position: fixed;
-                transform: translateX(calc(-100vw));
-                transition-duration: 0.4s;
-              }
-            }
-            // Aside is closed
-            &.aside-is-closed {
-              overflow: unset;
-              .pi-saas-aside {
-                transition-duration: 0.4s;
-              }
-              & > section,
-              & > .pi-saas-navbar {
-                transform: translateX(calc(0));
-                transition-duration: 0.5s;
-              }
-            }
-
-            .pi-dynamic-menu {
-              & > *:nth-child(3) {
-                height: calc(
-                  var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
-                );
-                margin: 0 auto var(--pi-spacing-xxx-large);
-              }
-              & > *:nth-child(n + 2) {
-                padding: 0 var(--pi-spacing-x-large);
-              }
-            }
-          }
-          // Aside is closable
-          &.aside-is-closable {
-            .pi-dynamic-menu {
-              & > *:nth-child(1) {
-                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-                  var(--pi-spacing-xxxx-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          // Not fullscreen
-          &:not(.is-fullscreen) {
-            .pi-saas-aside {
-              top: var(--pi-spacing-x-large);
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-              );
-              width: var(--pi-width-aside);
-              border-radius: var(--pi-border-radius-large);
-              box-shadow: var(--pi-box-shadow-panel-double);
-              & > *:nth-child(2) {
-                flex-grow: 1;
-                height: 100%;
-              }
-
-              & > .pi-close-button {
-                margin-left: calc(
-                  var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)
-                );
-              }
-            }
-            // Aside is open
-            &.aside-is-open {
-              .pi-saas-aside {
-                transform: translateX(
-                  calc(
-                    100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)
-                  )
-                );
-              }
-            }
-            // Aside is closed
-            &.aside-is-closed {
-              .pi-saas-aside {
-                opacity: 0;
-                transition-duration: 0.6s;
-              }
-            }
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                padding: var(--pi-spacing-x-large);
-              }
-              & > *:nth-child(3) {
-                height: calc(
-                  var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
-                );
-                margin: 0 auto;
-                padding: var(--pi-spacing-x-large) 0 0;
-              }
-            }
-
-            // Back link is hidden
-            &.backlink-is-hidden {
-              .pi-dynamic-menu {
-                & > *:nth-child(1) {
-                  padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
-                }
-              }
-              .pi-saas-aside {
-                & > .pi-icon {
-                  display: none;
-                }
-              }
-            }
-          }
-          // Aside is closable
-          &.aside-is-closable {
-            .pi-dynamic-menu {
-              & > *:nth-child(1) {
-                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-                  var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss

@@ -1,380 +0,0 @@
-.pi-shell__deale-saas {
-  & > div {
-    .pi-saas-header {
-      // Private
-      display: flex;
-      border-radius: var(--pi-border-radius-large);
-
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          gap: var(--pi-spacing-xxxx-small);
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-
-          & > *:nth-child(n + 1) {
-            display: flex;
-            align-items: center;
-            transition: var(--pi-animation);
-            &:hover {
-              cursor: pointer;
-            }
-          }
-
-          .pi-icon-button {
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-          }
-          .pi-icon {
-            // Common
-            &:not(.is-stroked) {
-              &:hover {
-                img,
-                .mat-icon {
-                  transition-duration: 0.15s;
-                  transform: scale(1.15);
-                }
-              }
-              &:not(:hover):not(.is-active) {
-                img,
-                .mat-icon {
-                  transition-duration: 0.15s;
-                  transform: scale(1);
-                }
-              }
-            }
-            // Type stroke
-            &.is-stroked {
-              &:hover {
-                transition-duration: 0.15s;
-                transform: scale(1.1);
-              }
-              &:not(:hover):not(.is-active) {
-                transition-duration: 0.15s;
-                transform: scale(1);
-              }
-            }
-            // Active
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-    // Aside is open
-    &.aside-is-open {
-      .pi-saas-header-content {
-        // Right
-        &.pi-saas-header-content__right {
-          .pi-icon {
-            &.is-active {
-              background-color: var(--pi-color-primary-50);
-              border-radius: 50%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-saas-header {
-      left: var(--pi-spacing-medium);
-      width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          h2 {
-            max-width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-
-        // Right
-        &.pi-saas-header-content__right {
-          gap: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Devices
-    @media screen and (max-width: 62rem) {
-      .pi-saas-header {
-        position: fixed;
-
-        .pi-saas-header-content {
-          // Left
-          &.pi-saas-header-content__left {
-            & > span {
-              display: flex;
-              gap: var(--pi-spacing-xx-small);
-              & > h1 {
-                font: {
-                  size: var(--pi-font-size-medium);
-                }
-              }
-            }
-          }
-          // Mobile
-          @media screen and (max-width: 40rem) {
-            height: var(--pi-height-header-mobile);
-
-            // Right
-            &.pi-saas-header-content__right {
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-                    .pi-button__toggle
-                  ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-                    .pi-button__trimmed
-                  ):not(.pi-button__toggle) {
-                  min-width: unset;
-                  padding-left: var(--pi-spacing-medium);
-                  padding-right: var(--pi-spacing-medium);
-                }
-              }
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger):not(
-                    .pi-button__icon--single
-                  ) {
-                  min-width: var(--pi-spacing-xx-large);
-                }
-                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-                  padding: var(--pi-spacing-xxxx-small) unset;
-                }
-                &:not(.pi-close-button):not(
-                    .pi-hamburger
-                  ).pi-button__appearance--outline {
-                  background-color: var(--pi-color-accent-75);
-                  transition: all 0.16s ease-in;
-                  border: unset;
-                }
-                &:not(.pi-close-button):not(.pi-hamburger):not(
-                    .pi-button__x-large
-                  ) {
-                  border-radius: var(--pi-border-radius-medium);
-                  -webkit-border-radius: var(--pi-border-radius-medium);
-                  -moz-border-radius: var(--pi-border-radius-medium);
-                }
-              }
-            }
-          }
-          // Tablet S
-          @media screen and (min-width: 40rem) {
-            height: var(--pi-height-header-tablet);
-            // Right
-            &.pi-saas-header-content__right {
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-                  padding: var(--pi-spacing-xxxx-small)
-                    var(--pi-spacing-x-small);
-                }
-              }
-            }
-          }
-          // Left
-          &.pi-saas-header-content__left {
-            width: 60%;
-            & > span {
-              & > h1 {
-                font: {
-                  size: var(--pi-font-size-medium);
-                }
-              }
-            }
-          }
-
-          // Right
-          &.pi-saas-header-content__right {
-            width: 40%;
-            display: flex;
-            align-items: center;
-
-            .pi-avatar {
-              padding: var(--pi-spacing-xxx-small);
-
-              &:hover,
-              &.is-active {
-                transform: scale(1.05);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    .pi-avatar {
-      picture {
-        width: 3rem;
-        height: 3rem;
-      }
-    }
-    &.is-tablet__small {
-      .pi-saas-header {
-        left: var(--pi-spacing-x-large);
-        width: calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-        );
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-saas-header {
-        .pi-saas-header-content {
-          // Left
-          &.pi-saas-header-content__left {
-            height: var(--pi-height-header-tablet);
-            padding-top: var(--pi-spacing-large);
-          }
-          // Right
-          &.pi-saas-header-content__right {
-            height: var(--pi-height-header-tablet);
-            padding-top: var(--pi-spacing-xx-small);
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet L & Desktop
-  &:not(.is-mobile) {
-    .pi-saas-header {
-      .pi-saas-header-content {
-        // Right
-        &.pi-saas-header-content__right {
-          gap: var(--pi-spacing-medium);
-
-          .pi-icon-button,
-          .pi-icon:nth-of-type(1) {
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-            &:not(.is-active) {
-              &::after {
-                content: '|';
-                color: var(--pi-color-primary-200);
-                margin-left: var(--pi-spacing-medium);
-                font: {
-                  size: var(--pi-font-size-small);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Large Devices
-    @media screen and (min-width: 62rem) {
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          & span {
-            & > h1 {
-              font: {
-                size: var(--pi-font-size-large);
-              }
-            }
-          }
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          button {
-            &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-              &.pi-button__appearance--ghost {
-                padding: var(--pi-spacing-xxxx-small) 0;
-              }
-              &:not(.pi-button__appearance--ghost) {
-                padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
-              }
-            }
-          }
-        }
-      }
-    }
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-header {
-            transition: var(--pi-animation);
-            .pi-saas-header-content {
-              // Left
-              &.pi-saas-header-content__left {
-                width: 45%;
-              }
-              // Right
-              &.pi-saas-header-content__right {
-                justify-content: flex-end;
-                width: 55%;
-                .pi-avatar {
-                  padding: 0.375rem;
-
-                  &:hover,
-                  &.is-active {
-                    transform: scale(1.075);
-                  }
-                }
-              }
-            }
-          }
-          // Aside is open
-          &.aside-is-open {
-            .pi-saas-header {
-              width: calc(
-                100% - var(--pi-width-aside) - var(--pi-spacing-x-large)
-              );
-            }
-          }
-          // Aside is closed
-          &.aside-is-closed {
-            .pi-saas-header {
-              width: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-saas-header {
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          height: var(--pi-height-header);
-          padding-top: var(--pi-spacing-small);
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          height: var(--pi-height-header);
-          padding-top: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss

@@ -1,164 +0,0 @@
-.pi-shell__deale-saas {
-  & > div {
-    width: 100%;
-
-    // NOT Is fullscreen
-    &:not(.is-fullscreen) {
-      & > section {
-        position: fixed;
-      }
-    }
-    // Is fullscreen
-    &.is-fullscreen {
-      & > section {
-        left: 0;
-        width: 100%;
-      }
-      .pi-saas-header,
-      .pi-saas-navbar {
-        display: none;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet S
-  &:not(.is-desktop) {
-    // Tablet L
-    @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          & > section {
-            width: 100%;
-            padding: 0;
-          }
-          // Footer logo
-          & > .pi-headline {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    // Tablet L
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          & > section {
-            height: calc(
-              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-          }
-          // Not is fullscreen
-          &:not(.is-fullscreen) {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
-                  var(--pi-spacing-x-large)
-              );
-              width: calc(
-                100% - var(--pi-width-navbar-collapsed) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          height: 100vh;
-          width: 100%;
-          overflow-x: hidden;
-          overflow-y: auto;
-          // Not is fullscreen
-          &:not(.is-fullscreen) {
-            // Layout container
-            & > section {
-              top: var(--pi-spacing-x-large);
-              & > *:nth-child(1) {
-                padding-right: var(--pi-spacing-x-large);
-              }
-            }
-          }
-
-          // Aside is open
-          &.aside-is-open {
-            & > .pi-headline {
-              transform: var(--pi-animation);
-              transform: translateX(0);
-            }
-          }
-          // Aside is closed
-          &.aside-is-closed {
-            & > .pi-headline {
-              transform: var(--pi-animation);
-              transform: translateX(
-                calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-shell__deale-saas {
-      & > div {
-        // Not is fullscreen
-        &:not(.is-fullscreen) {
-          // Layout container
-          & > section {
-            height: calc(
-              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-            transition: var(--pi-animation);
-            & > *:nth-child(1) {
-              padding-right: var(--pi-spacing-x-large);
-            }
-          }
-          // Navbar is expanded
-          &.navbar-is-expanded {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
-                  var(--pi-spacing-x-large)
-              );
-
-              width: calc(
-                100% - var(--pi-width-navbar-expanded) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
-              );
-            }
-          }
-          // Navbar is collapsed
-          &.navbar-is-collapsed {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
-                  var(--pi-spacing-x-large)
-              );
-              width: calc(
-                100% - var(--pi-width-navbar-collapsed) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss

@@ -1,653 +0,0 @@
-@mixin parentMenuEntryAppearance($justify-content, $height) {
-  .pi-saas-navbar {
-    .pi-menu-event-item {
-      display: flex;
-      align-items: center;
-      justify-content: $justify-content;
-      gap: var(--pi-spacing-medium);
-      width: -webkit-fill-available;
-      height: $height;
-    }
-  }
-}
-
-@mixin parentMenuItemExpanded($height: var(--pi-size-menu-item-expanded)) {
-  .pi-shell__deale-saas {
-    & > div {
-      &.navbar-is-expanded {
-        // Navbar
-        .pi-saas-navbar {
-          .pi-menu {
-            & > nav {
-              & > .pi-menu-event-item {
-                .pi-menu-entry {
-                  &.pi-menu-entry__context--parent-menu {
-                    height: var(--pi-size-menu-item-expanded);
-                    width: calc(
-                      100% - var(--pi-spacing-large) - var(--pi-spacing-large)
-                    );
-                    margin-left: var(--pi-spacing-large);
-                    padding: 0 var(--pi-spacing-large);
-                    border-radius: var(--pi-border-radius-medium);
-                    transition: var(--pi-animation);
-                    article {
-                      transition: var(--pi-animation);
-                      transform: scale(1);
-                      transition-delay: 0.1s;
-                      visibility: visible;
-                      opacity: 1;
-                    }
-                    label {
-                      line-height: 1.25;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemCollapsed(
-  $size: var(--pi-spacing-xxxx-large),
-  $radius: medium,
-  $scale: 1
-) {
-  .pi-saas-navbar {
-    .pi-menu {
-      .pi-menu-entry {
-        &.pi-menu-entry__context--parent-menu {
-          justify-content: center;
-          height: $size;
-          width: $size;
-          border-radius: var(--pi-border-radius-#{$radius});
-          transition: var(--pi-animation);
-
-          article {
-            position: absolute;
-            transform: scale(0.5);
-            visibility: hidden;
-            opacity: 0;
-          }
-        }
-        // Not disabled hover and active effects
-        &:not(.is-disabled) {
-          &.pi-menu-entry__context--parent-menu {
-            &:hover {
-              &:not(.is-active) {
-                .mat-icon {
-                  transform: scale(#{$scale});
-                }
-              }
-            }
-            &.is-active {
-              background-color: var(--pi-color-primary-50);
-              color: var(--pi-color-primary-900);
-              .mat-icon {
-                transform: scale(#{$scale});
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuEntryColor {
-  .pi-menu-event-item {
-    &.is-selected {
-      .pi-menu-entry {
-        &:not(.is-disabled) {
-          &:not([class*='pi-menu-entry__context--aside-menu']):not(
-              [class*='children']
-            ) {
-            background-color: var(--pi-color-primary-25);
-            color: var(--pi-color-primary);
-            .mat-icon {
-              color: var(--pi-color-primary);
-            }
-          }
-        }
-      }
-    }
-    &.is-disabled {
-      opacity: 0.3;
-    }
-    &:not(.is-disabled) {
-      .pi-menu-entry {
-        &.pi-menu-entry__context--parent-menu,
-        &.pi-menu-entry__context--children-submenu {
-          &.pi-text-viewer {
-            &.pi-text-viewer__icon-color--black {
-              &:not(.pi-menu-entry__context--children-menu):not(
-                  .pi-menu-entry__context--aside-menu
-                ) {
-                &:not(.is-active) {
-                  color: var(--pi-color-grey);
-                  .mat-icon {
-                    color: var(--pi-color-grey);
-                  }
-                }
-                &:hover {
-                  &:not(.is-active):not(.is-disabled) {
-                    background-color: var(--pi-color-primary-50);
-
-                    span,
-                    label,
-                    .mat-icon {
-                      color: var(--pi-color-primary);
-                    }
-                  }
-                }
-                &:not(.is-disabled) {
-                  &.is-active {
-                    max-width: -webkit-fill-available;
-                    background-color: var(--pi-color-primary-50);
-                    color: var(--pi-color-primary-900);
-                    .mat-icon {
-                      color: var(--pi-color-primary-900);
-                    }
-                  }
-                }
-
-                &:hover {
-                  &:not(.is-active):not(.is-disabled) {
-                    background-color: var(--pi-color-primary-50);
-                    label,
-                    .mat-icon {
-                      color: var(--pi-color-primary);
-                    }
-                  }
-                }
-              }
-            }
-          }
-          &.is-disabled {
-            opacity: 0.3;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin childrenMenuEntryAppearance {
-  .pi-menu-entry {
-    &.pi-menu-entry__context--children-menu {
-      max-width: -webkit-fill-available;
-      padding-left: var(--pi-spacing-xx-small);
-      font: {
-        size: var(--pi-font-size-x-small);
-      }
-    }
-    &.pi-menu-entry__context--children-submenu {
-      height: var(--pi-size-menu-item-expanded);
-      padding: var(--pi-spacing-medium);
-      border-radius: var(--pi-border-radius-medium);
-      transition: var(--pi-animation);
-      article {
-        transition: var(--pi-animation);
-        transform: scale(1);
-        transition-delay: 0.1s;
-        visibility: visible;
-        opacity: 1;
-      }
-      label {
-        line-height: 1.25;
-      }
-    }
-  }
-}
-
-@mixin childrenMenuCollapsed {
-  position: fixed;
-  display: none;
-  visibility: hidden;
-  opacity: 0;
-  transition: var(--pi-animation-slow);
-}
-
-@mixin childrenMenuPosition($left) {
-  // Menu item
-  transform: translate($left, var(--pi-spacing-xxx-large));
-}
-
-@mixin childrenMenuAppearance($width: -webkit-fill-available) {
-  .pi-saas-navbar {
-    .pi-menu__children {
-      position: absolute;
-      flex-direction: column;
-      gap: var(--pi-spacing-x-small);
-      width: $width;
-      padding-top: var(--pi-spacing-x-large);
-      padding-right: var(--pi-spacing-xxxx-small);
-      padding-bottom: var(--pi-spacing-x-large);
-      border-radius: var(--pi-border-radius-large);
-      background-color: var(--pi-color-white);
-      border: 0.5px solid var(--pi-color-grey-50);
-      box-shadow: var(--pi-box-shadow-double);
-
-      // Submenu entries
-      & > *:nth-child(n + 1) {
-        & > *:nth-child(n + 1) {
-          &:not(.pi-menu-entry__context--children-menu) {
-            padding-left: var(--pi-spacing-x-large);
-            padding-right: var(--pi-spacing-x-large);
-          }
-        }
-      }
-
-      .pi-menu-event-children {
-        &.pi-menu-children__entries {
-          display: flex;
-          flex-direction: column;
-          gap: var(--pi-spacing-xxx-small);
-
-          & > section {
-            max-height: 25vh;
-
-            overflow-y: auto;
-            &::-webkit-scrollbar {
-              width: 0.1875rem;
-            }
-            &::-webkit-scrollbar-thumb {
-              background-color: var(--pi-color-grey-50);
-
-              &:hover {
-                background-color: var(--pi-color-grey-75);
-              }
-            }
-          }
-        }
-      }
-      .pi-submenu-children__aside-entries {
-        margin-top: var(--pi-spacing-x-small);
-      }
-      .pi-menu-entry {
-        width: -webkit-fill-available;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        transition: var(--pi-animation);
-        &:hover {
-          cursor: pointer;
-        }
-        &.pi-menu-entry__context--aside-menu {
-          button {
-            width: -webkit-fill-available;
-          }
-        }
-        &.pi-menu-entry__context--children-menu {
-          padding-bottom: var(--pi-spacing-xxx-small);
-          border-bottom: 1px solid;
-          margin-left: calc(
-            var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
-          );
-          margin-right: calc(
-            var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
-          );
-
-          &:nth-of-type(1) {
-            border-color: var(--pi-color-grey-100);
-          }
-          &:nth-of-type(2) {
-            border-color: var(--pi-color-primary-75);
-          }
-          &:nth-of-type(3) {
-            border-color: var(--pi-color-accent-75);
-          }
-          &:nth-of-type(n + 2) {
-            margin-top: var(--pi-spacing-x-large);
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin childrenMenuVisibility {
-  & > .pi-menu-event-item {
-    &.has-children {
-      &.is-selected {
-        // Child menu visible
-        .pi-menu__children {
-          &.is-visible {
-            opacity: 1;
-            visibility: visible;
-          }
-
-          &:not(.is-visible) {
-            display: none;
-          }
-        }
-      }
-      &:not(.is-selected) {
-        // Child menu hidden
-        .pi-menu__children {
-          &:not(.is-visible) {
-            display: none;
-            opacity: 0;
-            visibility: hidden;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin smallDeviceChildrenMenuPosition {
-  .pi-saas-navbar {
-    .pi-menu {
-      &.pi-menu__children {
-        left: 0;
-        bottom: calc(
-          env(safe-area-inset-bottom) + var(--pi-spacing-medium) +
-            var(--pi-height-footer)
-        );
-        z-index: 99;
-      }
-      & > nav {
-        @include childrenMenuVisibility;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildrenMenuPosition {
-  .pi-shell__deale-saas {
-    & > div {
-      .pi-saas-navbar {
-        .pi-menu {
-          &.pi-menu__parent {
-            width: -webkit-fill-available;
-          }
-          & > nav {
-            display: flex;
-            flex-direction: column;
-
-            // Hide - show child menu
-            @include childrenMenuVisibility;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Menu in navbar
-.pi-saas-navbar {
-  @include parentMenuEntryColor;
-  @include childrenMenuAppearance;
-  @include childrenMenuEntryAppearance;
-}
-
-html {
-  &.is-mobile {
-    @include smallDeviceChildrenMenuPosition;
-    .pi-shell__deale-saas {
-      & > div {
-        @include parentMenuItemCollapsed;
-      }
-    }
-  }
-
-  &.is-tablet {
-    &.is-tablet__small {
-      @include smallDeviceChildrenMenuPosition;
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuItemCollapsed(3.375rem, medium, 1.1);
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Device
-    @media screen and (max-width: 62rem) {
-      @include childrenMenuAppearance;
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuEntryAppearance(center, 3.25rem);
-          .pi-saas-navbar {
-            .pi-menu-entry {
-              &.pi-menu-entry__context--parent-menu {
-                gap: 0;
-                transition: var(--pi-animation-slow);
-
-                &:not(.is-active) {
-                  .mat-icon {
-                    color: var(--pi-color-black);
-                  }
-                }
-                article {
-                  display: none;
-                }
-              }
-            }
-
-            .pi-menu {
-              & > nav {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                height: var(--pi-height-footer);
-                padding-left: var(--pi-spacing-xx-small);
-                padding-right: var(--pi-spacing-xx-small);
-              }
-            }
-            .pi-chevron-button {
-              display: none;
-            }
-          }
-        }
-      }
-      // Menu in layout
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__large {
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuEntryAppearance(
-            center,
-            var(--pi-size-menu-item-collapsed)
-          );
-          @include parentMenuItemCollapsed(
-            var(--pi-size-menu-item-collapsed),
-            large,
-            1.2
-          );
-          .pi-saas-navbar {
-            // Tablet L
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-xxx-small);
-                & > .pi-menu-event-item {
-                  .pi-menu-entry {
-                    & > span {
-                      @include childrenMenuCollapsed;
-                    }
-                  }
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-collapsed) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-xxx-small)
-                        )
-                      );
-                    }
-                    // Is selected and children is visible
-                    &.is-selected {
-                      &:not(.is-disabled) {
-                        .pi-menu-entry {
-                          &:not(.is-active) {
-                            .mat-icon {
-                              color: var(--pi-color-primary);
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      @include childrenMenuAppearance(var(--pi-width-children-menu-expanded));
-      @include largeDeviceChildrenMenuPosition;
-      // Menu in layout
-      .pi-layout {
-        .pi-menu {
-          &.pi-menu__parent {
-            & > nav {
-              width: calc(
-                var(--pi-width-navbar-expanded) - var(
-                    --pi-spacing-xxxx-large
-                  ) - var(--pi-spacing-xxxx-small)
-              );
-            }
-            .pi-menu-event-item {
-              & > *:nth-child(1) {
-                width: 100%;
-              }
-              &.has-children {
-                padding-left: var(--pi-spacing-large);
-                padding-right: var(--pi-spacing-large);
-                .pi-menu__children {
-                  transform: translate(-1.25rem, -1rem);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    @include parentMenuItemExpanded;
-    .pi-shell__deale-saas {
-      & > div {
-        // Cursor styles
-        .pi-menu-event-item {
-          &:not(.is-active) {
-            &:hover {
-              .pi-menu-entry {
-                &:not(.is-disabled) {
-                  cursor: pointer;
-                  label {
-                    &:hover {
-                      &:not(.is-disabled) {
-                        cursor: pointer;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          .pi-menu-entry {
-            &.pi-menu-entry__context--children-submenu {
-              &:hover {
-                &:not(.is-active):not(.is-disabled) {
-                  cursor: pointer;
-                }
-              }
-              article,
-              span,
-              label {
-                &:hover {
-                  cursor: pointer;
-                }
-              }
-            }
-          }
-        }
-        // Expanded
-        &.navbar-is-expanded {
-          @include parentMenuEntryAppearance(
-            flex-start,
-            var(--pi-size-menu-item-expanded)
-          );
-          // Navbar
-          .pi-saas-navbar {
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-x-small);
-                & > .pi-menu-event-item {
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-expanded) +
-                            var(--pi-spacing-xx-large)
-                        )
-                      );
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Collapsed
-        &.navbar-is-collapsed {
-          @include parentMenuEntryAppearance(
-            center,
-            var(--pi-size-menu-item-collapsed)
-          );
-          @include parentMenuItemCollapsed(
-            var(--pi-size-menu-item-collapsed),
-            large,
-            1.2
-          );
-          .pi-saas-navbar {
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-xxx-small);
-                & > .pi-menu-event-item {
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-collapsed) +
-                            var(--pi-spacing-xx-large) +
-                            var(--pi-spacing-xx-large) +
-                            var(--pi-spacing-large) + var(--pi-spacing-x-large)
-                        )
-                      );
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss

@@ -1,286 +0,0 @@
-.pi-saas-navbar {
-  position: fixed;
-  z-index: 99;
-  background-color: var(--pi-color-white);
-  border: 1px solid var(--pi-color-white-900);
-  border-radius: var(--pi-border-radius-large);
-  .pi-headline {
-    margin: auto;
-  }
-  .pi-saas-navbar-content {
-    &.pi-saas-navbar-content__top {
-      .pi-headline {
-        width: calc(100% - var(--pi-spacing-x-large));
-        padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
-      }
-      .pi-chevron-button {
-        width: var(--pi-spacing-x-large);
-        margin-bottom: 1.125rem;
-        padding: 0.1375rem;
-      }
-    }
-  }
-  .pi-chevron-button {
-    position: relative;
-    left: var(--pi-spacing-small);
-    border-radius: 50%;
-    box-shadow: var(--pi-box-shadow);
-  }
-}
-
-@mixin multispaceNavbarGridLargeDevice {
-  .pi-saas-navbar-content {
-    &.pi-saas-navbar-content__center {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--pi-spacing-xxx-small);
-
-      .pi-divider {
-        width: -webkit-fill-available;
-        max-width: calc(100% - var(--pi-spacing-xxxx-large));
-      }
-    }
-  }
-}
-
-@mixin multispaceNavbarGridSmallDevice {
-  // Advisor Profile Multispace
-  .is-advisor {
-    .pi-saas-navbar-content {
-      &.pi-saas-navbar-content__center {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        .pi-menu {
-          &.pi-menu__parent {
-            &:first-of-type {
-              width: 20%;
-              & > nav {
-                padding-left: unset;
-                .pi-menu-event-item {
-                  &.has-children {
-                    border-left: 1px solid var(--pi-color-grey-75);
-                  }
-                }
-              }
-            }
-            &:last-of-type {
-              width: 80%;
-              & > nav {
-                padding-right: unset;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &.is-mobile {
-    @include multispaceNavbarGridSmallDevice;
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-navbar {
-          left: var(--pi-spacing-medium);
-          bottom: var(--pi-spacing-medium);
-          width: calc(
-            100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)
-          );
-        }
-      }
-    }
-  }
-
-  &:not(.is-desktop) {
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-navbar {
-          // Mobile & Tablet S
-          @media screen and (max-width: 62rem) {
-            position: fixed;
-            height: var(--pi-height-footer);
-            box-shadow: var(--pi-box-shadow-panel);
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top,
-              &.pi-saas-navbar-content__bottom {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      @include multispaceNavbarGridSmallDevice;
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            left: var(--pi-spacing-x-large);
-            bottom: var(--pi-spacing-x-large);
-            width: calc(
-              100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            width: var(--pi-width-navbar-collapsed);
-            box-shadow: var(--pi-box-shadow-panel);
-            .pi-headline {
-              height: 5.25rem;
-              max-width: 3.35rem;
-              padding: 1.6rem var(--pi-spacing-small);
-            }
-            .pi-chevron-button {
-              display: none;
-            }
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top {
-                & > .pi-chip {
-                  transform: scale(0.8);
-                  img {
-                    transform: scale(0.8);
-                  }
-                }
-              }
-
-              &.pi-saas-navbar-content__bottom {
-                padding: var(--pi-spacing-x-large) 0;
-                margin: 0 auto;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      @include multispaceNavbarGridLargeDevice;
-      .pi-shell__deale-saas {
-        & > div {
-          &:not(.is-fullscreen) {
-            .pi-saas-navbar {
-              top: var(--pi-spacing-x-large);
-              left: var(--pi-spacing-x-large);
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-              );
-              .pi-chip {
-                margin: auto;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Desktop
-    &.is-desktop {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            width: var(--pi-width-navbar-expanded);
-            box-shadow: var(--pi-box-shadow-panel);
-            transition: var(--pi-animation);
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top {
-                & > header {
-                  display: flex;
-                  align-items: flex-end;
-                }
-                & > .pi-chip {
-                  margin: auto;
-                  transform: scale(0.9);
-                  img {
-                    transform: scale(0.9);
-                  }
-                }
-              }
-              &.pi-saas-navbar-content__bottom {
-                padding: var(--pi-spacing-x-large) 0;
-                text-align: center;
-              }
-            }
-
-            .pi-headline {
-              transition: var(--pi-animation);
-            }
-          }
-          // Expanded
-          &.navbar-is-expanded {
-            .pi-saas-navbar {
-              width: var(--pi-width-navbar-expanded);
-
-              .pi-headline {
-                max-width: 8rem;
-                height: 5rem;
-                opacity: 0;
-                &.pi-logo {
-                  transition: var(--pi-animation);
-                  transition-duration: 0.35s;
-                  transition-delay: 0.15s;
-                  opacity: 1;
-                }
-                & > .pi-chip {
-                  transform: scale(0.9);
-                }
-              }
-              .pi-saas-navbar-content {
-                &.pi-saas-navbar-content__center {
-                  padding: var(--pi-spacing-x-large) 0;
-                }
-              }
-            }
-          }
-          // Collapsed
-          &.navbar-is-collapsed {
-            .pi-saas-navbar {
-              width: var(--pi-width-navbar-collapsed);
-              .pi-headline {
-                max-width: 3.35rem;
-                height: 5.25rem;
-                padding: 1.25rem 0 0 var(--pi-spacing-x-large);
-                opacity: 0;
-                transition: var(--pi-animation);
-
-                &.pi-logo-simple {
-                  transition: var(--pi-animation);
-                  transition-duration: 0.35s;
-                  transition-delay: 0.15s;
-                  opacity: 1;
-                }
-              }
-              .pi-saas-navbar-content {
-                &.pi-saas-navbar-content__top {
-                  & > .pi-chip {
-                    transform: scale(0.8);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/index.scss

@@ -1,5 +0,0 @@
-@forward 'pi-aside';
-@forward 'pi-header';
-@forward 'pi-main';
-@forward 'pi-menu';
-@forward 'pi-navbar';

libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss

@@ -1,293 +0,0 @@
-@mixin asideColor($color) {
-  .pi-shell__deale-saas {
-    & > div {
-      .pi-saas-aside {
-        // Aside theme
-        &.pi-saas-aside__theme {
-          // Not custom
-          &:not(.is-custom) {
-            background-color: var(--pi-color-#{$color}-50);
-            .pi-close-button {
-              &:hover {
-                &::before,
-                &::after {
-                  background-color: var(--pi-color-#{$color});
-                }
-              }
-            }
-            // Dynamic menu
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                &.pi-wrapper__flex {
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-#{$color}-100);
-
-                    &:hover {
-                      background-color: var(--pi-color-#{$color}-200);
-                    }
-                  }
-                }
-              }
-              & > *:nth-child(3) {
-                border-top-width: 1px;
-                border-top-style: solid;
-                border-top-color: var(--pi-color-#{$color}-100);
-              }
-              .pi-list-item {
-                transition: var(--pi-animation);
-                &.is-clickable {
-                  &:hover {
-                    &.pi-color__primary {
-                      &:not(.is-disabled):not(.is-active) {
-                        background-color: var(--pi-color-#{$color}-75);
-                      }
-                    }
-                  }
-                }
-                &.pi-color__primary {
-                  &.is-active {
-                    background-color: var(--pi-color-#{$color}-75);
-                  }
-                }
-                .pi-chip {
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-#{$color});
-                        color: var(--pi-color-#{$color});
-
-                        label {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              // User profile
-              &.pi-saas-admin-user-profile {
-                .pi-chip {
-                  // Profile
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--fill {
-                        &:not(.pi-chip__single-icon) {
-                          background-color: var(--pi-color-#{$color});
-                          border-width: 1px;
-                          border-style: solid;
-                          border-color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                  // Subscription
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-#{$color});
-                        color: var(--pi-color-#{$color});
-                      }
-                    }
-                  }
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        label {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-                .pi-icon {
-                  &.is-stroked {
-                    &.pi-icon__appearance--fill {
-                      &.pi-icon__x-large {
-                        border-color: var(--pi-color-#{$color}-200);
-                        background-color: var(--pi-color-#{$color}-75);
-                        .mat-icon {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-          // Custom
-          &.is-custom {
-            background-color: var(--pi-color-primary-50);
-            .pi-close-button {
-              &:hover {
-                &::before,
-                &::after {
-                  background-color: var(--pi-color-primary);
-                }
-              }
-            }
-            // Dynamic menu
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                &.pi-wrapper__flex {
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-primary-100);
-
-                    &:hover {
-                      background-color: var(--pi-color-primary-200);
-                    }
-                  }
-                }
-              }
-              & > *:nth-child(3) {
-                border-top-width: 1px;
-                border-top-style: solid;
-                border-top-color: var(--pi-color-primary-100);
-              }
-              .pi-list-item {
-                transition: var(--pi-animation);
-                &.is-clickable {
-                  &:hover {
-                    &.pi-color__primary {
-                      &:not(.is-disabled):not(.is-active) {
-                        background-color: var(--pi-color-primary-100);
-                      }
-                    }
-                  }
-                }
-                &.pi-color__primary {
-                  &.is-active {
-                    background-color: var(--pi-color-primary-100);
-                  }
-                }
-                .pi-chip {
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-primary);
-                        color: var(--pi-color-primary);
-
-                        label {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              // User profile
-              &.pi-saas-admin-user-profile {
-                .pi-chip {
-                  // Profile
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--fill {
-                        &:not(.pi-chip__single-icon) {
-                          background-color: var(--pi-color-primary);
-                          border-width: 1px;
-                          border-style: solid;
-                          border-color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                  // Subscription
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-primary);
-                        color: var(--pi-color-primary);
-                      }
-                    }
-                  }
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        label {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-                .pi-icon {
-                  &.is-stroked {
-                    &.pi-icon__appearance--fill {
-                      &.pi-icon__x-large {
-                        border-color: var(--pi-color-primary-200);
-                        background-color: var(--pi-color-primary-200-rgba);
-                        .mat-icon {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Aside white
-        &.pi-saas-aside__white {
-          // Dynamic menu
-          .pi-dynamic-menu {
-            & > *:nth-child(2) {
-              &.pi-wrapper__flex {
-                &::-webkit-scrollbar-thumb {
-                  background-color: var(--pi-color-grey-25);
-
-                  &:hover {
-                    background-color: var(--pi-color-grey-75);
-                  }
-                }
-              }
-            }
-            & > *:nth-child(3) {
-              border-top-width: 1px;
-              border-top-style: solid;
-              border-top-color: var(--pi-color-white-900);
-            }
-          }
-        }
-      }
-
-      &:not(.is-fullscreen) {
-        // Large device
-        @media screen and (min-width: 62rem) {
-          .pi-saas-aside {
-            &.pi-saas-aside__theme {
-              border-width: 1px;
-              border-style: solid;
-              &:not(.is-custom) {
-                border-color: var(--pi-color-#{$color}-100);
-              }
-              &.is-custom {
-                border-color: var(--pi-color-primary-100);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.is-company {
-  @include asideColor(primary);
-}
-
-.is-investor {
-  @include asideColor(accent);
-}
-
-.is-advisor {
-  @include asideColor(highlighted);
-}

libs/ui/src/lib/styles/deale-saas/theming/index.scss

@@ -1 +0,0 @@
-@forward 'pi-user-type-theming';

libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss

@@ -1,47 +0,0 @@
-.pi-wrapper {
-  // Header Wrapper
-  &.pi-wrapper__header {
-    // Center
-    &.pi-wrapper__align-items--center {
-      .pi-header-wrapper-content {
-        align-items: center;
-      }
-    }
-  }
-}
-
-.pi-layout__07-list {
-  .pi-header-wrapper-content {
-    &.pi-header-wrapper-content__left {
-      width: 100%;
-    }
-    &.pi-header-wrapper-content__right {
-      justify-content: flex-end;
-      display: flex;
-      & > aside {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--pi-spacing-xx-small);
-
-        .pi-select {
-          &.pi-select__picked-option-type--button {
-            .pi-select-picked-option {
-              background-color: var(--pi-color-white);
-            }
-            &:not(:hover) {
-              .pi-select-picked-option {
-                box-shadow: var(--pi-box-shadow);
-              }
-            }
-          }
-        }
-        .pi-toggle-button {
-          & > button {
-            border-radius: var(--pi-border-radius-large);
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss

@@ -1,42 +0,0 @@
-@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
-  .pi-shell__deale-saas {
-    .pi-wrapper {
-      // Max width
-      &.pi-wrapper__full-width,
-      &.pi-wrapper__full-width-centered {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-wrapper {
-      div {
-        // Fixed wrapper
-        &.is-fixed {
-          position: fixed;
-          z-index: 99;
-          left: 0;
-          bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          width: 100%;
-          padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
-          right: 0;
-          button {
-            min-width: 50%;
-            box-shadow: var(--pi-box-shadow);
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    @include dealeSaaSWrapperMaxWidth;
-  }
-}

libs/ui/src/lib/styles/deale-saas/wrappers/index.scss

@@ -1,2 +0,0 @@
-@forward 'pi-header-wrapper';
-@forward 'pi-wrapper';

libs/ui/src/lib/styles/deale-website/components/_pi-text.scss

@@ -1,39 +0,0 @@
-h1 {
-  line-height: 110%;
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-website-text {
-      // xxxxl - 2.875rem - 46px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: 2.875rem;
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    .pi-website-text {
-      // xxxxl - 62px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: 3.875rem;
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-website-text {
-      // xxxxl - 4.5rem - 72px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: var(--pi-public-font-size-xxx-large);
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/components/index.scss

@@ -1 +0,0 @@
-@forward 'pi-text';

libs/ui/src/lib/styles/deale-website/index.scss

@@ -1,5 +0,0 @@
-@use 'components' as *;
-@use 'layouts' as *;
-@use 'screens' as *;
-@use 'shell' as *;
-@use 'wrappers' as *;

libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss

@@ -1,106 +0,0 @@
-.pi-layout {
-  &.pi-layout__02-full-width {
-    &:not(.pi-layout__02a-full-width--auto) {
-      & > *:nth-child(1) {
-        &
-          > *:nth-child(n + 1):not(
-            :is(h1, h2, h3, h4, h5, p, i, figcaption, small)
-          ) {
-          margin: 0 auto;
-        }
-        & > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
-          margin: var(--pi-spacing-medium) auto;
-        }
-      }
-    }
-  }
-}
-@mixin layoutBasicPages(
-  $padding-top-1: calc(
-      var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
-    ),
-  $padding-top-2: var(--pi-spacing-xxx-large)
-) {
-  .pi-shell__deale-website {
-    .pi-container-layout {
-      &.pi-layout {
-        &.pi-layout__02-full-width {
-          & > *:nth-child(1) {
-            padding-top: $padding-top-1;
-          }
-          & > *:nth-child(2) {
-            padding-top: $padding-top-2;
-            padding-bottom: $padding-top-2;
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include layoutBasicPages;
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-x-large);
-      }
-    }
-  }
-  &.is-tablet {
-    @include layoutBasicPages(
-      calc(
-        var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)
-      ),
-      var(--pi-spacing-xxxx-large)
-    );
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-xx-large);
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        max-width: 100%;
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    @include layoutBasicPages(
-      calc(
-        var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)
-      ),
-      var(--pi-spacing-xxxx-large)
-    );
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-xxxx-large) var(--pi-spacing-xxxx-large);
-
-        // Desktop M
-        @media screen and (min-width: 90rem) and (max-width: 120rem) {
-          & > *:nth-child(n + 1) {
-            max-width: var(--pi-public-width-container);
-          }
-        }
-        &:not(.pi-container-layout) {
-          // Desktop S
-          @media screen and (min-width: 77.5rem) and (max-width: 90rem) {
-            & > *:nth-child(n + 1) {
-              max-width: 100%;
-            }
-          }
-          // Desktop L
-          @media screen and (min-width: 120rem) {
-            & > *:nth-child(n + 1) {
-              max-width: var(--pi-public-width-container-l);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss

@@ -1,9 +0,0 @@
-.pi-layout {
-  &.pi-layout__02-full-width {
-    &.pi-layout__02a-full-width--auto {
-      & > *:nth-child(n + 1) {
-        margin: 0 auto;
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss

@@ -1,117 +0,0 @@
-@mixin headingsWidth($max-width: 100%) {
-  .pi-container-layout {
-    .pi-layout {
-      &.pi-layout__03-vertically-centered {
-        .pi-text__centered {
-          & > *:nth-child(n + 1) {
-            &:is(h2, h3, h4, h5) {
-              max-width: $max-width;
-              margin: auto;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-//
-
-@mixin thankYouPageHeaderHeight($device: mobile) {
-  .pi-layout {
-    &.pi-layout__03-vertically-centered {
-      &.pi-layout__full {
-        & > .pi-wrapper {
-          &.pi-background-image {
-            min-height: calc(100vh - var(--pi-public-height-header-#{$device}));
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-container-layout {
-  .pi-layout {
-    &.pi-layout__03-vertically-centered {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      background-size: cover;
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    @include headingsWidth;
-    // Small device
-    @media screen and (max-width: 62rem) {
-      @include thankYouPageHeaderHeight;
-    }
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          &.pi-layout__02-full-width {
-            &:not(.pi-layout__06-edge-to-edge) {
-              & > *:nth-child(1) {
-                max-width: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      @include thankYouPageHeaderHeight(desktop);
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      @include headingsWidth(75%);
-      &.pi-layout__03-vertically-centered {
-        &.pi-layout__02-full-width {
-          &:not(.pi-layout__06-edge-to-edge) {
-            max-width: var(--pi-public-width-container-l);
-          }
-
-          &.pi-layout__02a-full-width--auto {
-            margin: auto;
-          }
-        }
-      }
-    }
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          & > *:nth-child(1) {
-            max-width: 100%;
-          }
-        }
-      }
-    }
-    &.is-desktop__medium {
-      @include headingsWidth(70%);
-    }
-    &.is-desktop__large {
-      @include headingsWidth(66.66%);
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          &:not(.pi-layout__06-edge-to-edge) {
-            & > *:nth-child(1) {
-              max-width: var(--pi-public-width-container-l);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss

@@ -1,9 +0,0 @@
-.pi-layout {
-  &.pi-layout__06-edge-to-edge {
-    width: 100%;
-    & > *:nth-child(n + 1) {
-      width: 100%;
-      margin: 0 auto;
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss

@@ -1,61 +0,0 @@
-@mixin websiteHomeUserSpacings($max-width) {
-  .pi-layout {
-    &.pi-website-home-user {
-      .pi-list-item-content__left {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-@mixin edgeToEdgeLayoutCarouselBehavior($max-width) {
-  .pi-layout {
-    &.pi-layout__06-edge-to-edge {
-      .pi-carousel {
-        & > main {
-          & > section {
-            max-width: $max-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-website-home-user {
-    .pi-carousel {
-      display: block;
-    }
-    .pi-switch-button {
-      margin-top: var(--pi-spacing-xxx-large);
-    }
-    &:not(.pi-website-home-user__advisor) {
-      .pi-carousel {
-        margin-top: var(--pi-spacing-xxx-large);
-      }
-    }
-  }
-}
-
-html {
-  // Desktop
-  &.is-desktop {
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include edgeToEdgeLayoutCarouselBehavior(
-        var(--pi-public-width-container)
-      );
-    }
-    // Desktop M
-    &.is-desktop__medium {
-      @include websiteHomeUserSpacings(80%);
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include edgeToEdgeLayoutCarouselBehavior(
-        var(--pi-public-width-container-l)
-      );
-      @include websiteHomeUserSpacings(66.66%);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss

@@ -1,176 +0,0 @@
-.pi-layout {
-  &.pi-layout__07-list {
-    padding: 0;
-    overflow-y: hidden;
-    & > header {
-      position: fixed;
-      z-index: 99;
-      display: flex;
-      align-items: flex-end;
-      width: 100%;
-      margin: auto;
-      background-color: rgba($color: white, $alpha: 0.6);
-      .pi-wrapper {
-        &.pi-wrapper__header {
-          margin: auto;
-          padding-bottom: var(--pi-spacing-xx-small);
-        }
-      }
-    }
-    & > section {
-      footer {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--pi-spacing-medium);
-        height: 7rem;
-        text-align: center;
-        background-color: var(--pi-color-white);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__07-list {
-        & > header {
-          .pi-wrapper {
-            &.pi-wrapper__header {
-              min-height: var(--pi-height-layout-header);
-              width: 100%;
-              padding-right: var(--pi-spacing-x-large);
-              padding-left: var(--pi-spacing-x-large);
-              header {
-                display: flex;
-                align-items: center;
-                & > h1 {
-                  margin-top: var(--pi-spacing-medium);
-                  font: {
-                    size: var(--pi-font-size-large);
-                  }
-                }
-              }
-            }
-          }
-        }
-        & > section {
-          padding-top: calc(
-            var(--pi-height-layout-header) - var(--pi-spacing-medium)
-          );
-
-          .pi-wrapper {
-            &.pi-wrapper__list {
-              max-height: calc(
-                100vh - var(--pi-public-height-header-mobile) - var(
-                    --pi-height-layout-header
-                  ) -
-                  7.35rem
-              );
-              .pi-data-grid__mode--grid {
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      &.pi-layout__07-list {
-        & > header {
-          .pi-wrapper {
-            &.pi-wrapper__header {
-              min-height: var(--pi-height-layout-header);
-              padding: var(--pi-spacing-xxx-large) var(--pi-spacing-x-large);
-            }
-          }
-        }
-        & > section {
-          padding-top: calc(
-            var(--pi-height-layout-header) - var(--pi-spacing-medium)
-          );
-
-          .pi-wrapper {
-            &.pi-wrapper__list {
-              max-height: calc(
-                100vh - var(--pi-public-height-header-desktop) - var(
-                    --pi-height-layout-header
-                  ) -
-                  7.35rem
-              );
-              & > section {
-                .pi-data-grid__mode--grid {
-                  justify-content: center;
-                  max-width: var(--pi-width-container-l);
-                  margin: auto;
-                  padding-top: 3rem;
-                  padding-bottom: var(--pi-spacing-xxxx-large);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Desktop medium & large
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__07-list {
-          & > header {
-            .pi-wrapper {
-              &.pi-wrapper__header {
-                width: 100%;
-                padding-right: var(--pi-spacing-xxxx-large);
-                padding-left: var(--pi-spacing-xxxx-large);
-                header {
-                  width: 80%;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    // Desktop large
-    &.is-desktop__large {
-      .pi-layout {
-        &.pi-layout__07-list {
-          & > header {
-            .pi-wrapper {
-              &.pi-wrapper__header {
-                min-height: var(--pi-height-layout-header);
-                width: var(--pi-public-width-container-l);
-                padding-right: var(--pi-spacing-xxx-large);
-                padding-left: var(--pi-spacing-xxx-large);
-              }
-            }
-          }
-          & > section {
-            padding-top: calc(
-              var(--pi-height-layout-header) - var(--pi-spacing-medium)
-            );
-
-            .pi-wrapper {
-              &.pi-wrapper__list {
-                max-height: calc(
-                  100vh - var(--pi-public-height-header-desktop) - var(
-                      --pi-height-layout-header
-                    ) -
-                    7.35rem
-                );
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss

@@ -1,57 +0,0 @@
-@mixin containerSpacings(
-  $padding-top: calc(
-      var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
-    ),
-  $default-vertical-padding: calc(
-      var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)
-    ),
-  $default-vertical-margin: var(--pi-spacing-xx-large)
-) {
-  .pi-container-layout {
-    .pi-layout {
-      &:nth-child(1) {
-        &:not(.pi-layout__09-pricing):not(.pi-website-home-user):not(
-            .pi-layout__03-vertically-centered
-          ) {
-          & > *:nth-child(1) {
-            padding-top: $padding-top;
-          }
-        }
-      }
-    }
-    .pi-layout + .pi-layout__03-vertically-centered {
-      & > *:nth-child(1) {
-        padding-top: $default-vertical-padding;
-        padding-bottom: $default-vertical-padding;
-      }
-    }
-    .pi-layout + .pi-layout {
-      margin-top: $default-vertical-margin;
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      @include containerSpacings;
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      @include containerSpacings(
-        calc(
-          var(--pi-public-height-header-desktop) +
-            var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
-        ),
-        var(--pi-spacing-xxxx-large),
-        var(--pi-spacing-xx-large)
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss

@@ -1,33 +0,0 @@
-@mixin layoutSpacings($padding: var(--pi-spacing-xx-large)) {
-  .pi-container-layout {
-    .pi-layout {
-      &:not(.pi-layout__03-vertically-centered) {
-        & > *:first-child {
-          padding-top: $padding;
-        }
-        & > *:last-child {
-          padding-bottom: $padding;
-        }
-      }
-    }
-    .pi-domain-component {
-      display: block;
-      width: -webkit-fill-available;
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include layoutSpacings;
-  }
-  // Tablet
-  &.is-tablet {
-    @include layoutSpacings(var(--pi-spacing-xxx-large));
-  }
-  // Desktop
-  &.is-desktop {
-    @include layoutSpacings(var(--pi-spacing-xxxx-large));
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/index.scss

@@ -1,8 +0,0 @@
-@forward 'pi-02-full-width-layout';
-@forward 'pi-02a-full-width-auto-layout';
-@forward 'pi-03-vertically-centered-layout';
-@forward 'pi-06-edge-to-edge-layout';
-@forward 'pi-06b-edge-to-edge-home-users-layout';
-@forward 'pi-07-list-layout';
-@forward 'pi-container-layout';
-@forward 'pi-layout';

libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss

@@ -1,103 +0,0 @@
-@mixin thankYouScreenHeader($device: mobile) {
-  .pi-website-screen {
-    &.pi-website-screen__00-type-thank-you {
-      & > header {
-        display: block;
-        width: -webkit-fill-available;
-        padding-top: calc(
-          var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})
-        );
-      }
-    }
-  }
-}
-
-.pi-website-screen {
-  &.pi-website-screen__00-type-thank-you {
-    justify-content: space-evenly !important;
-
-    & > *:nth-child(n + 1) {
-      text-align: center;
-    }
-    & > picture {
-      & > main {
-        display: grid;
-        height: 100%;
-
-        @for $i from 1 through 2 {
-          & > *:nth-child(#{$i}) {
-            grid-area: item#{$i};
-            align-self: center;
-            height: fit-content;
-          }
-        }
-      }
-    }
-  }
-}
-@mixin thankYouScreenMain(
-  $cols: 4,
-  $rows: 6,
-  $areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
-    '. . item2 item2' '. . item2 item2',
-  $min-height: 50
-) {
-  .pi-website-screen {
-    &.pi-website-screen__00-type-thank-you {
-      & > picture {
-        & > main {
-          grid-template-columns: repeat(#{$cols}, 1fr);
-          grid-template-rows: repeat(#{$rows}, 1fr);
-          grid-template-areas: $areas;
-          min-height: #{$min-height}vh;
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include thankYouScreenMain;
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small devices
-    @media screen and (max-width: 62rem) {
-      @include thankYouScreenHeader;
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    @include thankYouScreenMain(
-      6,
-      6,
-      '. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
-        '. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
-        '. . . . . .',
-      50
-    );
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large devices
-    @media screen and (min-width: 62rem) {
-      @include thankYouScreenHeader(desktop);
-    }
-  }
-
-  &.is-desktop {
-    @include thankYouScreenMain(
-      12,
-      6,
-      '. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
-        '. . item1 item1 item1 . . . . . . .'
-        '. . item1 item1 item1 . . item2 item2 item2 . .'
-        '. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
-      50
-    );
-  }
-}

libs/ui/src/lib/styles/deale-website/screens/index.scss

@@ -1 +0,0 @@
-@forward 'pi-00-thank-you-screen';

libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss

@@ -1,197 +0,0 @@
-@mixin websiteFooterTop($flex-direction: column) {
-  .pi-website-footer {
-    & > footer {
-      flex-direction: $flex-direction;
-    }
-  }
-}
-
-@mixin websiteFooterBottom($flex-direction: column-reverse) {
-  .pi-website-footer {
-    & > aside {
-      flex-direction: $flex-direction;
-    }
-  }
-}
-
-@mixin websiteFooterTopLeft(
-  $flex-direction: column,
-  $width: 100%,
-  $justify-right: flex-start
-) {
-  .pi-website-footer-content__top-left {
-    flex-direction: $flex-direction;
-    width: $width;
-    & > section {
-      justify-content: $justify-right;
-    }
-  }
-}
-
-@mixin websiteFooterTopRight($columns: 2, $width: 100%) {
-  .pi-website-footer-content__top-right {
-    grid-template-columns: repeat($columns, 1fr);
-    width: $width;
-  }
-}
-
-@mixin websiteFooterBottomLeft($text-align: flex-start) {
-  .pi-website-footer-content__bottom-left {
-    text-align: $text-align;
-  }
-}
-
-@mixin websiteFooterBottomRight() {
-  .pi-website-footer-content__bottom-right {
-  }
-}
-
-@mixin websiteFooterGap($gap: var(--pi-spacing-x-large)) {
-  .pi-website-footer {
-    gap: $gap;
-    & > footer,
-    & > aside {
-      gap: $gap;
-    }
-    & > footer {
-      & > .pi-website-footer-content {
-        &.pi-website-footer-content__top-right {
-          gap: $gap;
-        }
-      }
-    }
-  }
-}
-
-@mixin websiteFooterWidth($width: calc(100% - var(--pi-spacing-xx-large))) {
-  .pi-website-footer {
-    & > *:nth-child(n + 2) {
-      width: $width;
-      margin: 0 auto;
-    }
-  }
-}
-
-.pi-website-footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-
-  width: -webkit-fill-available;
-  background-color: var(--pi-color-grey-25);
-
-  // divider
-  & > span {
-    width: 100%;
-    height: 4.25rem;
-    left: 0px;
-    background: linear-gradient(
-      to right bottom,
-      var(--pi-color-white) 49%,
-      var(--pi-color-grey-25) 50%
-    );
-  }
-
-  & > footer,
-  & > aside {
-    display: flex;
-    padding: var(--pi-spacing-xx-large);
-  }
-  & > footer {
-    & > .pi-website-footer-content {
-      gap: var(--pi-spacing-small);
-
-      &.pi-website-footer-content__top-left {
-        display: flex;
-        justify-content: space-between;
-        .pi-headline {
-          & > figure {
-            max-width: 5.625rem;
-          }
-        }
-      }
-
-      &.pi-website-footer-content__top-right {
-        margin: 0 auto;
-        display: grid;
-
-        .pi-menu {
-          & > nav {
-            display: flex;
-            flex-direction: column;
-            gap: var(--pi-spacing-small);
-
-            & > .pi-menu-event-item:first-child {
-              margin-bottom: var(--pi-spacing-small);
-              font: {
-                weight: 600;
-              }
-            }
-            & > :nth-child(n + 2) {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-  }
-  & > aside {
-    align-items: center;
-    justify-content: space-between;
-    max-height: 12.5625rem;
-    border-top: 1px solid var(--pi-color-grey-100);
-    padding: var(--pi-spacing-x-large);
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include websiteFooterBottom;
-    @include websiteFooterBottomLeft(center);
-    @include websiteFooterGap;
-    @include websiteFooterTopLeft;
-    @include websiteFooterTopRight;
-    @include websiteFooterWidth;
-  }
-  // Tablet
-  &.is-tablet {
-    @include websiteFooterWidth(calc(100% - 3rem));
-    // Tablet S
-    @media screen and (max-width: 62rem) {
-      @include websiteFooterTopLeft(row, 100%, flex-end);
-      @include websiteFooterTopRight(3);
-    }
-    // Tablet L
-    @media screen and (min-width: 62rem) {
-      @include websiteFooterTopLeft(column, 25%);
-      @include websiteFooterTopRight(3, 75%);
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Large device
-    @media screen and (max-width: 62rem) {
-      @include websiteFooterTop;
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    @include websiteFooterBottom(row);
-    @include websiteFooterGap(var(--pi-spacing-xxxx-large));
-  }
-  // Desktop
-  &.is-desktop {
-    @include websiteFooterTop(row);
-    @include websiteFooterTopLeft(column, 25%);
-    @include websiteFooterTopRight(3, 75%);
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include websiteFooterWidth(var(--pi-public-width-container));
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include websiteFooterWidth(var(--pi-public-width-container-l));
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss

@@ -1,36 +0,0 @@
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-shell {
-        &.pi-shell__deale-website {
-          display: block;
-          max-width: 100vw;
-          overflow-x: hidden;
-          & > div {
-            &.is-menu-open {
-              position: fixed;
-
-              &::after {
-                content: '';
-                position: fixed;
-                z-index: 9;
-                height: 100vh;
-                width: 100%;
-                top: 0;
-                left: 0;
-                background-color: rgba($color: #0d2a6b, $alpha: 0.5);
-              }
-              .pi-container-layout {
-                & > .is-fixed {
-                  display: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss

@@ -1,482 +0,0 @@
-@keyframes gradient {
-  0% {
-    background-position: 0%;
-  }
-  25% {
-    background-position: 25%;
-  }
-  50% {
-    background-position: 50%;
-  }
-  75% {
-    background-position: 75%;
-  }
-  100% {
-    background-position: 100%;
-  }
-}
-
-@mixin parentMenuItemColorLargeDevice($color, $border-color, $text-gradient) {
-  &:hover {
-    color: $color;
-    background: $border-color;
-    background-color: rgba($color: white, $alpha: 0.33);
-    animation: gradient 1.5s linear infinite;
-    animation-direction: alternate-reverse;
-    background-size: 150% 300%;
-    border: 0.0625rem solid transparent;
-
-    &::before {
-      background-color: rgba($color: white, $alpha: 0.0125);
-    }
-    & > span {
-      & > span {
-        background-image: $text-gradient;
-      }
-    }
-  }
-}
-
-// Mode light
-@mixin topbarActionButtonLargeDeviceModeLight {
-  .pi-website-topbar-content {
-    &.pi-website-topbar-content__right {
-      // Login
-      .pi-button__action {
-        &.pi-button__type--menu-item {
-          box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
-          & > span {
-            & > span {
-              background-color: var(--pi-color-white);
-            }
-          }
-
-          &::before {
-            background-color: rgba($color: white, $alpha: 0.0125);
-          }
-
-          background-color: var(--pi-color-white);
-          border-color: var(--pi-color-primary);
-          & > svg {
-            color: var(--pi-color-highlighted);
-          }
-          & > span {
-            background-image: linear-gradient(
-              30deg,
-              var(--pi-color-highlighted),
-              var(--pi-color-highlighted-900)
-            );
-          }
-        }
-      }
-    }
-  }
-}
-@mixin topbarParentMenuItemLargeDeviceModeLight {
-  .pi-menu {
-    .pi-menu-event-item {
-      box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
-      & > span {
-        & > span {
-          background-color: var(--pi-color-white);
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemNotHoverColorModeLight {
-  &:not(:hover) {
-    border-color: rgba($color: white, $alpha: 0.66);
-    background-color: rgba($color: white, $alpha: 0.15);
-  }
-}
-
-@mixin parentMenuItemColorLargeDeviceModeLight {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      .pi-menu {
-        &.pi-menu__parent {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Company
-              &:nth-child(1) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-primary),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-primary-200),
-                        var(--pi-color-primary)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-primary),
-                    var(--pi-color-primary-900)
-                  )
-                );
-              }
-              // Investor
-              &:nth-child(2) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-accent),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-accent-200),
-                        var(--pi-color-accent)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-accent),
-                    var(--pi-color-accent-900)
-                  )
-                );
-              }
-              // Advisor
-              &:nth-child(3) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.5),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-              @include parentMenuItemNotHoverColorModeLight;
-            }
-          }
-        }
-      }
-    }
-    // Right
-    &.pi-website-topbar-content__right {
-      .pi-menu {
-        &:not(.pi-menu__children) {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Prices
-              &:nth-of-type(1) {
-                @include parentMenuItemNotHoverColorModeLight;
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.95),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-            }
-          }
-        }
-      }
-      // Login
-      .pi-button__action {
-        @include parentMenuItemColorLargeDevice(
-          var(--pi-color-highlighted),
-          (
-            linear-gradient(
-                rgba($color: white, $alpha: 0.95),
-                rgba($color: white, $alpha: 1)
-              )
-              padding-box,
-            linear-gradient(
-                to right,
-                var(--pi-color-highlighted-200),
-                var(--pi-color-highlighted)
-              )
-              border-box
-          ),
-          linear-gradient(
-            30deg,
-            var(--pi-color-highlighted),
-            var(--pi-color-highlighted-900)
-          )
-        );
-      }
-    }
-  }
-}
-
-// Mode dark
-@mixin topbarActionButtonLargeDeviceModeDark {
-  .pi-website-topbar-content {
-    &.pi-website-topbar-content__right {
-      // Login
-      .pi-button__action {
-        box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
-        & > span {
-          background-image: linear-gradient(
-            30deg,
-            var(--pi-color-white),
-            var(--pi-color-white)
-          );
-          & > span {
-            background-color: var(--pi-color-highlighted);
-          }
-        }
-
-        &::before {
-          background-color: rgba($color: #0d2a6b, $alpha: 0.0125);
-        }
-
-        background-color: var(--pi-color-highlighted);
-        border-color: var(--pi-color-highlighted);
-        & > svg {
-          color: var(--pi-color-white);
-        }
-        &:hover {
-          & > span {
-            background-image: linear-gradient(
-              30deg,
-              var(--pi-color-highlighted),
-              var(--pi-color-highlighted)
-            );
-            & > span {
-              background-color: var(--pi-color-highlighted-100);
-            }
-          }
-          & > svg {
-            color: var(--pi-color-highlighted);
-          }
-        }
-      }
-    }
-  }
-}
-@mixin topbarParentMenuItemLargeDeviceModeDark {
-  .pi-menu {
-    .pi-menu-event-item {
-      box-shadow: 0 0 0 0 rgba($color: #3d3d3d, $alpha: 0.26);
-      & > span {
-        & > span {
-          background-color: var(--pi-color-grey);
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemNotHoverColorModeDark {
-  &:not(:hover) {
-    border-color: rgba($color: #3d3d3d, $alpha: 0.36);
-    background-color: rgba($color: white, $alpha: 0.44);
-  }
-}
-
-@mixin parentMenuItemColorLargeDeviceModeDark {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      .pi-menu {
-        &.pi-menu__parent {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Company
-              &:nth-child(1) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-primary),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-primary-75),
-                        var(--pi-color-primary-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-primary),
-                    var(--pi-color-primary-900)
-                  )
-                );
-              }
-              // Investor
-              &:nth-child(2) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-accent),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-accent-100),
-                        var(--pi-color-accent-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-accent),
-                    var(--pi-color-accent-900)
-                  )
-                );
-              }
-              // Advisor
-              &:nth-child(3) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.5),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-100),
-                        var(--pi-color-highlighted-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-              @include parentMenuItemNotHoverColorModeDark;
-            }
-          }
-        }
-      }
-    }
-    // Right
-    &.pi-website-topbar-content__right {
-      .pi-menu {
-        &:not(.pi-menu__children) {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Prices
-              &:nth-of-type(1) {
-                @include parentMenuItemNotHoverColorModeDark;
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.95),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-            }
-          }
-        }
-      }
-      // Login
-      .pi-button__action {
-        @include parentMenuItemColorLargeDevice(
-          var(--pi-color-highlighted),
-          (
-            linear-gradient(
-                rgba($color: white, $alpha: 0.95),
-                rgba($color: white, $alpha: 1)
-              )
-              padding-box,
-            linear-gradient(
-                to right,
-                var(--pi-color-highlighted-200),
-                var(--pi-color-highlighted)
-              )
-              border-box
-          ),
-          linear-gradient(
-            30deg,
-            var(--pi-color-highlighted),
-            var(--pi-color-highlighted-900)
-          )
-        );
-      }
-    }
-  }
-}
-
-html {
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      // Topbar
-      .pi-website-topbar {
-        // Mode light (White menu)
-        &:not(.is-mode-dark) {
-          @include parentMenuItemColorLargeDeviceModeLight;
-          @include topbarParentMenuItemLargeDeviceModeLight;
-          @include topbarActionButtonLargeDeviceModeLight;
-        }
-
-        // Mode dark
-        &.is-mode-dark {
-          @include parentMenuItemColorLargeDeviceModeDark;
-          @include topbarParentMenuItemLargeDeviceModeDark;
-          @include topbarActionButtonLargeDeviceModeDark;
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss

@@ -1,518 +0,0 @@
-@keyframes pulse {
-  to {
-    box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent;
-  }
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0%;
-  }
-  25% {
-    background-position: 25%;
-  }
-  50% {
-    background-position: 50%;
-  }
-  75% {
-    background-position: 75%;
-  }
-  100% {
-    background-position: 100%;
-  }
-}
-
-@mixin topbarParentMenuItemLargeDevice {
-  border: 0.0625rem solid;
-  border-radius: var(--pi-border-radius-medium);
-  transition: 0.4s all ease-in-out;
-  animation: pulse 1.5s infinite 2s ease-in;
-  &:hover {
-    cursor: pointer;
-    animation: unset;
-    &::before {
-      height: 2.75rem;
-      width: 6rem;
-      margin-top: -0.125rem;
-      margin-left: -0.125rem;
-      opacity: 1;
-      filter: blur(0.1rem);
-    }
-  }
-  &::before {
-    content: '';
-    position: absolute;
-    transition: all 0.3s ease;
-    border-radius: 0.75rem;
-    opacity: 0;
-    height: 0;
-    width: 0;
-    margin-top: 1.1875rem;
-    margin-left: 2.8125rem;
-  }
-  & > span {
-    & > span {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 2.25rem;
-      width: 6rem;
-      padding-bottom: 0.05rem;
-      background-size: 100%;
-      background-repeat: repeat;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      -moz-background-clip: text;
-      -moz-text-fill-color: transparent;
-      transition: all 0.45s ease-Out;
-
-      font: {
-        weight: 400;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildMenu(
-  $margin-left,
-  $background-color,
-  $grid-template-columns: repeat(2, 1fr)
-) {
-  // Menu item
-  .pi-menu__children {
-    z-index: 99;
-    position: absolute;
-    margin-top: var(--pi-spacing-large);
-    margin-left: $margin-left;
-    border-radius: var(--pi-border-radius-large);
-    background-color: var(--pi-color-white);
-    box-shadow: var(--pi-box-shadow-double);
-    & > div {
-      display: grid;
-      grid-template-columns: $grid-template-columns;
-      gap: var(--pi-spacing-medium);
-    }
-
-    & > aside {
-      background-color: $background-color;
-    }
-
-    // Submenu entry
-    .pi-list-item {
-      min-width: 15.625rem;
-      &:not(:hover) {
-        .pi-list-item-content {
-          &.pi-list-item-content__left {
-            & > span {
-              //
-              &:nth-child(1) {
-                color: var(--pi-color-black);
-              }
-              &:nth-child(2) {
-                color: var(--pi-color-grey-300);
-              }
-            }
-          }
-        }
-      }
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildMenuItemColor($background-color) {
-  // Submenu entry
-  .pi-list-item {
-    &:hover {
-      background-color: $background-color;
-    }
-  }
-}
-// Small device
-@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      height: $topbar-center-content-height;
-      min-height: $topbar-center-content-height;
-      overflow: auto;
-
-      // Generic Scroll
-      &::-webkit-scrollbar {
-        width: var(--pi-spacing-xxx-small);
-      }
-
-      &::-webkit-scrollbar-track {
-        box-shadow: none;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: var(--pi-border-radius-small);
-        background-color: var(--pi-color-grey-75);
-
-        &:hover {
-          background-color: var(--pi-color-grey-100);
-          transition: var(--pi-animation);
-        }
-      }
-    }
-  }
-}
-
-@mixin smallDeviceMenuColor($border-color, $color) {
-  & > span {
-    border-color: $border-color;
-    & > span {
-      color: $color;
-    }
-  }
-}
-
-.pi-website-footer-content {
-  &.pi-website-footer-content__top-right {
-    .pi-menu-event-item {
-      &:nth-child(2) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-primary);
-          }
-        }
-      }
-      &:nth-child(3) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-accent);
-          }
-        }
-      }
-      &:nth-child(4) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-highlighted);
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include smallDevieMenuSize;
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-website-topbar-content {
-        // Center
-        &.pi-website-topbar-content__center {
-          .pi-menu {
-            // Parent
-            &.pi-menu__parent {
-              & > nav {
-                display: flex;
-                flex-direction: column;
-                gap: var(--pi-spacing-xx-large);
-                padding-bottom: var(--pi-spacing-xx-large);
-                .pi-menu-event-item {
-                  &.has-children {
-                    & > span {
-                      display: flex;
-                      width: -webkit-fill-available;
-                      border-bottom: 1px solid;
-                      padding-bottom: var(--pi-spacing-xxx-small);
-
-                      & > span {
-                        padding-left: var(--pi-spacing-xx-small);
-                        font: {
-                          size: var(--pi-font-size-x-small);
-                        }
-                      }
-                    }
-                    // Company
-                    &:nth-child(1) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-primary-100),
-                        var(--pi-color-primary)
-                      );
-                    }
-                    // Investor
-                    &:nth-child(2) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-accent-100),
-                        var(--pi-color-accent)
-                      );
-                    }
-                    // Advisor
-                    &:nth-child(3) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-highlighted-100),
-                        var(--pi-color-highlighted)
-                      );
-                    }
-                  }
-                }
-              }
-            }
-
-            // Children
-            &.pi-menu__children {
-              .pi-list-item {
-                padding-top: var(--pi-spacing-small);
-                padding-bottom: var(--pi-spacing-small);
-                &:nth-child(n + 2) {
-                  padding-left: var(--pi-spacing-x-large);
-                  .pi-list-item-content {
-                    &.pi-list-item-content__left {
-                      & > span {
-                        &:nth-child(1) {
-                          color: var(--pi-color-grey);
-                          font: {
-                            weight: 600;
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              .pi-list-item-content {
-                &.pi-list-item-content__left {
-                  & > span {
-                    &:nth-child(2) {
-                      color: var(--pi-color-grey-300);
-                      font: {
-                        size: var(--pi-font-size-x-small);
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__small {
-      @include smallDevieMenuSize(calc(100vh - 11.5rem));
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-website {
-        // Topbar
-        .pi-website-topbar {
-          .pi-menu {
-            .pi-menu-event-item {
-              @include topbarParentMenuItemLargeDevice;
-            }
-            // Parent
-            &.pi-menu__parent {
-              & > nav {
-                display: flex;
-                gap: var(--pi-spacing-medium);
-              }
-              .pi-menu-event-item {
-                &.has-children {
-                  &:not(.is-selected) {
-                    .pi-menu__children {
-                      opacity: 0;
-                      transform: scale(0);
-                    }
-                  }
-                  &.is-selected {
-                    .pi-menu__children {
-                      opacity: 1;
-                      transform: scale(1);
-                    }
-                  }
-                }
-              }
-            }
-
-            // Child
-            &.pi-menu__children {
-              & > div,
-              & > aside {
-                // Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-              // Child menu
-              & > div {
-                padding: var(--pi-spacing-medium);
-                border-radius: var(--pi-border-radius-large)
-                  var(--pi-border-radius-large) 0 0;
-                // Child Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-              // Aside menu
-              & > aside {
-                display: flex;
-                justify-content: space-between;
-
-                width: 100%;
-                padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
-                  var(--pi-spacing-medium);
-                border-radius: 0 0 var(--pi-border-radius-large)
-                  var(--pi-border-radius-large);
-                // Aside Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-            }
-          }
-
-          .pi-website-topbar-content {
-            // Center
-            &.pi-website-topbar-content__center {
-              .pi-menu {
-                &.pi-menu__parent {
-                  & > nav {
-                    & > .pi-menu-event-item {
-                      // Company
-                      &:nth-child(1) {
-                        @include largeDeviceChildMenu(
-                          -18.75rem,
-                          var(--pi-color-primary-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-primary-25)
-                        );
-                      }
-                      // Investor
-                      &:nth-child(2) {
-                        @include largeDeviceChildMenu(
-                          -14.125rem,
-                          var(--pi-color-accent-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-accent-25)
-                        );
-                      }
-                      // Advisor
-                      &:nth-child(3) {
-                        @include largeDeviceChildMenu(
-                          -14.625rem,
-                          var(--pi-color-highlighted-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-highlighted-25)
-                        );
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            // Right
-            &.pi-website-topbar-content__right {
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              gap: var(--pi-spacing-medium);
-              @include largeDeviceChildMenu(-100px, unset, 1fr);
-              .pi-menu {
-                &:not(.pi-menu__children) {
-                  & > nav {
-                    & > .pi-menu-event-item {
-                      @include topbarParentMenuItemLargeDevice;
-
-                      // Prices
-                      &:nth-of-type(1) {
-                        .pi-menu__children {
-                          & > div {
-                            .pi-list-item {
-                              &:hover {
-                                // Company Pricing
-                                &:nth-child(1) {
-                                  color: var(--pi-color-primary);
-                                  background-color: var(--pi-color-primary-25);
-                                }
-                                // Investor Pricing
-                                &:nth-child(2) {
-                                  color: var(--pi-color-accent);
-                                  background-color: var(--pi-color-accent-25);
-                                }
-                                // Advisor Pricing
-                                &:nth-child(3) {
-                                  color: var(--pi-color-highlighted);
-                                  background-color: var(
-                                    --pi-color-highlighted-25
-                                  );
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              // Login
-              .pi-button__type--menu-item {
-                &.pi-button__action {
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  height: 2.25rem;
-                  width: 7rem;
-                  border-radius: var(--pi-border-radius-medium);
-
-                  @include topbarParentMenuItemLargeDevice;
-                  & > span {
-                    padding-bottom: 0.1875rem;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                    -moz-background-clip: text;
-                    -moz-text-fill-color: transparent;
-
-                    font: {
-                      weight: 400;
-                    }
-                  }
-
-                  position: relative;
-                  transition: all 0.45s ease-Out;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // LargeDevice
-  &.is-desktop {
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss

@@ -1,334 +0,0 @@
-@mixin topbarCommonSizes(
-  $height: var(--pi-public-height-header-mobile),
-  $max-width: calc(100% - var(--pi-spacing-xx-large)),
-  $small-size: -webkit-fill-available,
-  $large-size: calc(100% - var(--pi-spacing-xxx-small))
-) {
-  .pi-website-topbar {
-    & > header {
-      height: $height;
-      max-width: $max-width;
-      margin: 0 auto;
-
-      .pi-website-topbar-content {
-        // Left
-        &.pi-website-topbar-content__left {
-          width: $small-size;
-        }
-        // Center
-        &.pi-website-topbar-content__center {
-          width: $large-size;
-        }
-        // Right
-        &.pi-website-topbar-content__right {
-          width: $small-size;
-        }
-      }
-    }
-  }
-}
-
-@mixin logoSize($max-width: 7.125rem) {
-  .pi-website-topbar {
-    .pi-website-topbar-content {
-      &.pi-website-topbar-content__left {
-        & > .pi-headline {
-          max-width: $max-width;
-          &:hover {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
-// Topbar menu is closed
-@mixin smallDeviceTopbarMenuIsClosed {
-  .pi-shell {
-    &.pi-shell__deale-website {
-      & > div {
-        // Is Open
-        &:not(.is-menu-open) {
-          .pi-website-topbar {
-            top: 0;
-            left: 0;
-            height: var(--pi-public-height-header-mobile);
-            width: -webkit-fill-available;
-            padding: 0;
-            border-radius: var(--pi-border-radius-large);
-            .pi-website-topbar-content {
-              // Center
-              &.pi-website-topbar-content__center {
-                transform: scale(0);
-                opacity: 0;
-              }
-              // Right
-              &.pi-website-topbar-content__right {
-                display: flex;
-                flex-direction: row-reverse;
-                gap: var(--pi-spacing-x-small);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Ope topbar menu
-@mixin smallDeviceTopbarMenuIsOpen(
-  $side-spacing: var(--pi-spacing-medium),
-  $height: calc(100vh - var(--pi-spacing-xx-large)),
-  $width: calc(100% - var(--pi-spacing-xx-large))
-) {
-  .pi-shell {
-    &.pi-shell__deale-website {
-      & > div {
-        // Is Open
-        &.is-menu-open {
-          .pi-website-topbar {
-            position: fixed;
-            top: $side-spacing;
-            left: $side-spacing;
-            z-index: 99;
-            height: $height;
-            width: $width;
-            border-radius: var(--pi-border-radius-large);
-            background-color: var(--pi-color-white);
-            box-shadow: var(--pi-box-shadow-double);
-
-            .pi-close-button {
-              position: absolute;
-              top: var(--pi-spacing-large);
-              right: var(--pi-spacing-x-large);
-            }
-            & > header {
-              flex-direction: column;
-              gap: var(--pi-spacing-xxxx-small);
-            }
-            .pi-website-topbar-content {
-              padding-left: calc(
-                var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-              padding-right: calc(
-                var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-              // Left (=== top)
-              &.pi-website-topbar-content__left {
-                padding-top: var(--pi-spacing-large);
-                padding-bottom: var(--pi-spacing-large);
-              }
-              // Center
-              &.pi-website-topbar-content__center {
-                width: calc(100% - var(--pi-spacing-xx-small));
-                margin: 0 auto;
-                transform: scale(1);
-                opacity: 1;
-              }
-              // Right (=== bottom)
-              &.pi-website-topbar-content__right {
-                padding-bottom: var(--pi-spacing-large);
-                .pi-button__action {
-                  &.pi-button__type--menu-item {
-                    height: var(--pi-spacing-xxx-large);
-                    min-width: var(--pi-spacing-xxx-large);
-                    width: -webkit-fill-available;
-                    border-radius: var(--pi-border-radius-medium);
-                    -webkit-border-radius: var(--pi-border-radius-medium);
-                    -moz-border-radius: var(--pi-border-radius-medium);
-                    color: var(--pi-color-white);
-                    background-image: var(--pi-gradient-primary-dark);
-                    font: {
-                      weight: 400;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-website-topbar {
-  position: absolute;
-  z-index: 99;
-  width: -webkit-fill-available;
-  background-color: transparent;
-  & > header {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.pi-shell {
-  &.pi-shell__deale-website {
-    & > div {
-      // Is Closed
-      &:not(.is-menu-open) {
-        width: -webkit-fill-available;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include smallDeviceTopbarMenuIsOpen;
-    .pi-shell {
-      &.pi-shell__deale-website {
-        & > div {
-          // Is Closed
-          &:not(.is-menu-open) {
-            @include logoSize;
-            @include topbarCommonSizes;
-          }
-          // Is Open
-          &.is-menu-open {
-            @include logoSize(6.625rem);
-            @include topbarCommonSizes(
-              var(--pi-public-height-header-mobile),
-              -webkit-fill-available
-            );
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      @include smallDeviceTopbarMenuIsOpen(
-        var(--pi-spacing-x-large),
-        calc(100vh - 3rem),
-        calc(100% - 3rem)
-      );
-      .pi-shell {
-        &.pi-shell__deale-website {
-          & > div {
-            // Is Closed
-            &:not(.is-menu-open) {
-              @include logoSize(7.5rem);
-              @include topbarCommonSizes(
-                var(--pi-public-height-header-mobile),
-                calc(100% - 3rem)
-              );
-            }
-
-            // Is Open
-            &.is-menu-open {
-              @include logoSize(7.125rem);
-              @include topbarCommonSizes(
-                var(--pi-public-height-header-mobile),
-                -webkit-fill-available
-              );
-            }
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-mobile),
-        calc(100% - 3rem)
-      );
-      @include logoSize(8.4375rem);
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      // Closded menu has equal properties for Mobile & Tablet S
-      @include smallDeviceTopbarMenuIsClosed;
-      .pi-shell {
-        &.pi-shell__deale-website {
-          .pi-website-topbar {
-            & > header {
-              align-items: center;
-            }
-          }
-
-          // Override right content buttons
-          button {
-            &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-                .pi-button__toggle
-              ):not(.pi-button__type--menu-item).pi-color__white {
-              border-color: var(--pi-color-primary-100);
-              background-color: rgba(255, 255, 255, 0.7);
-              background-image: unset;
-              &:hover {
-                border-color: var(--pi-color-primary-200);
-                background-color: rgba(255, 255, 255, 0.9);
-                .mat-icon {
-                  color: var(--pi-color-primary);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large Device
-    @media screen and (min-width: 62rem) {
-      .pi-website-topbar {
-        & > header {
-          align-items: flex-end;
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-website-topbar-content {
-      display: flex;
-      // Center
-      &.pi-website-topbar-content__center {
-        justify-content: center;
-      }
-      // Right
-      &.pi-website-topbar-content__right {
-        justify-content: flex-end;
-      }
-    }
-    @include logoSize(8.75rem);
-    // Desktop S
-    &.is-desktop__small {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container),
-        30%,
-        40%
-      );
-    }
-
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container),
-        30%,
-        40%
-      );
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container-l),
-        30%,
-        40%
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/index.scss

@@ -1,5 +0,0 @@
-@forward 'pi-footer';
-@forward 'pi-main';
-@forward 'pi-menu';
-@forward 'pi-menu-theming';
-@forward 'pi-topbar';

libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss

@@ -1,62 +0,0 @@
-.pi-shell__deale-website {
-  .pi-wrapper {
-    &.pi-wrapper__form {
-      // Vertically behavior
-      & > form {
-        & > fieldset {
-          & > label {
-            &.pi-text__size--x-small {
-              padding-left: var(--pi-spacing-x-small);
-              padding-bottom: var(--pi-spacing-xxx-small);
-            }
-          }
-          .pi-panel {
-            margin-bottom: var(--pi-spacing-x-small);
-            border: 1px solid var(--pi-color-grey-75);
-          }
-        }
-      }
-      .pi-list-item + .pi-list-item {
-        margin-top: unset;
-      }
-    }
-  }
-  .pi-website-contact-form {
-    .pi-panel__padding--m {
-      padding: var(--pi-spacing-xx-small) var(--pi-spacing-medium);
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-shell__deale-website {
-      .pi-wrapper {
-        &.pi-wrapper__form {
-          // Vertically behavior
-          & > form {
-            & > *:nth-child(n + 2) {
-              margin-top: var(--pi-spacing-large);
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    .pi-shell__deale-website {
-      .pi-wrapper {
-        &.pi-wrapper__form {
-          // Vertically behavior
-          & > form {
-            & > *:nth-child(n + 2) {
-              margin-top: var(--pi-spacing-xxx-small);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss

@@ -1,11 +0,0 @@
-.pi-wrapper {
-  // Header Wrapper
-  &.pi-wrapper__header {
-    // Flex direction
-    &.pi-wrapper__flex-direction--column {
-      .pi-header-wrapper-content {
-        gap: var(--pi-spacing-medium);
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss

@@ -1,32 +0,0 @@
-@mixin dealeWebsiteWrapperMaxWidth(
-  $max-width: calc(100% - var(--pi-spacing-xx-large))
-) {
-  .pi-shell__deale-website {
-    .pi-wrapper {
-      // Max width
-      &.pi-wrapper__full-width,
-      &.pi-wrapper__full-width-centered {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include dealeWebsiteWrapperMaxWidth;
-  }
-  &.is-tablet {
-    @include dealeWebsiteWrapperMaxWidth(calc(100% - 3rem));
-  }
-  &.is-desktop {
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container));
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container-l));
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/index.scss

@@ -1,3 +0,0 @@
-@forward 'pi-form-wrapper';
-@forward 'pi-header-wrapper';
-@forward 'pi-wrapper';

libs/ui/src/lib/styles/themes/_alternative.scss

@@ -0,0 +1,103 @@
+// TEMA ALTERNATIVO
+//
+// Demuestra hasta dónde llega el theming: no duplica ni un selector de
+// componente, solo redefine tokens. Todo lo que cambia aquí (paleta, formas,
+// tipografía de los controles, superficies) se propaga solo porque los
+// componentes de `common/` consumen `--pi-color-*` y `--pi-theme-*`.
+//
+// Se dejan intactos `warn` y `success`: son colores semánticos (error / éxito)
+// y cambiarlos perjudicaría la lectura del estado.
+
+@mixin alternativeThemeTokens {
+  // --- Paleta de marca --------------------------------------------------
+  // Primary: azul -> violeta
+  --pi-color-primary-10: #fdfcff;
+  --pi-color-primary-25: #fbf9ff;
+  --pi-color-primary-50: #f4f0ff;
+  --pi-color-primary-75: #ede6ff;
+  --pi-color-primary-100: #ded1fb;
+  --pi-color-primary-200: #cbb8ff;
+  --pi-color-primary-200-rgba: rgba(203, 184, 255, 0.15);
+  --pi-color-primary-300: #b096ff;
+  --pi-color-primary-400: #9b7cf2;
+  --pi-color-primary: #8a63f0;
+  --pi-color-primary-900: #6a3fd4;
+
+  // Accent: ámbar -> turquesa
+  --pi-color-accent-10: #f7fefd;
+  --pi-color-accent-25: #edfcfa;
+  --pi-color-accent-50: #e0f7f4;
+  --pi-color-accent-75: #c4efe9;
+  --pi-color-accent-100: #a9e7de;
+  --pi-color-accent-200: #7dd9cc;
+  --pi-color-accent-200-rgba: rgba(125, 217, 204, 0.15);
+  --pi-color-accent-300: #4ec9b8;
+  --pi-color-accent-400: #2fbda9;
+  --pi-color-accent: #14b09a;
+  --pi-color-accent-900: #0d8f7e;
+
+  // Highlighted: azul marino -> ciruela
+  --pi-color-highlighted-10: #fdf9ff;
+  --pi-color-highlighted-25: #faf2ff;
+  --pi-color-highlighted-50: #f5e9ff;
+  --pi-color-highlighted-75: #ecdaff;
+  --pi-color-highlighted-100: #dcbcfa;
+  --pi-color-highlighted-200: #9a64d7;
+  --pi-color-highlighted-200-rgba: rgba(154, 100, 215, 0.15);
+  --pi-color-highlighted-300: #7d43c1;
+  --pi-color-highlighted-400: #521d8a;
+  --pi-color-highlighted: #3b0d6b;
+  --pi-color-highlighted-900: #1c033c;
+
+  // --- Botones: pastilla, degradado, versalitas -------------------------
+  --pi-theme-button-height: 2.875rem;
+  --pi-theme-button-radius: 999px;
+  --pi-theme-button-font-weight: 700;
+  --pi-theme-button-letter-spacing: 0.04em;
+  --pi-theme-button-text-transform: uppercase;
+  --pi-theme-button-shadow: 0 6px 16px -6px rgba(106, 63, 212, 0.55);
+  --pi-theme-button-transition: all 0.2s ease-out;
+  --pi-theme-button-fill-primary: linear-gradient(
+    100deg,
+    var(--pi-color-primary-900),
+    var(--pi-color-primary-400)
+  );
+  --pi-theme-button-fill-accent: linear-gradient(
+    100deg,
+    var(--pi-color-accent-900),
+    var(--pi-color-accent-400)
+  );
+  --pi-theme-button-fill-highlighted: linear-gradient(
+    100deg,
+    var(--pi-color-highlighted),
+    var(--pi-color-highlighted-300)
+  );
+
+  // --- Campos: superficie tintada, borde grueso, etiqueta en versalitas --
+  --pi-theme-field-radius: 999px;
+  --pi-theme-field-border-width: 2px;
+  --pi-theme-field-border-color: var(--pi-color-primary-100);
+  --pi-theme-field-border-color-hover: var(--pi-color-primary-300);
+  --pi-theme-field-border-color-focus: var(--pi-color-primary);
+  --pi-theme-field-surface: var(--pi-color-primary-25);
+  --pi-theme-field-label-color: var(--pi-color-primary-900);
+  --pi-theme-field-label-transform: uppercase;
+  --pi-theme-field-label-letter-spacing: 0.08em;
+  --pi-theme-field-label-weight: 700;
+
+  // --- Superficies ------------------------------------------------------
+  --pi-theme-card-radius: 1.5rem;
+  --pi-theme-card-shadow: 0 10px 30px -12px rgba(59, 13, 107, 0.28);
+  --pi-theme-panel-radius: 1.5rem;
+  --pi-theme-chip-radius: 0.25rem;
+}
+
+.pi-shell__alternative {
+  @include alternativeThemeTokens;
+}
+
+// Los overlays de Material se montan fuera del shell: se les propaga el tema
+// marcando el contenedor (lo hace la app al cambiar de tema).
+.cdk-overlay-container.pi-shell__alternative {
+  @include alternativeThemeTokens;
+}

libs/ui/src/lib/styles/themes/_default.scss

@@ -0,0 +1,75 @@
+// TEMA POR DEFECTO
+//
+// Este fichero es el *contrato* de theming de la librería: declara todos los
+// tokens `--pi-theme-*` que los componentes de `common/` consumen. Un tema
+// alternativo no necesita duplicar selectores: le basta con redefinir estos
+// tokens (ver `_alternative.scss`).
+//
+// Los valores viven en `.pi-shell` (no en `:root`) para que puedan convivir
+// varios temas en la misma página, y se repiten en `.cdk-overlay-container`
+// porque los overlays de Material (diálogos, snackbars, menús) se montan fuera
+// del árbol del shell y no heredarían nada.
+
+@mixin defaultThemeTokens {
+  // --- Botones ---------------------------------------------------------
+  --pi-theme-button-height: var(--pi-spacing-xxx-large);
+  --pi-theme-button-radius: var(--pi-border-radius-medium);
+  --pi-theme-button-font-weight: 600;
+  --pi-theme-button-letter-spacing: normal;
+  --pi-theme-button-text-transform: none;
+  --pi-theme-button-shadow: none;
+  --pi-theme-button-transition: background-color 0.16s ease-in;
+  // Superficie del relleno. Por defecto es plano (solo `background-color`);
+  // un tema puede inyectar aquí un degradado por color de marca.
+  --pi-theme-button-fill-primary: none;
+  --pi-theme-button-fill-accent: none;
+  --pi-theme-button-fill-warn: none;
+  --pi-theme-button-fill-success: none;
+  --pi-theme-button-fill-highlighted: none;
+
+  // --- Campos de formulario --------------------------------------------
+  --pi-theme-field-radius: 0.875rem;
+  --pi-theme-field-border-width: 1px;
+  --pi-theme-field-border-color: var(--pi-color-grey-200);
+  --pi-theme-field-border-color-hover: var(--pi-color-grey-300);
+  --pi-theme-field-border-color-focus: var(--pi-color-primary);
+  --pi-theme-field-surface: var(--pi-color-white);
+  --pi-theme-field-label-color: var(--pi-color-grey-300);
+  // La tipografía de la etiqueta y el radio del chip no se declaran: sus
+  // consumidores usan `var(--token, <valor original>)`, así el tema por
+  // defecto conserva exactamente el aspecto previo a los tokens.
+
+  // --- Superficies ------------------------------------------------------
+  --pi-theme-card-radius: var(--pi-border-radius-large);
+  --pi-theme-card-shadow: var(--pi-box-shadow-panel);
+  --pi-theme-panel-radius: var(--pi-border-radius-large);
+
+  // --- Puente con Angular Material --------------------------------------
+  // Los componentes de Material (slider, checkbox, radio, progress...) pintan
+  // con sus roles `--mat-sys-*`, que `mat.theme()` genera de una paleta propia
+  // y por tanto ignoran `--pi-color-*`. Aquí se reengancha una cosa con otra.
+  //
+  // Se define una sola vez, en el tema por defecto y por indirección
+  // (`var(--pi-color-*)`): como el tema alternativo redefine esas variables,
+  // Material le sigue solo, sin repetir este bloque.
+  --mat-sys-primary: var(--pi-color-primary);
+  --mat-sys-on-primary: var(--pi-color-white);
+  --mat-sys-primary-container: var(--pi-color-primary-100);
+  --mat-sys-on-primary-container: var(--pi-color-primary-900);
+  --mat-sys-secondary: var(--pi-color-accent);
+  --mat-sys-on-secondary: var(--pi-color-white);
+  --mat-sys-secondary-container: var(--pi-color-accent-100);
+  --mat-sys-on-secondary-container: var(--pi-color-accent-900);
+  --mat-sys-tertiary: var(--pi-color-highlighted);
+  --mat-sys-on-tertiary: var(--pi-color-white);
+  --mat-sys-error: var(--pi-color-warn);
+  --mat-sys-on-error: var(--pi-color-white);
+}
+
+// Base para *todos* los shells: así un tema solo tiene que declarar lo que
+// cambia, y lo que no redefina sigue teniendo valor (incluido el puente con
+// Material). Los temas concretos se aplican encima; ver `_alternative.scss`.
+.pi-shell,
+.cdk-overlay-container {
+  @include defaultThemeTokens;
+}

libs/ui/src/lib/styles/themes/index.scss

@@ -0,0 +1,7 @@
+// El orden importa: `default` declara el contrato completo de tokens y
+// `alternative` lo sobreescribe.
+@forward 'default';
+@forward 'alternative';
+
+@use 'default' as *;
+@use 'alternative' as *;

libs/ui/src/lib/ui/accordion/accordion/accordion.component.html

@@ -176,8 +176,8 @@
 
 <ng-template #defaultHeader let-item>
   <pi-text-viewer
-    [label]="item?.title"
+    [label]="item?.title()"
-    [value]="item?.subtitle"
+    [value]="item?.subtitle()"
     flexDirection="column"
     fontWeight="600-300"
     fontSize="m-xs"

libs/ui/src/lib/ui/button/icon-button/icon-button.component.html

@@ -23,7 +23,7 @@
     @if (text()) {
       <span>{{ text() }}</span>
     }
-    <ng-content></ng-content>
+    <span #projectedText><ng-content></ng-content></span>
     <img src="/assets/icons/{{ icon() }}.svg" />
   </button>
 } @else {
@@ -54,7 +54,7 @@
     @if (text()) {
       <span>{{ text() }}</span>
     }
-    <ng-content></ng-content>
+    <span #projectedText><ng-content></ng-content></span>
     @if (!previous()) {
       <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
     }

libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts

@@ -1,9 +1,11 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   HostBinding,
   input,
+  signal,
   viewChild,
 } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
@@ -18,7 +20,10 @@ import { MatIcon } from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatIcon],
 })
-export class PiIconButtonComponent extends PiBaseButtonComponent {
+export class PiIconButtonComponent
+  extends PiBaseButtonComponent
+  implements AfterViewInit
+{
   @HostBinding('class') get classes(): string {
     const customIconClass =
       this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
@@ -58,8 +63,27 @@ export class PiIconButtonComponent extends PiBaseButtonComponent {
     return width ? `pi-button__${width}` : null;
   }
 
+  /**
+   * La etiqueta se puede dar de dos formas: por el input `text` o proyectando
+   * contenido (`<pi-icon-button>Siguiente</pi-icon-button>`). La plantilla
+   * pinta ambas, pero esta clase solo miraba `text`, así que los consumidores
+   * que proyectan (el banner, el paginador) quedaban marcados como «solo
+   * icono» y el botón colapsaba al cuadrado del icono, partiendo el texto.
+   */
+  private readonly projectedText =
+    viewChild<ElementRef<HTMLElement>>('projectedText');
+
+  protected readonly hasProjectedText = signal(false);
+
+  ngAfterViewInit(): void {
+    const el = this.projectedText()?.nativeElement;
+    this.hasProjectedText.set(!!el?.textContent?.trim());
+  }
+
   get textClass(): string | null {
-    return this.text() ? 'has-text' : 'pi-button__icon--single';
+    return this.text() || this.hasProjectedText()
+      ? 'has-text'
+      : 'pi-button__icon--single';
   }
 
   get iconPositionClass(): string | null {

libs/ui/src/lib/ui/chip/styles/_size.scss

@@ -2,7 +2,7 @@
 @mixin chipSize($chip-height, $chip-border-radius) {
   &:not(.pi-chip-date):not(.pi-chip-value) {
     height: var(--pi-spacing-#{$chip-height});
-    border-radius: $chip-border-radius;
+    border-radius: var(--pi-theme-chip-radius, #{$chip-border-radius});
   }
 }
 
@@ -13,12 +13,12 @@
     &.pi-chip__single-icon {
       height: var(--pi-spacing-#{$chip-size});
       width: var(--pi-spacing-#{$chip-size});
-      border-radius: $border-radius;
+      border-radius: var(--pi-theme-chip-radius, #{$border-radius});
 
       .pi-chip-affix {
         height: var(--pi-spacing-#{$chip-size});
         width: var(--pi-spacing-#{$chip-size});
-        border-radius: $border-radius;
+        border-radius: var(--pi-theme-chip-radius, #{$border-radius});
         // Icon
         & > .pi-chip-affix__icon {
           height: var(--pi-spacing-#{$icon-size});
@@ -146,7 +146,7 @@
     &:not(.pi-chip__single-icon) {
       .pi-chip-affix {
         height: $size;
-        border-radius: $affix-border-radius;
+        border-radius: var(--pi-theme-chip-radius, #{$affix-border-radius});
       }
     }