a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted

scripts/a11y/manifest.yml

@@ -299,6 +299,13 @@
   bucket: 2
   severity: moderate
   scope: ui-main
+- slug: 2.4.6-cloud-drawer-content-empty-title
+  sc: '2.4.6'
+  bucket: 2
+  severity: moderate
+  scope: universal
+  files-touched:
+    - src/lib/holocene/drawer-content.svelte
 - slug: 2.4.6-ui-main-datepicker-empty-label
   sc: '2.4.6'
   bucket: 2

src/lib/holocene/drawer-content.svelte

@@ -5,18 +5,24 @@
   export let title: string = '';
 
   let position: 'bottom' | 'right' = getContext('drawer-pos');
-</script>
 
-<div class="title-wrapper {position}">
-  <h2>{title}</h2>
-  {#if $$slots['subtitle']}
-    <p class="text-xs font-normal">
-      <slot name="subtitle" />
-    </p>
-  {/if}
-</div>
+  $: hasHeader = Boolean(title) || $$slots['subtitle'];
+</script>
 
-<div class={twMerge('content', position, $$props.class)}>
+{#if hasHeader}
+  <div class="title-wrapper {position}">
+    {#if title}
+      <h2>{title}</h2>
+    {/if}
+    {#if $$slots['subtitle']}
+      <p class="text-xs font-normal">
+        <slot name="subtitle" />
+      </p>
+    {/if}
+  </div>
+{/if}
+
+<div class={twMerge('content', position, !hasHeader && 'pt-6', $$props.class)}>
   <slot />
 </div>
 

src/lib/holocene/drawer.stories.svelte

@@ -73,10 +73,53 @@
   </Drawer>
 </Template>
 
+<Template id="with-subtitle" let:args>
+  <Button on:click={() => (open = !open)}>Toggle Drawer</Button>
+  <Drawer bind:open {...args} onClick={action('click')}>
+    <DrawerContent title="Drawer Title">
+      <span slot="subtitle">A supporting subtitle line</span>
+      <p class={merge(args.position === 'right' && 'max-w-80')}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
+      </p>
+    </DrawerContent>
+  </Drawer>
+</Template>
+
+<Template id="subtitle-only" let:args>
+  <Button on:click={() => (open = !open)}>Toggle Drawer</Button>
+  <Drawer bind:open {...args} onClick={action('click')}>
+    <DrawerContent>
+      <span slot="subtitle">Subtitle rendered without a title</span>
+      <p class={merge(args.position === 'right' && 'max-w-80')}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
+      </p>
+    </DrawerContent>
+  </Drawer>
+</Template>
+
+<Template id="no-header" let:args>
+  <Button on:click={() => (open = !open)}>Toggle Drawer</Button>
+  <Drawer bind:open {...args} onClick={action('click')}>
+    <DrawerContent>
+      <p class={merge(args.position === 'right' && 'max-w-80')}>
+        With no title and no subtitle slot, DrawerContent omits the header
+        wrapper and applies its own top padding, so the content is not flush
+        against the top edge of the drawer.
+      </p>
+    </DrawerContent>
+  </Drawer>
+</Template>
+
 <Story name="Bottom" />
 
 <Story name="Right" args={{ position: 'right' }} />
 
 <Story name="Bottom (Light)" args={{ dark: false }} />
 
 <Story name="Right (Light)" args={{ position: 'right', dark: false }} />
+
+<Story name="With Subtitle" template="with-subtitle" />
+
+<Story name="Subtitle Only" template="subtitle-only" />
+
+<Story name="No Title or Subtitle" template="no-header" />