diff --git a/internal/check-square-map-controls.mjs b/internal/check-square-map-controls.mjs index 460762287..809e1fde3 100644 --- a/internal/check-square-map-controls.mjs +++ b/internal/check-square-map-controls.mjs @@ -115,6 +115,18 @@ ok(/:only-child[^{]*\{[^}]*border-radius:\s*4px/.test(TOOLBAR), 'and a lone cont ok(sqGap > -1 && sqGap < mq, 'CONTROL: the base square rule really does come BEFORE the media block, which is why the override is needed at all') } +// ── 2c. NO CHILD BRINGS ITS OWN OUTLINE ────────────────────────────────────────── +// ShareButton is not a .mcb -- it wraps its button in .share-wrap with border-radius:50% and a +// conic-gradient ring on ::before -- so the button rules missed it and it kept a round rainbow halo +// inside the square panel. Found by rega at 390, not by me. +ok(/\.map-toolbar--square \.share-wrap \{[^}]*border-radius:\s*0/.test(TOOLBAR), + 'the square panel flattens .share-wrap, which is a div and not a .mcb') +ok(/\.map-toolbar--square \.share-wrap::before \{[^}]*display:\s*none/.test(TOOLBAR), + "and suppresses its conic-gradient ring -- in this variant the PANEL owns the outline") +ok(/\.share-wrap\{[^}]*border-radius:50%/.test(readFileSync(join(REPO, 'library/components/map-controls/ShareButton.vue'), 'utf8').replace(/\s+/g, '')) || + /border-radius:\s*50%/.test(readFileSync(join(REPO, 'library/components/map-controls/ShareButton.vue'), 'utf8')), + 'CONTROL: ShareButton really does carry a 50% radius of its own, so the two rules above are not decorative') + // ── 3. forced colours, which the round buttons never had ──────────────────────────────────────── ok(/@media \(forced-colors: active\)/.test(TOOLBAR), 'the square variant ships a forced-colors block') ok(/ButtonText/.test(TOOLBAR), 'using ButtonText, so the ring and dividers survive a replaced palette') diff --git a/library/components/map-controls/MapToolbar.vue b/library/components/map-controls/MapToolbar.vue index c72ad0d52..29a6b9229 100644 --- a/library/components/map-controls/MapToolbar.vue +++ b/library/components/map-controls/MapToolbar.vue @@ -98,6 +98,14 @@ useShadowStyles(` .map-toolbar--square > * + * { border-top: 1px solid #ddd; } /* .hbg-ctrl's 10px top margin would tear the panel apart; inside the group it has no business. */ .map-toolbar--square .hbg-ctrl { margin: 0; } +/* ★ ShareButton IS NOT A .mcb, so the rules above missed it. It wraps its button in a .share-wrap div + carrying border-radius:50% plus a conic-gradient ring on ::before at inset:-2px -- which inside the + panel reads as a circular rainbow halo poking out of one corner, breaking the single-card illusion + at exactly the place the eye lands. rega measured it at 390 and asked whether square should flatten + it; it should: in this variant the PANEL owns the outline, so a child may not bring its own. + The round default keeps its ring untouched. */ +.map-toolbar--square .share-wrap { border-radius: 0; } +.map-toolbar--square .share-wrap::before { display: none; } /* ★ OUTER CORNERS ONLY, AND NO overflow:hidden. Clipping would have been the quick way to round the panel, but it also clips a focus ring on any inner button -- and the engine does not do it: it rounds the first and last buttons instead (button:focus:first-child -> 4px 4px 0 0, :last-child