diff --git a/library/components/map-controls/MapControlButton.vue b/library/components/map-controls/MapControlButton.vue index c35713b24..b3f341455 100644 --- a/library/components/map-controls/MapControlButton.vue +++ b/library/components/map-controls/MapControlButton.vue @@ -68,6 +68,11 @@ useShadowStyles(` /* shape="square" on a STANDALONE button: their 4px corners, our fill and shadow kept. A button inside .map-toolbar--square is overridden back to 0 by the toolbar's rules. */ .mcb--square{ border-radius:4px; } +/* shape="rounded-square" — the HEADER-BAR button form (design rule, 2026-09-30): map controls stay ROUND, + but a button in a dashboard HEADER is a rounded square at the SAME radius as the gallery's vertical + tabs. --vtl-radius is that ONE shared variable (VerticalTabsLayout .vtl-tab), so the header button + and the tabs can never drift; 8px is only the fallback for a context that never set it. */ +.mcb--rounded-square{ border-radius:var(--vtl-radius,8px); } /* ★ REDUCED MOTION, OWNED BY THIS COMPONENT. A page-level rule cannot reach into a shadow root, and no generated leaf ships one anyway (measured: 0 across the whole tree), so a component @@ -93,7 +98,7 @@ defineProps({ * strip it back off -- the two rule sets compose rather than compete, and the toolbar wins by * being the more specific selector. */ - shape: { type: String, default: 'round' } + shape: { type: String, default: 'round', validator: (v) => ['round', 'square', 'rounded-square'].includes(v) } }) defineEmits(['click']) @@ -123,7 +128,7 @@ defineEmits(['click']) -->