Add label slot to dialog and drawer

docs/getting-started/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added `label` slot to `sl-input`, `sl-select`, and `sl-textarea` [#248](https://github.com/shoelace-style/shoelace/issues/248)
+- Added `label` slot to `sl-dialog` and `sl-drawer`
 - Fixed a bug where initial transitions didn't show in `sl-dialog` and `sl-drawer` [#247](https://github.com/shoelace-style/shoelace/issues/247)
 - Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
 - Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other

src/components/dialog/dialog.tsx

@@ -10,6 +10,7 @@ let id = 0;
  * @status stable
  *
  * @slot - The dialog's content.
+ * @slot label - The dialog's label. Alternatively, you can use the label prop.
  * @slot footer - The dialog's footer, usually one or more buttons representing various options.
  *
  * @part base - The component's base wrapper.
@@ -203,8 +204,10 @@ export class Dialog {
           {!this.noHeader && (
             <header part="header" class="dialog__header">
               <span part="title" class="dialog__title" id={`${this.componentId}-title`}>
-                {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
-                {this.label || String.fromCharCode(65279)}
+                <slot name="label">
+                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
+                  {this.label || String.fromCharCode(65279)}
+                </slot>
               </span>
               <sl-icon-button part="close-button" class="dialog__close" name="x" onClick={this.handleCloseClick} />
             </header>

src/components/drawer/drawer.tsx

@@ -10,6 +10,7 @@ let id = 0;
  * @status stable
  *
  * @slot - The drawer's content.
+ * @slot label - The dialog's label. Alternatively, you can use the label prop.
  * @slot footer - The drawer's footer, usually one or more buttons representing various options.
  *
  * @part base - The component's base wrapper.
@@ -220,8 +221,10 @@ export class Drawer {
           {!this.noHeader && (
             <header part="header" class="drawer__header">
               <span part="title" class="drawer__title" id={`${this.componentId}-title`}>
-                {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
-                {this.label || String.fromCharCode(65279)}
+                <slot name="label">
+                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}
+                  {this.label || String.fromCharCode(65279)}
+                </slot>
               </span>
               <sl-icon-button part="close-button" class="drawer__close" name="x" onClick={this.handleCloseClick} />
             </header>