RubyGems - phlex_kit - Versions diffs - 0.9.0 → 0.10.0 - Mend

phlex_kit 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

data/app/components/phlex_kit/command/command_controller.js CHANGED Viewed

@@ -35,8 +35,16 @@ function fuzzyScore(query, value) {
 export default class extends Controller {
   static targets = ["input", "group", "item", "empty", "separator", "list", "liveRegion"];
-  connect() {
+  initialize() {
+    // Stimulus fires [target]Connected before connect(): anything
+    // itemTargetConnected uses must be initialized here (mirrors
+    // combobox_controller.js).
+    this.itemIdCounter = 0;
+    this.searchEntries = [];
     this.selectedIndex = -1;
+  }
+  connect() {
     // Remember what had focus before the palette grabbed it (for a cloned
     // dialog this is the element focused when the overlay was inserted), so
     // dismiss() can hand focus back instead of dropping it on <body>.
@@ -50,7 +58,6 @@ export default class extends Controller {
     // Only the cloned dialog overlay grabs focus on connect — an inline
     // palette connecting at page load must not steal it.
     if (this.isDialogClone()) this.inputTarget.focus();
-    this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
   }
@@ -60,23 +67,46 @@ export default class extends Controller {
     return this.element.hasAttribute("data-phlex-kit--command-dialog-instance");
   }
-  // ARIA plumbing: every result gets an id derived from the listbox id so the
-  // input can point aria-activedescendant at the keyboard highlight, and
-  // aria-controls is wired to the listbox (mirrors select_controller.js).
+  // ARIA plumbing: aria-controls is wired to the listbox (mirrors
+  // select_controller.js); the per-result ids come from itemTargetConnected.
   generateItemIds() {
+    this.inputTarget.setAttribute("aria-controls", this.listId());
+  }
+  listId() {
     const list = this.hasListTarget ? this.listTarget : this.element;
     if (!list.id) list.id = `pk-command-list-${Math.random().toString(36).slice(2, 10)}`;
+    return list.id;
+  }
-    this.itemTargets.forEach((item, index) => {
-      if (!item.id) item.id = `${list.id}-${index}`;
+  // Every result gets an id derived from the listbox id so the input can
+  // point aria-activedescendant at the keyboard highlight, and a search-index
+  // entry so filtering can find it. A target callback (not a connect() loop)
+  // so items rendered in by the host after load are id'd and findable too.
+  // Counter-based, so a removed item's id is never reissued to a later
+  // arrival (mirrors combobox_controller.js).
+  itemTargetConnected(item) {
+    if (!item.id) item.id = `${this.listId()}-${this.itemIdCounter++}`;
+    this.searchEntries.push({
+      value: (item.dataset.value || "").toLowerCase(),
+      text: (item.dataset.text || "").toLowerCase(),
+      element: item,
     });
+  }
-    this.inputTarget.setAttribute("aria-controls", list.id);
+  itemTargetDisconnected(item) {
+    this.searchEntries = this.searchEntries.filter(
+      (entry) => entry.element !== item,
+    );
   }
   dismiss() {
     // Cloned dialog overlay: tear the clone down and hand focus back.
     if (this.isDialogClone()) {
+      // Dispatched BEFORE teardown: the command-dialog controller listens on
+      // the overlay and un-inerts the page here — focus() below would be a
+      // silent no-op while previouslyFocused sits under an inert ancestor.
+      this.dispatch("dismiss");
       // allow scroll on body
       document.body.style.removeProperty("overflow");
       const previous = this.previouslyFocused;
@@ -157,7 +187,7 @@ export default class extends Controller {
     this.toggleVisibility(this.itemTargets, false);
-    const results = this.searchIndex.search(query);
+    const results = this.searchItems(query);
     results.forEach((result) =>
       this.toggleVisibility([result.item.element], true),
     );
@@ -201,31 +231,24 @@ export default class extends Controller {
     this.toggleVisibility(this.emptyTargets, false);
   }
-  // Upstream builds a Fuse index here; this keeps the same search() shape —
-  // [{ item }] sorted best-match-first — using the fuzzy scorer above.
-  // Both data-value and data-text are searchable (an item's `text:` was
-  // rendered but never indexed); the better of the two scores wins.
-  buildSearchIndex() {
-    const items = this.itemTargets.map((el) => ({
-      value: (el.dataset.value || "").toLowerCase(),
-      text: (el.dataset.text || "").toLowerCase(),
-      element: el,
-    }));
-    return {
-      search(query) {
-        const q = query.toLowerCase();
-        return items
-          .map((item) => {
-            const scores = [item.value, item.text]
-              .filter(Boolean)
-              .map((field) => fuzzyScore(q, field))
-              .filter((score) => score !== null);
-            return { item, score: scores.length ? Math.max(...scores) : null };
-          })
-          .filter((result) => result.score !== null)
-          .sort((a, b) => b.score - a.score);
-      },
-    };
+  // Upstream builds a Fuse index here; this keeps the same result shape —
+  // [{ item }] sorted best-match-first — using the fuzzy scorer above over
+  // the live searchEntries (maintained by itemTargetConnected/Disconnected,
+  // so host-rendered items are searchable). Both data-value and data-text are
+  // searchable (an item's `text:` was rendered but never indexed); the better
+  // of the two scores wins.
+  searchItems(query) {
+    const q = query.toLowerCase();
+    return this.searchEntries
+      .map((item) => {
+        const scores = [item.value, item.text]
+          .filter(Boolean)
+          .map((field) => fuzzyScore(q, field))
+          .filter((score) => score !== null);
+        return { item, score: scores.length ? Math.max(...scores) : null };
+      })
+      .filter((result) => result.score !== null)
+      .sort((a, b) => b.score - a.score);
   }
   handleKeydown(e) {

data/app/components/phlex_kit/command/command_dialog_controller.js CHANGED Viewed

@@ -6,14 +6,27 @@ import { Controller } from "@hotwired/stimulus";
 // upstream's document-scoped outlet (which let one dialog adopt another's
 // open palette), each instance tracks its own clone — sheet_controller's
 // pattern — and clears it on turbo:before-cache so a cached page never
-// restores a stale overlay + scroll lock.
+// restores a stale overlay + scroll lock. While the overlay is up, the page
+// behind it is inert-ed per element with prior state saved (the same modal
+// contract as alert_dialog/sheet/sidebar — the helper is duplicated per
+// controller by design); restore runs on dismiss (via the overlay's
+// phlex-kit--command:dismiss event), disconnect, AND turbo:before-cache.
 // Connects to data-controller="phlex-kit--command-dialog"
 export default class extends Controller {
   static targets = ["content"];
   initialize() {
     this.overlay = null;
+    this.inerted = null;
+    // The command controller's dismiss() dispatches this on the overlay
+    // BEFORE it removes the clone / restores focus — un-inert first so the
+    // opener is focusable again.
+    this.restoreInert = () => {
+      for (const [el, wasInert] of this.inerted || []) el.inert = wasInert;
+      this.inerted = null;
+    };
     this.clearOverlay = () => {
+      this.restoreInert();
       if (this.overlay?.isConnected) {
         this.overlay.remove();
         document.body.style.removeProperty("overflow");
@@ -49,7 +62,23 @@ export default class extends Controller {
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     this.overlay = document.body.lastElementChild;
+    this.overlay.addEventListener("phlex-kit--command:dismiss", this.restoreInert);
     // prevent scroll on body
     document.body.style.overflow = "hidden";
+    this.#inertOthers();
+  }
+  // Make everything behind the overlay inert (the clone is <body>'s last
+  // child, so its siblings are the whole page). Prior inert state is saved
+  // per element and restored by restoreInert. The command controller's Tab
+  // trap on the clone stays as belt and braces.
+  #inertOthers() {
+    this.inerted = [];
+    for (const el of document.body.children) {
+      if (el === this.overlay) continue;
+      if (["SCRIPT", "STYLE", "LINK", "TEMPLATE"].includes(el.tagName)) continue;
+      this.inerted.push([el, el.inert]);
+      el.inert = true;
+    }
   }
 }

data/app/components/phlex_kit/command/command_group.rb CHANGED Viewed

@@ -5,6 +5,9 @@ module PhlexKit
   class CommandGroup < BaseComponent
     def initialize(title: nil, **attrs)
       @title = title
+      # Names the role="group" items wrapper via aria-labelledby → heading id
+      # (matches cmdk/shadcn; id pattern mirrors CommandList).
+      @heading_id = "pk-command-group-heading-#{SecureRandom.hex(4)}" if title
       @attrs = attrs
     end
@@ -22,11 +25,11 @@ module PhlexKit
     private
     def render_header
-      div(group_heading: @title) { @title }
+      div(id: @heading_id, group_heading: @title) { @title }
     end
     def render_items(&)
-      div(group_items: "", role: "group", &)
+      div(group_items: "", role: "group", aria_labelledby: @heading_id, &)
     end
   end
 end

data/app/components/phlex_kit/dialog/dialog.css CHANGED Viewed

@@ -14,7 +14,7 @@
   max-height: 100vh;
   overflow-y: auto; gap: 1rem;
   border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
-  border-radius: .75rem; background: var(--pk-surface); color: var(--pk-text);
+  border-radius: calc(var(--pk-radius) + 2px); background: var(--pk-surface); color: var(--pk-text);
   padding: var(--pk-dialog-spacing);
   font-size: .875rem;
   box-shadow: 0 10px 30px color-mix(in srgb, var(--pk-shadow-color) 35%, transparent);
@@ -35,7 +35,7 @@
   margin: 0 calc(-1 * var(--pk-dialog-spacing)) calc(-1 * var(--pk-dialog-spacing));
   padding: var(--pk-dialog-spacing);
   border-top: 1px solid var(--pk-border);
-  border-radius: 0 0 .75rem .75rem;
+  border-radius: 0 0 calc(var(--pk-radius) + 2px) calc(var(--pk-radius) + 2px);
   background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent);
 }
 .pk-dialog-title { font-size: 1rem; font-weight: 500; line-height: 1; }

data/app/components/phlex_kit/dialog/dialog_close.rb CHANGED Viewed

@@ -7,7 +7,7 @@ module PhlexKit
     end
     def view_template(&)
-      span(**mix({ style: "display: contents", data: { action: "click->phlex-kit--dialog#dismiss" } }, @attrs), &)
+      span(**mix({ style: "display: contents;", data: { action: "click->phlex-kit--dialog#dismiss" } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/dialog/dialog_controller.js CHANGED Viewed

@@ -10,6 +10,9 @@ export default class extends Controller {
   connect() {
     this.dialogTarget.addEventListener("close", this.handleClose)
+    // Turbo snapshots at turbo:before-cache, BEFORE disconnect — close now or
+    // the cached page restores a non-modal <dialog open> with scroll locked.
+    document.addEventListener("turbo:before-cache", this.beforeCache)
     this.#wireAria("aria-labelledby", ".pk-dialog-title")
     this.#wireAria("aria-describedby", ".pk-dialog-description")
     if (this.openValue) this.open()
@@ -24,8 +27,14 @@ export default class extends Controller {
   }
   disconnect() {
     this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.removeEventListener("turbo:before-cache", this.beforeCache)
     if (this.dialogTarget.open) this.handleClose()
   }
+  beforeCache = () => {
+    if (!this.dialogTarget.open) return
+    this.dialogTarget.close()
+    this.handleClose() // the close event is a queued task — too late for the snapshot
+  }
   open(e) {
     e?.preventDefault()
     this.dialogTarget.showModal()

data/app/components/phlex_kit/drawer/drawer.css CHANGED Viewed

@@ -27,7 +27,7 @@
   bottom: 0;
   max-height: 85vh;
   border-top: 1px solid var(--pk-border);
-  border-radius: .75rem .75rem 0 0;
+  border-radius: calc(var(--pk-radius) + 2px) calc(var(--pk-radius) + 2px) 0 0;
   animation: pk-drawer-up .3s ease;
 }
 .pk-drawer.top {
@@ -35,7 +35,7 @@
   top: 0;
   max-height: 85vh;
   border-bottom: 1px solid var(--pk-border);
-  border-radius: 0 0 .75rem .75rem;
+  border-radius: 0 0 calc(var(--pk-radius) + 2px) calc(var(--pk-radius) + 2px);
   animation: pk-drawer-down .3s ease;
 }
 .pk-drawer.left,
@@ -48,13 +48,13 @@
 .pk-drawer.left {
   left: 0;
   border-right: 1px solid var(--pk-border);
-  border-radius: 0 .75rem .75rem 0;
+  border-radius: 0 calc(var(--pk-radius) + 2px) calc(var(--pk-radius) + 2px) 0;
   animation: pk-drawer-from-left .3s ease;
 }
 .pk-drawer.right {
   right: 0;
   border-left: 1px solid var(--pk-border);
-  border-radius: .75rem 0 0 .75rem;
+  border-radius: calc(var(--pk-radius) + 2px) 0 0 calc(var(--pk-radius) + 2px);
   animation: pk-drawer-from-right .3s ease;
 }
 @keyframes pk-drawer-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

data/app/components/phlex_kit/empty/empty.css CHANGED Viewed

@@ -5,7 +5,7 @@
 .pk-empty {
   display: flex; width: 100%; min-width: 0; flex: 1; flex-direction: column;
   align-items: center; justify-content: center; gap: 1rem;
-  border: 0 dashed var(--pk-border); border-radius: .75rem;
+  border: 0 dashed var(--pk-border); border-radius: calc(var(--pk-radius) + 2px);
   padding: 1.5rem; text-align: center; text-wrap: balance;
 }
 .pk-empty.outline { border-width: 1px; }

data/app/components/phlex_kit/field/field.css CHANGED Viewed

@@ -146,7 +146,8 @@
   display: flex;
   flex-direction: column;
   gap: .25rem;
-  margin: 0 0 0 1rem;
+  margin: 0;
+  margin-inline-start: 1rem;
   padding: 0;
   list-style: disc;
 }

data/app/components/phlex_kit/form_field/form_field_controller.js CHANGED Viewed

@@ -16,6 +16,13 @@ export default class extends Controller {
     if (this.hasErrorTarget) {
       if (this.errorTarget.textContent.trim()) {
         this.shouldValidateValue = true;
+        // A server-rendered error is already visible — give the control(s)
+        // the same aria wiring onInvalid applies, instead of leaving
+        // aria-invalid/aria-describedby unset until the first input/change.
+        this.inputTargets.forEach((input) => {
+          input.setAttribute("aria-invalid", "true");
+          this.#describeBy(input, true);
+        });
       } else {
         this.errorTarget.classList.add("pk-hidden");
       }

data/app/components/phlex_kit/input_otp/input_otp.css CHANGED Viewed

@@ -18,12 +18,12 @@
 }
 .pk-input-otp-slot:not(:first-child) { margin-inline-start: -1px; }
 .pk-input-otp-group .pk-input-otp-slot:first-child {
-  border-top-left-radius: var(--pk-radius);
-  border-bottom-left-radius: var(--pk-radius);
+  border-start-start-radius: var(--pk-radius);
+  border-end-start-radius: var(--pk-radius);
 }
 .pk-input-otp-group .pk-input-otp-slot:last-child {
-  border-top-right-radius: var(--pk-radius);
-  border-bottom-right-radius: var(--pk-radius);
+  border-start-end-radius: var(--pk-radius);
+  border-end-end-radius: var(--pk-radius);
 }
 .pk-input-otp-slot:focus {
   position: relative;

data/app/components/phlex_kit/marker/marker.rb CHANGED Viewed

@@ -6,11 +6,17 @@ module PhlexKit
   # underline and brighten on hover. `.pk-marker*` (marker.css).
   class Marker < BaseComponent
     VARIANTS = { default: nil, border: "border", separator: "separator" }.freeze
+    # The elements this component knows how to render (href: forces <a>);
+    # unknown values used to fall through silently to <div> — fail loud instead.
+    AS_TAGS = %i[div button].freeze
     def initialize(variant: :default, href: nil, as: :div, **attrs)
       @variant = variant.to_sym
       @href = href
       @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown Marker as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @attrs = attrs
     end

data/app/components/phlex_kit/masked_input/masked_input_controller.js CHANGED Viewed

@@ -11,20 +11,27 @@ export default class extends Controller {
     if (!this.mask) return
     // Skip IME composition updates — masking mid-composition mangles the text.
     this.onInput = (e) => { if (!e.isComposing) this.apply() }
+    // Some browsers (Safari) fire the final input event with isComposing still
+    // true, so IME-committed text would never be masked — catch the commit here.
+    this.onCompositionEnd = () => this.apply()
     this.element.addEventListener("input", this.onInput)
+    this.element.addEventListener("compositionend", this.onCompositionEnd)
     // A server-prefilled value renders unmasked — format it once up front.
     if (this.element.value) this.apply()
   }
-  disconnect() { if (this.onInput) this.element.removeEventListener("input", this.onInput) }
+  disconnect() {
+    if (this.onInput) this.element.removeEventListener("input", this.onInput)
+    if (this.onCompositionEnd) this.element.removeEventListener("compositionend", this.onCompositionEnd)
+  }
   apply() {
     const el = this.element
     // The whole value is rewritten below, which throws the caret to the end —
     // remember how many maskable chars sit before it and re-seat it after
     // the same count in the masked output (mid-field edits keep their place).
     const caret = el.selectionStart ?? el.value.length
-    const rawBefore = el.value.slice(0, caret).replace(/[^0-9A-Za-z]/g, "").length
+    const rawBefore = this.maskable(el.value.slice(0, caret)).length
-    const raw = el.value.replace(/[^0-9A-Za-z]/g, "")
+    const raw = this.maskable(el.value)
     let out = "", i = 0
     for (const t of this.mask) {
       if (i >= raw.length) break
@@ -48,4 +55,11 @@ export default class extends Controller {
       el.setSelectionRange(pos, pos)
     }
   }
+  // Transliterate full-width digits (０-９, U+FF10–FF19 — common IME numeric
+  // output) to ASCII before the charset filter would silently drop them.
+  maskable(value) {
+    return value
+      .replace(/[０-９]/g, (d) => String.fromCharCode(d.charCodeAt(0) - 0xFEE0))
+      .replace(/[^0-9A-Za-z]/g, "")
+  }
 }

data/app/components/phlex_kit/menubar/menubar.rb CHANGED Viewed

@@ -16,7 +16,9 @@ module PhlexKit
         role: "menubar",
         data: {
           controller: "phlex-kit--menubar",
-          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown"
+          # focusout: tabbing out of the bar closes the open [popover=manual]
+          # panel (which no focus trap holds open).
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout"
         }
       }, @attrs), &)
     end

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

@@ -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
@@ -48,6 +51,8 @@ export default class extends Controller {
   disconnect() {
     clearTimeout(this.graceTimer)
+    this.subFrames.forEach((id) => cancelAnimationFrame(id))
+    this.subFrames.clear()
   }
   toggle(e) {
@@ -112,6 +117,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 +234,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_scroller/message_scroller_controller.js CHANGED Viewed

@@ -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();
   }

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

@@ -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/navigation_menu/navigation_menu.rb CHANGED Viewed

@@ -20,7 +20,10 @@ 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).
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown mouseleave->phlex-kit--menubar#closeSoon mouseenter->phlex-kit--menubar#cancelClose"
         }
       }, @attrs), &)
     end

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

@@ -2,15 +2,22 @@ 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" }
+      base[:aria] = { label: "Go to next page" } if @label == DEFAULT_LABEL
       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 CHANGED Viewed

@@ -3,15 +3,22 @@ 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" }
+      base[:aria] = { label: "Go to previous page" } if @label == DEFAULT_LABEL
       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