Merge branch 'main' into lp-update-aus-ticker-changes

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -306,7 +306,7 @@ const mobileStickyAdStyles = css`
 	margin: 0 auto;
 	right: 0;
 	left: 0;
-	${getZIndex('mobileSticky')}
+	z-index: ${getZIndex('mobileSticky')};
 	${from.phablet} {
 		display: none;
 	}

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -223,7 +223,7 @@ const immersiveWrapper = css`
         This z-index is what ensures the headline text shows above the pseudo black
         box that extends the black background to the right
     */
-	${getZIndex('articleHeadline')}
+	z-index: ${getZIndex('articleHeadline')};
 	${until.mobileLandscape} {
 		margin-right: 40px;
 	}

dotcom-rendering/src/components/Card/Card.tsx

@@ -365,9 +365,9 @@ export const Card = ({
 				href={`${linkTo}#comments`}
 				cssOverrides={css`
 					/* See: https://css-tricks.com/nested-links/ */
-					${getZIndex('card-nested-link')}
+					z-index: ${getZIndex('card-nested-link')};
 					/* The following styles turn off those provided by Link */
-				color: inherit;
+					color: inherit;
 					/* stylelint-disable-next-line property-disallowed-list */
 					font-family: inherit;
 					font-size: inherit;
@@ -614,7 +614,9 @@ export const Card = ({
 								<div
 									css={css`
 										position: relative;
-										${getZIndex('card-nested-link')}
+										z-index: ${getZIndex(
+											'card-nested-link',
+										)};
 									`}
 								>
 									<Island
@@ -654,7 +656,9 @@ export const Card = ({
 										css={css`
 											display: block;
 											position: relative;
-											${getZIndex('card-nested-link')}
+											z-index: ${getZIndex(
+												'card-nested-link',
+											)};
 										`}
 									>
 										<Island

dotcom-rendering/src/components/Card/components/CardBranding.tsx

@@ -35,7 +35,7 @@ const brandingWrapperStyle = css`
 	text-align: right;
 	flex: auto;
 	/* See: https://css-tricks.com/nested-links/ */
-	${getZIndex('card-nested-link')}
+	z-index: ${getZIndex('card-nested-link')};
 	position: relative;
 `;
 

dotcom-rendering/src/components/Card/components/CardLink.tsx

@@ -4,7 +4,7 @@ import { getZIndex } from '../../../lib/getZIndex';
 
 const fauxLinkStyles = css`
 	position: absolute;
-	${getZIndex('card-link')};
+	z-index: ${getZIndex('card-link')};
 	top: 0;
 	right: 0;
 	bottom: 0;

dotcom-rendering/src/components/CardHeadline.tsx

@@ -119,7 +119,7 @@ const getFontSize = (
 const sublinkStyles = css`
 	display: block;
 	/* See: https://css-tricks.com/nested-links/ */
-	${getZIndex('card-nested-link')}
+	z-index: ${getZIndex('card-nested-link')};
 	/* The following styles turn off those provided by Link */
 	color: inherit;
 	text-decoration: none;

dotcom-rendering/src/components/Carousel.importable.tsx

@@ -255,7 +255,7 @@ const buttonContainerStyle = css`
 	flex-direction: column;
 	justify-content: center;
 	position: absolute;
-	${getZIndex('onwardsCarousel')}
+	z-index: ${getZIndex('onwardsCarousel')};
 	height: 100%;
 	padding-bottom: 36px; /* Align buttons centrally with cards */
 

dotcom-rendering/src/components/CarouselForNewsletters.importable.tsx

@@ -189,7 +189,7 @@ const buttonContainerStyle = css`
 	flex-direction: column;
 	justify-content: center;
 	position: absolute;
-	${getZIndex('onwardsCarousel')}
+	z-index: ${getZIndex('onwardsCarousel')};
 	height: 100%;
 	padding-bottom: 36px; /* Align buttons centrally with cards */
 

dotcom-rendering/src/components/ContainerOverrides.tsx

@@ -1077,6 +1077,28 @@ const carouselChevronBorderDisabledDark: ContainerFunction = (
 	containerPalette,
 ) => transparentColour(cardHeadlineDark(containerPalette), 0.4);
 
+const slideshowPaginationDotLight: ContainerFunction = (containerPalette) => {
+	switch (containerPalette) {
+		case 'BreakingPalette':
+		case 'InvestigationPalette':
+		case 'SombrePalette':
+		case 'SombreAltPalette':
+			return transparentColour(cardHeadlineLight(containerPalette), 0.4);
+		default:
+			return transparentColour(cardHeadlineLight(containerPalette), 0.2);
+	}
+};
+
+const slideshowPaginationDotDark: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
+const slideshowPaginationDotActiveLight: ContainerFunction = (
+	containerPalette,
+) => cardHeadlineLight(containerPalette);
+const slideshowPaginationDotActiveDark: ContainerFunction = (
+	containerPalette,
+) => cardHeadlineDark(containerPalette);
+
 type ColourName = Parameters<typeof palette>[0];
 
 type ContainerFunction = (containerPalette: DCRContainerPalette) => string;
@@ -1210,6 +1232,14 @@ const containerColours = {
 		light: carouselChevronHoverLight,
 		dark: carouselChevronHoverDark,
 	},
+	'--slideshow-pagination-dot': {
+		light: slideshowPaginationDotLight,
+		dark: slideshowPaginationDotDark,
+	},
+	'--slideshow-pagination-dot-active': {
+		light: slideshowPaginationDotActiveLight,
+		dark: slideshowPaginationDotActiveDark,
+	},
 	'--section-border': {
 		light: sectionBorderLight,
 		dark: sectionBorderDark,

dotcom-rendering/src/components/Details.tsx

@@ -36,7 +36,7 @@ const Position = ({
 			css={css`
 				/* Decide where the content revealed by details appears */
 				position: absolute;
-				${getZIndex('summaryDetails')}
+				z-index: ${getZIndex('summaryDetails')};
 				${positionStyles}
 			`}
 		>

dotcom-rendering/src/components/Dropdown.importable.tsx

@@ -42,7 +42,7 @@ interface Props {
 }
 
 const ulStyles = css`
-	${getZIndex('dropdown')}
+	z-index: ${getZIndex('dropdown')};
 	list-style: none;
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns */
 	/* Needs double escape char: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#es2018_revision_of_illegal_escape_sequences */

dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx

@@ -19,7 +19,7 @@ const container = css`
 	position: relative;
 	top: 0;
 	background-color: ${palette.brand[800]};
-	${getZIndex('editionSwitcherBanner')};
+	z-index: ${getZIndex('editionSwitcherBanner')};
 `;
 
 const content = css`

dotcom-rendering/src/components/ExpandableMarketingCardSwipeable.tsx

@@ -35,7 +35,7 @@ const hideBannerStyles = css`
 const stickyContainerStyles = css`
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')};
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	/* The component slides in from the left-hand side */
 	animation: slidein 2.4s linear;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -217,7 +217,7 @@ const CommentCount = ({
 			href={`${linkTo}#comments`}
 			cssOverrides={css`
 				/* See: https://css-tricks.com/nested-links/ */
-				${getZIndex('card-nested-link')}
+				z-index: ${getZIndex('card-nested-link')};
 				/* The following styles turn off those provided by Link */
 				color: inherit;
 				/* stylelint-disable-next-line property-disallowed-list */

dotcom-rendering/src/components/GridItem.tsx

@@ -16,7 +16,7 @@ const rightColumnStyles = css`
 	top: 0;
 	right: 0;
 	/* Pop me below the body */
-	${getZIndex('rightColumnArea')}
+	z-index: ${getZIndex('rightColumnArea')};
 
 	@supports (display: grid) {
 		position: relative;
@@ -25,7 +25,7 @@ const rightColumnStyles = css`
 
 const bodyStyles = css`
 	/* Pop me above the right column */
-	${getZIndex('bodyArea')}
+	z-index: ${getZIndex('bodyArea')};
 `;
 
 const gridArea = css`

dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx

@@ -69,7 +69,7 @@ const stickyNavBaseStyles = css`
 	background-color: ${sourcePalette.neutral[100]};
 	border: 1px solid ${sourcePalette.neutral[86]};
 	top: 0;
-	${getZIndex('banner')}
+	z-index: ${getZIndex('banner')};
 `;
 
 const olStyles = css`

dotcom-rendering/src/components/LightboxLayout.importable.tsx

@@ -204,7 +204,7 @@ export const LightboxLayout = ({ format, images }: Props) => {
 					html.lightbox-open {
 						#gu-lightbox {
 							position: fixed;
-							${getZIndex('lightbox')};
+							z-index: ${getZIndex('lightbox')};
 						}
 
 						body {

dotcom-rendering/src/components/MainMedia.tsx

@@ -47,9 +47,9 @@ const immersiveWrapper = css`
         we use this grow here to ensure the content fills the available height
     */
 	flex-grow: 1;
-	${getZIndex('mainMedia')}
+	z-index: ${getZIndex('mainMedia')};
 	/* Prevent the immersive image 100vh from spilling into main content */
-    overflow: hidden;
+	overflow: hidden;
 `;
 
 const chooseWrapper = (format: ArticleFormat) => {

dotcom-rendering/src/components/Masthead/Titlepiece/EditionDropdown.tsx

@@ -23,7 +23,7 @@ interface EditionDropdownProps {
 }
 
 const editionDropdownStyles = css`
-	${getZIndex('mastheadEditionDropdown')};
+	z-index: ${getZIndex('mastheadEditionDropdown')};
 	display: flex;
 	/** Required to absolutely position the dropdown menu */
 	position: relative;

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/ExpandedNav.tsx

@@ -40,7 +40,7 @@ export const expandedMenuStyles = css`
 `;
 
 const wrapperMainMenuStyles = css`
-	${getZIndex('expanded-veggie-menu-wrapper')}
+	z-index: ${getZIndex('expanded-veggie-menu-wrapper')};
 	left: 0;
 	top: 0;
 
@@ -62,7 +62,7 @@ const wrapperMainMenuStyles = css`
 const mainMenuStyles = css`
 	background-color: ${themePalette('--masthead-nav-background')};
 	${textSans20};
-	${getZIndex('expanded-veggie-menu')}
+	z-index: ${getZIndex('expanded-veggie-menu')};
 	left: 0;
 	top: 0;
 	box-sizing: border-box;

dotcom-rendering/src/components/Masthead/Titlepiece/VeggieBurger.tsx

@@ -12,7 +12,7 @@ const labelStyles = css`
 	${`#${navInputCheckboxId}`}:checked ~ div & {
 		${until.desktop} {
 			/* Bump the z-index of the burger menu when expanded */
-			${getZIndex('mastheadVeggieBurgerExpandedMobile')}
+			z-index: ${getZIndex('mastheadVeggieBurgerExpandedMobile')};
 		}
 	}
 `;

dotcom-rendering/src/components/SlideshowCarousel.importable.tsx

@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { space, textSansBold12, width } from '@guardian/source/foundations';
+import {
+	from,
+	space,
+	textSansBold12,
+	width,
+} from '@guardian/source/foundations';
 import type { ThemeButton } from '@guardian/source/react-components';
 import {
 	Button,
@@ -49,18 +54,18 @@ const carouselItemStyles = css`
 `;
 
 const captionStyles = css`
-	${textSansBold12}
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	right: 0;
+	${textSansBold12}
+	color: ${palette('--slideshow-caption')};
 	background: linear-gradient(
 		to bottom,
 		rgba(0, 0, 0, 0) 0%,
 		rgba(0, 0, 0, 0.8) 100%
 	);
-	color: ${palette('--slideshow-caption')};
-	padding: 60px ${space[2]}px ${space[2]}px;
+	padding: ${space[10]}px ${space[2]}px ${space[2]}px;
 `;
 
 const navigationStyles = css`
@@ -70,20 +75,25 @@ const navigationStyles = css`
 `;
 
 const buttonStyles = css`
-	display: flex;
-	gap: ${space[2]}px;
+	display: none;
+	${from.tablet} {
+		display: flex;
+		gap: ${space[2]}px;
+	}
 `;
 
 /**
  * Padding is added to the left of the scrolling navigation dots to match the
- * width of the navigation buttons on the right. This allows them to be centred
- * below the slideshow image.
+ * width of the navigation buttons on the right at tablet and above. This allows
+ * them to be centred below the slideshow image.
  */
 const scrollingDotStyles = css`
 	display: flex;
 	justify-content: center;
 	flex: 1 0 0;
-	padding-left: ${width.ctaSmall * 2 + space[2]}px;
+	${from.tablet} {
+		padding-left: ${width.ctaSmall * 2 + space[2]}px;
+	}
 `;
 
 export const SlideshowCarousel = ({