@rip-lang/ui 0.3.0 → 0.3.1

package/index.rip

@@ -0,0 +1,15 @@
+# Widget Gallery — dev server for testing all widgets
+
+import { get, use, start, notFound } from '@rip-lang/server'
+import { serve } from '@rip-lang/server/middleware'
+
+dir = import.meta.dir
+
+use serve dir: dir, components: ['.'], watch: true
+
+get '/*.rip', -> @send "#{dir}/#{@req.path.slice(1)}"
+get '/*.css', -> @send "#{dir}/#{@req.path.slice(1)}", 'text/css; charset=UTF-8'
+
+notFound -> @send "#{dir}/index.html", 'text/html; charset=UTF-8'
+
+start port: 3005

package/input.rip

@@ -0,0 +1,35 @@
+# Input — accessible headless input wrapper
+#
+# Tracks focus, validation, and disabled state via data attributes.
+# Ships zero CSS.
+#
+# Usage:
+#   Input value <=> name, placeholder: "Enter name"
+#   Input value <=> email, type: "email", required: true
+
+export Input = component
+  @value := ''
+  @placeholder := ''
+  @type := 'text'
+  @disabled := false
+  @required := false
+
+  focused := false
+  touched := false
+
+  onFocus: -> focused = true
+  onBlur: ->
+    focused = false
+    touched = true
+
+  render
+    input type: @type, value: @value, placeholder: @placeholder
+      disabled: @disabled
+      required: @required
+      aria-disabled: @disabled?!
+      aria-required: @required?!
+      $disabled: @disabled?!
+      $focused: focused?!
+      $touched: touched?!
+      @focusin: @onFocus
+      @focusout: @onBlur

package/menu.rip

@@ -0,0 +1,162 @@
+# Menu — accessible headless dropdown menu
+#
+# Keyboard: ArrowDown/Up to navigate, Enter/Space to select, Escape to close,
+# Home/End for first/last. Exposes $open on menu, $highlighted on items.
+# Ships zero CSS.
+#
+# Usage:
+#   Menu
+#     span "Actions"
+#     div $item: "edit", "Edit"
+#     div $item: "delete", "Delete"
+#     div $item: "archive", "Archive"
+
+export Menu = component
+  @disabled := false
+
+  open := false
+  highlightedIndex := -1
+  typeaheadBuffer := ''
+  typeaheadTimer := null
+
+  items ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-item]') or [])
+
+  triggerLabel ~=
+    return '' unless @_slot
+    el = @_slot.querySelector(':not([data-item])')
+    el?.textContent?.trim() or ''
+
+  toggle: ->
+    return if @disabled
+    if open then @close() else @openMenu()
+
+  openMenu: ->
+    open = true
+    highlightedIndex = 0
+    requestAnimationFrame =>
+      @_position()
+      @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+    @_trigger?.focus()
+
+  selectIndex: (idx) ->
+    item = items[idx]
+    return unless item
+    return if item.dataset.disabled?
+    role = item.getAttribute('role')
+    if role is 'menuitemcheckbox'
+      checked = item.getAttribute('aria-checked') is 'true'
+      item.setAttribute 'aria-checked', not checked
+      @emit 'select', { id: item.dataset.item, checked: not checked }
+    else if role is 'menuitemradio'
+      group = item.closest('[data-radio-group]')
+      if group
+        group.querySelectorAll('[role="menuitemradio"]').forEach (r) ->
+          r.setAttribute 'aria-checked', false
+      item.setAttribute 'aria-checked', true
+      @emit 'select', { id: item.dataset.item, value: item.dataset.item }
+    else
+      @emit 'select', item.dataset.item
+      @close()
+
+  _typeahead: (char) ->
+    clearTimeout typeaheadTimer if typeaheadTimer
+    typeaheadBuffer += char.toLowerCase()
+    typeaheadTimer = setTimeout (-> typeaheadBuffer = ''), 500
+    idx = items.findIndex (o) -> o.textContent.trim().toLowerCase().startsWith(typeaheadBuffer)
+    if idx >= 0
+      highlightedIndex = idx
+      @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
+
+  _position: ->
+    return unless @_trigger and @_list
+    tr = @_trigger.getBoundingClientRect()
+    @_list.style.position = 'fixed'
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 4}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 4}px"
+    if fl.right > window.innerWidth
+      @_list.style.left = "#{window.innerWidth - fl.width - 4}px"
+    @_list.style.visibility = 'visible'
+
+  onTriggerKeydown: (e) ->
+    return if @disabled
+    if e.key in ['ArrowDown', 'Enter', ' ']
+      e.preventDefault()
+      @openMenu()
+
+  onMenuKeydown: (e) ->
+    len = items.length
+    return unless len
+
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex + 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex - 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'Home'
+        e.preventDefault()
+        highlightedIndex = 0
+        @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        highlightedIndex = len - 1
+        @_list?.querySelectorAll('[role="menuitem"]')[len - 1]?.focus()
+      when 'Enter', ' '
+        e.preventDefault()
+        @selectIndex(highlightedIndex)
+      when 'Escape'
+        e.preventDefault()
+        @close()
+      when 'Tab'
+        @close()
+      else
+        if e.key.length is 1
+          @_typeahead(e.key)
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    .
+      button ref: "_trigger"
+        aria-haspopup: "menu"
+        aria-expanded: !!open
+        $open: open?!
+        $disabled: @disabled?!
+        disabled: @disabled
+        @click: @toggle
+        @keydown: @onTriggerKeydown
+        triggerLabel
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      if open
+        div ref: "_list", role: "menu", $open: true, style: "position:fixed;visibility:hidden", @keydown: @onMenuKeydown
+          for item, idx in items
+            div role: item.getAttribute('role') or 'menuitem'
+              tabindex: "-1"
+              aria-checked: item.getAttribute('aria-checked')?!
+              $highlighted: (idx is highlightedIndex)?!
+              $disabled: item.dataset.disabled?!
+              @click: (=> @selectIndex(idx))
+              @mouseenter: (=> highlightedIndex = idx)
+              item.textContent

package/menubar.rip

@@ -0,0 +1,155 @@
+# Menubar — accessible headless horizontal menu bar
+#
+# A horizontal bar of menu triggers. Each trigger opens a dropdown menu.
+# Arrow keys navigate between triggers; open menus close when moving
+# to the next trigger. Ships zero CSS.
+#
+# Usage:
+#   Menubar
+#     div $menu: "file"
+#       div $item: "new", "New"
+#       div $item: "open", "Open"
+#       div $item: "save", "Save"
+#     div $menu: "edit"
+#       div $item: "undo", "Undo"
+#       div $item: "redo", "Redo"
+
+export Menubar = component
+  @disabled := false
+
+  activeMenu := null
+  highlightedIndex := -1
+
+  _menus ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-menu]') or [])
+
+  _menuItemsFor: (menu) ->
+    return [] unless menu
+    Array.from(menu.querySelectorAll('[data-item]') or [])
+
+  _openMenu: (menuId) ->
+    return if @disabled
+    activeMenu = menuId
+    highlightedIndex = 0
+    requestAnimationFrame =>
+      @_position(menuId)
+      @_root?.querySelector("[data-menu-list=\"#{menuId}\"] [role=\"menuitem\"]")?.focus()
+
+  _closeMenu: ->
+    activeMenu = null
+    highlightedIndex = -1
+
+  _position: (menuId) ->
+    trigger = @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")
+    list = @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")
+    return unless trigger and list
+    tr = trigger.getBoundingClientRect()
+    list.style.position = 'fixed'
+    list.style.left = "#{tr.left}px"
+    list.style.top = "#{tr.bottom + 2}px"
+    list.style.minWidth = "#{tr.width}px"
+
+  selectItem: (menuId, itemId) ->
+    @emit 'select', { menu: menuId, item: itemId }
+    @_closeMenu()
+    @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")?.focus()
+
+  _onBarKeydown: (e) ->
+    triggers = @_root?.querySelectorAll('[data-menu-trigger]')
+    return unless triggers?.length
+    focused = Array.from(triggers).indexOf(document.activeElement)
+    return if focused < 0
+    len = triggers.length
+    switch e.key
+      when 'ArrowRight'
+        e.preventDefault()
+        next = (focused + 1) %% len
+        triggers[next]?.focus()
+        if activeMenu
+          @_openMenu(triggers[next]?.dataset.menuTrigger)
+      when 'ArrowLeft'
+        e.preventDefault()
+        prev = (focused - 1) %% len
+        triggers[prev]?.focus()
+        if activeMenu
+          @_openMenu(triggers[prev]?.dataset.menuTrigger)
+      when 'ArrowDown', 'Enter', ' '
+        e.preventDefault()
+        menuId = triggers[focused]?.dataset.menuTrigger
+        @_openMenu(menuId) if menuId
+      when 'Escape'
+        @_closeMenu()
+
+  _onMenuKeydown: (e, menuId, menuItems) ->
+    len = menuItems.length
+    return unless len
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex + 1) %% len
+        @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex - 1) %% len
+        @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'Enter', ' '
+        e.preventDefault()
+        item = menuItems[highlightedIndex]
+        @selectItem(menuId, item?.dataset.item) if item
+      when 'Escape', 'Tab'
+        e.preventDefault() if e.key is 'Escape'
+        @_closeMenu()
+        @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")?.focus()
+      when 'ArrowRight'
+        e.preventDefault()
+        @_closeMenu()
+        triggers = @_root?.querySelectorAll('[data-menu-trigger]')
+        focused = Array.from(triggers).findIndex (t) -> t.dataset.menuTrigger is menuId
+        next = (focused + 1) %% triggers.length
+        triggers[next]?.focus()
+        @_openMenu(triggers[next]?.dataset.menuTrigger)
+      when 'ArrowLeft'
+        e.preventDefault()
+        @_closeMenu()
+        triggers = @_root?.querySelectorAll('[data-menu-trigger]')
+        focused = Array.from(triggers).findIndex (t) -> t.dataset.menuTrigger is menuId
+        prev = (focused - 1) %% triggers.length
+        triggers[prev]?.focus()
+        @_openMenu(triggers[prev]?.dataset.menuTrigger)
+
+  ~>
+    if activeMenu
+      onDown = (e) =>
+        unless @_root?.contains(e.target)
+          @_closeMenu()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    div ref: "_root", role: "menubar", $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for menu in _menus
+        button role: "menuitem", tabindex: "0"
+          "data-menu-trigger": menu.dataset.menu
+          aria-haspopup: "menu"
+          aria-expanded: activeMenu is menu.dataset.menu
+          $open: (activeMenu is menu.dataset.menu)?!
+          @click: (=> if activeMenu is menu.dataset.menu then @_closeMenu() else @_openMenu(menu.dataset.menu))
+          @keydown: @_onBarKeydown
+          menu.dataset.menu
+
+        if activeMenu is menu.dataset.menu
+          div role: "menu", $open: true, style: "position:fixed"
+            "data-menu-list": menu.dataset.menu
+            @keydown: (e) => @_onMenuKeydown(e, menu.dataset.menu, @_menuItemsFor(menu))
+            for item, idx in @_menuItemsFor(menu)
+              div role: "menuitem", tabindex: "-1"
+                $highlighted: (idx is highlightedIndex)?!
+                $value: item.dataset.item
+                @click: (=> @selectItem(menu.dataset.menu, item.dataset.item))
+                @mouseenter: (=> highlightedIndex = idx)
+                item.textContent

package/meter.rip

@@ -0,0 +1,36 @@
+# Meter — accessible headless meter (gauge)
+#
+# For known-range measurements (disk usage, password strength, etc.).
+# Exposes value and thresholds as CSS custom properties.
+# Ships zero CSS.
+#
+# Usage:
+#   Meter value: 0.7, low: 0.3, high: 0.8, optimum: 0.5
+#   Meter value: 75, min: 0, max: 100
+
+export Meter = component
+  @value := 0
+  @min := 0
+  @max := 1
+  @low := null
+  @high := null
+  @optimum := null
+  @label := null
+
+  percent ~= Math.min(100, Math.max(0, ((@value - @min) / (@max - @min)) * 100))
+
+  level ~=
+    return 'optimum' unless @low? and @high?
+    if @value <= @low then 'low'
+    else if @value >= @high then 'high'
+    else 'optimum'
+
+  render
+    div role: "meter"
+      aria-valuenow: @value
+      aria-valuemin: @min
+      aria-valuemax: @max
+      aria-label: @label?!
+      style: "--meter-value: #{@value}; --meter-percent: #{percent}%"
+      $level: level
+      slot

package/multi-select.rip

@@ -0,0 +1,158 @@
+# MultiSelect — accessible headless multi-select with chips
+#
+# Filterable dropdown where multiple items can be selected. Selected items
+# appear as removable chips. Type to filter, click or arrow+Enter to toggle.
+# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
+#
+# Usage:
+#   MultiSelect value <=> selectedColors, items: colors, placeholder: "Choose colors..."
+
+export MultiSelect = component
+  @value := []
+  @items := []
+  @placeholder := 'Select...'
+  @disabled := false
+
+  open := false
+  query := ''
+  highlightedIndex := -1
+  _listId =! "ms-#{Math.random().toString(36).slice(2, 8)}"
+
+  filtered ~=
+    q = query.trim().toLowerCase()
+    return @items unless q
+    @items.filter (item) ->
+      label = if typeof item is 'string' then item else (item.label or item.name or String(item))
+      label.toLowerCase().includes(q)
+
+  _label: (item) ->
+    if typeof item is 'string' then item else (item.label or item.name or String(item))
+
+  _val: (item) ->
+    if typeof item is 'string' then item else (item.value or item.id or String(item))
+
+  _isSelected: (item) ->
+    v = @_val(item)
+    Array.isArray(@value) and v in @value
+
+  _toggleItem: (item) ->
+    return if @disabled
+    v = @_val(item)
+    arr = if Array.isArray(@value) then [...@value] else []
+    if v in arr
+      arr = arr.filter (x) -> x isnt v
+    else
+      arr.push v
+    @value = arr
+    @emit 'change', @value
+
+  _removeChip: (v) ->
+    return if @disabled
+    @value = @value.filter (x) -> x isnt v
+    @emit 'change', @value
+
+  clearAll: ->
+    return if @disabled
+    @value = []
+    query = ''
+    @emit 'change', @value
+
+  _onInput: (e) ->
+    query = e.target.value
+    open = true
+    highlightedIndex = if filtered.length > 0 then 0 else -1
+
+  onFocusin: -> open = true
+
+  onFocusout: (e) ->
+    unless @_content?.contains(e.relatedTarget)
+      open = false
+      query = ''
+      highlightedIndex = -1
+
+  _position: ->
+    return unless @_input and @_list
+    tr = @_input.getBoundingClientRect()
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 2}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 2}px"
+
+  _onKeydown: (e) ->
+    len = filtered.length
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        open = true
+        highlightedIndex = (highlightedIndex + 1) %% len if len
+        setTimeout (=> @_position()), 0
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex - 1) %% len if len
+      when 'Enter'
+        e.preventDefault()
+        if highlightedIndex >= 0 and highlightedIndex < len
+          @_toggleItem(filtered[highlightedIndex])
+      when 'Escape'
+        e.preventDefault()
+        open = false
+        query = ''
+      when 'Backspace'
+        if not query and @value.length > 0
+          @value = @value.slice(0, -1)
+          @emit 'change', @value
+      when 'Tab'
+        open = false
+        query = ''
+
+  ~>
+    if open
+      setTimeout (=> @_position()), 0
+      onDown = (e) =>
+        unless @_content?.contains(e.target)
+          open = false
+          query = ''
+          highlightedIndex = -1
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . ref: "_content", $open: open?!, $disabled: @disabled?!
+
+      # Chip area + input
+      . $chips: true, @click: (=> @_input?.focus())
+        for chip in @value
+          span $chip: true
+            "#{chip}"
+            button $remove: true, aria-label: "Remove #{chip}", @click: (=> @_removeChip(chip))
+              "✕"
+        input ref: "_input", type: "text", autocomplete: "off"
+          role: "combobox"
+          aria-expanded: !!open
+          aria-haspopup: "listbox"
+          aria-controls: if open then _listId else undefined
+          $disabled: @disabled?!
+          disabled: @disabled
+          placeholder: if @value.length is 0 then @placeholder else ''
+          value: query
+          @input: @_onInput
+          @keydown: @_onKeydown
+        if @value.length > 0
+          button $clear: true, aria-label: "Clear all", @click: @clearAll
+            "✕"
+
+      # Dropdown
+      if open and filtered.length > 0
+        div ref: "_list", id: _listId, role: "listbox", $open: true, aria-multiselectable: "true"
+          style: "position:fixed"
+          for item, idx in filtered
+            div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+              $value: @_val(item)
+              $selected: @_isSelected(item)?!
+              $highlighted: (idx is highlightedIndex)?!
+              aria-selected: !!@_isSelected(item)
+              @click: (=> @_toggleItem(item))
+              @mouseenter: (=> highlightedIndex = idx)
+              @_label(item)

package/nav-menu.rip

@@ -0,0 +1,132 @@
+# NavigationMenu — accessible headless site navigation
+#
+# Horizontal navigation with optional dropdown sub-menus. Triggers show
+# content on hover or click. Ships zero CSS.
+#
+# Usage:
+#   NavigationMenu
+#     a $link: true, href: "/", "Home"
+#     div $trigger: "products"
+#       div $panel: true
+#         a href: "/ui", "ui"
+#         a href: "/tools", "Tools"
+#     a $link: true, href: "/about", "About"
+
+export NavigationMenu = component
+  @orientation := 'horizontal'
+  @hoverDelay := 200
+  @hoverCloseDelay := 300
+
+  activePanel := null
+  _ready := false
+  _hoverTimer := null
+  _closeTimer := null
+
+  _navItems ~=
+    return [] unless @_slot
+    Array.from(@_slot.children).filter (el) ->
+      el.dataset?.link? or el.dataset?.trigger?
+
+  mounted: -> _ready = true
+
+  beforeUnmount: ->
+    clearTimeout _hoverTimer if _hoverTimer
+    clearTimeout _closeTimer if _closeTimer
+
+  _openPanel: (id) ->
+    clearTimeout _closeTimer if _closeTimer
+    activePanel = id
+    requestAnimationFrame => @_position(id)
+
+  _closePanel: ->
+    activePanel = null
+
+  _scheduleOpen: (id) ->
+    clearTimeout _closeTimer if _closeTimer
+    _hoverTimer = setTimeout (=> @_openPanel(id)), @hoverDelay
+
+  _scheduleClose: ->
+    clearTimeout _hoverTimer if _hoverTimer
+    _closeTimer = setTimeout (=> @_closePanel()), @hoverCloseDelay
+
+  _cancelClose: ->
+    clearTimeout _closeTimer if _closeTimer
+
+  _position: (id) ->
+    trigger = @_root?.querySelector("[data-nav-trigger=\"#{id}\"]")
+    panel = @_root?.querySelector("[data-nav-panel=\"#{id}\"]")
+    return unless trigger and panel
+    tr = trigger.getBoundingClientRect()
+    panel.style.position = 'fixed'
+    panel.style.left = "#{tr.left}px"
+    panel.style.top = "#{tr.bottom + 2}px"
+
+  _onKeydown: (e) ->
+    navBtns = @_root?.querySelectorAll('[data-nav-trigger], [data-nav-link]')
+    return unless navBtns?.length
+    focused = Array.from(navBtns).indexOf(document.activeElement)
+    return if focused < 0
+    len = navBtns.length
+    switch e.key
+      when 'ArrowRight'
+        e.preventDefault()
+        navBtns[(focused + 1) %% len]?.focus()
+      when 'ArrowLeft'
+        e.preventDefault()
+        navBtns[(focused - 1) %% len]?.focus()
+      when 'ArrowDown'
+        triggerId = document.activeElement?.dataset?.navTrigger
+        if triggerId
+          e.preventDefault()
+          @_openPanel(triggerId)
+          @_root?.querySelector("[data-nav-panel=\"#{triggerId}\"] a, [data-nav-panel=\"#{triggerId}\"] button")?.focus()
+      when 'Escape'
+        @_closePanel()
+
+  ~>
+    return unless _ready
+    if activePanel
+      onDown = (e) =>
+        unless @_root?.contains(e.target)
+          @_closePanel()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    nav ref: "_root", role: "navigation", aria-orientation: @orientation
+      $orientation: @orientation
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for navItem, nIdx in _navItems
+        if navItem.dataset.link?
+          a href: navItem.getAttribute('href') or '#'
+            "data-nav-link": true
+            tabindex: "0"
+            @keydown: @_onKeydown
+            navItem.textContent
+        else if navItem.dataset.trigger?
+          . style: "display:inline-block;position:relative"
+            button "data-nav-trigger": navItem.dataset.trigger
+              tabindex: "0"
+              aria-expanded: activePanel is navItem.dataset.trigger
+              $open: (activePanel is navItem.dataset.trigger)?!
+              @click: (=> if activePanel is navItem.dataset.trigger then @_closePanel() else @_openPanel(navItem.dataset.trigger))
+              @mouseenter: (=> @_scheduleOpen(navItem.dataset.trigger))
+              @mouseleave: (=> @_scheduleClose())
+              @keydown: @_onKeydown
+              navItem.dataset.trigger
+
+            if activePanel is navItem.dataset.trigger
+              div "data-nav-panel": navItem.dataset.trigger, $open: true
+                style: "position:fixed;z-index:50"
+                @mouseenter: (=> @_cancelClose())
+                @mouseleave: (=> @_scheduleClose())
+                for link, lIdx in Array.from(navItem.querySelectorAll('a, [data-link]'))
+                  a href: link.getAttribute('href') or '#', tabindex: "0"
+                    @keydown: (e) =>
+                      if e.key is 'Escape'
+                        @_closePanel()
+                        @_root?.querySelector("[data-nav-trigger=\"#{navItem.dataset.trigger}\"]")?.focus()
+                    link.textContent