diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index c74361be73a..cdb9e46b2ab 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/packages/styles/scss/components/card-group/_card-group.scss
@@ -59,6 +59,10 @@
:host(#{$c4d-prefix}-card-group-item) {
display: contents;
+ * {
+ row-gap: 0;
+ }
+
.#{$prefix}--card {
display: grid;
border: 0;
@@ -73,6 +77,7 @@
display: grid;
justify-content: revert;
grid-row: span 10;
+ grid-template-columns: subgrid;
grid-template-rows: subgrid;
&::before,
@@ -91,15 +96,15 @@
.#{$prefix}--card__content {
display: grid;
grid-area: 1 / 1 / -1 / -1;
+ grid-template-columns: subgrid;
grid-template-rows: subgrid;
- row-gap: 0;
}
.#{$prefix}--card__copy {
display: grid;
grid-row: span 2;
+ grid-template-columns: subgrid;
grid-template-rows: subgrid;
- row-gap: 0;
}
}
diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
index d63c6cd9cf5..3f84b32e114 100644
--- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
+++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -340,7 +340,7 @@ $hover-transition-timing: 95ms;
.#{$prefix}--toc__navbar-chevron-right-container {
z-index: 2;
- inset-inline-end: -$spacing-01;
+ inset-inline-end: 0;
@include breakpoint(md) {
inset-inline-end: -$spacing-05;
@@ -417,11 +417,11 @@ $hover-transition-timing: 95ms;
border-block-start: 1px solid $border-subtle-00;
content: '';
inset-block-start: -1px;
- inset-inline: calc(-50vw + 50%) 100%;
+ inset-inline: calc(-50vw + 50% + $spacing-03) 100%;
}
&::after {
- inset-inline: 100% calc(-50vw + 50%);
+ inset-inline: 100% calc(-50vw + 50% + $spacing-03);
}
}
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 598b15243c7..3666243ef16 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -38,6 +38,14 @@ const tagGroupContent = html`
`;
+const copyMarkupContent = html`
+
+ - Placerat augue
+ - Mauris aliquam
+ - Habitant hac
+
+`;
+
export const Default = (args) => {
const {
aspectRatio,
@@ -52,6 +60,7 @@ export const Default = (args) => {
eyebrow,
tagGroup,
copy,
+ copyMarkup,
cardStyles,
customVideoTitle,
} = args?.Card ?? {};
@@ -96,7 +105,7 @@ export const Default = (args) => {
: ``}
${eyebrow}
${videoCopy ?? heading}
- ${copy ? html`${copy}
` : ``}
+ ${copyMarkup ? copyMarkupContent : copy ? html`${copy}
` : ``}
${tagGroup ? html` ${tagGroupContent} ` : ``}
${ctaType === CTA_TYPE.VIDEO
? html` ${videoFooterCopy} `
@@ -152,6 +161,7 @@ Default.story = {
eyebrow: textNullable('Eyebrow:', 'Industry'),
heading,
copy: textNullable('Body copy:', ''),
+ copyMarkup: boolean('Body copy markup', false),
alt: 'Image alt text',
defaultSrc: imgXlg4x3,
tagGroup: boolean('Add tags:', false),
@@ -170,6 +180,7 @@ Default.story = {
eyebrow: 'Industry',
heading: 'Aerospace and defence',
copy: '',
+ copyMarkup: false,
alt: 'Image alt text',
defaultSrc: imgXlg4x3,
tagGroup: false,
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 2a1f42a695e..3fb38960cde 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -105,8 +105,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
/**
* Handles `slotchange` event for the copy slot.
*/
- protected _handleCopySlotChange() {
- this._hasCopy = Boolean(this.querySelector('p'));
+ protected _handleCopySlotChange({ target }: Event) {
+ this._hasCopy = (target as HTMLSlotElement)
+ .assignedNodes()
+ .some(
+ (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+ );
}
/**
diff --git a/packages/web-components/src/components/cta-block/cta-block.scss b/packages/web-components/src/components/cta-block/cta-block.scss
index 0a57d7c1d45..89f576b637e 100644
--- a/packages/web-components/src/components/cta-block/cta-block.scss
+++ b/packages/web-components/src/components/cta-block/cta-block.scss
@@ -169,6 +169,7 @@
position: relative;
display: grid;
grid-row: auto / span 5;
+ grid-template-columns: subgrid;
grid-template-rows: subgrid;
inline-size: 100%;
margin-block: 0;
diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts
index e8ec0be84d5..4a0b81120df 100644
--- a/packages/web-components/src/components/cta/video-cta-composite.ts
+++ b/packages/web-components/src/components/cta/video-cta-composite.ts
@@ -41,7 +41,6 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
*
* @internal
*/
- @state()
_embedMedia?: (videoId: string) => Promise;
/**