@block-auth.io/angular 0.1.0

package/src/lib/icons/tb-copy.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/tb (TbCopy), espejo de
+// packages/vue/src/icons/TbCopy.vue (mismo `viewBox`/`d`, trazo en vez de
+// relleno: `fill="none"` + `stroke="currentColor"`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-tb-copy',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg
+      [class]="class()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path
+        d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"
+      />
+      <path
+        d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"
+      />
+    </svg>
+  `,
+})
+export class TbCopyComponent {
+  class = input('');
+}

package/src/lib/icons/ti-vendor-microsoft.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/ti (TiVendorMicrosoft), espejo de
+// packages/vue/src/icons/TiVendorMicrosoft.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-ti-vendor-microsoft',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path
+        d="M10 12.5c0-.3-.2-.5-.5-.5h-6c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.6l6 .7c.3 0 .5-.2.5-.4v-5.9zM11.5 12c-.3 0-.5.2-.5.5v5.9c0 .3.2.5.5.6l9 1c.3 0 .5-.2.5-.4v-7c0-.3-.2-.5-.5-.5l-9-.1zM10 4.7c0-.3-.2-.5-.5-.4l-6 .7c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5v-5.8zM11.5 4.1c-.3 0-.5.3-.5.6v5.9c0 .3.2.5.5.5h9c.3 0 .5-.2.5-.5v-7c0-.3-.2-.5-.5-.4l-9 .9z"
+      />
+    </svg>
+  `,
+})
+export class TiVendorMicrosoftComponent {
+  class = input('');
+}

package/src/lib/inject-store.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { atom } from 'nanostores';
+import { injectStore } from './inject-store';
+
+const $count = atom(0);
+
+@Component({
+  selector: 'ba-probe',
+  standalone: true,
+  template: `<span data-testid="count">{{ count() }}</span>`,
+})
+class ProbeComponent {
+  count = injectStore($count);
+}
+
+describe('injectStore', () => {
+  it('refleja el valor inicial y reacciona a cambios del atom', async () => {
+    const { detectChanges } = await render(ProbeComponent);
+    expect(screen.getByTestId('count').textContent).toBe('0');
+    $count.set(5);
+    detectChanges();
+    expect(screen.getByTestId('count').textContent).toBe('5');
+  });
+});

package/src/lib/inject-store.ts

@@ -0,0 +1,16 @@
+import { DestroyRef, inject, signal, type Signal } from '@angular/core';
+import type { Store, StoreValue } from 'nanostores';
+
+/**
+ * Puente nanostores → Angular Signal (equivalente a useStore de
+ * @nanostores/react and /vue). Debe llamarse en contexto de inyección
+ * (constructor / inicializador de campo), como cualquier inject().
+ * La suscripción se limpia con DestroyRef.
+ */
+export function injectStore<S extends Store>(store: S): Signal<StoreValue<S>> {
+  const destroyRef = inject(DestroyRef);
+  const state = signal<StoreValue<S>>(store.get());
+  const unsubscribe = store.listen((value) => state.set(value));
+  destroyRef.onDestroy(unsubscribe);
+  return state.asReadonly();
+}

package/src/lib/primitives/arrow-icon.component.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { ArrowIconComponent } from './arrow-icon.component';
+describe('ArrowIconComponent', () => {
+  it('renderiza la flecha con la clase segun la direccion', async () => {
+    @Component({ standalone: true, imports: [ArrowIconComponent], template: `<ba-arrow-icon direction="left" />` })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('.bal-ba-arrow-left')).toBeTruthy();
+  });
+});

package/src/lib/primitives/arrow-icon.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+// Port directo de ArrowIcon.tsx / ArrowIcon.vue (triple-chevron animado con
+// las clases `bal-ba-arrow*` absorbidas en lib-styles.css).
+@Component({
+  selector: 'ba-arrow-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="bas-flex bas-h-[30px] bas-w-[65px] bas-items-center bas-justify-center">
+      <div
+        [class]="
+          'bal-ba-arrow bas-relative bas-flex bas-h-[65px] bas-w-[65px] bas-cursor-pointer bas-justify-center ' +
+          (direction() === 'right' ? 'bal-ba-arrow-right bas-items-start' : '') +
+          ' ' +
+          (direction() === 'left' ? 'bal-ba-arrow-left bas-items-center' : '')
+        "
+      >
+        <span [class]="spanClassNames()"></span>
+        <span [class]="spanClassNames()"></span>
+        <span [class]="spanClassNames()"></span>
+      </div>
+    </div>
+  `,
+})
+export class ArrowIconComponent {
+  direction = input<'right' | 'left'>('right');
+
+  spanClassNames = computed(
+    () =>
+      `bas-block bas-w-2.5 bas-h-2.5 bas-border-solid
+  bas-border-[var(--bal-primary-500)] bas-absolute -bas-m-2.5 ${
+    this.direction() === 'right'
+      ? 'bas-border-t-[2.5px] bas-border-l-[2.5px] bas-border-b-0 bas-border-r-0'
+      : 'bas-border-b-[2.5px] bas-border-r-[2.5px] bas-border-t-0 bas-border-l-0'
+  }`,
+  );
+}

package/src/lib/primitives/btn-arrow-dir.component.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { BtnArrowDirComponent } from './btn-arrow-dir.component';
+describe('BtnArrowDirComponent', () => {
+  it('emite clicked al pulsar si no esta disabled', async () => {
+    const onClicked = vi.fn();
+    @Component({ standalone: true, imports: [BtnArrowDirComponent], template: `<ba-btn-arrow-dir direction="forward" (clicked)="f()" />` })
+    class Host { f = onClicked; }
+    await render(Host);
+    await fireEvent.click(screen.getByTestId('btn-arrow-forward'));
+    expect(onClicked).toHaveBeenCalled();
+  });
+  it('no emite clicked cuando disabled', async () => {
+    const onClicked = vi.fn();
+    @Component({ standalone: true, imports: [BtnArrowDirComponent], template: `<ba-btn-arrow-dir [disabled]="true" (clicked)="f()" />` })
+    class Host { f = onClicked; }
+    await render(Host);
+    await fireEvent.click(screen.getByTestId('btn-arrow-back'));
+    expect(onClicked).not.toHaveBeenCalled();
+  });
+});

package/src/lib/primitives/btn-arrow-dir.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import {
+  IoIosArrowBackComponent,
+  IoIosArrowForwardComponent,
+  IoMdArrowBackComponent,
+  IoMdArrowForwardComponent,
+} from '../icons';
+
+// Mapeo dirección+arrowType -> icono:
+// chevron `IoIos*` para arrowType 'arrow', flecha Material `IoMd*` para
+// 'arrow-round', según dirección. Los componentes vienen del módulo de
+// iconos inline dedicado (`../icons`, Task A6).
+// DISCLAIMER: se usa un <span> en vez de <button>
+// porque el elemento button no posiciona bien el icono de flecha.
+@Component({
+  selector: 'ba-btn-arrow-dir',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [IoIosArrowBackComponent, IoIosArrowForwardComponent, IoMdArrowBackComponent, IoMdArrowForwardComponent],
+  template: `
+    <span
+      [class]="
+        'bal-ba-transition-2 bal-ba-outline-none bas-group bas-flex bas-items-center bas-justify-center bas-border-none ' +
+        bgtnSizeClassNames() + ' ' + (!disabled() ? btnClassNames() : btnDisabledClassNames())
+      "
+      [attr.data-testid]="'btn-arrow-' + direction()"
+      (click)="onBtnClicked()"
+    >
+      @if (arrowType() === 'arrow' && direction() === 'back') {
+        <ba-io-ios-arrow-back [class]="arrowClasses()" />
+      } @else if (arrowType() === 'arrow' && direction() === 'forward') {
+        <ba-io-ios-arrow-forward [class]="arrowClasses()" />
+      } @else if (arrowType() === 'arrow-round' && direction() === 'back') {
+        <ba-io-md-arrow-back [class]="arrowClasses()" />
+      } @else {
+        <ba-io-md-arrow-forward [class]="arrowClasses()" />
+      }
+    </span>
+  `,
+})
+export class BtnArrowDirComponent {
+  direction = input<'back' | 'forward'>('back');
+  disabled = input(false);
+  arrowType = input<'arrow' | 'arrow-round'>('arrow');
+  btnClassNames = input('bas-rounded-full bas-cursor-pointer bas-bg-[var(--bal-primary-10)] hover:bas-bg-[#e0edf5]');
+  btnDisabledClassNames = input('bas-rounded-full bas-cursor-not-allowed bas-bg-[var(--bal-primary-10)]');
+  bgtnSizeClassNames = input('bas-h-8 bas-w-8');
+  arrowClassNames = input('bas-text-[var(--bal-primary-600)] group-hover:bas-text-[var(--bal-primary-800)]');
+  arrowDisabledClassNames = input('bas-text-[var(--bal-primary-500)]');
+  arrowSizesClassNames = input('bas-h-6 bas-w-6');
+
+  clicked = output<void>();
+
+  arrowClasses = computed(
+    () =>
+      `bal-ba-transition-2 ${this.arrowSizesClassNames()} ${
+        !this.disabled() ? this.arrowClassNames() : this.arrowDisabledClassNames()
+      }`,
+  );
+
+  onBtnClicked(): void {
+    if (this.disabled()) return;
+    this.clicked.emit();
+  }
+}

package/src/lib/primitives/btn-base.component.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { BtnBaseComponent } from './btn-base.component';
+
+// Los signal inputs se fijan con binding de plantilla desde un host component
+// (forma inequívoca con `input()`), en vez de `componentInputs` (que no aplica
+// signal inputs de forma fiable en @testing-library/angular 18).
+describe('BtnBaseComponent', () => {
+  it('renderiza el texto', async () => {
+    @Component({ standalone: true, imports: [BtnBaseComponent], template: `<ba-btn-base text="Entrar" />` })
+    class HostComponent {}
+    await render(HostComponent);
+    expect(screen.getByRole('button').textContent).toContain('Entrar');
+  });
+
+  it('al hacer click emite action', async () => {
+    const onAction = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [BtnBaseComponent],
+      template: `<ba-btn-base text="Entrar" (action)="onAction()" />`,
+    })
+    class HostComponent {
+      onAction = onAction;
+    }
+    await render(HostComponent);
+    await fireEvent.click(screen.getByRole('button'));
+    expect(onAction).toHaveBeenCalled();
+  });
+
+  it('en modo loader no muestra cursor-pointer y monta el loader', async () => {
+    @Component({ standalone: true, imports: [BtnBaseComponent], template: `<ba-btn-base [isLoader]="true" />` })
+    class HostComponent {}
+    await render(HostComponent);
+    expect(screen.getByRole('button').className).toContain('bas-cursor-default');
+  });
+});

package/src/lib/primitives/btn-base.component.ts

@@ -0,0 +1,140 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { HorizontalLoaderComponent } from './horizontal-loader.component';
+import { IconBaseComponent } from './icon-base.component';
+
+// El JSX de React/Vue renderiza dos <button> distintos por `type`; aquí
+// `btnClass()` computa la clase según `type()` con un único <button> — el
+// DOM resultante es el mismo.
+type BtnSize = 'xxs' | 'xs' | 'tiny' | 'small' | 'base' | 'large';
+
+@Component({
+  selector: 'ba-btn-base',
+  standalone: true,
+  // El <button> interno lleva las clases de layout (p.ej. bas-w-full). El host
+  // debe ser transparente para que el <button> sea el hijo real del flex/grid
+  // del padre (como en React, donde BtnBase renderiza el <button> directamente).
+  // Sin esto, `bas-w-full` mide el 100% del host inline (que se encoge al
+  // contenido) y el botón "Sign Up" del flow no ocupa todo el ancho.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HorizontalLoaderComponent, IconBaseComponent],
+  template: `
+    <button
+      [id]="btnId()"
+      [type]="btnType()"
+      [disabled]="disabled()"
+      [class]="btnClass()"
+      (click)="onBtnClicked($event)"
+    >
+      @if (isLoader()) {
+        <ba-horizontal-loader
+          [loaderColor]="loaderColor()"
+          [loaderHeight]="loaderHeight()"
+          [loaderWidth]="loaderWidth()"
+          [classNames]="loaderContainerClassNames()"
+        />
+      }
+      @if (isIcon()) {
+        <ba-icon-base
+          [iconUrl]="iconUrl()"
+          [iconWidth]="iconWidth()"
+          [iconHeight]="iconHeight()"
+          [iconClassNames]="iconClassNames()"
+        ><ng-content select="[slot=icon]" /></ba-icon-base>
+      }
+      <span [class]="'bal-ba-transition-2 ' + realTextClassNames() + ' bas-flex bas-h-full bas-items-center'">
+        <ng-content />{{ text() }}
+      </span>
+    </button>
+  `,
+})
+export class BtnBaseComponent {
+  btnId = input('btn-base');
+  text = input('');
+  size = input<BtnSize>('base');
+  type = input<'button-outlined' | 'button-border'>('button-outlined');
+  btnType = input<'button' | 'submit' | 'reset'>('button');
+  ringClassNames = input('bal-ba-hover-ring-primary-200 bal-ba-focus-ring-primary-300');
+  offsetClassNames = input('bal-ba-focus-ring-offset-2 bal-ba-hover-ring-offset-2');
+  commonClassNames = input(`bal-ba-transition-2 bas-group bas-relative bas-box-border
+  bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden`);
+  classNames = input('bas-justify-center');
+  bgClassNames = input<string | undefined>(undefined);
+  borderClassNames = input<string | undefined>(undefined);
+  paddingClassNames = input<string | undefined>(undefined);
+  textClassNames = input<string | undefined>(undefined);
+  isIcon = input(true);
+  iconUrl = input<string | undefined>(undefined);
+  iconWidth = input(24);
+  iconHeight = input(24);
+  iconClassNames = input('bas-rounded-full');
+  isLoader = input(false);
+  loaderColor = input('#003e79');
+  loaderWidth = input(80);
+  loaderContainerClassNames = input('bas-rounded-md');
+  isFocusOutlinedEnabled = input(true);
+  disabled = input(false);
+  applyDisabledStyles = input(true);
+
+  /** Equivalente al emit `click` de BtnBase.vue / onClick de BtnBase.tsx. */
+  action = output<void>();
+
+  onBtnClicked(e: MouseEvent): void {
+    e.preventDefault();
+    this.action.emit();
+  }
+
+  private realBorderClassNames = computed(
+    () =>
+      this.borderClassNames() ??
+      (this.type() === 'button-border'
+        ? `bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)]
+        hover:bas-border-[var(--bal-primary-300)]`
+        : 'bas-border-none bas-rounded-md'),
+  );
+  realTextClassNames = computed(() => {
+    if (this.textClassNames()) return this.textClassNames()!;
+    const textBase = 'bas-text-sm bas-font-semibold bas-leading-6';
+    return this.type() === 'button-border'
+      ? `${textBase} bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]`
+      : `${textBase} bas-text-white`;
+  });
+  private realBgClassNames = computed(
+    () =>
+      this.bgClassNames() ??
+      (this.type() === 'button-border'
+        ? 'bas-bg-transparent'
+        : 'bas-bg-[var(--bal-primary-500)] hover:bas-bg-[var(--bal-primary-600)]'),
+  );
+  private sizeStyles = computed(
+    () =>
+      ({
+        xxs: `bas-h-[34px] ${this.paddingClassNames() || 'bas-px-1 bas-py-0'}`,
+        xs: `bas-h-[36px] ${this.paddingClassNames() || 'bas-px-1.5 bas-py-0'}`,
+        tiny: `bas-h-[38px] ${this.paddingClassNames() || 'bas-px-2 bas-py-0'}`,
+        small: `bas-h-[42px] ${this.paddingClassNames() || 'bas-px-2.5 bas-py-0'}`,
+        base: `bas-h-[46px] ${this.paddingClassNames() || 'bas-px-3 bas-py-0'}`,
+        large: `bas-h-[54px] ${this.paddingClassNames() || 'bas-px-3.5 bas-py-0'}`,
+      })[this.size()],
+  );
+  loaderHeight = computed(
+    () =>
+      ({ xxs: 34, xs: 36, tiny: 38, small: 42, base: 46, large: 54 }[this.size()] -
+      (this.type() === 'button-border' ? 4 : 0)),
+  );
+
+  btnClass = computed(() => {
+    if (this.type() === 'button-outlined') {
+      return `bal-ba-ring-base bal-ba-ring ${this.commonClassNames()} ${this.realBgClassNames()}
+      ${this.ringClassNames()} ${this.sizeStyles()}
+      ${this.applyDisabledStyles() ? 'disabled:bas-cursor-not-allowed disabled:bas-opacity-50' : ''}
+      ${this.isLoader() ? 'bas-cursor-default' : 'bal-ba-hover-ring-2 bas-cursor-pointer'}
+      ${this.isFocusOutlinedEnabled() && !this.isLoader() ? 'bal-ba-focus-ring-2 focus:bas-opacity-90' : ''}
+      ${this.offsetClassNames()} ${this.classNames() || ''} ${this.realBorderClassNames()}`;
+    }
+    return `${this.commonClassNames()} ${this.sizeStyles()}
+    ${this.isLoader() ? 'bas-cursor-default' : 'bas-cursor-pointer'}
+    ${this.applyDisabledStyles() ? 'disabled:bas-cursor-not-allowed disabled:bas-opacity-50' : ''}
+    ${this.realBorderClassNames()} ${this.realBgClassNames()} ${this.classNames() || ''}`;
+  });
+}

package/src/lib/primitives/divider-base.component.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { DividerBaseComponent } from './divider-base.component';
+describe('DividerBaseComponent', () => {
+  it('proyecta el contenido central cuando lo hay', async () => {
+    @Component({ standalone: true, imports: [DividerBaseComponent], template: `<ba-divider-base><span data-testid="mid">or</span></ba-divider-base>` })
+    class Host {}
+    await render(Host);
+    expect(screen.getByTestId('mid')).toBeTruthy();
+  });
+});

package/src/lib/primitives/divider-base.component.ts

@@ -0,0 +1,74 @@
+import {
+  AfterViewChecked,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+
+// `children` (ReactNode / slot por
+// defecto) pasa a ser `<ng-content />`; la presencia de contenido proyectado
+// se detecta igual que en IconBaseComponent (ver comentario allí).
+@Component({
+  selector: 'ba-divider-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        'bas-group bas-relative bas-box-border bas-grid bas-w-full bas-items-center ' +
+        classNames() +
+        ' ' +
+        zIndex() +
+        ' ' +
+        (hasChildren() ? 'bas-grid-cols-[1fr_auto_1fr]' : 'bas-grid-cols-[1fr_1fr]')
+      "
+    >
+      <span
+        [class]="
+          'bas-border-solid bas-w-full bas-border-x-0 bas-border-b-0 ' +
+          borderSizeClassName() +
+          ' ' +
+          (dividerBorderColorClassNames() || 'bas-border-gray-300')
+        "
+      ></span>
+      <span
+        #childrenSlot
+        [style.display]="hasChildren() ? 'contents' : 'none'"
+        [class]="'bas-group ' + childrenContainerClassNames()"
+      >
+        <ng-content />
+      </span>
+      <span
+        [class]="
+          'bas-border-solid bas-w-full bas-border-x-0 bas-border-b-0 ' +
+          borderSizeClassName() +
+          ' ' +
+          (dividerBorderColorClassNames() || 'bas-border-gray-300')
+        "
+      ></span>
+    </div>
+  `,
+})
+export class DividerBaseComponent implements AfterViewChecked {
+  classNames = input('');
+  dividerBorderColorClassNames = input<string | undefined>(undefined);
+  borderSizeClassName = input('bas-border-t');
+  childrenContainerClassNames = input(`bas-flex bas-flex-row bas-items-center bas-text-sm
+  bas-justify-center bas-gap-1 bas-bg-transparent bas-px-2 bas-text-gray-500`);
+  zIndex = input('bas-z-50');
+
+  // Signal query (no `@ViewChild` — los decoradores de campo clásicos no se
+  // soportan en el modo JIT del harness de test AnalogJS/Vitest).
+  private readonly childrenSlot = viewChild<ElementRef<HTMLElement>>('childrenSlot');
+
+  hasChildren = signal(false);
+
+  ngAfterViewChecked(): void {
+    const el = this.childrenSlot()?.nativeElement ?? null;
+    const has = !!el && el.childNodes.length > 0;
+    if (has !== this.hasChildren()) this.hasChildren.set(has);
+  }
+}

package/src/lib/primitives/dropdown-arrow.component.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { DropdownArrowComponent } from './dropdown-arrow.component';
+describe('DropdownArrowComponent', () => {
+  it('aplica la clase abierta cuando isOpen', async () => {
+    @Component({ standalone: true, imports: [DropdownArrowComponent], template: `<ba-dropdown-arrow [isOpen]="true" />` })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('.bas-dropdown-arrow-open')).toBeTruthy();
+  });
+});

package/src/lib/primitives/dropdown-arrow.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+// La rotación animada de
+// framer-motion (variants open/closed) pasa a `transition: transform` en los
+// `styles` del componente con la clase `bas-dropdown-arrow-open` condicional.
+@Component({
+  selector: 'ba-dropdown-arrow',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span
+      [id]="id()"
+      class="bas-dropdown-arrow bas-flex bas-h-full bas-w-full bas-items-center bas-justify-center"
+      [class.bas-dropdown-arrow-open]="isOpen()"
+      (click)="clicked.emit()"
+    >
+      <svg
+        [class]="(disabled() ? 'bas-cursor-not-allowed' : 'bas-cursor-pointer') + ' ' + sizeClassNames()"
+        viewBox="0 0 20 20"
+      >
+        <path d="M0 7 L 20 7 L 10 16" [attr.fill]="color()" />
+      </svg>
+    </span>
+  `,
+  styles: [
+    `
+      .bas-dropdown-arrow {
+        transform: rotate(0deg);
+        transition: transform 0.25s ease;
+      }
+      .bas-dropdown-arrow-open {
+        transform: rotate(180deg);
+      }
+    `,
+  ],
+})
+export class DropdownArrowComponent {
+  id = input('animated-dropdown-id');
+  isOpen = input(false);
+  sizeClassNames = input('bas-h-4 bas-w-4');
+  color = input('var(--bal-primary-700)');
+  disabled = input(false);
+
+  /** Equivalente al emit `click` de DropdownArrow.vue. */
+  clicked = output<void>();
+}

package/src/lib/primitives/dropdown-base.component.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { DropdownBaseComponent } from './dropdown-base.component';
+
+describe('DropdownBaseComponent', () => {
+  it('al pulsar el boton emite isOpenChange con el valor invertido', async () => {
+    const onOpen = vi.fn();
+    @Component({ standalone: true, imports: [DropdownBaseComponent], template: `<ba-dropdown-base [isOpen]="false" (isOpenChange)="f($event)" />` })
+    class Host { f = onOpen; }
+    await render(Host);
+    await fireEvent.click(screen.getByRole('button'));
+    expect(onOpen).toHaveBeenCalledWith(true);
+  });
+  it('con isOpen muestra la lista y al elegir un item emite changeSelectedItem', async () => {
+    const onSel = vi.fn();
+    @Component({ standalone: true, imports: [DropdownBaseComponent], template: `<ba-dropdown-base [isOpen]="true" (changeSelectedItem)="f($event)" />` })
+    class Host { f = onSel; }
+    await render(Host);
+    await fireEvent.click(screen.getByText('Block-Auth'));
+    expect(onSel).toHaveBeenCalled();
+    expect(onSel.mock.calls[0][0]).toMatchObject({ value: 'blockauth' });
+  });
+});
+
+// Click-outside con container (semantica portada de DropdownBase.tsx).
+describe('DropdownBaseComponent — click-outside', () => {
+  it('sin container ningun click emite clickOutside', async () => {
+    const onOut = vi.fn();
+    @Component({ standalone: true, imports: [DropdownBaseComponent], template: `<ba-dropdown-base [isOpen]="true" (clickOutside)="f()" />` })
+    class Host { f = onOut; }
+    await render(Host);
+    await fireEvent.click(document.body);
+    expect(onOut).not.toHaveBeenCalled();
+  });
+  it('click dentro de container pero fuera del dropdown emite clickOutside', async () => {
+    const onOut = vi.fn();
+    const outer = document.createElement('div');
+    document.body.appendChild(outer);
+    const sibling = document.createElement('div');
+    outer.appendChild(sibling);
+    @Component({ standalone: true, imports: [DropdownBaseComponent], template: `<ba-dropdown-base [isOpen]="true" [container]="c" (clickOutside)="f()" />` })
+    class Host { c = outer; f = onOut; }
+    await render(Host);
+    await fireEvent.click(sibling);
+    expect(onOut).toHaveBeenCalled();
+    document.body.removeChild(outer);
+  });
+});