ngx-opalbytes-components 1.27.0 → 1.29.0

package/src/lib/shared/components/accordion-item/accordion-item.component.ts

@@ -0,0 +1,157 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostBinding,
+  inject,
+  input,
+  model,
+  output,
+  untracked,
+} from '@angular/core';
+
+import { CAO_ACCORDION, CaoAccordionAlign, CaoAccordionTogglePosition, ICaoAccordionItemRef } from '../accordion/accordion.token';
+
+
+let nextId = 0;
+
+/**
+ * Item do accordion. Pode ser usado dentro de `<cao-accordion>` ou isolado (como um cartão expansível).
+ * Os inputs de cor/posição, quando informados, sobrescrevem os valores definidos no accordion.
+ */
+@Component({
+  selector: 'cao-accordion-item',
+  templateUrl: './accordion-item.component.html',
+  styleUrl: './accordion-item.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoAccordionItemComponent implements ICaoAccordionItemRef {
+  private readonly accordion = inject(CAO_ACCORDION, { optional: true });
+  private readonly destroyRef = inject(DestroyRef);
+  private previousExpanded: boolean | null = null;
+
+  protected readonly headerId = `cao-accordion-header-${nextId}`;
+  protected readonly panelId = `cao-accordion-panel-${nextId++}`;
+
+  // ----- Conteúdo -----
+  readonly label = input<string>('');
+  readonly description = input<string>('');
+  /** Nível do heading (aria-level) do cabeçalho. */
+  readonly headingLevel = input<number>(3);
+
+  // ----- Estado -----
+  /** Estado de expansão. Suporta two-way binding: `[(expanded)]`. */
+  readonly expanded = model<boolean>(false);
+  readonly isDisabled = input<boolean>(false);
+  /** Exibe ou oculta o item. */
+  readonly isVisible = input<boolean>(true);
+  readonly dataCy = input<string>('');
+
+  // ----- Posição (sobrescreve o accordion quando informado) -----
+  readonly hideToggle = input<boolean | undefined>(undefined);
+  readonly togglePosition = input<CaoAccordionTogglePosition | undefined>(undefined);
+  readonly headerAlign = input<CaoAccordionAlign | undefined>(undefined);
+
+  // ----- Cores (sobrescrevem o accordion quando informadas) -----
+  readonly headerBgColor = input<string>('');
+  readonly headerTextColor = input<string>('');
+  readonly headerActiveBgColor = input<string>('');
+  readonly activeColor = input<string>('');
+  readonly contentBgColor = input<string>('');
+  readonly contentTextColor = input<string>('');
+  readonly borderColor = input<string>('');
+  readonly iconColor = input<string>('');
+
+  // ----- Eventos -----
+  readonly opened = output<void>();
+  readonly closed = output<void>();
+
+  protected readonly toggleHidden = computed(
+    () => this.hideToggle() ?? this.accordion?.hideToggle() ?? false,
+  );
+  protected readonly togglePos = computed(
+    () => this.togglePosition() ?? this.accordion?.togglePosition() ?? 'after',
+  );
+  private readonly align = computed(() => this.headerAlign() ?? this.accordion?.headerAlign() ?? 'start');
+  private readonly isCard = computed(() => (this.accordion?.displayMode() ?? 'separated') === 'separated');
+
+  protected readonly headerDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-header` : null));
+  protected readonly panelDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-content` : null));
+
+  private readonly hostStyle = computed(() => ({
+    '--cao-accordion-header-bg': this.headerBgColor() || null,
+    '--cao-accordion-header-text': this.headerTextColor() || null,
+    '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+    '--cao-accordion-active-color': this.activeColor() || null,
+    '--cao-accordion-content-bg': this.contentBgColor() || null,
+    '--cao-accordion-content-text': this.contentTextColor() || null,
+    '--cao-accordion-border-color': this.borderColor() || null,
+    '--cao-accordion-icon-color': this.iconColor() || null,
+    '--cao-accordion-header-align': this.align(),
+  }));
+
+  @HostBinding('style')
+  get styleBinding(): Record<string, string | null> {
+    return this.hostStyle();
+  }
+
+  @HostBinding('attr.data-cy')
+  get dataCyAttr(): string | null {
+    return this.dataCy() || null;
+  }
+
+  @HostBinding('class.cao-accordion-item--hidden')
+  get hiddenClass(): boolean {
+    return !this.isVisible();
+  }
+
+  @HostBinding('class.cao-accordion-item--expanded')
+  get expandedClass(): boolean {
+    return this.expanded();
+  }
+
+  @HostBinding('class.cao-accordion-item--card')
+  get cardClass(): boolean {
+    return this.isCard();
+  }
+
+  constructor() {
+    this.accordion?.register(this);
+    this.destroyRef.onDestroy(() => this.accordion?.unregister(this));
+
+    effect(() => {
+      const isExpanded = this.expanded();
+      untracked(() => this.handleExpandedChange(isExpanded));
+    });
+  }
+
+  /** Alterna o estado (ignorado quando o item está desabilitado). */
+  toggle(): void {
+    if (this.isDisabled()) {
+      return;
+    }
+    this.expanded.update((value) => !value);
+  }
+
+  open(): void {
+    this.expanded.set(true);
+  }
+
+  close(): void {
+    this.expanded.set(false);
+  }
+
+  private handleExpandedChange(isExpanded: boolean): void {
+    if (isExpanded) {
+      this.accordion?.notifyOpened(this);
+    }
+
+    if (this.previousExpanded !== null && this.previousExpanded !== isExpanded) {
+      const event = isExpanded ? this.opened : this.closed;
+      event.emit();
+    }
+    this.previousExpanded = isExpanded;
+  }
+}

package/src/lib/shared/components/accordion-item/accordion-item.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CaoAccordionItemComponent } from './accordion-item.component';
+
+
+describe('AccordionItem', () => {
+  let component: CaoAccordionItemComponent;
+  let fixture: ComponentFixture<CaoAccordionItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoAccordionItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoAccordionItemComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/shared/components/avatar/avatar.constants.ts

@@ -0,0 +1,17 @@
+const DEFAULT_AVATAR_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">' +
+  '<rect width="64" height="64" fill="#e5e7eb"/>' +
+  '<circle cx="32" cy="25" r="11" fill="#9ca3af"/>' +
+  '<path d="M10 64c0-13 10-22 22-22s22 9 22 22z" fill="#9ca3af"/>' +
+  '</svg>';
+
+/** Imagem padrão (silhueta) usada quando nenhuma fonte é informada ou a imagem falha ao carregar. */
+export const CAO_AVATAR_DEFAULT_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(DEFAULT_AVATAR_SVG)}`;
+
+/** Tamanhos predefinidos, em px. */
+export const CAO_AVATAR_SIZES = {
+  small: 24,
+  normal: 32,
+  large: 48,
+  xlarge: 64,
+} as const;

package/src/lib/shared/components/avatar/avatar.css

@@ -0,0 +1,44 @@
+:host {
+  display: inline-block;
+  line-height: 0;
+}
+
+.cao-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden;
+  background-color: var(--cao-avatar-bg, #e5e7eb);
+  color: var(--cao-avatar-text, #374151);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+
+.cao-avatar--circle {
+  border-radius: 50%;
+}
+
+.cao-avatar--rounded {
+  border-radius: var(--cao-avatar-radius, 25%);
+}
+
+.cao-avatar--square {
+  border-radius: 0;
+}
+
+.cao-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cao-avatar__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}

package/src/lib/shared/components/avatar/avatar.html

@@ -0,0 +1,27 @@
+<div
+  class="cao-avatar"
+  role="img"
+  [class.cao-avatar--circle]="shape() === 'circle'"
+  [class.cao-avatar--rounded]="shape() === 'rounded'"
+  [class.cao-avatar--square]="shape() === 'square'"
+  [attr.aria-label]="accessibleName()"
+  [attr.data-cy]="dataCy() || null"
+  [style.width.px]="sizePx()"
+  [style.height.px]="sizePx()"
+  [style.border-width]="strokeWidthCss()"
+  [style.border-style]="strokeStyle()"
+  [style.border-color]="strokeColor()"
+  [style.background-color]="bgColor() || null"
+  [style.color]="textColor() || null">
+  @switch (mode()) {
+    @case ('image') {
+      <img class="cao-avatar__image" alt="" aria-hidden="true" [src]="src()" (error)="onImageError()" />
+    }
+    @case ('label') {
+      <span class="cao-avatar__label" [style.font-size.px]="fontSizePx()">{{ label() }}</span>
+    }
+    @default {
+      <img class="cao-avatar__image" alt="" aria-hidden="true" [src]="defaultImage()" />
+    }
+  }
+</div>

package/src/lib/shared/components/avatar/avatar.model.ts

@@ -0,0 +1,3 @@
+export type CaoAvatarShape = 'circle' | 'rounded' | 'square';
+export type CaoAvatarPresetSize = 'small' | 'normal' | 'large' | 'xlarge';
+export type CaoAvatarStrokeStyle = 'solid' | 'dashed' | 'dotted' | 'double';

package/src/lib/shared/components/avatar/avatar.spec.ts

@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoAvatarComponent } from './avatar';
+
+describe('CaoAvatarComponent', () => {
+  let fixture: ComponentFixture<CaoAvatarComponent>;
+  let el: HTMLElement;
+
+  const avatar = () => el.querySelector<HTMLElement>('.cao-avatar') as HTMLElement;
+  const image = () => el.querySelector<HTMLImageElement>('img');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CaoAvatarComponent] }).compileComponents();
+    fixture = TestBed.createComponent(CaoAvatarComponent);
+    el = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('exibe a imagem padrão quando nada é informado', () => {
+    expect(image()).not.toBeNull();
+    expect(image()?.getAttribute('src')).toContain('data:image/svg+xml');
+  });
+
+  it('exibe a imagem informada em src', () => {
+    fixture.componentRef.setInput('src', 'https://example.com/a.png');
+    fixture.detectChanges();
+    expect(image()?.getAttribute('src')).toBe('https://example.com/a.png');
+  });
+
+  it('exibe o label quando não há imagem', () => {
+    fixture.componentRef.setInput('label', 'MB');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-avatar__label')?.textContent?.trim()).toBe('MB');
+    expect(image()).toBeNull();
+  });
+
+  it('volta para a imagem padrão quando src falha e não há label/ícone', () => {
+    fixture.componentRef.setInput('src', 'https://example.com/quebrada.png');
+    fixture.detectChanges();
+    image()?.dispatchEvent(new Event('error'));
+    fixture.detectChanges();
+    expect(image()?.getAttribute('src')).toContain('data:image/svg+xml');
+  });
+
+  it('volta para o label quando src falha', () => {
+    fixture.componentRef.setInput('src', 'https://example.com/quebrada.png');
+    fixture.componentRef.setInput('label', 'AB');
+    fixture.detectChanges();
+    image()?.dispatchEvent(new Event('error'));
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-avatar__label')?.textContent?.trim()).toBe('AB');
+  });
+
+  it('usa defaultSrc customizado', () => {
+    fixture.componentRef.setInput('defaultSrc', 'https://example.com/padrao.png');
+    fixture.detectChanges();
+    expect(image()?.getAttribute('src')).toBe('https://example.com/padrao.png');
+  });
+
+  it('aplica tamanhos predefinidos, numéricos e em rem', () => {
+    fixture.componentRef.setInput('size', 'xlarge');
+    fixture.detectChanges();
+    expect(avatar().style.width).toBe('64px');
+
+    fixture.componentRef.setInput('size', 100);
+    fixture.detectChanges();
+    expect(avatar().style.width).toBe('100px');
+
+    fixture.componentRef.setInput('size', '3rem');
+    fixture.detectChanges();
+    expect(avatar().style.width).toBe('48px');
+  });
+
+  it('aplica o formato', () => {
+    expect(avatar().classList).toContain('cao-avatar--circle');
+    fixture.componentRef.setInput('shape', 'square');
+    fixture.detectChanges();
+    expect(avatar().classList).toContain('cao-avatar--square');
+  });
+
+  it('aplica o stroke', () => {
+    fixture.componentRef.setInput('strokeWidth', 3);
+    fixture.componentRef.setInput('strokeColor', '#4f46e5');
+    fixture.detectChanges();
+    expect(avatar().style.borderWidth).toBe('3px');
+    expect(avatar().style.borderStyle).toBe('solid');
+  });
+});

package/src/lib/shared/components/avatar/avatar.stories.ts

@@ -0,0 +1,85 @@
+import { LucideUser, provideLucideIcons } from '@lucide/angular';
+import { applicationConfig, argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoAvatarComponent } from './avatar';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const STORY_ICONS = { LucideUser };
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const PHOTO = 'https://i.pravatar.cc/200?img=12';
+const ROW = 'display:flex;gap:16px;align-items:center;flex-wrap:wrap';
+
+const meta: Meta<CaoAvatarComponent> = {
+    title: 'Componentes/Avatar',
+    component: CaoAvatarComponent,
+    tags: ['autodocs'],
+    decorators: [applicationConfig({ providers: [provideLucideIcons(STORY_ICONS as never)] })],
+    render: (args) => ({ props: args, template: `<cao-avatar ${argsToTemplate(args)} />` }),
+    argTypes: {
+        src: { control: 'text', description: 'URL da imagem. Vazia → ícone, label ou imagem padrão.' },
+        defaultSrc: { control: 'text', description: 'Imagem padrão customizada.' },
+        label: { control: 'text' },
+        isLucideIcon: { control: 'boolean' },
+        iconColor: { control: 'color' },
+        size: { control: 'text', description: "'small' | 'normal' | 'large' | 'xlarge' | número (px) | '4rem'" },
+        shape: { control: 'inline-radio', options: ['circle', 'rounded', 'square'] },
+        strokeWidth: { control: 'text' },
+        strokeColor: { control: 'color' },
+        strokeStyle: { control: 'inline-radio', options: ['solid', 'dashed', 'dotted', 'double'] },
+        bgColor: { control: 'color' },
+        textColor: { control: 'color' },
+    },
+    args: { size: 'large', shape: 'circle', strokeWidth: 0, strokeColor: '#ffffff', strokeStyle: 'solid' },
+};
+export default meta;
+
+type Story = StoryObj<CaoAvatarComponent>;
+
+export const DefaultImage: Story = {};
+
+export const WithImage: Story = { args: { src: PHOTO, alt: 'Foto de perfil' } };
+
+export const WithLabel: Story = { args: { label: 'MB', bgColor: '#eef2ff', textColor: '#4338ca' } };
+
+export const WithIcon: Story = { args: { icon: 'user', bgColor: '#dcfce7', iconColor: '#166534' } };
+
+export const BrokenImageFallsBack: Story = { args: { src: 'https://invalid.example/nao-existe.png' } };
+
+export const CustomDefaultImage: Story = { args: { defaultSrc: 'https://i.pravatar.cc/200?img=47' } };
+
+export const Sizes: Story = {
+    render: () => ({
+        template: `
+      <div style="${ROW}">
+        <cao-avatar [src]="'${PHOTO}'" size="small" />
+        <cao-avatar [src]="'${PHOTO}'" size="normal" />
+        <cao-avatar [src]="'${PHOTO}'" size="large" />
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" />
+        <cao-avatar [src]="'${PHOTO}'" [size]="96" />
+        <cao-avatar [src]="'${PHOTO}'" size="7rem" />
+      </div>`,
+    }),
+};
+
+export const Shapes: Story = {
+    render: () => ({
+        template: `
+      <div style="${ROW}">
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" shape="circle" />
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" shape="rounded" />
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" shape="square" />
+      </div>`,
+    }),
+};
+
+export const Stroke: Story = {
+    render: () => ({
+        template: `
+      <div style="${ROW}">
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" [strokeWidth]="2" strokeColor="#4f46e5" />
+        <cao-avatar [src]="'${PHOTO}'" size="xlarge" [strokeWidth]="4" strokeColor="#16a34a" strokeStyle="dashed" />
+        <cao-avatar label="AB" size="xlarge" shape="rounded" [strokeWidth]="3" strokeColor="#f59e0b" strokeStyle="double" />
+      </div>`,
+    }),
+};

package/src/lib/shared/components/avatar/avatar.ts

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+import { CAO_AVATAR_DEFAULT_SRC, CAO_AVATAR_SIZES } from './avatar.constants';
+import { CaoAvatarPresetSize, CaoAvatarShape, CaoAvatarStrokeStyle } from './avatar.model';
+
+type CaoAvatarMode = 'image'  | 'label' | 'default';
+
+@Component({
+  selector: 'cao-avatar',
+  imports: [],
+  templateUrl: './avatar.html',
+  styleUrl: './avatar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoAvatarComponent {
+  private readonly sanitizer = inject(DomSanitizer);
+  private readonly defaultUrl: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(CAO_AVATAR_DEFAULT_SRC);
+  private readonly failedSrc = signal<string | null>(null);
+
+  /** URL da imagem. Se vazia ou inválida, usa ícone, label ou a imagem padrão (nessa ordem). */
+  readonly src = input<string | null | undefined>('');
+  /** Imagem padrão customizada, usada quando nada é informado ou `src` falha ao carregar. */
+  readonly defaultSrc = input<string>('');
+  /** Texto exibido (ex.: iniciais) quando não há imagem nem ícone. */
+  readonly label = input<string>('');
+  /** Nome do ícone Lucide ou imagem usada como ícone. */
+  readonly icon = input<string>('');
+  readonly isLucideIcon = input<boolean>(true);
+  readonly iconColor = input<string>('');
+
+  /** Tamanho: `'small' | 'normal' | 'large' | 'xlarge'`, número em px ou string (`'72px'`, `'4.5rem'`). */
+  readonly size = input<CaoAvatarPresetSize | number | string>('normal');
+  /** Formato do avatar. */
+  readonly shape = input<CaoAvatarShape>('circle');
+
+  /** Espessura do contorno (stroke). Número = px. `0` remove o contorno. */
+  readonly strokeWidth = input<number | string>(0);
+  readonly strokeColor = input<string>('#ffffff');
+  readonly strokeStyle = input<CaoAvatarStrokeStyle>('solid');
+
+  readonly bgColor = input<string>('');
+  readonly textColor = input<string>('');
+
+  readonly alt = input<string>('');
+  readonly ariaLabel = input<string>('');
+  readonly dataCy = input<string>('');
+
+  protected readonly sizePx = computed<number>(() => this.resolveSize(this.size()));
+  protected readonly fontSizePx = computed<number>(() => Math.round(this.sizePx() * 0.4));
+  protected readonly iconSizePx = computed<number>(() => Math.round(this.sizePx() * 0.55));
+
+  protected readonly strokeWidthCss = computed<string>(() => {
+    const width = this.strokeWidth();
+    return typeof width === 'number' ? `${width}px` : width;
+  });
+
+  protected readonly mode = computed<CaoAvatarMode>(() => {
+    const src = this.src();
+    if (src && this.failedSrc() !== src) {return 'image';}
+    if (this.label()) {return 'label';}
+    return 'default';
+  });
+
+  protected readonly defaultImage = computed<string | SafeUrl>(() => this.defaultSrc() || this.defaultUrl);
+
+  protected readonly accessibleName = computed<string>(
+    () => this.ariaLabel() || this.alt() || this.label() || 'Avatar',
+  );
+
+  protected onImageError(): void {
+    this.failedSrc.set(this.src() ?? null);
+  }
+
+  private resolveSize(value: CaoAvatarPresetSize | number | string): number {
+    if (typeof value === 'number') {return value > 0 ? value : CAO_AVATAR_SIZES.normal;}
+    if (value in CAO_AVATAR_SIZES) {return CAO_AVATAR_SIZES[value as CaoAvatarPresetSize];}
+
+    const parsed = Number.parseFloat(value);
+    if (Number.isNaN(parsed) || parsed <= 0) {return CAO_AVATAR_SIZES.normal;}
+    return value.trim().endsWith('rem') || value.trim().endsWith('em') ? parsed * 16 : parsed;
+  }
+}

package/src/lib/shared/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar'
+export * from './avatar.constants'
+export * from './avatar.model'

package/src/lib/shared/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,105 @@
+:host {
+  display: block;
+}
+
+.cao-breadcrumb {
+  --_link: var(--cao-breadcrumb-link-color, #6b7280);
+  --_link-hover: var(--cao-breadcrumb-link-hover-color, #4f46e5);
+  --_current: var(--cao-breadcrumb-current-color, #111827);
+  --_separator: var(--cao-breadcrumb-separator-color, #9ca3af);
+  --_disabled: var(--cao-breadcrumb-disabled-color, #d1d5db);
+  --_focus: var(--cao-breadcrumb-focus-ring, rgba(79, 70, 229, 0.35));
+  --_badge-bg: var(--cao-breadcrumb-badge-bg, #eef2ff);
+  --_badge-text: var(--cao-breadcrumb-badge-text, #4338ca);
+  --_gap: var(--cao-breadcrumb-gap, 8px);
+  --_size: var(--cao-breadcrumb-font-size, 0.875rem);
+}
+
+.cao-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--_gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--_size);
+  line-height: 1.25;
+}
+
+.cao-breadcrumb__item,
+.cao-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cao-breadcrumb__separator {
+  color: var(--_separator);
+  user-select: none;
+}
+
+.cao-breadcrumb__action,
+.cao-breadcrumb__text {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--_link);
+  font: inherit;
+  text-decoration: none;
+}
+
+.cao-breadcrumb__action {
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+.cao-breadcrumb__action:hover {
+  color: var(--_link-hover);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.cao-breadcrumb__action:focus-visible {
+  outline: 2px solid var(--_focus);
+  outline-offset: 1px;
+}
+
+.cao-breadcrumb__item--current .cao-breadcrumb__text {
+  color: var(--_current);
+  font-weight: 600;
+}
+
+.cao-breadcrumb__item--disabled .cao-breadcrumb__text {
+  color: var(--_disabled);
+  cursor: not-allowed;
+}
+
+.cao-breadcrumb__icon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.cao-breadcrumb__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--_badge-bg);
+  color: var(--_badge-text);
+  font-size: 0.75em;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-breadcrumb__action {
+    transition: none;
+  }
+}