feat(store-header): update button variant and adjust z-index for improved navigation

src/app/core/layout/store-layout/store-header/immersive-store-header.component.html

@@ -49,14 +49,17 @@
           </form>
         }
 
-        @if (ticketsMenu(); as menu) {
-          <app-button
-            variant="secondary"
-            hostClass="immersive-header__tickets"
-            (click)="ticketsClick.emit()"
-          >
-            {{ menu.label }}
-          </app-button>
+        @if (!showHero()) {
+          @if (ticketsMenu(); as menu) {
+            <app-button
+              variant="primary"
+              hostClass="immersive-header__tickets"
+              data-testid="store-header-tickets"
+              (click)="ticketsClick.emit()"
+            >
+              {{ menu.label }}
+            </app-button>
+          }
         }
 
         @if (displayCart()) {

src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss

@@ -59,7 +59,10 @@
 
 .immersive-header__nav {
   position: relative;
-  z-index: 1;
+  // Keep the whole navigation stacking context above the hero copy and carousel.
+  // Otherwise those later siblings can sit on top of the dropdown and capture
+  // pointer events even though the dropdown itself has a high z-index.
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -102,15 +105,11 @@
 }
 .immersive-header__account {
   position: relative;
+  // The nav becomes display: contents on mobile, so it cannot provide the
+  // stacking context there. Keep the dropdown trigger above following rows.
+  z-index: 10;
   display: flex;
 }
-.immersive-header__account app-user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 20;
-  color: #222;
-}
 :host ::ng-deep .immersive-header__actions .icon-btn,
 :host ::ng-deep .immersive-header__actions .cart-icon {
   color: var(--tenant-primary, #ff7006);
@@ -195,3 +194,140 @@
     font-size: clamp(3rem, 12vw, 5rem);
   }
 }
+
+@media (max-width: 767.98px) {
+  .immersive-header:not(.immersive-header--compact) {
+    min-height: 0;
+
+    .immersive-header__content {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      align-items: center;
+      padding: 1.25rem 0 0;
+    }
+
+    // Keep one search form while placing it below the hero copy on mobile.
+    .immersive-header__nav,
+    .immersive-header__actions {
+      display: contents;
+    }
+
+    .immersive-header__brand {
+      grid-area: 1 / 1;
+      margin-left: 8vw;
+    }
+
+    .immersive-header__brand img {
+      width: clamp(105px, 34vw, 145px);
+    }
+
+    app-cart-icon {
+      grid-area: 1 / 2;
+    }
+
+    .immersive-header__account {
+      grid-area: 1 / 3;
+      margin-right: calc(8vw - 0.75rem);
+    }
+
+    .immersive-header__timer {
+      grid-area: 2 / 1 / auto / -1;
+    }
+
+    .immersive-header__copy {
+      grid-area: 3 / 1 / auto / -1;
+      margin: 1rem 0 0;
+    }
+
+    .immersive-header__eyebrow {
+      font-size: clamp(18px, 5.5vw, 24px);
+    }
+
+    .immersive-header__title {
+      font-size: clamp(42px, 13vw, 64px);
+      line-height: 0.95;
+    }
+
+    .immersive-header__description {
+      margin-top: 2rem;
+      font-size: clamp(11px, 3vw, 14px);
+    }
+
+    .immersive-header__search {
+      grid-area: 4 / 1 / auto / -1;
+      width: 76%;
+      max-width: 28rem;
+      margin: 0.5rem auto 0;
+    }
+
+    .immersive-header__search-error {
+      right: auto;
+      left: 0;
+      width: 100%;
+      color: #fff;
+    }
+
+    app-continuous-image-carousel {
+      grid-area: 5 / 1 / auto / -1;
+      margin-top: 1.5rem;
+      --carousel-card-width: 27vw;
+      --carousel-gap: 3.3vw;
+      --carousel-offset: -9vw;
+    }
+
+    .immersive-header__backdrop-image {
+      object-position: center 42%;
+    }
+
+    .immersive-header__backdrop {
+      // Fade the entire layer so its dark base cannot leave a subpixel seam.
+      mask-image: linear-gradient(#000 calc(100% - 8px), transparent 100%);
+    }
+
+    .immersive-header__backdrop::after {
+      background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.45) 0%,
+        rgba(0, 0, 0, 0.15) 55%,
+        rgba(245, 245, 245, 0.55) 75%,
+        #f5f5f5 95%,
+        #f5f5f5 100%
+      );
+    }
+  }
+
+  :host ::ng-deep .immersive-header:not(.immersive-header--compact) {
+    .immersive-header__search .form-control {
+      min-height: 36px;
+      padding: 0.25rem 2.5rem 0.25rem 0.75rem;
+      border: 1px solid rgba(255, 255, 255, 0.85);
+      border-radius: 3px;
+      background: transparent;
+      color: #fff;
+      font-size: 16px;
+
+      &::placeholder {
+        color: transparent;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #fff;
+        outline-offset: 2px;
+      }
+    }
+
+    .immersive-header__search .input-search-icon {
+      color: #fff;
+      right: 0.75rem;
+    }
+
+    .immersive-header__account .icon-btn {
+      min-width: 44px;
+      min-height: 44px;
+
+      i {
+        font-size: 18px;
+      }
+    }
+  }
+}

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -52,17 +52,11 @@
 </ng-template>
 
 @if (headerType() === 'immersive' && displayCategories() && categories().length) {
-  <nav class="immersive-categories" aria-label="Categorías">
-    <div class="immersive-categories__list">
-      @for (category of categories(); track category.id) {
-        <button
-          type="button"
-          class="immersive-categories__item"
-          (click)="categorySelect.emit(category)"
-        >
-          {{ category.nombre | uppercase }}
-        </button>
-      }
-    </div>
+  <nav class="immersive-categories" aria-label="Categor<EFBFBD>as">
+    <app-horizontal-carousel
+      [items]="categoryItems()"
+      ariaLabel="Categor<6F>as"
+      (itemSelect)="onCategoryItemSelect($event)"
+    />
   </nav>
 }

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -2,6 +2,11 @@
   display: block;
 }
 
+app-immersive-store-header {
+  position: relative;
+  z-index: 1;
+}
+
 :host(.immersive-shell--compact) {
   background-color: #f5f5f5;
   background-position: center 42%;
@@ -9,40 +14,44 @@
 }
 
 :host(.immersive-shell--compact) .immersive-categories {
-  border-top: 1px solid rgba(255, 255, 255, 0.6);
+  border: 0;
+  box-shadow: none;
   background: transparent;
 }
 
+:host(.immersive-shell--compact) .immersive-categories::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: #f5f5f5;
+  pointer-events: none;
+}
+
 .immersive-categories {
+  position: relative;
+  z-index: 0;
   width: 100%;
-  overflow-x: auto;
+  padding: 0.375rem 1rem;
   background: #f5f5f5;
-}
-
-.immersive-categories__list {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: clamp(1rem, 3vw, 2.5rem);
-  width: max-content;
-  min-width: 100%;
-  min-height: 3.5rem;
-  padding: 0.75rem 1rem;
-}
-
-.immersive-categories__item {
-  flex: none;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: #666666;
+  color: #666;
   font-size: 15px;
   font-weight: 700;
-  white-space: nowrap;
-  cursor: pointer;
+  --horizontal-carousel-gap: clamp(1rem, 3vw, 2.5rem);
+  --horizontal-carousel-text-transform: uppercase;
 }
 
-.immersive-categories__item:hover,
-.immersive-categories__item:focus-visible {
-  text-decoration: underline;
+@media (max-width: 767.98px) {
+  .immersive-categories {
+    padding: 1rem 0.25rem 0;
+    font-size: clamp(10px, 2.8vw, 12px);
+    --horizontal-carousel-visible-items: 3;
+    --horizontal-carousel-gap: 0.5rem;
+    --horizontal-carousel-item-width: calc((100cqw - 2 * var(--horizontal-carousel-gap)) / 3);
+    --horizontal-carousel-white-space: normal;
+    --horizontal-carousel-snap: x mandatory;
+  }
 }

src/app/core/layout/store-layout/store-header/store-header.component.ts

@@ -1,15 +1,25 @@
-import { NgTemplateOutlet, UpperCasePipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, computed, input, output } from '@angular/core';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { Category, Menu, WebsiteExtras } from '../../../services/tenant.interface';
 import { ImmersiveStoreHeaderComponent } from './immersive-store-header.component';
 import { StandardStoreHeaderComponent } from './standard-store-header.component';
 
+import {
+  HorizontalCarouselComponent,
+  HorizontalCarouselItem,
+} from '../../../../shared/components/horizontal-carousel/horizontal-carousel.component';
+
 export type StoreHeaderType = 'standard' | 'immersive';
 
 @Component({
   selector: 'app-store-header',
-  imports: [NgTemplateOutlet, UpperCasePipe, StandardStoreHeaderComponent, ImmersiveStoreHeaderComponent],
+  imports: [
+    NgTemplateOutlet,
+    HorizontalCarouselComponent,
+    StandardStoreHeaderComponent,
+    ImmersiveStoreHeaderComponent,
+  ],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss',
   host: {
@@ -53,4 +63,13 @@ export class StoreHeaderComponent {
   readonly logoutClick = output<void>();
   readonly searchSubmit = output<string>();
   readonly categorySelect = output<Category>();
+
+  protected readonly categoryItems = computed(() =>
+    this.categories().map((category) => ({ value: category.id, label: category.nombre })),
+  );
+
+  protected onCategoryItemSelect(item: HorizontalCarouselItem): void {
+    const category = this.categories().find((candidate) => candidate.id === item.value);
+    if (category) this.categorySelect.emit(category);
+  }
 }

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -71,6 +71,7 @@
 
 @media (max-width: 575.98px) {
   :host {
-    right: -0.5rem;
+    right: 0;
+    width: min(18rem, calc(100vw - 1rem));
   }
 }

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -305,6 +305,33 @@ describe('StoreLayoutComponent', () => {
     expect(element.querySelector('app-cart-icon')).not.toBeNull();
   });
 
+  it('keeps tickets in the immersive account dropdown while hiding its root action', () => {
+    const authService = TestBed.inject(AuthService);
+    (authService.isAuthenticated as any).set(true);
+    (authService.user as any).set({
+      id: 1,
+      nombre_apellido: 'Ada Lovelace',
+      email: 'ada@example.com',
+    });
+    tenantState.set({ ...tenant, header_type: 'immersive' });
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.querySelector('[data-testid="store-header-tickets"]')).toBeNull();
+
+    element.querySelector<HTMLButtonElement>('app-icon-button[variant="user"] button')?.click();
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testid="user-dropdown-account.tickets"]')).not.toBeNull();
+
+    (fixture.componentInstance as any).isHomeRoute.set(false);
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testid="store-header-tickets"]')).not.toBeNull();
+  });
+
   it('shows immersive categories below the header and navigates on selection', () => {
     tenantState.set({
       ...tenant,
@@ -708,7 +735,7 @@ describe('StoreLayoutComponent', () => {
     expect(
       compiled.querySelector('[data-testid="user-dropdown-account.purchases"]'),
     ).not.toBeNull();
-    expect(compiled.querySelector('[data-testid="user-dropdown-account.tickets"]')).toBeNull();
+    expect(compiled.querySelector('[data-testid="user-dropdown-account.tickets"]')).not.toBeNull();
     expect(router.navigate).not.toHaveBeenCalled();
   });
 
@@ -783,7 +810,7 @@ describe('StoreLayoutComponent', () => {
 
     expect(profileLink?.getAttribute('href')).toBe('/mi-cuenta/datos-personales');
     expect(purchasesLink?.getAttribute('href')).toBe('/mi-cuenta/compras');
-    expect(ticketsLink).toBeUndefined();
+    expect(ticketsLink?.getAttribute('href')).toBe('/mi-cuenta/tickets');
     expect(logoutButton).toBeDefined();
 
     logoutButton!.click();

src/app/core/layout/store-layout/store-layout.component.ts

@@ -211,10 +211,12 @@ export class StoreLayoutComponent implements OnInit {
 
     const profile = accountMenu.submenues.find((menu) => menu.code === 'account.profile');
     const purchases = accountMenu.submenues.find((menu) => menu.code === 'account.purchases');
+    const tickets = accountMenu.submenues.find((menu) => menu.code === 'account.tickets');
 
     return [
       ...(profile ? [{ ...accountMenu, route: profile.route }] : []),
       ...(purchases ? [purchases] : []),
+      ...(tickets ? [tickets] : []),
     ];
   });
 

src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss

@@ -14,20 +14,21 @@
 .continuous-carousel__track {
   display: flex;
   width: max-content;
+  margin-left: var(--carousel-offset, 0px);
   animation: continuous-carousel-scroll var(--duration) linear infinite;
 }
 
 .continuous-carousel__set {
   display: flex;
   flex: none;
-  gap: var(--gap);
-  padding-right: var(--gap);
+  gap: var(--carousel-gap, var(--gap));
+  padding-right: var(--carousel-gap, var(--gap));
 }
 
 .continuous-carousel__image {
   display: block;
   flex: none;
-  width: var(--card-width);
+  width: var(--carousel-card-width, var(--card-width));
   aspect-ratio: 1.45;
   object-fit: cover;
   border-radius: 2px;
@@ -64,6 +65,7 @@
   }
   .continuous-carousel__track {
     animation: none;
+    margin-left: 0;
   }
   .continuous-carousel__set[aria-hidden='true'] {
     display: none;

src/app/shared/components/horizontal-carousel/horizontal-carousel.component.html

@@ -0,0 +1,63 @@
+<div
+  class="carousel"
+  role="group"
+  [attr.aria-label]="ariaLabel()"
+  [class.carousel--looping]="looping()"
+>
+  @if (showArrows()) {
+    <button
+      type="button"
+      class="carousel__arrow"
+      aria-label="Ver elementos anteriores"
+      [disabled]="!overflowing()"
+      (click)="move(-1)"
+    >
+      <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+    </button>
+  }
+  <div #viewport class="carousel__viewport" (scroll)="onScroll()" (scrollend)="normalize()">
+    <div class="carousel__track">
+      @for (block of blocks(); track block) {
+        @if (block === 0) {
+          <div #canonical class="carousel__set">
+            @for (item of items(); track item.value) {
+              <button
+                type="button"
+                class="carousel__item"
+                (click)="itemSelect.emit(item)"
+                (focus)="reveal($event)"
+              >
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        } @else {
+          <div class="carousel__set" aria-hidden="true">
+            @for (item of items(); track item.value) {
+              <button
+                type="button"
+                class="carousel__item"
+                tabindex="-1"
+                (mousedown)="$event.preventDefault()"
+                (click)="selectCopy(item)"
+              >
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        }
+      }
+    </div>
+  </div>
+  @if (showArrows()) {
+    <button
+      type="button"
+      class="carousel__arrow"
+      aria-label="Ver más elementos"
+      [disabled]="!overflowing()"
+      (click)="move(1)"
+    >
+      <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+    </button>
+  }
+</div>

src/app/shared/components/horizontal-carousel/horizontal-carousel.component.scss

@@ -0,0 +1,71 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+.carousel {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.carousel__viewport {
+  container-type: inline-size;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  overflow-anchor: none;
+  scroll-snap-type: var(--horizontal-carousel-snap, none);
+}
+.carousel__viewport::-webkit-scrollbar {
+  display: none;
+}
+.carousel__track {
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+  justify-content: center;
+}
+.carousel__set {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--horizontal-carousel-gap, 1.5rem);
+}
+.carousel--looping .carousel__set {
+  padding-right: var(--horizontal-carousel-gap, 1.5rem);
+}
+.carousel__item,
+.carousel__arrow {
+  flex: none;
+  min-height: 44px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.carousel__item {
+  width: var(--horizontal-carousel-item-width, auto);
+  white-space: var(--horizontal-carousel-white-space, nowrap);
+  overflow-wrap: anywhere;
+  scroll-snap-align: start;
+  text-transform: var(--horizontal-carousel-text-transform, none);
+}
+.carousel__arrow {
+  width: 32px;
+  font-size: 10px;
+}
+.carousel__arrow:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.carousel__item:hover {
+  text-decoration: underline;
+}
+.carousel__item:focus-visible,
+.carousel__arrow:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}

src/app/shared/components/horizontal-carousel/horizontal-carousel.component.spec.ts

@@ -0,0 +1,180 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { HorizontalCarouselComponent } from './horizontal-carousel.component';
+
+describe('HorizontalCarouselComponent', () => {
+  let fixture: ComponentFixture<HorizontalCarouselComponent>;
+  let host: HTMLElement;
+  let available: number;
+  let resize: () => void;
+  const disconnect = vi.fn();
+  const items = Array.from({ length: 5 }, (_, index) => ({ value: index, label: `Item ${index}` }));
+  const viewport = () => host.querySelector<HTMLElement>('.carousel__viewport')!;
+  const period = () =>
+    host.querySelector<HTMLElement>('.carousel__set')!.getBoundingClientRect().width;
+
+  beforeEach(async () => {
+    available = 320;
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: () => void) {
+          resize = callback;
+        }
+        observe() {}
+        disconnect = disconnect;
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      return this.classList.contains('carousel__viewport') ? available - 64 : available;
+    });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      const index = this.parentElement ? Array.from(this.parentElement.children).indexOf(this) : 0;
+      const left = this.classList.contains('carousel__item') ? index * 124.25 : 0;
+      const width = this.classList.contains('carousel__set')
+        ? Math.max(
+            0,
+            this.children.length * 124.25 - (this.closest('.carousel--looping') ? 0 : 24.25),
+          )
+        : 100;
+      return {
+        left,
+        right: left + width,
+        width,
+        top: 0,
+        bottom: 44,
+        height: 44,
+        x: left,
+        y: 0,
+        toJSON() {},
+      };
+    });
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn(() => ({ matches: true })),
+    );
+    // jsdom has no layout or scrolling implementation.
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: vi.fn(function (this: HTMLElement, options: ScrollToOptions) {
+        this.scrollLeft = options.left ?? 0;
+      }),
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollBy', {
+      configurable: true,
+      value: vi.fn(function (this: HTMLElement, options: ScrollToOptions) {
+        this.scrollLeft += options.left ?? 0;
+      }),
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    await TestBed.configureTestingModule({
+      imports: [HorizontalCarouselComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(HorizontalCarouselComponent);
+    fixture.componentRef.setInput('items', items);
+    fixture.componentRef.setInput('ariaLabel', 'Opciones');
+    host = fixture.nativeElement;
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('starts in the middle with only one accessible set', () => {
+    expect(host.querySelectorAll('.carousel__set')).toHaveLength(3);
+    expect(host.querySelectorAll('[aria-hidden="true"] .carousel__item')).toHaveLength(10);
+    expect(host.querySelectorAll('.carousel__item:not([tabindex="-1"])')).toHaveLength(5);
+    expect(viewport().scrollLeft).toBe(period());
+  });
+
+  it('wraps both directions preserving the exact fractional offset', () => {
+    const width = period();
+    viewport().scrollLeft = width - 30.5;
+    viewport().dispatchEvent(new Event('scrollend'));
+    expect(viewport().scrollLeft).toBe(2 * width - 30.5);
+    viewport().scrollLeft = 2 * width + 42.5;
+    viewport().dispatchEvent(new Event('scrollend'));
+    expect(viewport().scrollLeft).toBe(width + 42.5);
+  });
+
+  it('uses the idle fallback after a gesture', () => {
+    vi.useFakeTimers();
+    viewport().scrollLeft = 12;
+    viewport().dispatchEvent(new Event('scroll'));
+    vi.advanceTimersByTime(180);
+    expect(viewport().scrollLeft).toBe(period() + 12);
+    vi.useRealTimers();
+  });
+
+  it('arrows respect reduced motion', () => {
+    host.querySelectorAll<HTMLButtonElement>('.carousel__arrow')[1].click();
+    expect(viewport().scrollBy).toHaveBeenCalledWith({
+      left: (available - 64) * 0.8,
+      behavior: 'instant',
+    });
+  });
+
+  it('selects the original value when clicking a copy', () => {
+    const selected = vi.fn();
+    fixture.componentInstance.itemSelect.subscribe(selected);
+    host.querySelector<HTMLButtonElement>('[aria-hidden="true"] .carousel__item')!.click();
+    expect(selected).toHaveBeenCalledWith(items[0]);
+  });
+
+  it('removes copies and arrows when resized to fit, then restores them', async () => {
+    available = 1000;
+    resize();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(host.querySelectorAll('.carousel__set')).toHaveLength(1);
+    expect(host.querySelectorAll('.carousel__arrow')).toHaveLength(0);
+    available = 320;
+    resize();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(host.querySelectorAll('.carousel__set')).toHaveLength(3);
+    expect(viewport().scrollLeft).toBe(period());
+  });
+
+  it('keeps arrows with three visible slots and advances one item', async () => {
+    host.style.setProperty('--horizontal-carousel-visible-items', '3');
+    resize();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    host.querySelectorAll<HTMLElement>('.carousel__set').forEach((set) => {
+      set.style.columnGap = '8px';
+    });
+    host.querySelectorAll<HTMLButtonElement>('.carousel__arrow')[1].click();
+    expect(viewport().scrollBy).toHaveBeenCalledWith({ left: 108, behavior: 'instant' });
+
+    fixture.componentRef.setInput('items', items.slice(0, 3));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(host.querySelectorAll('.carousel__set')).toHaveLength(1);
+    expect(host.querySelectorAll('.carousel__arrow:disabled')).toHaveLength(2);
+  });
+
+  it('supports noncircular overflow and empty lists', async () => {
+    fixture.componentRef.setInput('circular', false);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(host.querySelectorAll('.carousel__set')).toHaveLength(1);
+    expect(host.querySelectorAll('.carousel__arrow')).toHaveLength(2);
+    fixture.componentRef.setInput('items', []);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(host.querySelectorAll('.carousel__arrow')).toHaveLength(0);
+    expect(host.querySelectorAll('.carousel__item')).toHaveLength(0);
+  });
+});

src/app/shared/components/horizontal-carousel/horizontal-carousel.component.ts

@@ -0,0 +1,154 @@
+import {
+  afterNextRender,
+  afterRenderEffect,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+
+export interface HorizontalCarouselItem {
+  /** Unique within the carousel. */
+  value: string | number;
+  label: string;
+}
+
+@Component({
+  selector: 'app-horizontal-carousel',
+  templateUrl: './horizontal-carousel.component.html',
+  styleUrl: './horizontal-carousel.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HorizontalCarouselComponent {
+  readonly items = input.required<readonly HorizontalCarouselItem[]>();
+  readonly circular = input(true);
+  readonly ariaLabel = input.required<string>();
+  readonly itemSelect = output<HorizontalCarouselItem>();
+
+  protected readonly overflowing = signal(false);
+  protected readonly visibleItems = signal<number | null>(null);
+  protected readonly showArrows = computed(
+    () => this.overflowing() || (this.visibleItems() !== null && this.items().length > 0),
+  );
+  protected readonly looping = computed(() => this.circular() && this.overflowing());
+  protected readonly blocks = computed(() => (this.looping() ? [-1, 0, 1] : [0]));
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
+  private readonly canonical = viewChild.required<ElementRef<HTMLElement>>('canonical');
+  private readonly destroyRef = inject(DestroyRef);
+  private settleTimer?: ReturnType<typeof setTimeout>;
+  private observer?: ResizeObserver;
+  private initializedLoop = false;
+  private transferringFocus = false;
+  private lastItems?: readonly HorizontalCarouselItem[];
+
+  constructor() {
+    afterRenderEffect(() => {
+      const items = this.items();
+      const looping = this.looping();
+      const set = this.canonical().nativeElement;
+      this.measure();
+      if (this.lastItems !== items || this.initializedLoop !== looping) {
+        this.viewport().nativeElement.scrollLeft = looping ? set.getBoundingClientRect().width : 0;
+        this.lastItems = items;
+        this.initializedLoop = looping;
+      }
+    });
+    afterNextRender(() => {
+      this.observer = new ResizeObserver(() => {
+        this.measure();
+        this.normalize();
+      });
+      this.observer.observe(this.host.nativeElement);
+      this.observer.observe(this.canonical().nativeElement);
+    });
+    this.destroyRef.onDestroy(() => {
+      this.observer?.disconnect();
+      clearTimeout(this.settleTimer);
+    });
+  }
+
+  private measure(): void {
+    const slots = Number(
+      this.host.nativeElement.ownerDocument.defaultView
+        ?.getComputedStyle(this.host.nativeElement)
+        .getPropertyValue('--horizontal-carousel-visible-items'),
+    );
+    this.visibleItems.set(slots > 0 ? slots : null);
+    if (slots > 0) {
+      this.overflowing.set(this.items().length > slots);
+      return;
+    }
+    const set = this.canonical().nativeElement;
+    const children = set.children;
+    const first = children.item(0) as HTMLElement | null;
+    const last = children.item(children.length - 1) as HTMLElement | null;
+    const width =
+      first && last ? last.getBoundingClientRect().right - first.getBoundingClientRect().left : 0;
+    const available = this.host.nativeElement.clientWidth;
+    this.overflowing.set(available > 0 && width > available + 1);
+  }
+
+  protected move(direction: number): void {
+    const viewport = this.viewport().nativeElement;
+    const set = this.canonical().nativeElement;
+    const first = set.children.item(0) as HTMLElement | null;
+    const gap =
+      parseFloat(viewport.ownerDocument.defaultView?.getComputedStyle(set).columnGap ?? '0') || 0;
+    const distance =
+      this.visibleItems() && first
+        ? first.getBoundingClientRect().width + gap
+        : viewport.clientWidth * 0.8;
+    const reduceMotion = viewport.ownerDocument.defaultView?.matchMedia(
+      '(prefers-reduced-motion: reduce)',
+    ).matches;
+    viewport.scrollBy({
+      left: direction * distance,
+      behavior: reduceMotion ? 'instant' : 'smooth',
+    });
+  }
+
+  protected onScroll(): void {
+    clearTimeout(this.settleTimer);
+    // Fallback for browsers without scrollend; momentum keeps resetting the timer.
+    this.settleTimer = setTimeout(() => this.normalize(), 180);
+  }
+
+  protected normalize(): void {
+    clearTimeout(this.settleTimer);
+    if (!this.looping()) return;
+    const viewport = this.viewport().nativeElement;
+    const width = this.canonical().nativeElement.getBoundingClientRect().width;
+    if (!width) return;
+    const left = viewport.scrollLeft;
+    if (left < width || left >= 2 * width) {
+      viewport.scrollTo({ left: width + (((left % width) + width) % width), behavior: 'instant' });
+    }
+  }
+
+  protected reveal(event: FocusEvent): void {
+    // Only the canonical buttons participate in keyboard / screen-reader navigation.
+    if (this.transferringFocus) return;
+    (event.target as HTMLElement).scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+      behavior: 'instant',
+    });
+  }
+
+  protected selectCopy(item: HorizontalCarouselItem): void {
+    const index = this.items().findIndex((candidate) => candidate.value === item.value);
+    this.transferringFocus = true;
+    (this.canonical().nativeElement.children.item(index) as HTMLElement | null)?.focus({
+      preventScroll: true,
+    });
+    this.transferringFocus = false;
+    this.itemSelect.emit(item);
+  }
+}