Feat/addressing components with missing shadow parts (#12016)

### Related Ticket(s)

[ADCMS-6148](https://jsw.ibm.com/browse/ADCMS-6148)

### Description

I closed this PR: #12009, in behalf of this new one.
I have added the last round of shadow parts that we've missed through our shadow part tickets.

packages/web-components/src/component-mixins/cta/cta.ts

@@ -72,6 +72,7 @@ export const types = CTA_TYPE;
 /**
  * @param Base The base class.
  * @returns A mix-in implementing the logic of handling link for CTA.
+ * @csspart icon-visually-hidden - The cta icon element for screen readers. Usage: `c4d-left-nav-name::part(icon-visually-hidden)`
  */
 const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
   class CTAMixinImpl extends Base {
@@ -197,7 +198,9 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       const icon = icons[`${ctaType}-${document.dir}`] ?? icons[ctaType];
       return html`
         <slot name="icon">
-          <span class="${prefix}--visually-hidden">${ariaLabels[ctaType]}</span>
+          <span class="${prefix}--visually-hidden" part="icon-visually-hidden"
+            >${ariaLabels[ctaType]}</span
+          >
           ${icon?.({
             class: `${c4dPrefix}--card__cta ${c4dPrefix}-ce--cta__icon`,
           })}

packages/web-components/src/components/button/button-expressive.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *
  * @element c4d-button-expressive
  * @csspart button - The button. Usage `c4d-button-expressive::part(button)`
+ * @csspart hidden-paragraph - The hidden paragraph that contains the link. Usage `c4d-button-expressive::part(hidden-paragraph)`
+ * @csspart hidden-span - The span inside of the hidden paragraph. Usage `c4d-button-expressive::part(hidden-span)`
  */
 @customElement(`${c4dPrefix}-button-expressive`)
 class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
@@ -100,8 +102,11 @@ class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
     const { _handleSlotChange: handleSlotChange } = this;
     return html`
       <slot @slotchange="${handleSlotChange}"></slot>
-      <p class="${prefix}--btn--hidden" aria-hidden="true">
-        <span>:</span> ${this.href}
+      <p
+        class="${prefix}--btn--hidden"
+        aria-hidden="true"
+        part="hidden-paragraph">
+        <span part="hidden-span">:</span> ${this.href}
       </p>
       <slot name="icon" @slotchange="${handleSlotChange}"></slot>
     `;

packages/web-components/src/components/button/button.ts

@@ -24,6 +24,9 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *
  * @element c4d-button
  * @csspart button - The button. Usage: `c4d-button::part(button)`
+ * @csspart hidden-paragraph - The hidden paragraph that contains the link. Usage: `c4d-button::part(hidden-paragraph)`
+ * @csspart hidden-icon-span - The span element inside the hidden paragraph. Usage: `c4d-button::part(hidden-icon-span)`
+ * @csspart visually-hidden-span - The visually hidden span element for accessibility. Usage: `c4d-button::part(visually-hidden-span)`
  */
 @customElement(`${c4dPrefix}-button`)
 // @ts-ignore
@@ -55,8 +58,11 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
    */
   _renderIconPrintStyles() {
     return html`
-      <p class="${prefix}--btn--hidden" aria-hidden="true">
-        <span>:</span> ${this.href}
+      <p
+        class="${prefix}--btn--hidden"
+        aria-hidden="true"
+        part="hidden-paragraph">
+        <span part="hidden-icon-span">:</span> ${this.href}
       </p>
       <slot name="icon"></slot>
     `;
@@ -69,7 +75,9 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
     const { ctaType } = this;
     const icon = icons[`${ctaType}-${document.dir}`] ?? icons[ctaType];
     return `
-        <span class="${prefix}--visually-hidden">${ariaLabels[ctaType]}</span>
+        <span class="${prefix}--visually-hidden" part="visually-hidden-span">${
+      ariaLabels[ctaType]
+    }</span>
         ${icon?.()?.strings?.join()}
       `;
   }

packages/web-components/src/components/carousel/carousel.ts

@@ -45,6 +45,7 @@ const minIntersectionRatio = 0.75;
  * @csspart contents - The scrolling elements. Usage: `c4d-carousel::part(contents)`
  * @csspart navigation - The navigation controls. Usage: `c4d-carousel::part(navigation)`
  * @csspart status - The navigation status. Usage: `c4d-carousel::part(status)`
+ * @csspart visually-hidden - The span element used to hide content from view and keep it accessible for assistive technologies. Usage: `c4d-button::part(visually-hidden)`
  */
 @customElement(`${c4dPrefix}-carousel`)
 class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
@@ -746,7 +747,9 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
       <div part="region" role="region" aria-labelledby="carousel-title">
         <div part="title" id="carousel-title">
           <slot name="title">
-            <span class="cds--visually-hidden">Carousel</span>
+            <span class="cds--visually-hidden" part="visually-hidden"
+              >Carousel</span
+            >
           </slot>
         </div>
         <div
@@ -783,7 +786,10 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
             aria-hidden="true"
             >${formatStatus(status)}</span
           >
-          <span class="${prefix}--visually-hidden" aria-live="polite"></span>
+          <span
+            class="${prefix}--visually-hidden"
+            aria-live="polite"
+            part="visually-hidden"></span>
           <button
             part="next-button"
             class="${prefix}--btn ${prefix}--btn--tertiary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn"

packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts

@@ -20,15 +20,17 @@ const { stablePrefix: c4dPrefix } = settings;
  * Content Block Headlines item
  *
  * @element c4d-content-block-headlines-item
+ * @csspart heading - The heading element within the content block headlines item. Usage: `c4d-content-block-headlines-item::part(heading)`
+ * @csspart copy - The paragraph element containing the copy text in the content block headlines item. Usage: `c4d-content-block-headlines-item::part(copy)`
  */
 @customElement(`${c4dPrefix}-content-block-headlines-item`)
 class C4DContentBlockHeadlinesItem extends StableSelectorMixin(C4DContentItem) {
   render() {
     return html`
-      <h4 class="cds--content-block-headlines__heading">
+      <h4 class="cds--content-block-headlines__heading" part="heading">
         <slot name="heading"></slot>
       </h4>
-      <p class="cds--content-block-headlines__copy">
+      <p class="cds--content-block-headlines__copy" part="copy">
         <slot name="copy"></slot>
       </p>
       <slot name="footer"></slot>

packages/web-components/src/components/content-block-horizontal/content-block-horizontal.ts

@@ -21,6 +21,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * Horizontal version of content group.
  *
  * @element c4d-content-block-horizontal
+ * @csspart hr - The horizontal rule element that appears when the border property is true. Usage: `c4d-content-block-horizontal::part(hr)`
  */
 @customElement(`${c4dPrefix}-content-block-horizontal`)
 class C4DContentBlockHorizontal extends C4DContentGroup {
@@ -29,7 +30,8 @@ class C4DContentBlockHorizontal extends C4DContentGroup {
 
   render() {
     return html`
-      ${super.render()} ${this.border ? html` <c4d-hr></c4d-hr> ` : ''}
+      ${super.render()}
+      ${this.border ? html` <c4d-hr part="hr"></c4d-hr> ` : ''}
     `;
   }
 

packages/web-components/src/components/content-block/content-block-copy.ts

@@ -25,6 +25,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The copy content of content block.
  *
  * @element c4d-content-block-copy
+ * @csspart content-block-paragraph - The paragraph element within the content block. Usage: `c4d-content-block-copy::part(content-block-paragraph)`
  */
 @customElement(`${c4dPrefix}-content-block-copy`)
 class C4DContentBlockCopy extends StableSelectorMixin(C4DMarkdown) {
@@ -43,7 +44,7 @@ class C4DContentBlockCopy extends StableSelectorMixin(C4DMarkdown) {
 
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${c4dPrefix}-content-block-paragraph>${text}</${c4dPrefix}-content-block-paragraph>`;
+        return `<${c4dPrefix}-content-block-paragraph part="content-block-paragraph">${text}</${c4dPrefix}-content-block-paragraph>`;
       },
     });
   }

packages/web-components/src/components/content-block/content-block-heading.ts

@@ -22,6 +22,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The heading content in content block.
  *
  * @element c4d-content-block-heading
+ * @csspart h2 - The heading element within the content block. Usage: `c4d-content-block-heading::part(content-block-heading)`
  */
 @customElement(`${c4dPrefix}-content-block-heading`)
 class C4DContentBlockHeading extends StableSelectorMixin(LitElement) {
@@ -46,7 +47,7 @@ class C4DContentBlockHeading extends StableSelectorMixin(LitElement) {
 
   firstUpdated() {
     this.content = stripHTML(this.innerHTML);
-    render(html`<h2>${this.content}</h2>`, this);
+    render(html`<h2 part="h2">${this.content}</h2>`, this);
   }
 
   render() {

packages/web-components/src/components/content-group/content-group-copy.ts

@@ -21,6 +21,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The copy content in content group.
  *
  * @element c4d-content-group-copy
+ * @csspart paragraph - The paragraph element within the content group copy. Usage: `c4d-content-group-copy::part(paragraph)`
  */
 @customElement(`${c4dPrefix}-content-group-copy`)
 class C4DContentGroupCopy extends StableSelectorMixin(C4DMarkdown) {
@@ -33,7 +34,7 @@ class C4DContentGroupCopy extends StableSelectorMixin(C4DMarkdown) {
   protected get _renderer() {
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${c4dPrefix}-content-group-paragraph>${text}</${c4dPrefix}-content-group-paragraph>`;
+        return `<${c4dPrefix}-content-group-paragraph part="paragraph">${text}</${c4dPrefix}-content-group-paragraph>`;
       },
     });
   }

packages/web-components/src/components/content-item/content-item-copy.ts

@@ -20,6 +20,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The copy content of content item.
  *
  * @element c4d-content-item-copy
+ * @csspart paragraph - The paragraph element within the content item copy. Usage: `c4d-content-item-copy::part(paragraph)`
  */
 @customElement(`${c4dPrefix}-content-item-copy`)
 class C4DContentItemCopy extends StableSelectorMixin(C4DMarkdown) {
@@ -38,7 +39,7 @@ class C4DContentItemCopy extends StableSelectorMixin(C4DMarkdown) {
 
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${c4dPrefix}-content-item-paragraph>${text}</${c4dPrefix}-content-item-paragraph>`;
+        return `<${c4dPrefix}-content-item-paragraph part="paragraph">${text}</${c4dPrefix}-content-item-paragraph>`;
       },
     });
   }

packages/web-components/src/components/content-item/content-item.ts

@@ -37,6 +37,7 @@ const slotExistencePropertyNames = {
  * @csspart media - The media content. Usage: `c4d-content-item::part(media)`
  * @csspart cta - The footer CTA. Usage: `c4d-content-item::part(cta)`
  * @csspart heading - The heading content. Usage: `c4d-content-item::part(heading)`
+ * @csspart body - The body content. Usage: `c4d-content-item::part(body)`
  */
 @customElement(`${c4dPrefix}-content-item`)
 class C4DContentItem extends StableSelectorMixin(LitElement) {
@@ -171,7 +172,7 @@ class C4DContentItem extends StableSelectorMixin(LitElement) {
     return html`
       <div class="${horizontalClass}" part="heading">
         ${this._renderStatistic()} ${this._renderMedia()}
-        <div>
+        <div part="body">
           <slot name="heading"></slot>
           ${this._renderBody()}${this._renderFooter()}
         </div>

packages/web-components/src/components/cta/card-cta.ts

@@ -37,6 +37,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Card CTA.
  *
  * @element c4d-card-cta
+ * @csspart heading - The heading content. Usage: `c4d-card-cta::part(heading)`
  */
 @customElement(`${c4dPrefix}-card-cta`)
 class C4DCardCTA extends VideoCTAMixin(CTAMixin(C4DCard)) {
@@ -62,7 +63,7 @@ class C4DCardCTA extends VideoCTAMixin(CTAMixin(C4DCard)) {
     );
     return html`
       <slot name="heading"></slot
-      ><c4d-card-heading>${caption}</c4d-card-heading>
+      ><c4d-card-heading part="heading">${caption}</c4d-card-heading>
     `;
   }
 

packages/web-components/src/components/cta/card-link-cta.ts

@@ -33,6 +33,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * Card CTA.
  *
  * @element c4d-card-cta
+ * @csspart heading - The heading content. Usage: `c4d-card-link-cta::part(heading)`
  */
 @customElement(`${c4dPrefix}-card-link-cta`)
 class C4DCardLinkCTA extends VideoCTAMixin(CTAMixin(C4DCardLink)) {
@@ -48,7 +49,7 @@ class C4DCardLinkCTA extends VideoCTAMixin(CTAMixin(C4DCardLink)) {
     const caption = formatVideoCaptionInEffect({ name: videoName });
     return html`
       <slot name="heading"></slot
-      ><c4d-card-link-heading>${caption}</c4d-card-link-heading>
+      ><c4d-card-link-heading part="heading">${caption}</c4d-card-link-heading>
     `;
   }
 

packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts

@@ -34,6 +34,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * Component that renders dotcom shell from links, etc. data.
  *
  * @element c4d-dotcom-shell-composite
+ * @csspart shell - The root element of the dotcom shell. Usage: `c4d-dotcom-shell-composite::part(shell)`
  */
 @customElement(`${c4dPrefix}-dotcom-shell-composite`)
 class C4DDotcomShellComposite extends LitElement {
@@ -489,7 +490,7 @@ class C4DDotcomShellComposite extends LitElement {
 
   render() {
     return html`
-      <c4d-dotcom-shell>
+      <c4d-dotcom-shell part="shell">
         <slot></slot>
       </c4d-dotcom-shell>
     `;

packages/web-components/src/components/expressive-modal/expressive-modal.ts

@@ -68,6 +68,7 @@ const slotExistencePropertyNames = {
  * @csspart sentinel-button--start - Button labled START. Usage: `c4d-expressive-modal::part(sentinel-button--start)`
  * @csspart sentinel-button--end - Button labled END. Usage: `c4d-expressive-modal::part(sentinel-button--end)`
  * @csspart modal-container - The modal container. Usage: `c4d-expressive-modal::part(modal-container)`
+ * @csspart footer-container - The footer container. Usage: `c4d-expressive-modal::part(footer-container)`
  */
 @customElement(`${c4dPrefix}-expressive-modal`)
 class C4DExpressiveModal extends StableSelectorMixin(
@@ -399,7 +400,9 @@ class C4DExpressiveModal extends StableSelectorMixin(
    */
   // eslint-disable-next-line class-methods-use-this
   protected _renderFooter(): TemplateResult | SVGTemplateResult | void {
-    return html` <div><slot name="footer"></slot></div> `;
+    return html`
+      <div part="footer-container"><slot name="footer"></slot></div>
+    `;
   }
 
   /**

packages/web-components/src/components/image/image.ts

@@ -43,6 +43,9 @@ export { LIGHTBOX_CONTRAST };
  * @csspart zoom-button - The wrapper around the zoom button to trigger the lightbox when used. Usage: `c4d-image::part(zoom-button)`
  * @csspart zoom-icon - The zoom icon used for the lightbox. Usage: `c4d-image::part(zoom-icon)`
  * @csspart caption - The caption for the image. Usage: `c4d-image::part(caption)`
+ * @csspart expressive-modal - The expressive modal content. Usage: `c4d-image::part(expressive-modal)`
+ * @csspart expressive-modal-close-button - The expressive modal content close button. Usage: `c4d-image::part(expressive-modal-close-button)`
+ * @csspart lightbox-image-viewer - The lightbox image viewer component. Usage: `c4d-image::part(lightbox-image-viewer)`
  */
 @customElement(`${c4dPrefix}-image`)
 class C4DImage extends StableSelectorMixin(
@@ -219,13 +222,18 @@ class C4DImage extends StableSelectorMixin(
     return !lightbox
       ? undefined
       : html`
-          <c4d-expressive-modal ?open="${open}" expressive-size="full-width">
-            <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+          <c4d-expressive-modal
+            ?open="${open}"
+            expressive-size="full-width"
+            part="expressive-modal">
+            <c4d-expressive-modal-close-button
+              part="expressive-modal-close-button"></c4d-expressive-modal-close-button>
             <c4d-lightbox-image-viewer
               alt="${ifDefined(alt)}"
               default-src="${ifDefined(defaultSrc)}"
               description="${ifDefined(copy)}"
-              title="${ifDefined(heading)}">
+              title="${ifDefined(heading)}"
+              part="lightbox-image-viewer">
             </c4d-lightbox-image-viewer>
           </c4d-expressive-modal>
         `;

packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts

@@ -31,6 +31,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * @csspart content - The inner wrapper around content. Usage: `c4d-lightbox-video-player::part(content)`
  * @csspart title - The title of the media. Usage: `c4d-lightbox-video-player::part(title)`
  * @csspart description - The description of the media. Usage: `c4d-lightbox-video-player::part(description)`
+ * @csspart h2 - The h2 element that holds the title. Usage: `c4d-lightbox-video-player::part(h2)`
  */
 @customElement(`${c4dPrefix}-lightbox-media-viewer`)
 class C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {
@@ -48,7 +49,9 @@ class C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {
   _renderTitle() {
     const { title } = this;
     return html`
-      <slot name="title"><h2 style="all: inherit;">${title}</h2></slot>
+      <slot name="title"
+        ><h2 part="h2" style="all: inherit;">${title}</h2></slot
+      >
     `;
   }
 

packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player.ts

@@ -35,6 +35,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * @csspart description - The description of the media. Usage: `c4d-lightbox-video-player::part(description)`
  * @csspart video-player - The wrapper around the video player. Usage: `c4d-lightbox-video-player::part(video-player)`
  * @csspart video-container - The inner wrapper around the slotted video player. Usage: `c4d-lightbox-video-player::part(video-container)`
+ * @csspart h2 - The h2 element that holds the title. Usage: `c4d-lightbox-video-player::part(h2)`
  */
 @customElement(`${c4dPrefix}-lightbox-video-player`)
 class C4DLightboxVideoPlayer extends C4DLightboxMediaViewerBody {
@@ -62,7 +63,7 @@ class C4DLightboxVideoPlayer extends C4DLightboxMediaViewerBody {
     const { duration, formatCaption, formatDuration, name } = this;
     return html`
       <slot name="title">
-        <h2 style="all: inherit;">
+        <h2 style="all: inherit;" part="h2">
           ${formatCaption({
             duration: formatDuration({
               duration: !duration ? duration : duration * 1000,

packages/web-components/src/components/link-with-icon/link-with-icon.ts

@@ -29,6 +29,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * @element c4d-link-with-icon
  * @slot icon - The icon.
  * @slot icon-left - The CTA icon to place at the left.
+ * @csspart span - The span element. Usage: `c4d-lightbox-video-player::part(span)`
  */
 @customElement(`${c4dPrefix}-link-with-icon`)
 class C4DLinkWithIcon extends CTAMixin(StableSelectorMixin(CDSLink)) {
@@ -74,7 +75,7 @@ class C4DLinkWithIcon extends CTAMixin(StableSelectorMixin(CDSLink)) {
   _renderContent() {
     const { ctaType, _hasContent: hasContent } = this;
     if (ctaType !== CTA_TYPE.VIDEO) {
-      return html`<span><slot></slot></span>`;
+      return html`<span part="span"><slot></slot></span>`;
     }
     const {
       videoDuration,