phlex_kit 0.9.1 → 0.11.0

data/app/components/phlex_kit/menubar/menubar_controller.js

@@ -28,6 +28,9 @@ export default class extends Controller {
     // set here. Roving tabindex applies only in menubar mode: a nav's
     // triggers and links stay natural tab stops.
     this.roving = this.element.dataset.hoverOpen === undefined
+    // Outstanding syncSub rAF handles — cancelled on disconnect so a queued
+    // frame never touches a torn-down menubar.
+    this.subFrames = new Set()
   }
 
   // Pair each trigger with its panel for AT (aria-controls), and fold the
@@ -39,6 +42,12 @@ export default class extends Controller {
       if (!panel.id) panel.id = `pk-menu-panel-${++uid}`
       trigger.setAttribute("aria-controls", panel.id)
     }
+    // A Turbo snapshot serializes aria-expanded="true" even though the
+    // panel's :popover-open does not survive the restore — no panel can be
+    // open at connect time, so stamp every expanded marker back to false
+    // (only on elements that already carry it: plain nav links must not
+    // grow an aria-expanded). Covers the trigger and CSS-revealed subs.
+    menu.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"))
     if (this.roving) this.applyRoving()
   }
 
@@ -48,6 +57,8 @@ export default class extends Controller {
 
   disconnect() {
     clearTimeout(this.graceTimer)
+    this.subFrames.forEach((id) => cancelAnimationFrame(id))
+    this.subFrames.clear()
   }
 
   toggle(e) {
@@ -112,6 +123,20 @@ export default class extends Controller {
     this.close()
   }
 
+  // Tabbing out of the bar: close the open [popover=manual] panel once focus
+  // has left both the bar AND the panel (panels are top-layer popovers, but
+  // remain DOM children — check both anyway). Focus moving INTO the panel
+  // during normal navigation must not close it. relatedTarget is null when
+  // the window itself blurs — leave the menu alone then.
+  onFocusout(e) {
+    const to = e.relatedTarget
+    if (!to || this.element.contains(to)) return
+    const menu = this.openMenu
+    if (!menu) return
+    if (this.panel(menu)?.contains(to)) return
+    this.close()
+  }
+
   // Single keydown listener on the bar (wired via data-action, so no manual
   // cleanup): roving focus while a menu is open, ArrowDown-opens while closed.
   onKeydown(e) {
@@ -215,10 +240,12 @@ export default class extends Controller {
   // state isn't settled until the event finishes dispatching.
   syncSub(e) {
     const sub = e.currentTarget
-    requestAnimationFrame(() => {
+    const id = requestAnimationFrame(() => {
+      this.subFrames.delete(id)
       sub.querySelector(":scope > [aria-haspopup]")
         ?.setAttribute("aria-expanded", sub.matches(":hover, :focus-within"))
     })
+    this.subFrames.add(id)
   }
 
   shift(dir) {

data/app/components/phlex_kit/menubar/menubar_item.rb

@@ -6,7 +6,7 @@ module PhlexKit
   class MenubarItem < BaseComponent
     VARIANTS = { default: nil, destructive: "destructive" }.freeze
 
-    def initialize(as: :a, href: "#", shortcut: nil, variant: :default, inset: false, disabled: false, **attrs)
+    def initialize(as: :a, href: nil, shortcut: nil, variant: :default, inset: false, disabled: false, **attrs)
       @as = as.to_sym
       @href = href
       @shortcut = shortcut
@@ -24,7 +24,9 @@ module PhlexKit
         data: @disabled ? { disabled: "true" } : { action: "click->phlex-kit--menubar#close" }
       }
       base[:aria] = { disabled: "true" } if @disabled
-      base[:href] = @href unless @as == :div || @disabled
+      # No default href: "#" would make Enter/click navigate (hash change +
+      # scroll-to-top). tabindex="-1" keeps the row programmatically focusable.
+      base[:href] = @href unless @href.nil? || @as == :div || @disabled
       send(@as, **mix(base, @attrs)) do
         block&.call
         span(class: "pk-menubar-shortcut") { @shortcut } if @shortcut

data/app/components/phlex_kit/menubar/menubar_radio_group.rb

@@ -1,10 +1,12 @@
 module PhlexKit
   # Exclusive-choice group of MenubarRadioItems (share the same `name:`).
-  # Mirrors shadcn/ui's MenubarRadioGroup. See menubar.rb.
+  # Mirrors shadcn/ui's MenubarRadioGroup. role="group" (NOT "radiogroup"):
+  # radiogroup may not own menuitemradio children (axe aria-required-children).
+  # See menubar.rb.
   class MenubarRadioGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-menubar-group", role: "radiogroup" }, @attrs), &)
+      div(**mix({ class: "pk-menubar-group", role: "group" }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/message/message.rb

@@ -3,8 +3,13 @@ module PhlexKit
   # align: :end reverses the row. Compose Message > MessageContent (+ Avatar/
   # Header/Footer); group several in a MessageGroup.
   class Message < BaseComponent
+    ALIGNS = %i[start end].freeze
+
     def initialize(align: :start, **attrs)
       @align = align.to_sym
+      # Fail loud like sibling Bubble: message.css only styles data-align="end",
+      # so an unknown value silently rendered a start-aligned row.
+      raise KeyError, "unknown Message align #{@align}" unless ALIGNS.include?(@align)
       @attrs = attrs
     end
     def view_template(&)

data/app/components/phlex_kit/message_scroller/message_scroller_controller.js

@@ -141,7 +141,8 @@ export default class extends Controller {
     if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
     this.programmatic = false;
     this.element.removeAttribute("data-autoscrolling");
-    this.viewportTarget?.removeAttribute("data-autoscrolling");
+    // Stimulus target getters throw when missing — guard, don't optional-chain.
+    if (this.hasViewportTarget) this.viewportTarget.removeAttribute("data-autoscrolling");
     this.following = false;
     this.updateButton();
   }
@@ -184,14 +185,16 @@ export default class extends Controller {
           // flex row gap each prepended row introduces, or the preserved row
           // drifts down by one gap per insertion.
           prependedHeight += (node.offsetHeight || 0) + gap;
-        } else {
-          // Inserted at (or after) the end → new turn.
+        } else if (record.nextSibling === null) {
+          // Inserted at the end → new turn.
           appended = node;
         }
+        // Both siblings present → inserted between existing rows. Neither
+        // history nor a new turn — don't yank a following reader to the end.
       }
     }
 
-    if (prependedHeight > 0 && this.preserveOnPrependValue) {
+    if (prependedHeight > 0 && this.preserveOnPrependValue && this.hasViewportTarget) {
       // Keep the reader's current row fixed while history loads in above.
       this.viewportTarget.scrollTop += prependedHeight;
     }
@@ -307,7 +310,8 @@ export default class extends Controller {
   finishScroll() {
     this.programmatic = false;
     this.element.removeAttribute("data-autoscrolling");
-    this.viewportTarget?.removeAttribute("data-autoscrolling");
+    // Stimulus target getters throw when missing — guard, don't optional-chain.
+    if (this.hasViewportTarget) this.viewportTarget.removeAttribute("data-autoscrolling");
     this.following = this.isAtEnd();
     this.updateButton();
   }
@@ -374,6 +378,9 @@ export default class extends Controller {
       button.setAttribute("data-active", active ? "true" : "false");
       // Remove the inert button from the tab order so there are no ghost stops.
       button.setAttribute("tabindex", active ? "0" : "-1");
+      // opacity-only hiding leaves it in the accessibility tree — a SR
+      // virtual cursor would still find a phantom jump button.
+      button.setAttribute("aria-hidden", active ? "false" : "true");
     });
   }
 }

data/app/components/phlex_kit/native_select/native_select.css

@@ -20,8 +20,10 @@
   color: var(--pk-text);
   font: inherit;
   font-size: .875rem;
-  padding: .25rem 2rem .25rem .625rem;
-    cursor: pointer;
+  padding-block: .25rem;
+  padding-inline-start: .625rem;
+  padding-inline-end: 2rem; /* chevron space — matches .pk-native-select-icon's inset-inline-end */
+  cursor: pointer;
   transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
 }
 .pk-native-select-field:hover { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }

data/app/components/phlex_kit/native_select/native_select.rb

@@ -21,20 +21,29 @@ module PhlexKit
       sm: "sm"
     }.freeze
 
+    # An Integer size: is the NATIVE <select size> (multi-row list box) and
+    # passes straight through — the kit's visual sizes stay symbols.
     def initialize(size: :default, **attrs)
-      @size = size.to_sym
+      if size.is_a?(Integer)
+        @native_size = size
+        @size = :default
+      else
+        @size = size.to_sym
+      end
       @attrs = attrs
     end
 
     def view_template(&block)
       div(class: "pk-native-select") do
-        select(**mix({
+        base = {
           class: classes,
           data: {
             phlex_kit__form_field_target: "input",
             action: "change->phlex-kit--form-field#onChange invalid->phlex-kit--form-field#onInvalid"
           }
-        }, @attrs), &block)
+        }
+        base[:size] = @native_size if @native_size
+        select(**mix(base, @attrs), &block)
         render PhlexKit::NativeSelectIcon.new
       end
     end

data/app/components/phlex_kit/navigation_menu/navigation_menu.rb

@@ -20,7 +20,13 @@ module PhlexKit
           # focus returned to the trigger (bare #close as an action received
           # the event as `opts`, so refocus never happened — focus fell to
           # <body> when the panel hid).
-          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown mouseleave->phlex-kit--menubar#closeSoon"
+          # mouseenter->cancelClose: re-entering the nav over list padding /
+          # whitespace must cancel the pending mouseleave grace-close (only
+          # trigger/panel mouseenter did before).
+          # focusout->onFocusout: a keyboard user tabbing past the panel's
+          # last link must close it (menubar wires the same handler; closeSoon
+          # is pointer-only and never fires for this path).
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout mouseleave->phlex-kit--menubar#closeSoon mouseenter->phlex-kit--menubar#cancelClose"
         }
       }, @attrs), &)
     end

data/app/components/phlex_kit/pagination/pagination.rb

@@ -2,9 +2,17 @@ module PhlexKit
   # Page navigation. Ported from ruby_ui's RubyUI::Pagination. Compose Pagination >
   # PaginationContent > PaginationItem(href:, active:) / PaginationEllipsis.
   class Pagination < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    # label: is a named kwarg (not a mix default) because `mix` would *fuse* a
+    # caller aria-label with the hardcoded "pagination" ("pagination Résultats").
+    def initialize(label: "pagination", **attrs)
+      @label = label
+      @attrs = attrs
+    end
+
     def view_template(&)
-      nav(**mix({ class: "pk-pagination", role: "navigation", aria: { label: "pagination" } }, @attrs), &)
+      base = { class: "pk-pagination", role: "navigation" }
+      base[:aria] = { label: @label } unless aria_labelled?
+      nav(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/pagination/pagination_next.rb

@@ -2,15 +2,24 @@ module PhlexKit
   # "Next" control (label + chevron, label hidden on small screens), ported
   # from shadcn/ui's PaginationNext. Renders its own <li>. See pagination.rb.
   class PaginationNext < BaseComponent
-    def initialize(href: "#", label: "Next", **attrs)
+    DEFAULT_LABEL = "Next"
+
+    def initialize(href: "#", label: DEFAULT_LABEL, **attrs)
       @href = href
       @label = label
       @attrs = attrs
     end
 
     def view_template
+      # The English aria-label only accompanies the default English label; a
+      # custom (possibly localized) label: speaks for itself — hardcoding
+      # "Go to next page" over it would make AT announce the wrong language.
+      base = { href: @href, class: "pk-button ghost pk-pagination-next" }
+      # ...and never over a caller-supplied aria label — `mix` would fuse
+      # the two strings instead of overriding.
+      base[:aria] = { label: "Go to next page" } if @label == DEFAULT_LABEL && !aria_labelled?
       li do
-        a(**mix({ href: @href, class: "pk-button ghost pk-pagination-next", aria: { label: "Go to next page" } }, @attrs)) do
+        a(**mix(base, @attrs)) do
           span(class: "pk-pagination-label") { @label }
           render Icon.new(:chevron_right, size: nil)
         end

data/app/components/phlex_kit/pagination/pagination_previous.rb

@@ -3,15 +3,24 @@ module PhlexKit
   # ported from shadcn/ui's PaginationPrevious. Renders its own <li>.
   # See pagination.rb.
   class PaginationPrevious < BaseComponent
-    def initialize(href: "#", label: "Previous", **attrs)
+    DEFAULT_LABEL = "Previous"
+
+    def initialize(href: "#", label: DEFAULT_LABEL, **attrs)
       @href = href
       @label = label
       @attrs = attrs
     end
 
     def view_template
+      # The English aria-label only accompanies the default English label; a
+      # custom (possibly localized) label: speaks for itself — hardcoding
+      # "Go to previous page" over it would make AT announce the wrong language.
+      base = { href: @href, class: "pk-button ghost pk-pagination-previous" }
+      # ...and never over a caller-supplied aria label — `mix` would fuse
+      # the two strings instead of overriding.
+      base[:aria] = { label: "Go to previous page" } if @label == DEFAULT_LABEL && !aria_labelled?
       li do
-        a(**mix({ href: @href, class: "pk-button ghost pk-pagination-previous", aria: { label: "Go to previous page" } }, @attrs)) do
+        a(**mix(base, @attrs)) do
           render Icon.new(:chevron_left, size: nil)
           span(class: "pk-pagination-label") { @label }
         end

data/app/components/phlex_kit/popover/popover_controller.js

@@ -17,14 +17,23 @@ export default class extends Controller {
     if (invoker) {
       invoker.popoverTargetElement = this.contentTarget
     } else {
+      // Button-less fallback: keyboard toggling and popup semantics don't
+      // come for free like they do with popoverTargetElement — wire Enter
+      // (and Space, off text-entry controls) plus aria-haspopup/-expanded
+      // onto the focusable child so AT users can discover and open it.
+      this.fallbackInvoker = this.triggerTarget.querySelector("input, a[href], select, textarea, [tabindex]") || this.triggerTarget
+      this.fallbackInvoker.setAttribute("aria-haspopup", "dialog")
+      this.fallbackInvoker.setAttribute("aria-expanded", this.contentTarget.matches(":popover-open") ? "true" : "false")
       this.triggerTarget.addEventListener("pointerdown", this.armToggle)
       this.triggerTarget.addEventListener("click", this.toggle)
+      this.triggerTarget.addEventListener("keydown", this.keyToggle)
     }
   }
 
   disconnect() {
     this.triggerTarget.removeEventListener("pointerdown", this.armToggle)
     this.triggerTarget.removeEventListener("click", this.toggle)
+    this.triggerTarget.removeEventListener("keydown", this.keyToggle)
   }
 
   armToggle = () => { this.wasOpen = this.contentTarget.matches(":popover-open") }
@@ -32,8 +41,29 @@ export default class extends Controller {
     if (this.wasOpen) { this.wasOpen = false; return }
     this.contentTarget.togglePopover()
   }
+  keyToggle = (e) => {
+    const textEntry = /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)
+    if (e.key !== "Enter" && !(e.key === " " && !textEntry)) return
+    e.preventDefault()
+    this.contentTarget.togglePopover()
+  }
+
+  // One stable handler added/removed symmetrically — an anonymous listener
+  // here would pile up a duplicate on every target reconnect.
+  syncState = (e) => {
+    e.target.dataset.state = e.newState === "open" ? "open" : "closed"
+    this.fallbackInvoker?.setAttribute("aria-expanded", e.newState === "open" ? "true" : "false")
+  }
 
   contentTargetConnected(el) {
-    el.addEventListener("toggle", (e) => { el.dataset.state = e.newState === "open" ? "open" : "closed" })
+    // A Turbo snapshot serializes data-state="open" but :popover-open does
+    // not survive the restore — resync before listening so host CSS keyed
+    // on the state hook doesn't misfire.
+    el.dataset.state = el.matches(":popover-open") ? "open" : "closed"
+    el.addEventListener("toggle", this.syncState)
+  }
+
+  contentTargetDisconnected(el) {
+    el.removeEventListener("toggle", this.syncState)
   }
 }

data/app/components/phlex_kit/progress/progress.css

@@ -14,4 +14,12 @@
   width: 100%;
   background: var(--pk-brand);
   transition: transform .3s ease;
+  /* value% − 100%: slides the full-width indicator into view from the
+     inline-start edge. --pk-progress-value is a unitless 0–100 set inline
+     by progress.rb. */
+  transform: translateX(calc((var(--pk-progress-value, 0) - 100) * 1%));
+}
+/* RTL: the bar fills from the right, so travel flips. */
+.pk-progress:dir(rtl) .pk-progress-indicator {
+  transform: translateX(calc((100 - var(--pk-progress-value, 0)) * 1%));
 }

data/app/components/phlex_kit/progress/progress.rb

@@ -4,21 +4,30 @@ module PhlexKit
   # JS; width comes from a caller `class:`/`style:`. Tailwind → vanilla
   # `.pk-progress*` (progress.css).
   class Progress < BaseComponent
-    def initialize(value: 0, **attrs)
+    # value_text: is a named kwarg (not read from **attrs) because `mix`
+    # would *fuse* a caller "aria-valuetext" with the generated default.
+    def initialize(value: 0, value_text: nil, **attrs)
       @value = value.to_f.clamp(0.0, 100.0)
+      @value_text = value_text
       @attrs = attrs
     end
 
     def view_template
+      # %g drops float artifacts ("40.0" would be announced as "forty point
+      # zero percent"). The value travels as a custom property so the fill
+      # transform lives in progress.css, where a :dir(rtl) arm can flip it —
+      # an inline translateX always filled from the physical left.
+      v = Kernel.format("%g", @value)
       div(**mix({
         role: "progressbar",
-        "aria-valuenow": @value,
+        "aria-valuenow": v,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-valuetext": "#{@value}%",
-        class: "pk-progress"
+        "aria-valuetext": @value_text || "#{v}%",
+        class: "pk-progress",
+        style: "--pk-progress-value: #{v};"
       }, @attrs)) do
-        div(class: "pk-progress-indicator", style: "transform: translateX(-#{100 - @value}%)")
+        div(class: "pk-progress-indicator")
       end
     end
   end

data/app/components/phlex_kit/resizable/resizable_controller.js

@@ -36,6 +36,9 @@ export default class extends Controller {
     const next = handle.nextElementSibling
     if (!prev || !next) return
     e.preventDefault()
+    // preventDefault suppresses mouse-driven focus — hand it to the handle
+    // so a drag can be fine-tuned with the arrow keys immediately.
+    handle.focus({ preventScroll: true })
 
     const horizontal = this.directionValue === "horizontal"
     const sizeOf = (el) => horizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height
@@ -47,15 +50,21 @@ export default class extends Controller {
       // constant: normalizing to 2 rescaled the pair against untouched
       // siblings, so in a 25/25/50 group the 50 panel ballooned on first drag.
       pairGrow: this.growOf(prev) + this.growOf(next) || 2,
+      // Snapshot the group's total grow: min/max-size percentages are shares
+      // of the WHOLE group, and untouched siblings keep their grow mid-drag.
+      groupGrow: this.groupGrow(),
     }
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
     const onMove = (ev) => {
+      // LTR assumption: clientX grows toward the trailing panel; RTL drag
+      // inversion is a documented limitation.
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
       const total = drag.prevSize + drag.nextSize
       const prevSize = Math.min(Math.max(drag.prevSize + delta, 0), total)
-      prev.style.flexGrow = (prevSize / total) * drag.pairGrow
-      next.style.flexGrow = ((total - prevSize) / total) * drag.pairGrow
+      const prevGrow = this.clampPrevGrow(prev, next, (prevSize / total) * drag.pairGrow, drag.pairGrow, drag.groupGrow)
+      prev.style.flexGrow = prevGrow
+      next.style.flexGrow = drag.pairGrow - prevGrow
       this.syncValuenow(handle)
     }
     const onUp = () => {
@@ -71,7 +80,8 @@ export default class extends Controller {
   }
 
   // Arrow keys resize by 5% of the pair per press (matching the drag axis);
-  // Home/End collapse the leading panel to its min/max.
+  // Home/End collapse the leading panel to its min/max (clamped to any
+  // per-panel min-size/max-size bounds, same as drags).
   keydown(e) {
     const handle = e.currentTarget
     const prev = handle.previousElementSibling
@@ -96,8 +106,9 @@ export default class extends Controller {
     }
     e.preventDefault()
 
-    prev.style.flexGrow = share * pairGrow
-    next.style.flexGrow = (1 - share) * pairGrow
+    const prevGrow = this.clampPrevGrow(prev, next, share * pairGrow, pairGrow, this.groupGrow())
+    prev.style.flexGrow = prevGrow
+    next.style.flexGrow = pairGrow - prevGrow
     this.syncValuenow(handle)
   }
 
@@ -106,6 +117,42 @@ export default class extends Controller {
     return Number.isFinite(g) ? g : 1
   }
 
+  // Clamp the leading panel's proposed flex-grow to both panels' optional
+  // min-size/max-size percentages. Bounds are shares of the whole group
+  // (grow / groupGrow), and the pair's combined grow is fixed, so a bound on
+  // one panel implies the complementary bound on its neighbour. Without any
+  // bounds this collapses to the historical [0, pairGrow] clamp.
+  clampPrevGrow(prev, next, prevGrow, pairGrow, groupGrow) {
+    const pb = this.boundsOf(prev)
+    const nb = this.boundsOf(next)
+    let lo = 0
+    let hi = pairGrow
+    if (pb.min !== null) lo = Math.max(lo, pb.min * groupGrow)
+    if (nb.max !== null) lo = Math.max(lo, pairGrow - nb.max * groupGrow)
+    if (pb.max !== null) hi = Math.min(hi, pb.max * groupGrow)
+    if (nb.min !== null) hi = Math.min(hi, pairGrow - nb.min * groupGrow)
+    if (lo > hi) return Math.min(Math.max(prevGrow, 0), pairGrow) // unsatisfiable bounds: ignore them
+    return Math.min(Math.max(prevGrow, lo), hi)
+  }
+
+  // A panel's declared size bounds as fractions of the group, or nulls.
+  boundsOf(el) {
+    const min = parseFloat(el.getAttribute("data-phlex-kit--resizable-min-size"))
+    const max = parseFloat(el.getAttribute("data-phlex-kit--resizable-max-size"))
+    return {
+      min: Number.isFinite(min) ? min / 100 : null,
+      max: Number.isFinite(max) ? max / 100 : null,
+    }
+  }
+
+  // Combined flex-grow of this group's own panels (direct children only —
+  // panels of a nested group belong to that group's own controller).
+  groupGrow() {
+    return [...this.element.children]
+      .filter((el) => el.matches('[data-phlex-kit--resizable-target~="panel"]'))
+      .reduce((sum, el) => sum + this.growOf(el), 0) || 2
+  }
+
   syncValuenow(handle) {
     const prev = handle.previousElementSibling
     const next = handle.nextElementSibling

data/app/components/phlex_kit/resizable/resizable_panel.rb

@@ -1,11 +1,16 @@
 module PhlexKit
-  # One pane of a ResizablePanelGroup. `default_size:` is a percentage.
+  # One pane of a ResizablePanelGroup. `default_size:`, `min_size:` and
+  # `max_size:` are percentages of the group (shadcn's defaultSize/minSize/
+  # maxSize); the bounds ride along as data attributes the resizable
+  # controller clamps drags and keyboard resizes against.
   # See resizable_panel_group.rb.
   class ResizablePanel < BaseComponent
-    def initialize(default_size: nil, **attrs)
-      # Numeric coercion: the value is interpolated into a style attribute, and
+    def initialize(default_size: nil, min_size: nil, max_size: nil, **attrs)
+      # Numeric coercion: the values are interpolated into attributes, and
       # hosts plausibly round-trip saved panel sizes from client state.
       @default_size = default_size.nil? ? nil : Float(default_size)
+      @min_size = min_size.nil? ? nil : Float(min_size)
+      @max_size = max_size.nil? ? nil : Float(max_size)
       @attrs = attrs
     end
 
@@ -16,7 +21,11 @@ module PhlexKit
       div(**mix({
         class: "pk-resizable-panel",
         style: style,
-        data: { phlex_kit__resizable_target: "panel" }
+        data: {
+          phlex_kit__resizable_target: "panel",
+          phlex_kit__resizable_min_size: @min_size && Kernel.format("%g", @min_size),
+          phlex_kit__resizable_max_size: @max_size && Kernel.format("%g", @max_size)
+        }.compact
       }.compact, @attrs), &)
     end
   end

data/app/components/phlex_kit/scroll_area/scroll_area.rb

@@ -2,16 +2,35 @@ module PhlexKit
   # Styled scroll container, ported from shadcn/ui's ScrollArea. Radix's custom
   # scrollbars are replaced with native thin scrollbars themed via CSS — no JS.
   # Constrain it with a height/width from the caller. tabindex=0 makes the
-  # scrollable region keyboard-focusable (WCAG); role=region gives that focus
-  # stop a role — pass `aria: { label: ... }` to name it. `.pk-scroll-area`
-  # (scroll_area.css).
+  # scrollable region keyboard-focusable (WCAG scrollable-region-focusable).
+  # Pass `aria: { label: ... }` (or aria-labelledby) to name it — only then
+  # does it render role=region; a nameless region is noise for AT, so the
+  # role is omitted when unlabelled. `.pk-scroll-area` (scroll_area.css).
   class ScrollArea < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-scroll-area", tabindex: "0", role: "region" }, @attrs), &)
+      # Defaults only when the caller didn't supply their own — `mix` would
+      # fuse role="region log" / tabindex="0 -1" instead of overriding.
+      base = { class: "pk-scroll-area" }
+      base[:tabindex] = "0" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+      base[:role] = "region" if labelled? && !@attrs.key?(:role) && !@attrs.key?("role")
+      div(**mix(base, @attrs), &)
+    end
+
+    private
+
+    # True when the caller supplies an accessible name, via the aria: hash
+    # (aria: { label:/labelledby: }) or flat aria_label/aria-labelledby attrs.
+    def labelled?
+      aria = @attrs[:aria] || @attrs["aria"]
+      if aria.is_a?(Hash)
+        return true if %w[label labelledby].any? { |k| aria[k.to_sym] || aria[k] }
+      end
+      [ :aria_label, "aria_label", "aria-label",
+       :aria_labelledby, "aria_labelledby", "aria-labelledby" ].any? { |k| @attrs[k] }
     end
   end
 end

data/app/components/phlex_kit/select/select.css

@@ -22,9 +22,9 @@
   white-space: nowrap;
   border-radius: var(--pk-radius);
   border: 1px solid var(--pk-input);
-  background: transparent;
   color: var(--pk-text);
-  padding: .25rem .5rem .25rem .625rem;
+  padding-block: .25rem;
+  padding-inline: .625rem .5rem;
   gap: .375rem;
   font: inherit;
   font-size: .875rem;
@@ -88,7 +88,9 @@
   user-select: none;
   gap: .375rem;
   border-radius: calc(var(--pk-radius) - 2px);
-  padding: .25rem 2rem .25rem .375rem;
+  /* 2rem gutter on the inline-end — where .pk-select-item-check sits. */
+  padding-block: .25rem;
+  padding-inline: .375rem 2rem;
   font-size: .875rem;
   color: var(--pk-text);
   outline: none;

data/app/components/phlex_kit/select/select_content.rb

@@ -5,8 +5,11 @@ module PhlexKit
   # inner `.pk-select-viewport` is the bordered, scrollable box.
   # Holds SelectGroup / SelectLabel / SelectItem children. See select.rb.
   class SelectContent < BaseComponent
-    def initialize(**attrs)
-      @id = "pk-select-content-#{SecureRandom.hex(4)}"
+    # id: is a named kwarg (not left in **attrs) because `mix` would *merge* a
+    # caller id with the generated one into an invalid two-token id, breaking
+    # aria-controls and the generated item ids.
+    def initialize(id: nil, **attrs)
+      @id = id || "pk-select-content-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
@@ -17,7 +20,10 @@ module PhlexKit
         tabindex: "-1",
         class: "pk-select-content",
         popover: "manual",
-        data: { phlex_kit__select_target: "content" }
+        data: {
+          phlex_kit__select_target: "content",
+          action: "keydown->phlex-kit--select#typeahead"
+        }
       }, @attrs)) do
         div(class: "pk-select-viewport", &block)
       end