Another alternative would be to have a separate entity, something like:

        (
            FocusRingNode,
            Node {
                position_type: PositionType::Absolute,
                left: Val::Px(0.),
                right: Val::Px(0.),
                top: Val::Px(0.),
                bottom: Val::Px(0.),
                ..Default::default()
            },
            Outline {
                color: theme.color(tokens::FOCUS_RING),
                width: Val::Px(2.0),
                offset: Val::Px(2.0),
            },
        )

And then when input focus changes, reparent the FocusRingNode to the new entity. There would also need to be a system that synchronised the border radii. Then you can set an arbitrary zindex on the ring node, and there would be no need to remove the outline from the previous entity.

I think I'd like to put this issue aside for now.

Using outlines does cause a minor cosmetic problem when using segmented buttons (the adjacent button renders on top of the outline). However, most users will never see this, as focus outlines are disabled until you actually use tab navigation. Other than that minor glitch, outlines work pretty well.

A different approach is to temporarily modify the z-index of the focused button.

In any case, I only mentioned this as speculation; I didn't actually expect to get a solution :)

I don't like reusing Outline for this: it causes z-ordering issues, and because it's used for other things, you have to be careful of bugs around restoring the outline when removing focus.

I think that a separate entity with a dedicated component is going to be a much better foundation.

If that's the case, then what are outlines for?

Note that I didn't implement focus rings for core widgets, because of exactly this: core widgets aren't supposed to make assumptions about what styling decisions the client is going to make, whether or not they want to use outlines for focus or some other purpose. The place where I used outlines is (a) in examples, and (b) in the feathers widgets -- both of which presumably "own" their styling.

Sure, we can make something that spawns an absolutely-positioned child entity that inflates the parent's box and draws a border, copying over the border radius (although it will get tricky because we want to increase the radius value by the offset).

But my question then is, why did we add the outlines feature at all? I mean, you could make the argument that anyone who uses outlines for any reason is denying someone else the use of outline for some other reason.

I should note that outlines on the web have exactly this same problem, but I don't think that lets us off the hook; rather I think it means that we're copying the web's mistakes.

But my question then is, why did we add the outlines feature at all?

That's a very good point.

What if we rename the outline component to less of an attractive nuisance: something like FocusOutline? Then, point to Border in the docs for other uses.

We can then change the implementation to use multiple entities and have better z-layering in follow-up.

Sure, we can make something that spawns an absolutely-positioned child entity that inflates the parent's box and draws a border, copying over the border radius (although it will get tricky because we want to increase the radius value by the offset).

There's no need to recalculate the border-radius when using outlines for this. It just needs to match the border-radius of the parent. The system for updating the FocusRingNode's border-radius would be very simple, just query for its parent's border-radius and copy it.

I don't think we need to solve the "restore previous outline when unfocused" problem right now. We can solve this later when we implement a more robust way of doing focus rings.

My reasoning is this: the use of outlines to implement focus rings is limited to the following cases:

• examples (specifically core_widgets and input_focus examples).
• feathers

Neither of these cases permits conflicting uses of outlines, but for different reasons. In the case of examples, the user can't re-use the components. In the case of feathers, we can simply declare by fiat that we "own" the outline (this is the benefit of having an opinionated widget collection).

If someone comes along later and says, "no I really want to use a feathers button but I want my own outlines for some different purpose" we can solve it then.

@ickshonpe @alice-i-cecile So I went ahead and implemented the "focus outline as child entity" solution...and it doesn't solve the problem! Well, it doesn't solve the Z-ordering problem.

Using a local ZIndex doesn't do anything: it only affects order relative to siblings, and since the focus outline entity is a child, it doesn't have any siblings.

Using GlobalZIndex is problematic for different reasons: since there's no way for me to know the z-index of the parent, I have to pick some hard-coded value for the z-index for all outlines. I could pick some huge number and make the outlines always be on top, but what if I don't want the outline on top? Like, what if I want a tooltip or other kind of overlay to be above the focus outlines?

What we need is a RelativeGlobalZIndex!

Setting a GlobalZIndex doesn't seem great.
Maybe if it just walks up the tree raising the local ZIndex of all the focused elements ancestors as well? There could be some component that automatically moves not only the local node but also its ancestors to the top of the local draw order.

I think for now let's just punt and solve it later. I worry about trying to shave too many yaks in one PR.

I don't like reusing Outline for this: it causes z-ordering issues, and because it's used for other things, you have to be careful of bugs around restoring the outline when removing focus.

I think that a separate entity with a dedicated component is going to be a much better foundation.

The name "Anchor" is usually used to refer to anchor points, maybe something else would be clearer. VisibleFocusOutline?

I wanted a name that suggests this is not an outline, but rather an attachment point for an outline.

Maybe -Mount or -Base?

I'd prefer an alternative if there's a good one but it's not super important and I'm fine with using -Anchor if you aren't happy with anything else. It's just that everywhere else an "anchor" means an attachment at a specific geometric point, instead of fit around this node like it does here.

Nodes with a measure func like Text entities don't like having children, if a text node is given a focus outline like this it will probably collapse to zero size.