Focus indicator module

[inikolova]

This PR introduces a new focus indicator module, that provides a structured approach to implementing focus states across all Kendo UI components. This module separates the visual structure of focus indicators from their color values. It is built on the existing design system modules - elevation, border radius etc.

Separation of structure and color

Focus indicator patterns define structure (width, offset, style), while colors are applied at the component level.
Structure is defined in the module:

// packages/core/scss/focus-indicator/index.scss
$default-focus-indicator: (
    shadow: (
        outset: (
            offset-x: 0,
            offset-y: 0,
            spread: 0,
            width: 2px
        ),
        inset: (
            inset: true,
            offset-x: 0,
            offset-y: 0,
            spread: 0,
            width: 2px
        )
    ),
    border: (
        width: 2px,
        style: solid
    )
) !default;

Colors are applied per component

.k-input:focus {
    @include focus-indicator-shadow('outset', $kendo-input-focus-shadow);
    // The second parameter is the component-specific color
}

Theme-Specific Configuration Maps

Each theme package contains its own $kendo-focus-indicator map with variants suited to that theme's design language:

// packages/core/scss/focus-indicator/index.scss
$default-focus-indicator: (
    shadow: (
        outset: (...),  // Standard box-shadow
        inset: (...)    // Inset box-shadow
    ),
    border: (...)
)

Material theme:

// packages/material/scss/core/focus-indicator/index.scss
$_default-focus-indicator: (
    border: (
        width: 1px,
        style: solid
    ),
    background: (),  // Material can use background-based focus
    outline: (
        inner-thin: (offset: -2px, width: 2px.....),
        inner-deep: (offset: -4px, width: 2px.....),
        ....
    )
)

Mixins

The module exposes four mixins for different focus indicator patterns:
- focus-indicator-shadow($variant, $color) - generates box-shadow-based focus indicators;
- focus-indicator-outline($variant, $color) - generates outline-based focus indicators;
- focus-indicator-border($color) - generates border-based focus indicators;
- focus-indicator-background($color) - generates background-based focus indicators;

CSS variables

The module generates CSS variables for runtime configuration
--kendo-focus-indicator-shadow: 0 0 0 2px currentColor;
--kendo-focus-indicator-border: 1px solid currentColor;
// ........ etc.

Only colors are fluid

They depend on the component context

.k-input-solid:focus {
    @include focus-indicator-shadow('outset', $kendo-input-focus-shadow);
}

[github-actions]

Packages Report

	core	default	classic	bootstrap	material	fluent	utils	html
Size	29.32 KB (0.4%🔼)	771.17 KB (0.0%🔼)	769.90 KB (0.0%🔼)	785.08 KB (0.0%🔼)	919.63 KB (0.1%🔼)	1185.31 KB (0.0%🔼)	625.19 KB (0.0%)	77.77 MB (0.0%)
Gzip Size	4.89 KB (0.6%🔼)	99.60 KB (0.0%🔼)	99.83 KB (0.0%🔼)	101.53 KB (0.0%🔼)	113.17 KB (0.5%🔼)	137.10 KB (0.0%🔼)	52.16 KB (0.0%)	15.95 MB (0.0%)
Compile Time	0.7 s (-22.2%🔽)	3.0 s (0.0%)	2.7 s (0.0%)	3.0 s (0.0%)	3.1 s (0.0%)	3.5 s (0.0%)	2.4 s (0.0%)	8.3 s (0.0%)