ngx-opalbytes-components 1.29.0 → 1.30.0

package/src/lib/shared/components/progress-bar/progress-bar.css

@@ -0,0 +1,141 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.cao-progress-bar {
+  --_color: var(--cao-progress-bar-color, #4f46e5);
+  --_track: var(--cao-progress-bar-track-color, #e5e7eb);
+  --_buffer: var(--cao-progress-bar-buffer-color, color-mix(in srgb, var(--_color) 35%, transparent));
+  --_duration: var(--cao-progress-bar-duration, 2s);
+  --_text: var(--cao-progress-bar-text-color, #374151);
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cao-progress-bar__track {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--cao-progress-bar-radius, 999px);
+  background-color: var(--_track);
+}
+
+.cao-progress-bar__fill,
+.cao-progress-bar__buffer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  transition: width 250ms ease;
+}
+
+.cao-progress-bar__fill {
+  z-index: 1;
+  background-color: var(--_color);
+}
+
+.cao-progress-bar__buffer {
+  background-color: var(--_buffer);
+}
+
+.cao-progress-bar__dots {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(circle closest-side, var(--_buffer) 0 70%, transparent 75%);
+  background-size: 8px 100%;
+  animation: cao-progress-bar-dots 600ms linear infinite;
+}
+
+.cao-progress-bar__inner {
+  position: absolute;
+  inset: 0;
+}
+
+.cao-progress-bar__inner--query {
+  transform: scaleX(-1);
+}
+
+.cao-progress-bar__bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--_color);
+  transform-origin: left center;
+  will-change: transform;
+}
+
+.cao-progress-bar__bar--primary {
+  animation: cao-progress-bar-primary var(--_duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.cao-progress-bar__bar--secondary {
+  animation: cao-progress-bar-secondary var(--_duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.cao-progress-bar__value {
+  flex: 0 0 auto;
+  min-width: 2.75em;
+  color: var(--_text);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: right;
+}
+
+@keyframes cao-progress-bar-primary {
+  0% {
+    transform: translateX(-100%) scaleX(0.2);
+  }
+  40% {
+    transform: translateX(10%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.2);
+  }
+}
+
+@keyframes cao-progress-bar-secondary {
+  0% {
+    transform: translateX(-100%) scaleX(0.1);
+  }
+  50% {
+    transform: translateX(-100%) scaleX(0.1);
+  }
+  80% {
+    transform: translateX(40%) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.1);
+  }
+}
+
+@keyframes cao-progress-bar-dots {
+  to {
+    background-position-x: -8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-progress-bar__fill,
+  .cao-progress-bar__buffer {
+    transition: none;
+  }
+
+  .cao-progress-bar__bar--primary,
+  .cao-progress-bar__bar--secondary {
+    animation-duration: calc(var(--_duration) * 3);
+  }
+
+  .cao-progress-bar__dots {
+    animation: none;
+  }
+}

package/src/lib/shared/components/progress-bar/progress-bar.html

@@ -0,0 +1,39 @@
+<div
+  class="cao-progress-bar"
+  [style.--cao-progress-bar-color]="color() || null"
+  [style.--cao-progress-bar-track-color]="trackColor() || null"
+  [style.--cao-progress-bar-buffer-color]="bufferColor() || null"
+  [style.--cao-progress-bar-duration]="animationDuration() || null">
+  <div
+    class="cao-progress-bar__track"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    [attr.aria-valuenow]="ariaValueNow()"
+    [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-labelledby]="ariaLabelledBy() || null"
+    [attr.data-cy]="dataCy() || null"
+    [style.height]="height()"
+    [style.border-radius]="borderRadius() || null">
+    @switch (mode()) {
+      @case ('determinate') {
+        <div class="cao-progress-bar__fill" [style.width.%]="clampedValue()"></div>
+      }
+      @case ('buffer') {
+        <div class="cao-progress-bar__dots" [style.left.%]="clampedBuffer()"></div>
+        <div class="cao-progress-bar__buffer" [style.width.%]="clampedBuffer()"></div>
+        <div class="cao-progress-bar__fill" [style.width.%]="clampedValue()"></div>
+      }
+      @default {
+        <div class="cao-progress-bar__inner" [class.cao-progress-bar__inner--query]="mode() === 'query'">
+          <div class="cao-progress-bar__bar cao-progress-bar__bar--primary"></div>
+          <div class="cao-progress-bar__bar cao-progress-bar__bar--secondary"></div>
+        </div>
+      }
+    }
+  </div>
+
+  @if (showValue() && hasValue()) {
+    <span class="cao-progress-bar__value" aria-hidden="true">{{ valueLabel() }}</span>
+  }
+</div>

package/src/lib/shared/components/progress-bar/progress-bar.model.ts

@@ -0,0 +1,8 @@
+/**
+ * Modo da barra de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ * - `buffer`: `value` + `bufferValue` (ex.: carregamento de mídia).
+ * - `query`: indeterminado com animação invertida (ex.: aguardando resposta antes de um determinate).
+ */
+export type CaoProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';

package/src/lib/shared/components/progress-bar/progress-bar.spec.ts

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoProgressBarComponent } from './progress-bar';
+
+describe('CaoProgressBarComponent', () => {
+  let fixture: ComponentFixture<CaoProgressBarComponent>;
+  let el: HTMLElement;
+
+  const track = () => el.querySelector<HTMLElement>('[role="progressbar"]') as HTMLElement;
+  const fill = () => el.querySelector<HTMLElement>('.cao-progress-bar__fill') as HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CaoProgressBarComponent] }).compileComponents();
+    fixture = TestBed.createComponent(CaoProgressBarComponent);
+    el = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('inicia no modo determinate com valor 0', () => {
+    expect(track().getAttribute('aria-valuenow')).toBe('0');
+    expect(fill().style.width).toBe('0%');
+  });
+
+  it('aplica o valor e os atributos ARIA', () => {
+    fixture.componentRef.setInput('value', 40);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('40%');
+    expect(track().getAttribute('aria-valuenow')).toBe('40');
+    expect(track().getAttribute('aria-valuemin')).toBe('0');
+    expect(track().getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  it('limita o valor entre 0 e 100', () => {
+    fixture.componentRef.setInput('value', 150);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('100%');
+
+    fixture.componentRef.setInput('value', -10);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('0%');
+  });
+
+  it('aceita valor como string (numberAttribute)', () => {
+    fixture.componentRef.setInput('value', '25');
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('25%');
+  });
+
+  it('modo indeterminate não define aria-valuenow e renderiza as duas barras', () => {
+    fixture.componentRef.setInput('mode', 'indeterminate');
+    fixture.detectChanges();
+    expect(track().hasAttribute('aria-valuenow')).toBe(false);
+    expect(el.querySelectorAll('.cao-progress-bar__bar').length).toBe(2);
+    expect(fill()).toBeNull();
+  });
+
+  it('modo query inverte a animação', () => {
+    fixture.componentRef.setInput('mode', 'query');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__inner--query')).not.toBeNull();
+  });
+
+  it('modo buffer renderiza buffer, pontos e progresso', () => {
+    fixture.componentRef.setInput('mode', 'buffer');
+    fixture.componentRef.setInput('value', 30);
+    fixture.componentRef.setInput('bufferValue', 60);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('30%');
+    expect(el.querySelector<HTMLElement>('.cao-progress-bar__buffer')?.style.width).toBe('60%');
+    expect(el.querySelector('.cao-progress-bar__dots')).not.toBeNull();
+    expect(track().getAttribute('aria-valuenow')).toBe('30');
+  });
+
+  it('exibe o percentual somente em modos com valor', () => {
+    fixture.componentRef.setInput('value', 60);
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__value')?.textContent?.trim()).toBe('60%');
+
+    fixture.componentRef.setInput('mode', 'indeterminate');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__value')).toBeNull();
+  });
+
+  it('aplica aria-label, data-cy e altura', () => {
+    fixture.componentRef.setInput('ariaLabel', 'Carregando arquivo');
+    fixture.componentRef.setInput('dataCy', 'upload-progress');
+    fixture.componentRef.setInput('height', '10px');
+    fixture.detectChanges();
+    expect(track().getAttribute('aria-label')).toBe('Carregando arquivo');
+    expect(track().getAttribute('data-cy')).toBe('upload-progress');
+    expect(track().style.height).toBe('10px');
+  });
+});

package/src/lib/shared/components/progress-bar/progress-bar.stories.ts

@@ -0,0 +1,53 @@
+import { argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoProgressBarComponent } from './progress-bar';
+
+const meta: Meta<CaoProgressBarComponent> = {
+  title: 'Componentes/Progress Bar',
+  component: CaoProgressBarComponent,
+  tags: ['autodocs'],
+  render: (args) => ({ props: args, template: `<cao-progress-bar ${argsToTemplate(args)} />` }),
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['determinate', 'indeterminate', 'buffer', 'query'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    bufferValue: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    bufferColor: { control: 'color' },
+    height: { control: 'text' },
+    borderRadius: { control: 'text' },
+    animationDuration: { control: 'text' },
+    showValue: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+  },
+  args: { mode: 'determinate', value: 40, bufferValue: 70, height: '4px', showValue: false, ariaLabel: 'Progresso' },
+};
+export default meta;
+
+type Story = StoryObj<CaoProgressBarComponent>;
+
+export const Determinate: Story = {};
+
+export const Indeterminate: Story = { args: { mode: 'indeterminate' } };
+
+export const Buffer: Story = { args: { mode: 'buffer', value: 30, bufferValue: 65 } };
+
+export const Query: Story = { args: { mode: 'query' } };
+
+export const WithValue: Story = { args: { value: 72, showValue: true, height: '8px' } };
+
+export const CustomColors: Story = {
+  args: { value: 60, color: '#16a34a', trackColor: '#dcfce7', height: '10px', showValue: true },
+};
+
+export const Heights: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex;flex-direction:column;gap:16px;max-width:480px">
+        <cao-progress-bar [value]="60" height="2px" ariaLabel="Fino" />
+        <cao-progress-bar [value]="60" height="6px" ariaLabel="Médio" />
+        <cao-progress-bar [value]="60" height="14px" ariaLabel="Grosso" />
+        <cao-progress-bar [value]="60" height="14px" borderRadius="2px" ariaLabel="Quadrado" />
+      </div>`,
+  }),
+};

package/src/lib/shared/components/progress-bar/progress-bar.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
+
+import { CaoProgressBarMode } from './progress-bar.model';
+
+const clampPercent = (value: number): number => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+
+@Component({
+  selector: 'cao-progress-bar',
+  templateUrl: './progress-bar.html',
+  styleUrl: './progress-bar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoProgressBarComponent {
+  /** Modo de exibição. Padrão: `'determinate'`. */
+  readonly mode = input<CaoProgressBarMode>('determinate');
+  /** Progresso de 0 a 100 (modos `determinate` e `buffer`). */
+  readonly value = input(0, { transform: numberAttribute });
+  /** Valor do buffer de 0 a 100 (modo `buffer`). */
+  readonly bufferValue = input(0, { transform: numberAttribute });
+
+  /** Cor da barra de progresso (qualquer cor CSS). */
+  readonly color = input<string>('');
+  /** Cor do trilho. */
+  readonly trackColor = input<string>('');
+  /** Cor do buffer (modo `buffer`). */
+  readonly bufferColor = input<string>('');
+  /** Altura da barra. */
+  readonly height = input<string>('4px');
+  /** Raio da borda. Padrão: totalmente arredondada. */
+  readonly borderRadius = input<string>('');
+  /** Duração do ciclo da animação nos modos indeterminado/query/buffer. */
+  readonly animationDuration = input<string>('');
+  /** Exibe o percentual ao lado da barra (modos `determinate` e `buffer`). */
+  readonly showValue = input<boolean>(false);
+
+  readonly ariaLabel = input<string>('');
+  readonly ariaLabelledBy = input<string>('');
+  readonly dataCy = input<string>('');
+
+  protected readonly clampedValue = computed<number>(() => clampPercent(this.value()));
+  protected readonly clampedBuffer = computed<number>(() => clampPercent(this.bufferValue()));
+
+  protected readonly hasValue = computed<boolean>(() => this.mode() === 'determinate' || this.mode() === 'buffer');
+
+  protected readonly ariaValueNow = computed<number | null>(() =>
+    this.hasValue() ? Math.round(this.clampedValue()) : null,
+  );
+
+  protected readonly valueLabel = computed<string>(() => `${Math.round(this.clampedValue())}%`);
+}

package/src/lib/shared/components/progress-spinner/index.ts

@@ -0,0 +1,2 @@
+export * from './progress-spinner';
+export * from './progress-spinner.model';

package/src/lib/shared/components/progress-spinner/progress-spinner.css

@@ -0,0 +1,90 @@
+:host {
+  display: inline-block;
+  line-height: 0;
+}
+
+.cao-progress-spinner {
+  --_color: var(--cao-progress-spinner-color, #4f46e5);
+  --_track: var(--cao-progress-spinner-track-color, transparent);
+  --_duration: var(--cao-progress-spinner-duration, 1.4s);
+  --_text: var(--cao-progress-spinner-text-color, #111827);
+  --_circ: var(--cao-progress-spinner-circumference, 0px);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cao-progress-spinner__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.cao-progress-spinner__track {
+  stroke: var(--_track);
+}
+
+.cao-progress-spinner__indicator {
+  stroke: var(--_color);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 300ms ease;
+}
+
+.cao-progress-spinner__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_text);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.cao-progress-spinner--indeterminate .cao-progress-spinner__svg {
+  animation: cao-progress-spinner-rotate var(--_duration) linear infinite;
+}
+
+.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator {
+  animation: cao-progress-spinner-dash calc(var(--_duration) * 1.4) ease-in-out infinite;
+  transition: none;
+}
+
+@keyframes cao-progress-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes cao-progress-spinner-dash {
+  0% {
+    stroke-dashoffset: calc(var(--_circ) * 0.95);
+    transform: rotate(-90deg);
+  }
+  50% {
+    stroke-dashoffset: calc(var(--_circ) * 0.25);
+    transform: rotate(45deg);
+  }
+  100% {
+    stroke-dashoffset: calc(var(--_circ) * 0.95);
+    transform: rotate(270deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-progress-spinner__indicator {
+    transition: none;
+  }
+
+  .cao-progress-spinner--indeterminate .cao-progress-spinner__svg {
+    animation-duration: calc(var(--_duration) * 3);
+  }
+
+  .cao-progress-spinner--indeterminate .cao-progress-spinner__indicator {
+    animation-duration: calc(var(--_duration) * 4.2);
+  }
+}

package/src/lib/shared/components/progress-spinner/progress-spinner.html

@@ -0,0 +1,50 @@
+<div
+  class="cao-progress-spinner"
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  [class.cao-progress-spinner--determinate]="isDeterminate()"
+  [class.cao-progress-spinner--indeterminate]="!isDeterminate()"
+  [attr.aria-valuenow]="ariaValueNow()"
+  [attr.aria-label]="ariaLabel() || null"
+  [attr.aria-labelledby]="ariaLabelledBy() || null"
+  [attr.data-cy]="dataCy() || null"
+  [style.width.px]="size()"
+  [style.height.px]="size()"
+  [style.--cao-progress-spinner-color]="color() || null"
+  [style.--cao-progress-spinner-track-color]="trackColor() || null"
+  [style.--cao-progress-spinner-duration]="animationDuration() || null"
+  [style.--cao-progress-spinner-text-color]="textColor() || null"
+  [style.--cao-progress-spinner-circumference]="circumference() + 'px'">
+  <svg
+    class="cao-progress-spinner__svg"
+    focusable="false"
+    aria-hidden="true"
+    [attr.width]="size()"
+    [attr.height]="size()"
+    [attr.viewBox]="'0 0 ' + size() + ' ' + size()">
+    <circle
+      class="cao-progress-spinner__track"
+      fill="none"
+      [attr.cx]="center()"
+      [attr.cy]="center()"
+      [attr.r]="radius()"
+      [attr.stroke-width]="stroke()" />
+    <circle
+      class="cao-progress-spinner__indicator"
+      fill="none"
+      [attr.cx]="center()"
+      [attr.cy]="center()"
+      [attr.r]="radius()"
+      [attr.stroke-width]="stroke()"
+      [attr.stroke-linecap]="strokeLinecap()"
+      [attr.stroke-dasharray]="circumference()"
+      [attr.stroke-dashoffset]="dashOffset()" />
+  </svg>
+
+  @if (showValue() && isDeterminate()) {
+    <span class="cao-progress-spinner__value" aria-hidden="true" [style.font-size.px]="fontSize()">
+      {{ valueLabel() }}
+    </span>
+  }
+</div>

package/src/lib/shared/components/progress-spinner/progress-spinner.model.ts

@@ -0,0 +1,8 @@
+/**
+ * Modo do spinner de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ */
+export type CaoProgressSpinnerMode = 'determinate' | 'indeterminate';
+
+export type CaoProgressSpinnerLinecap = 'round' | 'butt' | 'square';

package/src/lib/shared/components/progress-spinner/progress-spinner.spec.ts

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoProgressSpinnerComponent } from './progress-spinner';
+
+describe('CaoProgressSpinnerComponent', () => {
+  let fixture: ComponentFixture<CaoProgressSpinnerComponent>;
+  let el: HTMLElement;
+
+  const root = () => el.querySelector<HTMLElement>('[role="progressbar"]') as HTMLElement;
+  const indicator = () => el.querySelector<SVGCircleElement>('.cao-progress-spinner__indicator') as SVGCircleElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CaoProgressSpinnerComponent] }).compileComponents();
+    fixture = TestBed.createComponent(CaoProgressSpinnerComponent);
+    el = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('inicia no modo indeterminate, sem aria-valuenow', () => {
+    expect(root().classList).toContain('cao-progress-spinner--indeterminate');
+    expect(root().hasAttribute('aria-valuenow')).toBe(false);
+    expect(indicator().hasAttribute('stroke-dashoffset')).toBe(false);
+  });
+
+  it('usa diâmetro padrão de 48px', () => {
+    expect(root().style.width).toBe('48px');
+    expect(el.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 48 48');
+  });
+
+  it('aplica diâmetro e espessura customizados', () => {
+    fixture.componentRef.setInput('diameter', 100);
+    fixture.componentRef.setInput('strokeWidth', 10);
+    fixture.detectChanges();
+    expect(root().style.width).toBe('100px');
+    expect(indicator().getAttribute('r')).toBe('45');
+    expect(indicator().getAttribute('stroke-width')).toBe('10');
+  });
+
+  it('calcula o stroke-dashoffset no modo determinate', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 50);
+    fixture.detectChanges();
+
+    const circumference = 2 * Math.PI * ((48 - 4.8) / 2);
+    expect(Number(indicator().getAttribute('stroke-dasharray'))).toBeCloseTo(circumference, 2);
+    expect(Number(indicator().getAttribute('stroke-dashoffset'))).toBeCloseTo(circumference / 2, 2);
+    expect(root().getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('limita o valor entre 0 e 100', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 250);
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-valuenow')).toBe('100');
+    expect(Number(indicator().getAttribute('stroke-dashoffset'))).toBeCloseTo(0, 2);
+  });
+
+  it('aceita value como string (numberAttribute)', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', '25');
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-valuenow')).toBe('25');
+  });
+
+  it('exibe o percentual apenas no modo determinate', () => {
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-spinner__value')).toBeNull();
+
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 75);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-spinner__value')?.textContent?.trim()).toBe('75%');
+  });
+
+  it('aplica aria-label, data-cy e linecap', () => {
+    fixture.componentRef.setInput('ariaLabel', 'Carregando dados');
+    fixture.componentRef.setInput('dataCy', 'spinner');
+    fixture.componentRef.setInput('strokeLinecap', 'butt');
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-label')).toBe('Carregando dados');
+    expect(root().getAttribute('data-cy')).toBe('spinner');
+    expect(indicator().getAttribute('stroke-linecap')).toBe('butt');
+  });
+});