bug(strong-focus-indicator): Focus indicator should adapt its border-radius to the component shape

[ryuran]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The strong focus indicator should adapt its border-radius to the component shape

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-ucszx2c1?file=src%2Fmain.ts
Steps to reproduce: use keyboard to navigate with Tab and Shift+Tab

Expected Behavior

The strong focus indicator should follow the chape of the focused element gracefully

Actual Behavior

The focus indicator is way less rounded than the element.

Environment

• Angular: 19+
• CDK/Material: 19+
• Browsers: all
• Operating System (e.g. Windows, macOS, Ubuntu): all

Fix proposition

[mat-fab] {
  --mat-focus-indicator-border-radius: calc(
    var(--mdc-fab-container-shape, var(--mat-sys-corner-large)) + 4px
  );
}

[mat-mini-fab] {
  --mat-focus-indicator-border-radius: calc(
    var(--mdc-fab-small-container-shape, var(--mat-sys-corner-medium)) + 4px
  );
}

.mat-calendar-body-cell {
  --mat-focus-indicator-border-radius: var(--mat-sys-corner-small, 8px);
}

mat-expansion-panel-header {
  --mat-focus-indicator-border-radius: var(
    --mat-expansion-container-shape,
    var(--mat-sys-corner-medium, 12px)
  );
}

mat-step-header {
  --mat-focus-indicator-border-radius: var(
    --mat-stepper-header-hover-state-layer-shape,
    var(--mat-sys-corner-medium, 12px)
  );
}

mat-tab-header {
  --mat-focus-indicator-border-radius: var(--mat-sys-corner-small, 8px);
}