From c279350e03990953f2cc4df0c9802acb2e825cf8 Mon Sep 17 00:00:00 2001 From: Yichen Jiang Date: Sat, 5 Sep 2026 15:11:25 +0800 Subject: [PATCH] fix(client): keep the Switch track capsule under the global corner shape MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The track's radius is half its height, so its corners consume the whole side and the global `superellipse(1.5)` squares the ends off — beside a thumb that already opts out at `border-radius: 50%`, leaving a round knob in a squared-off slot. Pair `corner-shape: round` with the radius, the way every full-round radius in the repository does. The corner-shape stylesheet spec recognizes 50%, 100%, and radii at or above 99px, so a radius that is full-round only relative to its own box passes it; the comment records that gap at the rule it affects. --- packages/client/ui-primitives/src/Switch.module.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/client/ui-primitives/src/Switch.module.css b/packages/client/ui-primitives/src/Switch.module.css index 66dd4e3643..c038331a66 100644 --- a/packages/client/ui-primitives/src/Switch.module.css +++ b/packages/client/ui-primitives/src/Switch.module.css @@ -1,5 +1,12 @@ /* The on/off appearance keys off aria-checked rather than a parallel class, so - * the visual state cannot disagree with the state assistive technology reads. */ + * the visual state cannot disagree with the state assistive technology reads. + * + * The track is a capsule: its radius is half its height, so the corners consume + * the whole side and the global superellipse would square the ends off against + * the round thumb inside it. `corner-shape: round` opts the track out, the way + * every full-round radius does. The corner-shape spec does not catch this one — + * it recognizes 50%, 100%, and radii at or above 99px, not a radius that is + * full-round only relative to its own box. */ .switch { box-sizing: border-box; position: relative; @@ -9,6 +16,7 @@ padding: 2px; border: 0; border-radius: 10px; + corner-shape: round; background: var(--dsw-alias-border-l3); cursor: pointer; }