add slot detection back to drawer; #928 (#931)

* add slot detection back to drawer; #928

* remove unneeded attribute

docs/docs/components/drawer.md

@@ -8,7 +8,7 @@ icon: drawer
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html {.example}
-<wa-drawer label="Drawer" class="drawer-overview">
+<wa-drawer label="Drawer" id="drawer-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -16,7 +16,7 @@ icon: drawer
 <wa-button>Open Drawer</wa-button>
 
 <script>
-  const drawer = document.querySelector('.drawer-overview');
+  const drawer = document.querySelector('#drawer-overview');
   const openButton = drawer.nextElementSibling;
 
   openButton.addEventListener('click', () => drawer.open = true);
@@ -25,19 +25,20 @@ icon: drawer
 
 ## Examples
 
-### Drawer with Header
+### Drawer without Header
 
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
+Headers are enabled by default. To render a drawer without a header, add the `without-header` attribute.
 
 ```html {.example}
-<wa-drawer label="Drawer" class="drawer-header">
+<wa-drawer label="Drawer" without-header class="drawer-without-header">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
 
 <wa-button>Open Drawer</wa-button>
 
 <script>
-  const drawer = document.querySelector('.drawer-header');
+  const drawer = document.querySelector('.drawer-without-header');
   const openButton = drawer.nextElementSibling;
 
   openButton.addEventListener('click', () => drawer.open = true);
@@ -46,7 +47,7 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 
 ### Drawer with Footer
 
-Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
+Footers can be used to display titles and more. Use the `footer` slot to add a footer to the drawer.
 
 ```html {.example}
 <wa-drawer label="Drawer" class="drawer-footer">
@@ -261,9 +262,9 @@ You can use `event.detail.source` to determine what triggered the request to clo
 </script>
 ```
 
-### Customizing Initial Focus
+### Setting Initial Focus
 
-By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
+To give focus to a specific element when the drawer opens, use the `autofocus` attribute.
 
 ```html {.example}
 <wa-drawer label="Drawer" class="drawer-focus">

docs/docs/resources/changelog.md

@@ -15,7 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparer>` and improved compatibility for non-image content
-- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
 - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control

docs/docs/themes/edit/index.njk

@@ -38,7 +38,7 @@ unlisted: true
       <wa-icon name="code" variant="solid"></wa-icon>
       Code
     </wa-button>
-    <wa-drawer label="Theme code" with-header :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
+    <wa-drawer label="Theme code" :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
       <wa-tab-group class="import-stylesheet-code" :active="ui.code" @wa-tab-show="ui.code = $event.detail.name">
         <wa-tab panel="css">CSS</wa-tab>
         <wa-tab-panel name="css">