fix(ui): repair sidebar drawer, dropdown focus and footer slots

packages/ui/components/Dropdown.wrn

@@ -12,6 +12,7 @@ items: unknown[] = []
     open: boolean = false
     defaultOpen: boolean = false
     label: string = "Open menu"
+    ariaLabel: string = ""
     icon: string = ""
     showChevron: boolean = true
     menuLabel: string = "Dropdown menu"
@@ -47,6 +48,11 @@ items: unknown[] = []
       visible = false
       output.close({ reason: reason, sourceEvent: sourceEvent })
       output.toggle({ open: false, reason: reason, sourceEvent: sourceEvent })
+      if (reason === "escape") {
+        const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
+        const trigger = root.querySelector(".wrn-dropdown__trigger")
+        if (trigger) { trigger.focus() }
+      }
     }
 
     client function toggleMenu(sourceEvent) {
@@ -65,14 +71,14 @@ items: unknown[] = []
       output.select({
         item: item,
         itemIndex: itemIndex,
-        value: item.value || "",
+        value: item.value == null ? "" : item.value,
         sourceEvent: sourceEvent
       })
       if (item.action) {
         output.action({
           item: item,
           itemIndex: itemIndex,
-          value: item.value || "",
+          value: item.value == null ? "" : item.value,
           sourceEvent: sourceEvent
         })
       }
@@ -83,18 +89,24 @@ items: unknown[] = []
 
     client function moveFocus(sourceEvent, direction) {
       const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
-      const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
-      if (!options.length) {
-        return
-      }
-      const activeIndex = options.indexOf(document.activeElement)
-      const nextIndex = (activeIndex + direction + options.length) % options.length
-      options[nextIndex].focus()
+      window.setTimeout(function () {
+        if (!root.isConnected || !isOpen()) { return }
+        const options = [...root.querySelectorAll('[data-dropdown-item]:not([disabled]):not([aria-disabled="true"])')]
+        if (!options.length) {
+          return
+        }
+        const activeIndex = options.indexOf(document.activeElement)
+        const nextIndex = activeIndex < 0 ? (direction > 0 ? 0 : options.length - 1) : (activeIndex + direction + options.length) % options.length
+        options[nextIndex].focus()
+      }, 0)
     }
 
     client function handleKeydown(sourceEvent) {
+      if (disabled) { return }
       if (sourceEvent.key === "Escape") {
+        if (!isOpen()) { return }
         sourceEvent.preventDefault()
+        sourceEvent.stopPropagation()
         hideMenu("escape", sourceEvent)
       } else if (sourceEvent.key === "ArrowDown") {
         sourceEvent.preventDefault()
@@ -111,19 +123,26 @@ items: unknown[] = []
       } else if (sourceEvent.key === "Home" && isOpen()) {
         sourceEvent.preventDefault()
         const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
-        const first = root.querySelector("[data-dropdown-item]:not([disabled])")
+        const first = root.querySelector('[data-dropdown-item]:not([disabled]):not([aria-disabled="true"])')
         if (first) {
           first.focus()
         }
       } else if (sourceEvent.key === "End" && isOpen()) {
         sourceEvent.preventDefault()
         const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
-        const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
+        const options = [...root.querySelectorAll('[data-dropdown-item]:not([disabled]):not([aria-disabled="true"])')]
         if (options.length) {
           options[options.length - 1].focus()
         }
       }
     }
+
+    client function handleFocusout(sourceEvent) {
+      const root = sourceEvent.currentTarget
+      if (isOpen() && sourceEvent.relatedTarget && !root.contains(sourceEvent.relatedTarget)) {
+        hideMenu("focusout", sourceEvent)
+      }
+    }
   }
 
   view {
@@ -138,12 +157,14 @@ items: unknown[] = []
       data-variant='{variant}'
       class='wrn-dropdown {class}'
       @keydown='handleKeydown(event)'
+      @focusout='handleFocusout(event)'
     >
       <button
         type="button"
         class="wrn-dropdown__trigger"
         disabled='{disabled}'
         aria-haspopup="menu"
+        aria-label='{ariaLabel || label}'
         aria-expanded='{open || visible ? "true" : "false"}'
         @click='toggleMenu(event)'
       >
@@ -194,6 +215,7 @@ items: unknown[] = []
                 data-danger='{item.danger ? "true" : "false"}'
                 data-selected='{item.selected || item.checked ? "true" : "false"}'
                 aria-disabled='{item.disabled ? "true" : "false"}'
+                tabindex='{item.disabled ? "-1" : "0"}'
                 class="wrn-dropdown__item"
                 @click='chooseItem(item, itemIndex, event)'
               >
@@ -460,7 +482,7 @@ items: unknown[] = []
       border: 0;
       border-radius: 0.72rem;
       font: inherit;
-      text-align: left;
+      text-align: start;
       text-decoration: none;
       cursor: pointer;
       transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
@@ -550,7 +572,7 @@ items: unknown[] = []
     }
 
     @media (max-width: 639px) {
-      .wrn-dropdown__panel {
+      .wrn-dropdown[data-placement] .wrn-dropdown__panel {
         position: fixed;
         right: 0.75rem;
         bottom: 0.75rem;