fix(ld-modal): make custom css props overwritable

screenshot/builds/master.json

@@ -9093,7 +9093,7 @@
     },
     {
       "id": "9ef4f5a5",
-      "image": "12ab1710422c84db1938f110990abebf.png",
+      "image": "377a28bea7c6539dea6a0c969cb264f9.png",
       "userAgent": "default",
       "desc": "ld-modal renders as CSS Component",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",
@@ -9106,7 +9106,7 @@
     },
     {
       "id": "36fe5b6b",
-      "image": "e53db7071d2c8e9769e65629e1e9c6e2.png",
+      "image": "2d89d047eedbacb720ef0da14dba589b.png",
       "userAgent": "default",
       "desc": "ld-modal renders as CSS Component with lots of content in scrollable container",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",
@@ -9119,7 +9119,7 @@
     },
     {
       "id": "f2519ea2",
-      "image": "53a391ec6b58d47409f097ed894b1c81.png",
+      "image": "3e9dd5524479ee5fe119e72411ebb84a.png",
       "userAgent": "default",
       "desc": "ld-modal renders as CSS Component without header and footer",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",
@@ -9132,7 +9132,7 @@
     },
     {
       "id": "da147284",
-      "image": "12ab1710422c84db1938f110990abebf.png",
+      "image": "377a28bea7c6539dea6a0c969cb264f9.png",
       "userAgent": "default",
       "desc": "ld-modal renders as Web Component",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",
@@ -9145,7 +9145,7 @@
     },
     {
       "id": "a8abc56d",
-      "image": "e53db7071d2c8e9769e65629e1e9c6e2.png",
+      "image": "2d89d047eedbacb720ef0da14dba589b.png",
       "userAgent": "default",
       "desc": "ld-modal renders as Web Component with lots of content in scrollable container",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",
@@ -9158,7 +9158,7 @@
     },
     {
       "id": "511a4558",
-      "image": "53a391ec6b58d47409f097ed894b1c81.png",
+      "image": "3e9dd5524479ee5fe119e72411ebb84a.png",
       "userAgent": "default",
       "desc": "ld-modal renders as Web Component without header and footer",
       "testPath": "./src/liquid/components/ld-modal/test/ld-modal.e2e.ts",

src/liquid/components/ld-modal/ld-modal.css

@@ -33,7 +33,7 @@
 }
 
 dialog.ld-modal,
-:host dialog {
+:host {
   --ld-modal-bg-col: var(--ld-col-wht);
   --ld-modal-fixed-padding-x: var(--ld-sp-16);
   --ld-modal-fixed-padding-y: var(--ld-sp-16);
@@ -48,7 +48,10 @@ dialog.ld-modal,
   @media (prefers-reduced-motion: no-preference) {
     --ld-modal-transition-duration: 0.2s;
   }
+}
 
+dialog.ld-modal,
+:host dialog {
   /* overwrites */
   border: 0;
   color: var(--ld-col-neutral-900);

src/liquid/components/ld-modal/ld-modal.tsx

@@ -15,6 +15,10 @@ import { getClassNames } from '../../utils/getClassNames'
 /**
  * @virtualProp ref - reference to component
  * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ * @part dialog - Actual `dialog` element
+ * @part content - `div` element wrapping the default slot
+ * @part footer - `footer` element
+ * @part header - `header` element
  */
 @Component({
   tag: 'ld-modal',
@@ -131,6 +135,7 @@ export class LdModal {
           onClose={this.handleClose}
           onTransitionEnd={this.handleTransitionEnd}
           open={this.open}
+          part="dialog"
           ref={(el) => (this.dialogRef = el as HTMLDialogElement)}
         >
           <header class="ld-modal__header" part="header">

src/liquid/components/ld-modal/readme.md

@@ -209,11 +209,12 @@ Type: `Promise<void>`
 
 ## Shadow Parts
 
-| Part        | Description |
-| ----------- | ----------- |
-| `"content"` |             |
-| `"footer"`  |             |
-| `"header"`  |             |
+| Part        | Description                             |
+| ----------- | --------------------------------------- |
+| `"content"` | `div` element wrapping the default slot |
+| `"dialog"`  | Actual `dialog` element                 |
+| `"footer"`  | `footer` element                        |
+| `"header"`  | `header` element                        |
 
 
 ----------------------------------------------

src/liquid/components/ld-modal/test/__snapshots__/ld-modal.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ld-modal does not display close button in header if not cancelable 1`] = `
 <ld-modal class="ld-modal" open="">
   <mock:shadow-root>
-    <dialog open="">
+    <dialog open="" part="dialog">
       <header class="ld-modal__header" part="header">
         <slot name="header"></slot>
       </header>
@@ -25,7 +25,7 @@ exports[`ld-modal does not display close button in header if not cancelable 1`]
 exports[`ld-modal is open 1`] = `
 <ld-modal class="ld-modal" open="">
   <mock:shadow-root>
-    <dialog open="">
+    <dialog open="" part="dialog">
       <header class="ld-modal__header" part="header">
         <slot name="header"></slot>
         <button aria-label="Dismiss" class="ld-modal__x"></button>
@@ -45,7 +45,7 @@ exports[`ld-modal is open 1`] = `
 exports[`ld-modal renders 1`] = `
 <ld-modal class="ld-modal">
   <mock:shadow-root>
-    <dialog>
+    <dialog part="dialog">
       <header class="ld-modal__header" part="header">
         <slot name="header"></slot>
         <button aria-label="Dismiss" class="ld-modal__x"></button>
@@ -65,7 +65,7 @@ exports[`ld-modal renders 1`] = `
 exports[`ld-modal uses a blurry backdrop 1`] = `
 <ld-modal blurry-backdrop="" class="ld-modal ld-modal--blurry-backdrop" open="">
   <mock:shadow-root>
-    <dialog open="">
+    <dialog open="" part="dialog">
       <header class="ld-modal__header" part="header">
         <slot name="header"></slot>
         <button aria-label="Dismiss" class="ld-modal__x"></button>