feat(masthead): adding shadow parts

packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts

@@ -21,6 +21,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * MegaMenu Category Group Description.
  *
  * @element c4d-megamenu-category-group-desc
+ * @csspart heading - The h2 element of the left navigation menu category heading. Usage: `c4d-left-nav-menu-category-heading::part(heading)`
+ * @csspart heading-link - The link element of the left navigation menu category heading. Usage: `c4d-left-nav-menu-category-heading::part(heading-link)`
+ * @csspart container - The side navigation heading container. Usage: `c4d-left-nav-menu-category-heading::part(container)`
+ * @csspart description - The description container within the side navigation heading. Usage: `c4d-left-nav-menu-category-heading::part(description)`
  */
 @customElement(`${c4dPrefix}-left-nav-menu-category-heading`)
 class C4DLeftNavMenuCategoryHeading extends LitElement {
@@ -52,8 +56,9 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
 
     return url
       ? html`
-          <h2 class="${classMap(headingClasses)}">
+          <h2 part="heading" class="${classMap(headingClasses)}">
             <a
+              part="heading-link"
               href="${url}"
               class="${prefix}--side-nav__heading-title"
               data-attribute1="headerNav"
@@ -63,14 +68,20 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
             </a>
           </h2>
         `
-      : html` <h2 class="${classMap(headingClasses)}">${headingText}</h2> `;
+      : html`
+          <h2 part="heading" class="${classMap(headingClasses)}">
+            ${headingText}
+          </h2>
+        `;
   }
 
   render() {
     return html`
-      <div class="${prefix}--side-nav__heading">
+      <div part="container" class="${prefix}--side-nav__heading">
         ${this._renderHeading()}
-        <div class="${prefix}--side-nav__heading-description">
+        <div
+          part="description"
+          class="${prefix}--side-nav__heading-description">
           <slot></slot>
         </div>
       </div>

packages/web-components/src/components/masthead/left-nav-menu-section.ts

@@ -25,6 +25,11 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Masthead left nav menu section.
  *
  * @element c4d-left-nav-menu-section
+ * @csspart side-nav-submenu-container - The container for the submenu. Usage: `c4d-left-nav-menu-section::part(side-nav-submenu-container)`
+ * @csspart menu-item - The submenu item. Usage: `c4d-left-nav-menu-section::part(menu-item)`
+ * @csspart menu-link - The side navigation link. Usage: `c4d-left-nav-menu-section::part(menu-link)`
+ * @csspart menu-link-text - The text within the side navigation link. Usage: `c4d-left-nav-menu-section::part(menu-link-text back-button-text)`
+ * @csspart back-button - The back button. Usage: `c4d-left-nav-menu-section::part(back-button)`
  * @fires c4d-left-nav-menu-beingtoggled
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
@@ -222,16 +227,20 @@ class C4DLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
       showBackBtn,
     } = this;
     return html`
-      <ul>
+      <ul part="side-nav-submenu-container">
         ${showBackBtn
           ? html`
               <li
+                part="menu-item back-button-wrapper"
                 class="${prefix}--side-nav__menu-item ${prefix}--masthead__side-nav--submemu-back"
                 role="none">
                 <button
+                  part="menu-link back-button"
                   class="${prefix}--side-nav__link"
                   @click="${handleClickBack}">
-                  <span class="${prefix}--side-nav__link-text"
+                  <span
+                    part="menu-link-text back-button-text"
+                    class="${prefix}--side-nav__link-text"
                     >${ChevronLeft16()}${backButtonText}</span
                   >
                 </button>

packages/web-components/src/components/masthead/left-nav-menu.ts

@@ -26,6 +26,10 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
  * @fires c4d-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
+ * @csspart side-nav-item-button - The button for the side navigation item. Usage: `c4d-left-nav-menu::part(side-nav-item-button)`
+ * @csspart side-nav-submenu-content - The content of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-submenu-content)`
+ * @csspart side-nav-submenu-title - The title of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-submenu-title)`
+ * @csspart side-nav-icon - The icon of the side navigation submenu. Usage: `c4d-left-nav-menu::part(side-nav-icon)`
  */
 @customElement(`${c4dPrefix}-left-nav-menu`)
 class C4DLeftNavMenu extends FocusMixin(LitElement) {
@@ -111,6 +115,7 @@ class C4DLeftNavMenu extends FocusMixin(LitElement) {
     return html`
       <div class="${prefix}--side-nav__item">
         <button
+          part="side-nav-item-button"
           type="button"
           aria-haspopup="true"
           aria-expanded="${expanded}"
@@ -119,9 +124,16 @@ class C4DLeftNavMenu extends FocusMixin(LitElement) {
           data-attribute1="headerNav"
           data-attribute2="${isSubitem ? 'TabHdline' : 'L0'}"
           data-attribute3="${title}">
-          <div class="${prefix}--side-nav__submenu-content">
-            <span class="${prefix}--side-nav__submenu-title">${title}</span>
+          <div
+            part="side-nav-submenu-content"
+            class="${prefix}--side-nav__submenu-content">
+            <span
+              part="side-nav-submenu-title"
+              class="${prefix}--side-nav__submenu-title"
+              >${title}</span
+            >
             <div
+              part="side-nav-icon"
               class="${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron">
               ${ChevronDown16()}
             </div>

packages/web-components/src/components/masthead/left-nav-name.ts

@@ -22,6 +22,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The brand name UI in left nav.
  *
  * @element c4d-left-nav-name
+ * @csspart side-nav-submenu - The side navigation submenu. Usage: `c4d-left-nav-name::part(side-nav-submenu)`
  */
 @customElement(`${c4dPrefix}-left-nav-name`)
 class C4DLeftNavName extends CDSHeaderName {
@@ -48,6 +49,7 @@ class C4DLeftNavName extends CDSHeaderName {
         `;
     return html`
       <a
+        part="side-nav-submenu"
         class="${prefix}--side-nav__submenu ${prefix}--side-nav__submenu-platform"
         href="${ifDefined(href)}">
         ${namePrefixPart}

packages/web-components/src/components/masthead/masthead-contact.ts

@@ -23,6 +23,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * The contact button UI in the masthead.
  *
  * @element c4d-masthead-contact
+ * @csspart contact-link -The masthead contact link. Usage `c4d-masthead-contact::part(contact-link)`
  */
 @customElement(`${c4dPrefix}-masthead-contact`)
 class C4DMastheadContact extends C4DMastheadProfile {
@@ -58,6 +59,7 @@ class C4DMastheadContact extends C4DMastheadProfile {
     const { triggerLabel, _handleClick: handleClick } = this;
     return html`
       <a
+        part="contact-link"
         href="javascript:void 0"
         class="${prefix}--header__menu-item ${prefix}--header__menu-title"
         aria-label="${ifDefined(triggerLabel)}"

packages/web-components/src/components/masthead/masthead-global-bar.ts

@@ -24,6 +24,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The action bar in masthead.
  *
  * @element c4d-masthead-global-bar
+ * @csspart container -The ce header global container. Usage `c4d-masthead-global-bar::part(container)`
  */
 @customElement(`${c4dPrefix}-masthead-global-bar`)
 class C4DMastheadGlobalBar extends FocusMixin(
@@ -61,7 +62,11 @@ class C4DMastheadGlobalBar extends FocusMixin(
       [`${c4dPrefix}-ce--header__global__container--has-search-active`]:
         hasSearchActive,
     });
-    return html` <div class="${classes}"><slot></slot></div> `;
+    return html`
+      <div part="container" class="${classes}">
+        <slot></slot>
+      </div>
+    `;
   }
 
   /**

packages/web-components/src/components/masthead/masthead-l1-cta.ts

@@ -30,6 +30,9 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  *
  * @element c4d-masthead-l1-cta
  * @slot cta-text - The CTA text
+ * @csspart inner-wrapper-desktop - The inner wrapper for the desktop view. Usage: `c4d-masthead-l1-cta::part(inner-wrapper-desktop)`
+ * @csspart l1-button - The button element for CTA. Usage: `c4d-masthead-l1-cta::part(l1-button)`
+ * @csspart l1-link - The link element for CTA. Usage: `c4d-masthead-l1-cta::part(l1-link)`
  */
 @customElement(`${c4dPrefix}-masthead-l1-cta`)
 class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
@@ -94,7 +97,11 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     // Adds inner wrapper markup in desktop displays.
     const desktopWrapper = (markup: TemplateResult) => {
       if (!isMobileVersion) {
-        return html` <div class="${classname}-inner">${markup}</div> `;
+        return html`
+          <div part="inner-wrapper-desktop" class="${classname}-inner">
+            ${markup}
+          </div>
+        `;
       }
       return markup;
     };
@@ -117,7 +124,10 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     if (type && iconMap.has(type as L1_CTA_TYPES)) {
       const icon = iconMap.get(type as L1_CTA_TYPES);
       return html`
-        <button class="${classname}" data-ibm-contact="${type}-link">
+        <button
+          part="l1-button"
+          class="${classname}"
+          data-ibm-contact="${type}-link">
           ${desktopWrapper(html`
             <slot name="cta-text"></slot>
             ${icon}
@@ -129,7 +139,7 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     if (href) {
       const icon = isMobileVersion ? ArrowRight16() : '';
       return html`
-        <a class="${classname}" href="${href}">
+        <a part="l1-link" class="${classname}" href="${href}">
           ${desktopWrapper(html`<slot name="cta-text"></slot>${icon}`)}
         </a>
       `;

packages/web-components/src/components/masthead/masthead-l1-name.ts

@@ -20,6 +20,8 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * Masthead.
  *
  * @element c4d-masthead-l1-name
+ * @csspart l1-name-title - The title element. Usage: `c4d-masthead-l1-name::part(l1-name-title)`
+ * @csspart l1-name-link - The link element. Usage: `c4d-masthead-l1-name::part(l1-name-link)`
  */
 @customElement(`${c4dPrefix}-masthead-l1-name`)
 class C4DMastheadL1Name extends StableSelectorMixin(LitElement) {
@@ -37,8 +39,8 @@ class C4DMastheadL1Name extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <span class="${prefix}--masthead__l1-name-title">
-        <a href="${this.url}">${this.title}</a>
+      <span part="l1-name-title" class="${prefix}--masthead__l1-name-title">
+        <a part="l1-name-link" href="${this.url}">${this.title}</a>
       </span>
     `;
   }