@rip-lang/ui 0.3.67 → 0.4.2

package/{components → browser/components}/grid.rip

@@ -21,14 +21,14 @@
 
 export Grid = component
 
-  @data       := []
-  @columns    := []
-  @rowHeight  := 32
-  @headerHeight := 36
-  @overscan   := 5
-  @striped    := false
-  @beforeEdit := null
-  @afterEdit  := null
+  @data:: any[] := []
+  @columns:: any[] := []
+  @rowHeight:: number := 32
+  @headerHeight:: number := 36
+  @overscan:: number := 5
+  @striped:: boolean := false
+  @beforeEdit:: any := null
+  @afterEdit:: any := null
 
   formatRegistry = []
 

package/{components → browser/components}/input-group.rip

@@ -13,7 +13,7 @@
 #     button $suffix: true, @click: doSearch, "Go"
 
 export InputGroup = component
-  @disabled := false
+  @disabled:: boolean := false
 
   focused := false
 

package/{components → browser/components}/input.rip

@@ -7,12 +7,12 @@
 #   Input value <=> name, placeholder: "Enter name"
 #   Input value <=> email, type: "email", required: true
 
-export Input = component
-  @value := ''
-  @placeholder := ''
-  @type := 'text'
-  @disabled := false
-  @required := false
+export Input = component extends input
+  @value:: string := ""
+  @placeholder:: string := ""
+  @type:: string := "text"
+  @disabled:: boolean := false
+  @required:: boolean := false
 
   focused := false
   touched := false

package/{components → browser/components}/label.rip

@@ -8,8 +8,8 @@
 #   Label required: true, "Username"
 
 export Label = component
-  @for := null
-  @required := false
+  @for:: any := null
+  @required:: boolean := false
 
   render
     label for: @for?!, $required: @required?!

package/{components → browser/components}/menu.rip

@@ -12,12 +12,13 @@
 #     div $item: "archive", "Archive"
 
 export Menu = component
-  @disabled := false
+  @disabled:: boolean := false
 
   open := false
   highlightedIndex := -1
   typeaheadBuffer := ''
   typeaheadTimer := null
+  _ready := false
   _id =! "menu-#{Math.random().toString(36).slice(2, 8)}"
 
   items ~=
@@ -73,14 +74,10 @@ export Menu = component
       @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
 
   _applyPlacement: ->
-    return unless @_list
-    @_list.style.position = 'fixed'
-    @_list.style.inset = 'auto'
-    @_list.style.margin = '0'
-    @_list.style.positionArea = 'bottom start'
-    @_list.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    @_list.style.positionVisibility = 'anchors-visible'
-    @_list.style.marginTop = '4px'
+    ARIA.position @_trigger, @_list, placement: 'bottom start', offset: 4
+
+  mounted: ->
+    _ready = true
 
   onTriggerKeydown: (e) ->
     return if @disabled
@@ -106,6 +103,7 @@ export Menu = component
       char:    => @_typeahead(e.key)
 
   ~>
+    return unless _ready
     if @_list
       @_list.id = _id
       @_list.setAttribute 'popover', 'auto'
@@ -119,6 +117,7 @@ export Menu = component
       button ref: "_trigger"
         aria-haspopup: "menu"
         aria-expanded: !!open
+        aria-controls: _id
         $open: open?!
         $disabled: @disabled?!
         disabled: @disabled
@@ -129,7 +128,15 @@ export Menu = component
       . ref: "_slot", style: "display:none"
         slot
 
-      div ref: "_list", role: "menu", $open: open?!, style: "position:fixed;margin:0;inset:auto", @keydown: @onMenuKeydown
+      div ref: "_list"
+        id: _id
+        role: "menu"
+        popover: "auto"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        $open: open?!
+        style: "position:fixed;margin:0;inset:auto"
+        @keydown: @onMenuKeydown
         for item, idx in items
           div role: item.getAttribute('role') or 'menuitem'
             tabindex: "-1"

package/{components → browser/components}/menubar.rip

@@ -15,7 +15,7 @@
 #       div $item: "redo", "Redo"
 
 export Menubar = component
-  @disabled := false
+  @disabled:: boolean := false
 
   activeMenu := null
   highlightedIndex := -1

package/{components → browser/components}/meter.rip

@@ -9,13 +9,13 @@
 #   Meter value: 75, min: 0, max: 100
 
 export Meter = component
-  @value := 0
-  @min := 0
-  @max := 1
-  @low := null
-  @high := null
-  @optimum := null
-  @label := null
+  @value:: number := 0
+  @min:: number := 0
+  @max:: number := 1
+  @low:: any := null
+  @high:: any := null
+  @optimum:: any := null
+  @label:: any := null
 
   percent ~= Math.min(100, Math.max(0, ((@value - @min) / (@max - @min)) * 100))
 

package/{components → browser/components}/multi-select.rip

@@ -8,14 +8,17 @@
 #   MultiSelect value <=> selectedColors, items: colors, placeholder: "Choose colors..."
 
 export MultiSelect = component
-  @value := []
-  @items := []
-  @placeholder := 'Select...'
-  @disabled := false
+  @value:: any[] := []
+  @items:: any[] := []
+  @placeholder:: string := "Select..."
+  @disabled:: boolean := false
 
   open := false
   query := ''
   highlightedIndex := -1
+  _ready := false
+  _ignoreInputClickOnce := false
+  _popupGuard =! ARIA.popupGuard()
   _listId =! "ms-#{Math.random().toString(36).slice(2, 8)}"
 
   filtered ~=
@@ -25,6 +28,14 @@ export MultiSelect = component
       label = if typeof item is 'string' then item else (item.label or item.name or String(item))
       label.toLowerCase().includes(q)
 
+  # Block reopen briefly so the same pointer gesture that closed the popup
+  # cannot immediately reopen it via focus/click side effects.
+  _blockOpenBriefly: ->
+    _popupGuard.block()
+
+  _canOpen: ->
+    _popupGuard.canOpen()
+
   _label: (item) ->
     if typeof item is 'string' then item else (item.label or item.name or String(item))
 
@@ -45,47 +56,73 @@ export MultiSelect = component
       arr.push v
     @value = arr
     @emit 'change', @value
+    @_close(true, true)
 
   _removeChip: (v) ->
     return if @disabled
     @value = @value.filter (x) -> x isnt v
     @emit 'change', @value
 
-  clearAll: ->
-    return if @disabled
-    @value = []
-    query = ''
-    @emit 'change', @value
+  _onRemoveMousedown: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+    @_blockOpenBriefly()
 
   _onInput: (e) ->
     query = e.target.value
     open = true
     highlightedIndex = if filtered.length > 0 then 0 else -1
 
-  _close: ->
+  _openMenu: ->
+    return if @disabled
+    return unless @_canOpen()
+    open = true
+    highlightedIndex = if filtered.length > 0 then Math.max(highlightedIndex, 0) else -1
+
+  _close: (restoreFocus = false, blockOpen = false) ->
     open = false
     query = ''
     highlightedIndex = -1
+    @_blockOpenBriefly() if blockOpen
+    @_input?.focus() if restoreFocus
+
+  onFocusin: ->
+    return unless @_canOpen()
+    @_openMenu()
+
+  _onInputMousedown: (e) ->
+    return unless open and not query
+    e.preventDefault()
+    _ignoreInputClickOnce = true
+    @_close(false, true)
+
+  _onInputClick: ->
+    if _ignoreInputClickOnce
+      _ignoreInputClickOnce = false
+      return
+    return unless @_canOpen()
+    @_openMenu()
+
+  _onChipsClick: (e) ->
+    return unless e.target is e.currentTarget
+    if open and not query
+      @_close(false, true)
+      return
+    return unless @_canOpen()
     @_input?.focus()
-
-  onFocusin: -> open = true
+    @_openMenu() if document.activeElement is @_input
 
   onFocusout: ->
     setTimeout =>
       return if @_content?.contains(document.activeElement)
-      @_close()
+      @_close(false, true)
     , 0
 
+  mounted: ->
+    _ready = true
+
   _applyPlacement: ->
-    return unless @_list
-    @_list.style.position = 'fixed'
-    @_list.style.inset = 'auto'
-    @_list.style.margin = '0'
-    @_list.style.positionArea = 'bottom start'
-    @_list.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    @_list.style.positionVisibility = 'anchors-visible'
-    @_list.style.marginTop = '2px'
-    @_list.style.minWidth = 'anchor-size(width)'
+    ARIA.position @_content, @_list, placement: 'bottom start', offset: 2, matchWidth: true
 
   _onKeydown: (e) ->
     len = filtered.length
@@ -103,31 +140,31 @@ export MultiSelect = component
           @_toggleItem(filtered[highlightedIndex])
       when 'Escape'
         e.preventDefault()
-        open = false
-        query = ''
+        @_close()
       when 'Backspace'
         if not query and @value.length > 0
           @value = @value.slice(0, -1)
           @emit 'change', @value
       when 'Tab'
-        open = false
-        query = ''
+        @_close(false, true)
 
   ~>
+    return unless _ready
     if @_list
-      @_list.setAttribute 'popover', 'auto'
+      @_list.setAttribute 'popover', 'manual'
       @_applyPlacement()
     ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
+    ARIA.popupDismiss open, (=> @_list), (=> @_close(false, true)), [=> @_input, => @_content]
 
   render
     . ref: "_content", $open: open?!, $disabled: @disabled?!
 
       # Chip area + input
-      . $chips: true, @click: (=> @_input?.focus())
+      . $chips: true, @click: @_onChipsClick
         for chip in @value
           span $chip: true
             "#{chip}"
-            button $remove: true, aria-label: "Remove #{chip}", @click: (=> @_removeChip(chip))
+            button $remove: true, aria-label: "Remove #{chip}", @mousedown: @_onRemoveMousedown, @click: (=> @_removeChip(chip))
               "✕"
         input ref: "_input", type: "text", autocomplete: "off"
           role: "combobox"
@@ -138,14 +175,20 @@ export MultiSelect = component
           disabled: @disabled
           placeholder: if @value.length is 0 then @placeholder else ''
           value: query
+          @mousedown: @_onInputMousedown
           @input: @_onInput
+          @click: @_onInputClick
           @keydown: @_onKeydown
-        if @value.length > 0
-          button $clear: true, aria-label: "Clear all", @click: @clearAll
-            "✕"
 
       # Dropdown
-      div ref: "_list", id: _listId, role: "listbox", $open: open?!, aria-multiselectable: "true"
+      div ref: "_list"
+        id: _listId
+        role: "listbox"
+        popover: "manual"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        $open: open?!
+        aria-multiselectable: "true"
         style: "position:fixed;margin:0;inset:auto"
         for item, idx in filtered
           div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"

package/{components → browser/components}/native-select.rip

@@ -10,9 +10,9 @@
 #     option value: "user", "User"
 
 export NativeSelect = component
-  @value := ''
-  @disabled := false
-  @required := false
+  @value:: string := ""
+  @disabled:: boolean := false
+  @required:: boolean := false
 
   focused := false
 

package/{components → browser/components}/nav-menu.rip

@@ -13,9 +13,9 @@
 #     a $link: true, href: "/about", "About"
 
 export NavigationMenu = component
-  @orientation := 'horizontal'
-  @hoverDelay := 200
-  @hoverCloseDelay := 300
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @hoverDelay:: number := 200
+  @hoverCloseDelay:: number := 300
 
   activePanel := null
   _ready := false

package/{components → browser/components}/number-field.rip

@@ -12,15 +12,15 @@ START_DELAY = 400
 TICK_DELAY  = 60
 
 export NumberField = component
-  @value := 0
-  @min := null
-  @max := null
-  @step := 1
-  @smallStep := 0.1
-  @largeStep := 10
-  @disabled := false
-  @readOnly := false
-  @name := null
+  @value:: number := 0
+  @min:: any := null
+  @max:: any := null
+  @step:: number := 1
+  @smallStep:: number := 0.1
+  @largeStep:: number := 10
+  @disabled:: boolean := false
+  @readOnly:: boolean := false
+  @name:: any := null
 
   _timer = null
   _interval = null
@@ -87,7 +87,7 @@ export NumberField = component
       document.removeEventListener 'pointerup', onUp
     document.addEventListener 'pointerup', onUp
 
-  onKeydown: (e) ->
+  _onKeydown: (e) ->
     return if @disabled or @readOnly
     amount = @_stepAmount(e)
     switch e.key
@@ -152,7 +152,7 @@ export NumberField = component
         aria-readonly: @readOnly?!
         disabled: @disabled
         readonly: @readOnly
-        @keydown: @onKeydown
+        @keydown: @_onKeydown
         @blur: @_onBlur
 
       button aria-label: "Increase", tabindex: "-1"

package/{components → browser/components}/otp-field.rip

@@ -7,10 +7,10 @@
 #   OTPField length: 6, value <=> code, @complete: handleVerify
 
 export OTPField = component
-  @length := 6
-  @value := ''
-  @disabled := false
-  @mask := false
+  @length:: number := 6
+  @value:: string := ""
+  @disabled:: boolean := false
+  @mask:: boolean := false
 
   _id =! "otp-#{Math.random().toString(36).slice(2, 8)}"
 

package/{components → browser/components}/pagination.rip

@@ -8,10 +8,10 @@
 #   Pagination page <=> currentPage, total: 500, perPage: 20, siblingCount: 2
 
 export Pagination = component
-  @page := 1
-  @total := 0
-  @perPage := 10
-  @siblingCount := 1
+  @page:: number := 1
+  @total:: number := 0
+  @perPage:: number := 10
+  @siblingCount:: number := 1
 
   totalPages ~= Math.max(1, Math.ceil(@total / @perPage))
   _ready := false

package/{components → browser/components}/popover.rip

@@ -10,12 +10,12 @@
 #       p "Popover content"
 
 export Popover = component
-  @placement := 'bottom-start'
-  @offset := 4
-  @disabled := false
-  @openOnHover := false
-  @hoverDelay := 300
-  @hoverCloseDelay := 200
+  @placement:: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" := "bottom-start"
+  @offset:: number := 4
+  @disabled:: boolean := false
+  @openOnHover:: boolean := false
+  @hoverDelay:: number := 300
+  @hoverCloseDelay:: number := 200
 
   open := false
   _ready := false
@@ -24,26 +24,11 @@ export Popover = component
   _id =! "pop-#{Math.random().toString(36).slice(2, 8)}"
 
   _applyPlacement: ->
+    trigger = @_content?.querySelector('[data-trigger]')
     floating = @_content?.querySelector('[data-content]')
-    return unless floating
     [side, align] = @placement.split('-')
-    align ?= 'center'
-    area = "#{side} #{align}"
-    floating.style.position = 'fixed'
-    floating.style.inset = 'auto'
-    floating.style.margin = '0'
-    floating.style.positionArea = area
-    floating.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    floating.style.positionVisibility = 'anchors-visible'
-    floating.style.marginTop = ''
-    floating.style.marginRight = ''
-    floating.style.marginBottom = ''
-    floating.style.marginLeft = ''
-    switch side
-      when 'bottom' then floating.style.marginTop = "#{@offset}px"
-      when 'top' then floating.style.marginBottom = "#{@offset}px"
-      when 'left' then floating.style.marginRight = "#{@offset}px"
-      when 'right' then floating.style.marginLeft = "#{@offset}px"
+    align ??= 'center'
+    ARIA.position trigger, floating, placement: "#{side} #{align}", offset: @offset
 
   mounted: ->
     _ready = true
@@ -89,6 +74,8 @@ export Popover = component
     if trigger
       trigger.setAttribute 'aria-expanded', !!open
     if floating
+      floating.hidden = not open
+      if open then floating.removeAttribute 'aria-hidden' else floating.setAttribute 'aria-hidden', 'true'
       floating.setAttribute 'data-placement', @placement
       if open then floating.setAttribute 'data-open', '' else floating.removeAttribute 'data-open'
       ARIA.wireAria floating, _id

package/{components → browser/components}/preview-card.rip

@@ -11,8 +11,8 @@
 #       p "User details here..."
 
 export PreviewCard = component
-  @delay := 400
-  @closeDelay := 200
+  @delay:: number := 400
+  @closeDelay:: number := 200
 
   open := false
   _ready := false
@@ -42,21 +42,15 @@ export PreviewCard = component
     @_applyPlacement()
     trigger.addEventListener 'focus', =>
       clearTimeout _closeTimer if _closeTimer
-      _openTimer = setTimeout (=> open = true; @_position()), @delay
+      _openTimer = setTimeout (=> open = true; @_applyPlacement()), @delay
     trigger.addEventListener 'blur', =>
       clearTimeout _openTimer if _openTimer
       _closeTimer = setTimeout (=> open = false), @closeDelay
 
   _applyPlacement: ->
+    trigger = @_root?.querySelector('[data-trigger]')
     floating = @_root?.querySelector('[data-content]')
-    return unless floating
-    floating.style.position = 'fixed'
-    floating.style.inset = 'auto'
-    floating.style.margin = '0'
-    floating.style.positionArea = 'bottom start'
-    floating.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    floating.style.positionVisibility = 'anchors-visible'
-    floating.style.marginTop = '4px'
+    ARIA.position trigger, floating, placement: 'bottom start', offset: 4
 
   ~>
     return unless _ready
@@ -64,6 +58,8 @@ export PreviewCard = component
     floating = @_root?.querySelector('[data-content]')
     return unless floating and trigger
     trigger.setAttribute 'aria-expanded', !!open
+    floating.hidden = not open
+    if open then floating.removeAttribute 'aria-hidden' else floating.setAttribute 'aria-hidden', 'true'
     @_applyPlacement()
     if open then floating.setAttribute('data-open', '') else floating.removeAttribute('data-open')
     ARIA.bindPopover open, (=> floating), ((isOpen) => open = isOpen), (=> trigger)

package/{components → browser/components}/progress.rip

@@ -8,9 +8,9 @@
 #   Progress value: 42, max: 100
 
 export Progress = component
-  @value := 0
-  @max := 1
-  @label := null
+  @value:: number := 0
+  @max:: number := 1
+  @label:: any := null
 
   percent ~= Math.min(100, Math.max(0, (@value / @max) * 100))
 

package/{components → browser/components}/radio-group.rip

@@ -10,10 +10,10 @@
 #     div $value: "lg", "Large"
 
 export RadioGroup = component
-  @value := null
-  @disabled := false
-  @orientation := 'vertical'
-  @name := ''
+  @value:: any := null
+  @disabled:: boolean := false
+  @orientation:: "horizontal" | "vertical" := "vertical"
+  @name:: string := ""
 
   _options ~=
     return [] unless @_slot

package/{components → browser/components}/resizable.rip

@@ -19,9 +19,9 @@
 #     div $panel: true, "Bottom"
 
 export Resizable = component
-  @orientation := 'horizontal'
-  @minSize := 10
-  @maxSize := 90
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @minSize:: number := 10
+  @maxSize:: number := 90
 
   _ready := false
   _dragging = null

package/{components → browser/components}/scroll-area.rip

@@ -11,7 +11,7 @@
 MIN_THUMB = 20
 
 export ScrollArea = component
-  @orientation := 'vertical'
+  @orientation:: "horizontal" | "vertical" := "vertical"
 
   hovering := false
   scrolling := false