feat(modal): with slug (carbon-design-system#11247)

### Related Ticket(s)

Closes carbon-design-system#11142 

### Description

Add slug to modal

### Changelog

**New**

- add slug slot
- new modal with ai styles
- slug story in Experimental -> Slug -> Examples -> Modal

** note there is no composed modal yet for CWC

**Changed**

- bump packages
- checkbox markdown update

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

web-components/packages/carbon-web-components/package.json

@@ -72,7 +72,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.45.0",
+    "@carbon/styles": "^1.46.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts

@@ -31,6 +31,10 @@ class CDSModalCloseButton extends FocusMixin(LitElement) {
   @property({ attribute: 'close-button-label' })
   closeButtonLabel = 'Close';
 
+  updated() {
+    this.parentElement?.setAttribute('close-button', '');
+  }
+
   render() {
     const { closeButtonLabel } = this;
     return html`

web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts

@@ -31,14 +31,17 @@ class CDSModalFooter extends LitElement {
    */
   private _handleSlotChange(event: Event) {
     const { selectorButtons } = this.constructor as typeof CDSModalFooter;
-    this.hasThreeButtons =
-      (event.target as HTMLSlotElement)
-        .assignedNodes()
-        .filter(
-          (node) =>
-            node.nodeType === Node.ELEMENT_NODE &&
-            (node as Element).matches(selectorButtons)
-        ).length > 2;
+    const length = (event.target as HTMLSlotElement)
+      .assignedNodes()
+      .filter(
+        (node) =>
+          node.nodeType === Node.ELEMENT_NODE &&
+          (node as Element).matches(selectorButtons)
+      ).length;
+    this.hasThreeButtons = length > 2;
+    length === 2
+      ? this.parentElement?.setAttribute('has-two-buttons', '')
+      : this.parentElement?.removeAttribute('has-two-buttons');
     this.requestUpdate();
   }
 

web-components/packages/carbon-web-components/src/components/modal/modal-header.ts

@@ -19,8 +19,49 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-modal-header`)
 class CDSModalHeader extends LitElement {
+  /**
+   * `true` if there is a slug.
+   */
+  protected _hasSlug = false;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSModalHeader).slugItem
+            )
+          : false
+      );
+    if (hasContent.length > 0) {
+      this._hasSlug = Boolean(hasContent);
+      (hasContent[0] as HTMLElement).setAttribute('size', 'lg');
+    }
+    this.requestUpdate();
+  }
+
+  updated() {
+    if (this._hasSlug) {
+      this.parentElement?.setAttribute('slug', '');
+    } else {
+      this.parentElement?.removeAttribute('slug');
+    }
+  }
+
   render() {
-    return html` <slot></slot> `;
+    return html` <slot></slot>
+      <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>`;
+  }
+
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader

web-components/packages/carbon-web-components/src/components/modal/modal.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/layer' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/components/button' as *;
 
@@ -135,3 +136,27 @@
   height: $spacing-10;
   margin: 0;
 }
+
+// Slug
+
+:host(#{$prefix}-modal) .#{$prefix}--modal-container {
+  @include callout-gradient('default');
+
+  background-color: $layer;
+}
+
+:host(#{$prefix}-modal[has-two-buttons]) .#{$prefix}--modal-container {
+  @include callout-gradient('default', 64px);
+
+  background-color: $layer;
+}
+
+:host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+:host(#{$prefix}-modal-header[close-button]) ::slotted(#{$prefix}-slug) {
+  inset-inline-end: $spacing-09;
+}

web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts

@@ -225,6 +225,60 @@ export const _Dropdown = () => {
     </div>`;
 };
 
+export const _Modal = () => {
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <cds-modal open prevent-close>
+      <cds-modal-header>
+        <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>Account resources</cds-modal-label>
+        <cds-modal-heading>Add a custom domain</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-modal-body-content description>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+
+        <cds-form-item>
+          <cds-select placeholder="US South" label-text="Region">
+            <cds-select-item value="us-south">US South</cds-select-item>
+            <cds-select-item value="us-east">US East</cds-select-item>
+          </cds-select>
+        </cds-form-item>
+
+        <cds-dropdown label="Dropdown" title-text="Dropdown">
+          <cds-dropdown-item value="one">One</cds-dropdown-item>
+          <cds-dropdown-item value="two">Two</cds-dropdown-item>
+        </cds-dropdown>
+
+        <cds-multi-select label="Multiselect" title-text="Multiselect">
+          <cds-multi-select-item value="option-1"
+            >Option 1</cds-multi-select-item
+          >
+          <cds-multi-select-item value="option-2"
+            >Option 2</cds-multi-select-item
+          >
+        </cds-multi-select>
+      </cds-modal-body>
+      <cds-modal-footer>
+        <cds-modal-footer-button kind="secondary"
+          >Cancel</cds-modal-footer-button
+        >
+        <cds-modal-footer-button>Add</cds-modal-footer-button>
+      </cds-modal-footer>
+    </cds-modal>
+  `;
+};
+
 export const _Multiselect = () => {
   return html` <style>
       ${styles}

web-components/packages/carbon-web-components/tests/snapshots/cds-checkbox.md

@@ -21,7 +21,6 @@
 >
   <span class="cds--checkbox-label-text">
     <slot>
-      Checkbox label
     </slot>
   </span>
 </label>
@@ -52,7 +51,6 @@
 >
   <span class="cds--checkbox-label-text">
     <slot>
-      Checkbox label
     </slot>
   </span>
 </label>

web-components/packages/carbon-web-components/tests/snapshots/cds-code-snippet.md

@@ -170,5 +170,5 @@
     </slot>
   </span>
 </button>
-
 ```
+