Add border gap and color

[chiefcll]

Update Rounded & Border shaders to add border-gap and border-gapColor properties to support offset borders and fill colors inside the gap.

This PR allows gap: 6, gap: 0, and gap: -6 to allow inset

[jfboeve]

I like the idea of adding this, however I can see that the border alignment has changed from an inside border to an outside border. And the border gap does not work for bordered shaders without rounded edges.

So I want to propose the following changes:

• add border alignment: inside(default), center, and outside.
• gap is controlled by the red line you can see in the attached image below
• add gap, gapColor, aligment to Border template (so you don't have to do the typing for border everywhere you use it).
• since all shaders have a canvas2d copy we will also need these changes for those versions.

[chiefcll]

Thanks for the feedback and visual.

Most (all) designs want outside and that is the default with CSS / Web. I've never seen an inside border before Lightning. Additionally, I'm not sure what a "center" alignment would be nor what value that would offer which makes it best to just drop that.

A gap going inside might be weird as well. Inside border probably shouldn't support a gap. I don't think the graphic represents that correctly. I would think a gap is before the border starts, so you'd have Blue, redline, and an interior border after the gap.

So if we do inside and outside alignment, gap would only be supported on outside. I think we're just increasing complexity for a feature folks won't use.

I'll work on the Border and canvas shader.. @elsassph Any comment from you?

[jfboeve]

Regarding the alignment:

Vector Graphics & UI Design Software (e.g., Adobe Illustrator, Sketch, Figma)

In applications like Figma, the default border (or stroke) alignment is typically "inside" the frame or path of the element.

• Inside: The border is drawn within the element's defined dimensions. This is common in UI design to ensure elements maintain their intended width and height without the border pushing content outward.
• Center: The border is centered on the edge of the element, with half the stroke width inside and half outside.
• Outside: The border is drawn outside the element's boundary.

The default is often "inside".

Regarding the gap:

It's fine if you only want to apply it only when the border falls outside of the node. However I'm kind of questioning if this is not one of those features most folks won't use either.

[ftardif]

We are very interested in seeing this feature supported natively in the renderer. The 'focus ring' on a selected component is a foundational pattern in modern TV UI design. Having this included and optimized at the renderer level would be a significant win for both performance and developer experience.

[girouxc]

I looked at a couple apps available on my tv, and all of them (Netflix, Prime, Youtube, Spotify) use an outer border to present the active element. Prime and Spotify also use an outer border gap, so I think this is a widely used feature and it would be great to add additional support for it !

[girouxc]

should we add it directly to BorderProps instead ?