Enhancement: Focus outline inset

[joeyHarig]

Description

Allow specification of focus outline on components to be inset. Components like calcite-action and calcite-input utilize inset outlines when focused on while calcite-button and calcite-dropdown utilize an outset outline. When the surrounding elements prevent overflow, outset outlines can be covered hidden.

Acceptance Criteria

• add prop to components with outset focus outlines to allow them to be inset

Which Component

• calcite-button
• calcite-stepper
• calcite-tabs

possibly

• calcite-switch

Example Use Case

[macandcheese]

We will need to examine how to allow this while ensuring focus is visible, for example a focus outline that is inset on a filled blue button is not perceivable.

[geospatialem]

Reallocating this issue to tackle in February's priorities.

[geospatialem]

Re-adjusting the timeline to accommodate upcoming Esri events and will tackle as part of the March priorities in coordination with #4633.

[ashetland]

Proposal to make this a system-wide customization

Add two CSS variables for customization at the root or component level (actual text TBD):

• --calcite-ui-focus-offset (default to what is currently most common (-2px?))
• --calcite-ui-focus-color (defaults to ui-brand)

cc: @jcfranco @macandcheese @geospatialem

[ashetland]

Also related: #6588

[geospatialem]

Further research is needed to carry out the above proposal of two exposed CSS vars.

In April we'll research further to assess a time estimate and priority prior to assigning to a future milestone for implementation.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on master:

--calcite-ui-focus-color: var(--calcite-ui-danger);

--calcite-ui-focus-color: var(--calcite-ui-danger);
--calcite-ui-focus-offset-invert: 1;