RubyGems - phlex_kit - Versions diffs - 0.11.0 → 0.13.0 - Mend

phlex_kit 0.11.0 → 0.13.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 (78) hide show

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

@@ -1,5 +1,12 @@
 import { Controller } from "@hotwired/stimulus";
+// Strips combining diacritical marks after an NFD decomposition, so "é"
+// (query or candidate) matches "e" — the scorer otherwise treats accented
+// characters as never equal to their bare ASCII counterparts.
+function normalizeDiacritics(s) {
+  return s.normalize("NFD").replace(/[̀-ͯ]/g, "");
+}
 // Fuzzy subsequence score: every query character must appear in order in the
 // value (else null = no match). Consecutive runs compound, word-starts score
 // extra, and a verbatim substring outranks scattered hits — so "set" beats
@@ -7,6 +14,8 @@ import { Controller } from "@hotwired/stimulus";
 // what fuse.js gave ruby_ui.
 function fuzzyScore(query, value) {
   if (!query) return 0;
+  query = normalizeDiacritics(query);
+  value = normalizeDiacritics(value);
   let qi = 0;
   let score = 0;
   let streak = 0;
@@ -40,6 +49,7 @@ export default class extends Controller {
     // itemTargetConnected uses must be initialized here (mirrors
     // combobox_controller.js).
     this.itemIdCounter = 0;
+    this.orderCounter = 0;
     this.searchEntries = [];
     this.selectedIndex = -1;
   }
@@ -50,10 +60,17 @@ export default class extends Controller {
     // dismiss() can hand focus back instead of dropping it on <body>.
     this.previouslyFocused = document.activeElement;
+    // A Turbo snapshot serializes stale aria-selected on rows / aria-
+    // activedescendant on the input even though the live JS highlight state
+    // doesn't survive restore — normalize here so a restored page doesn't
+    // announce a stale highlight (mirrors select_controller.js's connect()).
+    this.itemTargets.forEach((item) => item.removeAttribute("aria-selected"));
     if (!this.hasInputTarget) {
       return;
     }
+    this.inputTarget.removeAttribute("aria-activedescendant");
     this.generateItemIds();
     // Only the cloned dialog overlay grabs focus on connect — an inline
     // palette connecting at page load must not steal it.
@@ -67,6 +84,13 @@ export default class extends Controller {
     return this.element.hasAttribute("data-phlex-kit--command-dialog-instance");
   }
+  // Clones are appended as direct <body> children; the last stamped clone is
+  // the visually topmost overlay across all clone-based overlay families.
+  isTopmostClone() {
+    const clones = document.body.querySelectorAll(":scope > [data-pk-overlay-clone]");
+    return clones.length > 0 && clones[clones.length - 1] === this.element;
+  }
   // ARIA plumbing: aria-controls is wired to the listbox (mirrors
   // select_controller.js); the per-result ids come from itemTargetConnected.
   generateItemIds() {
@@ -87,6 +111,10 @@ export default class extends Controller {
   // arrival (mirrors combobox_controller.js).
   itemTargetConnected(item) {
     if (!item.id) item.id = `${this.listId()}-${this.itemIdCounter++}`;
+    // Original position, stamped once — filter() reorders rows by fuzzy
+    // score and resetVisibility() restores this order. Survives the
+    // disconnect/reconnect a DOM move itself triggers.
+    if (!item.dataset.pkOrder) item.dataset.pkOrder = String(this.orderCounter++);
     this.searchEntries.push({
       value: (item.dataset.value || "").toLowerCase(),
       text: (item.dataset.text || "").toLowerCase(),
@@ -103,7 +131,22 @@ export default class extends Controller {
     this.selectedIndex = -1;
   }
-  dismiss() {
+  dismiss(e) {
+    if (e?.type === "keydown" && this.isDialogClone()) {
+      // The backdrop's Escape binding is window-scoped, so it fires even
+      // with another overlay (alert dialog, sheet) stacked ON TOP of the
+      // palette — those clones are later <body> siblings carrying the same
+      // [data-pk-overlay-clone] marker. Only the topmost clone may act on
+      // Escape (mirrors alert_dialog_controller.js#topmost).
+      if (!this.isTopmostClone()) return;
+      // The input's Escape binding is element-scoped and fires BEFORE lower
+      // overlays' document/window listeners — stop the keydown here, or by
+      // the time they run this clone (and its marker) is already removed and
+      // their own topmost check would wrongly elect them (mirrors
+      // sheet_content_controller.js's Escape guard).
+      e.stopPropagation();
+    }
     // Cloned dialog overlay: tear the clone down and hand focus back.
     if (this.isDialogClone()) {
       // Dispatched BEFORE teardown: the command-dialog controller listens on
@@ -174,7 +217,7 @@ export default class extends Controller {
   }
   focusInput() {
-    this.inputTarget?.focus();
+    if (this.hasInputTarget) this.inputTarget.focus();
   }
   filter(e) {
@@ -194,6 +237,9 @@ export default class extends Controller {
     results.forEach((result) =>
       this.toggleVisibility([result.item.element], true),
     );
+    // cmdk parity: the best match lists first. Within each parent only —
+    // groups keep their identity, matches never jump between them.
+    this.reorderWithinParents(results.map((r) => r.item.element));
     this.announceResultCount(results.length);
     this.toggleVisibility(this.emptyTargets, results.length === 0);
@@ -232,6 +278,35 @@ export default class extends Controller {
     this.toggleVisibility(this.groupTargets, true);
     this.toggleVisibility(this.separatorTargets, true);
     this.toggleVisibility(this.emptyTargets, false);
+    // Undo any fuzzy-score reordering: back to server-rendered order.
+    this.reorderWithinParents(
+      [...this.itemTargets].sort((a, b) => Number(a.dataset.pkOrder) - Number(b.dataset.pkOrder)),
+    );
+  }
+  // Re-inserts `orderedItems` in the given sequence, each within its own
+  // parent, at the position of that parent's first item row — headings,
+  // separators and empty-state siblings keep their places. (Items are
+  // assumed contiguous within a parent; a separator BETWEEN items of one
+  // parent would drift below them.) The moves retrigger item target
+  // disconnect/connect, which is safe: ids and pkOrder are stamped once,
+  // and filter()/dismiss() have already reset the highlight.
+  reorderWithinParents(orderedItems) {
+    const itemSet = new Set(this.itemTargets);
+    const byParent = new Map();
+    orderedItems.forEach((el) => {
+      const parent = el.parentElement;
+      if (!parent) return;
+      if (!byParent.has(parent)) byParent.set(parent, []);
+      byParent.get(parent).push(el);
+    });
+    byParent.forEach((els, parent) => {
+      const firstItem = [...parent.children].find((c) => itemSet.has(c));
+      const placeholder = document.createComment("");
+      parent.insertBefore(placeholder, firstItem || null);
+      els.forEach((el) => parent.insertBefore(el, placeholder));
+      placeholder.remove();
+    });
   }
   // Upstream builds a Fuse index here; this keeps the same result shape —

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

@@ -17,9 +17,14 @@ module PhlexKit
       template(data: { phlex_kit__command_dialog_target: "content" }) do
         # The keydown action is the focus trap: Tab cycles within the cloned
         # overlay instead of escaping to the page underneath.
+        # data-pk-overlay-clone is the common marker stamped by every
+        # clone-based overlay family (see alert_dialog_controller.js#topmost):
+        # it lets stacked overlays of DIFFERENT types resolve which one is
+        # topmost, so one Escape never closes both layers at once.
         div(data: {
           controller: "phlex-kit--command",
           phlex_kit__command_dialog_instance: true,
+          pk_overlay_clone: "",
           action: "keydown->phlex-kit--command#trapFocus"
         }) do
           backdrop

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

@@ -11,10 +11,11 @@ module PhlexKit
     # `autofocus:` defaults off so an inline palette doesn't steal page focus
     # on load; the dialog clone needs no autofocus either — the command
     # controller's connect() focuses the input when the clone is inserted.
-    def initialize(placeholder: "Type a command or search...", list_id: nil, autofocus: false, **attrs)
+    def initialize(placeholder: "Type a command or search...", list_id: nil, autofocus: false, value: "", **attrs)
       @placeholder = placeholder
       @list_id = list_id
       @autofocus = autofocus
+      @value = value
       @attrs = attrs
     end
@@ -31,7 +32,7 @@ module PhlexKit
             spellcheck: "false",
             autofocus: @autofocus,
             role: "combobox",
-            value: "",
+            value: @value,
             aria: { autocomplete: "list", expanded: "true", controls: @list_id },
             data: {
               phlex_kit__command_target: "input",

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

@@ -72,6 +72,9 @@
    the viewport right edge. */
 .pk-context-menu-sub { anchor-name: --pk-context-menu-sub; anchor-scope: --pk-context-menu-sub; }
 .pk-context-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
+/* Mirror the chevron in RTL (submenu opens visually LEFT). Ancestor
+   [dir="rtl"] (not :dir()) so Chrome re-styles it on a dynamic dir flip too. */
+[dir="rtl"] .pk-context-menu-sub-chevron { transform: scaleX(-1); }
 .pk-context-menu-sub-content {
   position: fixed;
   position-anchor: --pk-context-menu-sub;

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

@@ -5,7 +5,15 @@ module PhlexKit
   class ContextMenu < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu", data: { controller: "phlex-kit--context-menu" } }, @attrs), &)
+      div(**mix({
+        class: "pk-context-menu",
+        data: {
+          controller: "phlex-kit--context-menu",
+          # focusout: tabbing (or otherwise moving real focus) out of the
+          # menu closes the open [popover=manual] panel (menubar's pattern).
+          action: "focusout->phlex-kit--context-menu#onFocusout"
+        }
+      }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/context_menu/context_menu_controller.js CHANGED Viewed

@@ -8,6 +8,18 @@ import { Controller } from "@hotwired/stimulus"
 // native [popover=manual] in the top layer (context_menu.css); it is placed
 // in viewport coordinates after showPopover() — a hidden popover has no
 // size — and clamped so it never overflows the viewport (no floating-ui).
+// One-shot capture listener swallowing the click an outside mousedown is
+// about to produce (see onDocMousedown; same helper in dropdown/menubar —
+// duplicated per controller by design). {once} self-removes; the DOM
+// dedupes re-arming with the same fn. If the gesture's click never fires
+// (e.g. suppressed after a selection drag) the armed swallow eats the next
+// one — rare enough to accept.
+const swallowClick = (ev) => ev.preventDefault()
+function armSwallowClick() {
+  window.addEventListener("click", swallowClick, { once: true, capture: true })
+}
 export default class extends Controller {
   static targets = ["content", "trigger", "menuItem"]
@@ -22,6 +34,17 @@ export default class extends Controller {
       if (e.type === "contextmenu" && this.element.contains(e.target)) return
       this.close()
     }
+    // Kit-wide dismiss contract (Radix modal-menu parity): a plain click
+    // outside only dismisses — swallowed, like dropdown/menubar/select.
+    // Armed at MOUSEDOWN: the gesture's focusout close() removes onDoc
+    // before the click even fires. Right-button mousedowns are ignored so a
+    // contextmenu elsewhere stays click-through (that's how a second kit —
+    // or the native — context menu opens in the same gesture).
+    this.onDocMousedown = (e) => {
+      if (this.contentTarget.contains(e.target)) return
+      if (e.button !== 0) return
+      armSwallowClick()
+    }
     this.onKey = (e) => this.keydown(e)
     // Turbo snapshots BEFORE disconnect — close now or the snapshot keeps a
     // stale data-state="open" (the panel itself can't resurrect, but host
@@ -33,9 +56,21 @@ export default class extends Controller {
     // Outstanding syncSub rAF handles — cancelled on disconnect (menubar's
     // pattern).
     this.subFrames = new Set()
+    // A Turbo snapshot (or a detach/reattach that mimics one) serializes
+    // aria-expanded="true" on sub triggers even though no submenu can be
+    // open at connect time — sweep every stale marker back to false
+    // (menubar's pattern).
+    this.element.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"))
+    // Same shape for checkbox/radio rows: their `checked` DOM property
+    // survives a reconnect but a hand-edited/replayed aria-checked can drift
+    // from it — resync every row from its live input.
+    this.element.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach((i) => {
+      i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked)
+    })
   }
   disconnect() {
+    document.removeEventListener("mousedown", this.onDocMousedown)
     document.removeEventListener("click", this.onDoc)
     document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
@@ -56,6 +91,18 @@ export default class extends Controller {
     this.subFrames.add(id)
   }
+  // Tabbing (or otherwise moving real focus) out of the menu closes it —
+  // menubar's onFocusout pattern (menubar_controller.js). relatedTarget is
+  // null when the window itself blurs — leave the menu alone then. The
+  // trigger + content are both DOM children of this.element even though the
+  // content is a top-layer popover, so one containment check covers both.
+  onFocusout(e) {
+    if (!this.contentTarget.matches(":popover-open")) return
+    const to = e.relatedTarget
+    if (!to || this.element.contains(to)) return
+    this.close()
+  }
   open(e) {
     e.preventDefault()
     let x = e.clientX
@@ -72,6 +119,7 @@ export default class extends Controller {
     c.style.left = `${x}px`
     c.style.top = `${y}px`
     c.dataset.state = "open"
+    document.addEventListener("mousedown", this.onDocMousedown)
     document.addEventListener("click", this.onDoc)
     document.addEventListener("contextmenu", this.onDoc)
     document.addEventListener("keydown", this.onKey)
@@ -86,6 +134,7 @@ export default class extends Controller {
     if (opts?.target?.closest?.('a[href="#"]')) opts.preventDefault()
     if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover()
     this.contentTarget.dataset.state = "closed"
+    document.removeEventListener("mousedown", this.onDocMousedown)
     document.removeEventListener("click", this.onDoc)
     document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
@@ -93,6 +142,13 @@ export default class extends Controller {
   }
   keydown(e) {
+    // This listener stays attached document-wide while the menu is open (see
+    // open()/close()) so it keeps receiving events even once real focus has
+    // left the menu — scope the roving-nav keys to when focus is actually
+    // within the widget (this.element, not just contentTarget, so a focused
+    // trigger still counts). Escape stays global while the menu is open (APG).
+    if (e.key !== "Escape" && !this.element.contains(document.activeElement)) return
     const items = this.items()
     const index = items.indexOf(document.activeElement)
     switch (e.key) {
@@ -126,19 +182,26 @@ export default class extends Controller {
         }
         break
       case "ArrowRight":
-        // On a sub trigger, enter the submenu (focus reveals it via
-        // :focus-within, making its rows visible to the roving nav).
-        if (document.activeElement?.matches(".pk-context-menu-sub-trigger")) {
-          e.preventDefault()
-          this.enterSub(document.activeElement)
-        }
-        break
       case "ArrowLeft": {
-        // Inside a submenu, step back to its trigger (closes it on focus-out).
-        const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
-        if (sub) {
-          e.preventDefault()
-          sub.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-trigger")?.focus()
+        // Submenus open inline-end — visually LEFT in RTL — so the enter key
+        // follows visual direction: ArrowLeft enters / ArrowRight exits in RTL
+        // (and the reverse in LTR). Runtime dir check is reliable after a flip.
+        const rtl = getComputedStyle(this.element).direction === "rtl"
+        const enterKey = rtl ? "ArrowLeft" : "ArrowRight"
+        if (e.key === enterKey) {
+          // On a sub trigger, enter the submenu (focus reveals it via
+          // :focus-within, making its rows visible to the roving nav).
+          if (document.activeElement?.matches(".pk-context-menu-sub-trigger")) {
+            e.preventDefault()
+            this.enterSub(document.activeElement)
+          }
+        } else {
+          // Inside a submenu, step back to its trigger (closes it on focus-out).
+          const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
+          if (sub) {
+            e.preventDefault()
+            sub.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-trigger")?.focus()
+          }
         }
         break
       }

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

@@ -92,7 +92,7 @@
 .pk-data-table-page-disabled {
   display: inline-flex;
   align-items: center;
-  height: 2.25rem;
+  height: 2rem;
   padding: 0 .75rem;
   font-size: .875rem;
   opacity: .5;

data/app/components/phlex_kit/data_table/data_table_controller.js CHANGED Viewed

@@ -66,7 +66,13 @@ export default class extends Controller {
     }
     if (this.hasSelectionSummaryTarget) {
-      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+      // The component stamps its (possibly localized) %{selected}/%{total}
+      // template as data-format; live updates interpolate the same string
+      // the server rendered.
+      const format = this.selectionSummaryTarget.dataset.format || "%{selected} of %{total} row(s) selected.";
+      this.selectionSummaryTarget.textContent = format
+        .replace("%{selected}", String(selected))
+        .replace("%{total}", String(total));
     }
     if (this.hasBulkActionsTarget) {

data/app/components/phlex_kit/data_table/data_table_pagination.rb CHANGED Viewed

@@ -70,7 +70,10 @@ module PhlexKit
     def edge_item(disabled:, href:, label:, name:)
       if disabled
         li do
-          span(class: "pk-data-table-page-disabled", aria: { disabled: "true", label: name }) { label }
+          # role-less span + aria-label is invalid ARIA (aria-label on a
+          # role-less element is not perceivable) — role + aria-disabled
+          # mirrors BreadcrumbPage's disabled-control pattern.
+          span(class: "pk-data-table-page-disabled", role: "link", aria: { disabled: "true", label: name }) { label }
         end
       else
         render PaginationItem.new(href: href, aria: { label: name }) { label }

data/app/components/phlex_kit/data_table/data_table_per_page_select.rb CHANGED Viewed

@@ -4,21 +4,26 @@ module PhlexKit
   # (search/sort/direction/...) survive via `preserved_params:` hidden inputs,
   # mirroring DataTableSearch. See data_table.rb.
   class DataTablePerPageSelect < BaseComponent
-    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, **attrs)
+    # method:/action: are kit-owned (a GET form targeting `path:`) — named
+    # kwargs so a caller override lands in @method/@action directly instead
+    # of fusing with the generated defaults via `mix` ("get post").
+    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, method: "get", action: nil, **attrs)
       @path = path
       @name = name
       @value = value
       @frame_id = frame_id
       @options = options
       @preserved_params = preserved_params
+      @method = method
+      @action = action || @path
       @attrs = attrs
     end
     def view_template
       form_attrs = {
         class: "pk-data-table-per-page",
-        action: @path,
-        method: "get",
+        action: @action,
+        method: @method,
         # Reuse the search controller for its CSP-safe #submitNow action.
         data: { controller: "phlex-kit--data-table-search" }
       }

data/app/components/phlex_kit/data_table/data_table_search.rb CHANGED Viewed

@@ -3,7 +3,10 @@ module PhlexKit
   # params survive via `preserved_params:` hidden inputs; focus/caret survive the
   # frame swap (see the search controller). See data_table.rb.
   class DataTableSearch < BaseComponent
-    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, **attrs)
+    # method:/action: are kit-owned (a GET form targeting `path:`) — named
+    # kwargs so a caller override lands in @method/@action directly instead
+    # of fusing with the generated defaults via `mix` ("get post").
+    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, method: "get", action: nil, **attrs)
       @path = path
       @name = name
       @value = value
@@ -11,11 +14,13 @@ module PhlexKit
       @placeholder = placeholder
       @debounce = debounce
       @preserved_params = preserved_params
+      @method = method
+      @action = action || @path
       @attrs = attrs
     end
     def view_template
-      form(**mix({ class: "pk-data-table-search", method: "get", action: @path, data: form_data }, @attrs)) do
+      form(**mix({ class: "pk-data-table-search", method: @method, action: @action, data: form_data }, @attrs)) do
         render Input.new(
           type: :search,
           name: @name,

data/app/components/phlex_kit/data_table/data_table_selection_summary.rb CHANGED Viewed

@@ -1,9 +1,15 @@
 module PhlexKit
   # "N of M row(s) selected." line, kept current by the controller.
+  # `format:` localizes it — a template with %{selected} and %{total}
+  # placeholders, used for the server render AND stamped on the element so
+  # the controller's live updates interpolate the same string.
   # See data_table.rb.
   class DataTableSelectionSummary < BaseComponent
-    def initialize(total_on_page: 0, **attrs)
+    DEFAULT_FORMAT = "%{selected} of %{total} row(s) selected."
+    def initialize(total_on_page: 0, format: DEFAULT_FORMAT, **attrs)
       @total_on_page = total_on_page
+      @format = format
       @attrs = attrs
     end
@@ -11,9 +17,12 @@ module PhlexKit
       div(**mix({
         class: "pk-data-table-selection-summary",
         role: "status", # live region — selection changes are announced to AT
-        data: { phlex_kit__data_table_target: "selectionSummary" }
+        data: {
+          phlex_kit__data_table_target: "selectionSummary",
+          format: @format
+        }
       }, @attrs)) do
-        plain "0 of #{@total_on_page} row(s) selected."
+        plain Kernel.format(@format, selected: 0, total: @total_on_page)
       end
     end
   end

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

@@ -5,7 +5,12 @@ module PhlexKit
   # controller and the calendar's outlet points at its id, so picking a day
   # writes the formatted date into the field. Upstream's popover_options
   # (hover trigger via @floating-ui) are gone — the kit popover is click-only,
-  # CSS-positioned. Tailwind → vanilla `.pk-date-picker*` (date_picker.css).
+  # CSS-positioned. The phlex-kit--date-picker controller on the root div
+  # listens for the calendar's change event and closes the popover once a
+  # selection is COMPLETE (single: any pick; range: the second end only;
+  # multiple: never), returning focus to the input — see
+  # date_picker_controller.js and popover_controller.js#close.
+  # Tailwind → vanilla `.pk-date-picker*` (date_picker.css).
   class DatePicker < BaseComponent
     def initialize(
       id: nil,
@@ -45,7 +50,13 @@ module PhlexKit
     end
     def view_template
-      div(**mix({ class: "pk-date-picker" }, @attrs)) do
+      div(**mix({
+        class: "pk-date-picker",
+        data: {
+          controller: "phlex-kit--date-picker",
+          action: "phlex-kit--calendar:change->phlex-kit--date-picker#onCalendarChange"
+        }
+      }, @attrs)) do
         render Popover.new do
           render PopoverTrigger.new(**trigger_attrs) do
             div(class: "pk-date-picker-field") do

data/app/components/phlex_kit/date_picker/date_picker_controller.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+// Bridges the nested Calendar's change event to the wrapping Popover's
+// close(), so picking a date collapses the panel instead of leaving the
+// user to click outside/Escape after every pick (shadcn's DatePicker
+// behavior). Only closes on a COMPLETE selection: single mode closes on
+// any pick, range mode only once the second end (rangeEnd) is set — closing
+// on the first end would strand the user before they can pick the second —
+// and multiple mode never auto-closes since picking more than one date is
+// the entire point. See date_picker.rb for the data-action wiring and
+// popover_controller.js for close()/focusTrigger().
+export default class extends Controller {
+  onCalendarChange(e) {
+    const { mode, rangeEnd } = e.detail
+    if (mode === "multiple") return
+    // calendar_controller.js clears rangeEnd by assigning undefined (Stimulus
+    // removes the attribute), so an unset rangeEnd reads back as null here.
+    if (mode === "range" && !rangeEnd) return
+    this.popoverController()?.close()
+  }
+  popoverController() {
+    const popoverEl = this.element.querySelector(".pk-popover")
+    return popoverEl && this.application.getControllerForElementAndIdentifier(popoverEl, "phlex-kit--popover")
+  }
+}

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

@@ -37,6 +37,9 @@ export default class extends Controller {
   }
   open(e) {
     e?.preventDefault()
+    // open: is one-shot — the reflected value sits in the Turbo snapshot, so
+    // a cache-restored reconnect would re-open a dismissed dialog.
+    this.openValue = false
     this.dialogTarget.showModal()
     // Save/restore rather than removeProperty: a host page (or another
     // component) may have set body overflow itself.

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

@@ -12,7 +12,7 @@ module PhlexKit
     end
     def view_template(&)
-      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open } }, @attrs), &)
+      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open.to_s } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/drawer/drawer_content.rb CHANGED Viewed

@@ -12,9 +12,16 @@ module PhlexKit
     def view_template(&block)
       template(data: { phlex_kit__sheet_target: "content" }) do
-        div(data: { controller: "phlex-kit--sheet-content", action: "keydown->phlex-kit--sheet-content#keydown" }) do
-          div(class: "pk-drawer-overlay", data: { action: "click->phlex-kit--sheet-content#close" })
-          div(**mix({ class: "pk-drawer #{fetch_option(SIDES, @side, :side)}", role: "dialog", aria: { modal: "true" }, tabindex: "-1", data: { phlex_kit__sheet_content_target: "panel" } }, @attrs)) do
+        div(data: { controller: "phlex-kit--sheet-content", action: "keydown->phlex-kit--sheet-content#keydown", pk_overlay_clone: "" }) do
+          div(class: "pk-drawer-overlay", data: { action: "click->phlex-kit--sheet-content#close mousedown->phlex-kit--sheet-content#overlayMousedown" })
+          panel_attrs = { class: "pk-drawer #{fetch_option(SIDES, @side, :side)}", data: { phlex_kit__sheet_content_target: "panel" } }
+          # Defaults only when the caller didn't supply their own — `mix`
+          # would fuse role="dialog region" / aria-modal="true false" /
+          # tabindex="-1 0" instead of overriding.
+          panel_attrs[:role] = "dialog" unless attr_set?(:role)
+          panel_attrs[:aria] = { modal: "true" } unless aria_key_set?(:modal)
+          panel_attrs[:tabindex] = "-1" unless attr_set?(:tabindex)
+          div(**mix(panel_attrs, @attrs)) do
             div(class: "pk-drawer-handle", aria: { hidden: "true" })
             yield if block
           end

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

@@ -116,6 +116,10 @@
    the viewport right edge. */
 .pk-dropdown-menu-sub { anchor-name: --pk-dropdown-menu-sub; anchor-scope: --pk-dropdown-menu-sub; }
 .pk-dropdown-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
+/* The chevron points toward where the submenu opens (inline-end). In RTL that
+   is visually LEFT — mirror it. Ancestor [dir="rtl"] (not :dir()) so Chrome
+   re-styles it on a dynamic dir flip too. */
+[dir="rtl"] .pk-dropdown-menu-sub-chevron { transform: scaleX(-1); }
 .pk-dropdown-menu-sub-content {
   position: fixed;
   position-anchor: --pk-dropdown-menu-sub;

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

@@ -18,7 +18,11 @@ module PhlexKit
         data: {
           controller: "phlex-kit--dropdown-menu",
           phlex_kit__dropdown_menu_open_value: @open,
-          action: "click@window->phlex-kit--dropdown-menu#onClickOutside"
+          # focusout: tabbing (or otherwise moving real focus) out of the
+          # menu closes the open [popover=manual] panel (menubar's pattern).
+          # mousedown@window arms the modal-menu click swallow before the
+          # gesture's focusout closes the panel (see the controller).
+          action: "mousedown@window->phlex-kit--dropdown-menu#onMousedownOutside click@window->phlex-kit--dropdown-menu#onClickOutside focusout->phlex-kit--dropdown-menu#onFocusout"
         }
       }, @attrs), &block)
     end