Regression from #201 / #205. Selecting a format in the language rail leaves no visible
mark, so there is no way to tell which one is active.
Cause
#205 moved the selection ring off the chip and onto the badge:
.language-chip.on .lang-tag {
border-color: var(--amber);
}.lang-tag belongs to app-language-badge, a component of its own. Angular's emulated
encapsulation rewrites a selector spelled in the rail's stylesheet with the rail's
_ngcontent attribute, so it is compiled to something that can never match an element
the badge rendered. The rule is dead, silently — and the only border left on the badge
is its own hue hairline from #196.
Why the test did not catch it
badgeBoxes counted how many boxes were drawn around the badge and asserted 1. The
badge's own hairline is that one, so the count stayed right while the selection lost its
mark entirely. Counting outlines was the wrong question.
Shape
Hand the state down as a custom property, which inherits across the encapsulation
boundary where a rule cannot cross it: hue-badge reads --badge-ring / --badge-surface
with its hue as the fallback, and the rail sets them on .language-chip.
Done when
The selected format is marked on the badge itself, one ring and not two, and a test
compares the same badge's border colour selected against at rest rather than counting
how many borders exist.
Regression from #201 / #205. Selecting a format in the language rail leaves no visible
mark, so there is no way to tell which one is active.
Cause
#205 moved the selection ring off the chip and onto the badge:
.lang-tagbelongs toapp-language-badge, a component of its own. Angular's emulatedencapsulation rewrites a selector spelled in the rail's stylesheet with the rail's
_ngcontentattribute, so it is compiled to something that can never match an elementthe badge rendered. The rule is dead, silently — and the only border left on the badge
is its own hue hairline from #196.
Why the test did not catch it
badgeBoxescounted how many boxes were drawn around the badge and asserted1. Thebadge's own hairline is that one, so the count stayed right while the selection lost its
mark entirely. Counting outlines was the wrong question.
Shape
Hand the state down as a custom property, which inherits across the encapsulation
boundary where a rule cannot cross it:
hue-badgereads--badge-ring/--badge-surfacewith its hue as the fallback, and the rail sets them on
.language-chip.Done when
The selected format is marked on the badge itself, one ring and not two, and a test
compares the same badge's border colour selected against at rest rather than counting
how many borders exist.