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

phlex_kit 0.12.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 (31) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 832d7d74c2bcda4dcddef6ab391ee7afff8c15a3f011b57392dfb0e5d73b9922
-  data.tar.gz: 730dd9af5257a9350c551d9b5573d919cd04dd462a19f38d55558aa282d16822
+  metadata.gz: 4e3d6272f0ef818c51cc952c6a2021a1f2b6a036afdab70b617f05c64ada4144
+  data.tar.gz: aa43b4e8826c3dfe52d96440987195815e836de43a795f9628dfce1cbc3bcbd8
 SHA512:
-  metadata.gz: 545d9af3c5b4ef67ff2793618825b17fcfff6a42fd7a7e97ca2b294d447d71ded63858094dc32f938dcdabd9c39ac4c8696bdf68da4b74cf1692bf62770d8081
-  data.tar.gz: 2a98a887feff3cf7a2144baeb9f380738880f2c100e6ed3ecc3ab2a4a1d94038efe06531b725eede6e1e419c4f9a282b109b6cb2db49328f32962819a17417c3
+  metadata.gz: b655fda7c0a0b013e006b2586b5b2eec5714106a7877f4b012ed6567af45fedd0320cb8cec8360fc05288924af71e809ce56ce911d2dbb72d7fceb52adf938c2
+  data.tar.gz: 90070ed31d24e9f46f311345a19eaa2ef79b760a9de08cb28c174ee6126e68aa6cd4122fbe8f915d61aaf800801d1dd781b81e86fc7e4aa90595e54be8631435

data/app/components/phlex_kit/alert_dialog/alert_dialog_content.rb CHANGED Viewed

@@ -30,9 +30,9 @@ module PhlexKit
           # Defaults only when the caller didn't supply their own — `mix`
           # would fuse role="alertdialog dialog" / aria-modal="true false" /
           # tabindex="-1 0" instead of overriding.
-          panel_attrs[:role] = "alertdialog" unless @attrs.key?(:role) || @attrs.key?("role")
+          panel_attrs[:role] = "alertdialog" unless attr_set?(:role)
           panel_attrs[:"aria-modal"] = "true" unless aria_key_set?(:modal)
-          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          panel_attrs[:tabindex] = "-1" unless attr_set?(:tabindex)
           div(**mix(panel_attrs, @attrs), &block)
         end
       end

data/app/components/phlex_kit/calendar/calendar_controller.js CHANGED Viewed

@@ -144,9 +144,11 @@ export default class extends Controller {
     const end = this.parseDate(this.rangeEndValue);
     if (!start || (start && end)) {
-      // begin a fresh range
+      // begin a fresh range. undefined (not null) clears the value: Stimulus
+      // removes the attribute for undefined, while null goes through
+      // setAttribute and serializes as the literal string "null".
       this.rangeStartValue = this.isoDate(candidate);
-      this.rangeEndValue = null;
+      this.rangeEndValue = undefined;
     } else if (candidate < start) {
       this.rangeStartValue = this.isoDate(candidate);
     } else {
@@ -182,9 +184,10 @@ export default class extends Controller {
       return;
     }
-    // update the viewDateValue to the selected date's month (this re-renders)
+    // update the viewDateValue to the selected date's month
     const newViewDate = new Date(selectedDate);
     newViewDate.setDate(2); // avoid month-length/timezone edges
+    this._viewRendered = true;
     this.viewDateValue = this.isoDate(newViewDate);
     this.updateCalendar();
@@ -197,6 +200,13 @@ export default class extends Controller {
   }
   viewDateValueChanged(value, prevValue) {
+    // Month-cross paths render synchronously right after writing
+    // viewDateValue (focus must land in the NEW grid); this async echo
+    // (MutationObserver) would render the same view a second time.
+    if (this._viewRendered) {
+      this._viewRendered = false;
+      return;
+    }
     this.updateCalendar();
   }
@@ -334,6 +344,7 @@ export default class extends Controller {
       // below would hit the OLD month, and the target day (outside it) would be
       // missing → early return, stranding focus on <body>. Drive the re-render
       // ourselves and hand it the target day so ensureGridTabStop focuses it.
+      this._viewRendered = true;
       this.viewDateValue = iso;
       this.updateCalendar(iso);
       return;

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

@@ -31,7 +31,7 @@ module PhlexKit
       # Canvas content is invisible to AT — announce it as an image with at
       # least a generic name; pass aria: { label: "…" } (or block fallback
       # content) to describe the actual data.
-      base[:role] = "img" unless @attrs.key?(:role) || @attrs.key?("role")
+      base[:role] = "img" unless attr_set?(:role)
       base[:aria] = { label: "Chart" } unless aria_labelled?
       canvas(**mix(base, @attrs), &)
     end

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

@@ -8,11 +8,25 @@ module PhlexKit
   # `name:`/`value:`/`checked:`/`**on(...)` pass through via `mix`. Styled by
   # `.pk-checkbox` (checkbox.css).
   class Checkbox < BaseComponent
-    def initialize(**attrs)
+    # include_hidden mirrors Rails' check_box (and PhlexKit::Switch): an
+    # unchecked box posts nothing, so a paired hidden field carries the
+    # unchecked value. Emitted only when a `name:` is present — and never for
+    # array-style names ("ids[]"), where an unchecked "0" would inject a
+    # bogus element into the collection param (use a single blank hidden for
+    # the whole collection instead, as Rails' collection helpers do).
+    def initialize(include_hidden: true, unchecked_value: "0", **attrs)
+      @include_hidden = include_hidden
+      @unchecked_value = unchecked_value
       @attrs = attrs
     end
     def view_template
+      if @include_hidden && @attrs[:name] && !@attrs[:name].to_s.end_with?("[]")
+        # Disabled in lockstep with the checkbox (Rails' check_box idiom) —
+        # a disabled checkbox must not still post its unchecked value.
+        input(type: "hidden", name: @attrs[:name], value: @unchecked_value,
+          disabled: @attrs[:disabled] ? true : nil)
+      end
       input(**mix({
         type: :checkbox,
         class: "pk-checkbox",

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

@@ -15,8 +15,8 @@ module PhlexKit
       # Defaults only when the caller didn't supply their own — `mix` would
       # fuse tabindex="0 -1" / role="region article" instead of overriding.
       base = { class: "pk-codeblock", data: { syntax: @syntax } }
-      base[:tabindex] = "0" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
-      base[:role] = "region" unless @attrs.key?(:role) || @attrs.key?("role")
+      base[:tabindex] = "0" unless attr_set?(:tabindex)
+      base[:role] = "region" unless attr_set?(:role)
       # A region landmark without a name is an axe violation — default one
       # from the syntax; a caller aria: { label: } replaces it (never fused).
       unless aria_labelled?

data/app/components/phlex_kit/combobox/combobox_controller.js CHANGED Viewed

@@ -354,6 +354,10 @@ export default class extends Controller {
     if (!this.isOpen()) return
     if (this.element.contains(event.target)) return
+    // Kit-wide dismiss contract: the combobox is POPOVER-family (shadcn
+    // builds it on Popover light-dismiss), so the dismissing outside click
+    // deliberately clicks through — no preventDefault. Only the MENU
+    // overlays (dropdown/context/menubar/select) swallow theirs.
     this.closePopover()
   }

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

@@ -49,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;
   }
@@ -83,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() {
@@ -103,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(),
@@ -119,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
@@ -210,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);
@@ -248,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/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
@@ -47,6 +70,7 @@ export default class extends Controller {
   }
   disconnect() {
+    document.removeEventListener("mousedown", this.onDocMousedown)
     document.removeEventListener("click", this.onDoc)
     document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
@@ -95,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)
@@ -109,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)

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_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_controller.js CHANGED Viewed

@@ -13,11 +13,9 @@ export default class extends Controller {
   onCalendarChange(e) {
     const { mode, rangeEnd } = e.detail
     if (mode === "multiple") return
-    // calendar_controller.js clears rangeEnd via `this.rangeEndValue = null`,
-    // which goes through Element#setAttribute — the DOM stringifies a null
-    // argument to the literal "null", so a genuinely-unset rangeEnd reads
-    // back as that string, not JS null/undefined/"".
-    if (mode === "range" && (!rangeEnd || rangeEnd === "null")) 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()
   }

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

@@ -18,9 +18,9 @@ module PhlexKit
           # 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 @attrs.key?(:role) || @attrs.key?("role")
+          panel_attrs[:role] = "dialog" unless attr_set?(:role)
           panel_attrs[:aria] = { modal: "true" } unless aria_key_set?(:modal)
-          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          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

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

@@ -20,7 +20,9 @@ module PhlexKit
           phlex_kit__dropdown_menu_open_value: @open,
           # focusout: tabbing (or otherwise moving real focus) out of the
           # menu closes the open [popover=manual] panel (menubar's pattern).
-          action: "click@window->phlex-kit--dropdown-menu#onClickOutside focusout->phlex-kit--dropdown-menu#onFocusout"
+          # 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

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_controller.js CHANGED Viewed

@@ -10,6 +10,18 @@ import { Controller } from "@hotwired/stimulus";
 // sub-rows are skipped via a visibility filter. Escape returns focus to the
 // trigger; Enter/Space activate the focused row (links, checkbox/radio
 // labels, and sub triggers alike).
+// One-shot capture listener swallowing the click an outside mousedown is
+// about to produce (see onMousedownOutside; same helper in menubar/context
+// menu — 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 = ["trigger", "content", "menuItem"];
   static values = { open: { type: Boolean, default: false } };
@@ -69,16 +81,23 @@ export default class extends Controller {
     this.subFrames.add(id);
   }
+  // Deliberate (matches Radix's modal dismiss): the dismissing outside
+  // click ONLY dismisses the menu — swallowed rather than also acting on
+  // whatever was under the pointer (e.g. navigating a link). Armed at
+  // MOUSEDOWN: for a focusable click target the same gesture's focusout
+  // closes the panel before the click fires, so a click-time swallow
+  // silently skipped those targets (audit round 8).
+  onMousedownOutside(event) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    if (this.element.contains(event.target)) return;
+    armSwallowClick();
+  }
   onClickOutside(event) {
     // Gate on the live :popover-open state, not the stored flag — a stale
     // flag is how a close on an already-closed panel becomes an open.
     if (!this.contentTarget.matches(":popover-open")) return;
     if (this.element.contains(event.target)) return;
-    // Deliberate (matches Radix's modal dismiss): the outside click ONLY
-    // dismisses the menu — it is swallowed rather than also acting on
-    // whatever was under the pointer (e.g. navigating a link).
-    event.preventDefault();
     this.close();
   }

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

@@ -24,7 +24,7 @@ module PhlexKit
       # `mix` merges duplicate string attrs ("16 24") — drop a generated attr
       # whenever the caller supplies their own copy, so theirs wins.
       %i[width height viewbox aria-hidden].each do |key|
-        base.delete(key) if @attrs.key?(key) || @attrs.key?(key.to_s)
+        base.delete(key) if attr_set?(key)
       end
       svg(**mix(base, @attrs)) do |s|
         icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }

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

@@ -36,11 +36,20 @@ module PhlexKit
     end
     def view_template(&block)
-      a(**mix({ href: @href, class: classes }, @attrs), &block)
+      base = { href: @href, class: classes }
+      # target="_blank" hands the new page a window.opener reference in older
+      # browsers (modern ones imply noopener) — default the safe rel unless
+      # the caller supplied their own (`mix` would fuse "noopener external").
+      base[:rel] = "noopener" if blank_target? && !attr_set?(:rel)
+      a(**mix(base, @attrs), &block)
     end
     private
+    def blank_target?
+      (@attrs[:target] || @attrs["target"]).to_s == "_blank"
+    end
     def classes
       [ "pk-button", fetch_option(VARIANTS, @variant, :variant), fetch_option(SIZES, @size, :size), ("icon" if @icon) ].compact.join(" ")
     end

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

@@ -18,7 +18,9 @@ module PhlexKit
           controller: "phlex-kit--menubar",
           # 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"
+          # mousedown@window arms the modal-menu click swallow (deliberately
+          # NOT bound by navigation_menu.rb — nav menus are non-modal).
+          action: "mousedown@window->phlex-kit--menubar#onMousedownOutside 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

@@ -13,6 +13,17 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--menubar"
 let uid = 0
+// One-shot capture listener swallowing the click an outside mousedown is
+// about to produce (see onMousedownOutside; same helper in dropdown/context
+// menu — 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 = ["menu"]
@@ -131,6 +142,21 @@ export default class extends Controller {
     if (opts.refocus === true) trigger?.focus()
   }
+  // Kit-wide dismiss contract (Radix parity): MENU overlays (dropdown,
+  // context, menubar, select) are modal — the dismissing outside click is
+  // swallowed rather than also acting on what was under the pointer. The
+  // decision happens at MOUSEDOWN: the same gesture's focusout closes the
+  // panel before the click event fires, so a click-time openMenu check
+  // would already be null (that race made the old swallow silently skip
+  // focusable click targets). Only menubar.rb binds this action — the
+  // navigation menu (hover-open mode) is non-modal like Radix's and its
+  // dismissing click clicks through.
+  onMousedownOutside(e) {
+    if (this.element.contains(e.target)) return
+    if (!this.openMenu) return
+    armSwallowClick()
+  }
   onClickOutside(e) {
     if (this.element.contains(e.target)) return
     this.close()

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

@@ -23,3 +23,22 @@
 .pk-progress:dir(rtl) .pk-progress-indicator {
   transform: translateX(calc((100 - var(--pk-progress-value, 0)) * 1%));
 }
+/* Indeterminate (value: nil): a 40%-wide segment sweeps the track.
+   translateX % is relative to the segment's own width: -100% parks it just
+   off the track's start edge, +250% (track = 250% of segment) just past the
+   end. Direction-agnostic — the sweep reads fine mirrored, no RTL arm. */
+.pk-progress.indeterminate .pk-progress-indicator {
+  width: 40%;
+  transition: none;
+  animation: pk-progress-indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes pk-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pk-progress.indeterminate .pk-progress-indicator {
+    animation-duration: 3s;
+  }
+}

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

@@ -6,29 +6,45 @@ module PhlexKit
   class Progress < BaseComponent
     # value_text: is a named kwarg (not read from **attrs) because `mix`
     # would *fuse* a caller "aria-valuetext" with the generated default.
+    # `value: nil` renders the INDETERMINATE state (Radix parity): a sliding
+    # animation, data-state="indeterminate", and no aria-valuenow — which is
+    # exactly how ARIA marks a progressbar of unknown value.
     def initialize(value: 0, value_text: nil, **attrs)
-      @value = value.to_f.clamp(0.0, 100.0)
+      @value = value.nil? ? nil : 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({
+      div(**mix(root_attrs, @attrs)) do
+        div(class: "pk-progress-indicator")
+      end
+    end
+    private
+    def root_attrs
+      base = {
         role: "progressbar",
-        "aria-valuenow": v,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-valuetext": @value_text || "#{v}%",
-        class: "pk-progress",
-        style: "--pk-progress-value: #{v};"
-      }, @attrs)) do
-        div(class: "pk-progress-indicator")
+        class: "pk-progress"
+      }
+      if @value.nil?
+        base[:class] = "pk-progress indeterminate"
+        base[:data] = { state: "indeterminate" }
+        base[:"aria-valuetext"] = @value_text if @value_text
+      else
+        # %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)
+        base[:"aria-valuenow"] = v
+        base[:"aria-valuetext"] = @value_text || "#{v}%"
+        base[:style] = "--pk-progress-value: #{v};"
       end
+      base
     end
   end
 end

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

@@ -15,7 +15,7 @@ module PhlexKit
       # 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[:tabindex] = "0" unless attr_set?(:tabindex)
       base[:role] = "region" if aria_labelled? && !@attrs.key?(:role) && !@attrs.key?("role")
       div(**mix(base, @attrs), &)
     end

data/app/components/phlex_kit/sheet/sheet_content.rb CHANGED Viewed

@@ -18,9 +18,9 @@ module PhlexKit
           # 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 @attrs.key?(:role) || @attrs.key?("role")
+          panel_attrs[:role] = "dialog" unless attr_set?(:role)
           panel_attrs[:aria] = { modal: "true" } unless aria_key_set?(:modal)
-          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          panel_attrs[:tabindex] = "-1" unless attr_set?(:tabindex)
           div(**mix(panel_attrs, @attrs)) do
             block&.call
             if @show_close_button

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

@@ -9,7 +9,7 @@ module PhlexKit
       # value: is silently clobbered below (the checkbox's real value comes
       # from checked_value:) — fail loud rather than let a caller's value:
       # vanish (mirrors ToggleGroupItem's unsupported-kwargs guard).
-      if attrs.key?(:value)
+      if attrs.key?(:value) || attrs.key?("value")
         raise ArgumentError, "Switch does not support value: — the checkbox's value comes from checked_value:, pass that instead"
       end
       @include_hidden = include_hidden

data/app/components/phlex_kit/toast/toast_controller.js CHANGED Viewed

@@ -208,7 +208,12 @@ export default class extends Controller {
       this.element.dataset.swipe = "cancel"
       this.element.style.removeProperty("--pk-toast-swipe-x")
       this.element.style.removeProperty("--pk-toast-swipe-y")
-      this._resume("hover")
+      // pointerleave is suppressed while a swipe is active, so release the
+      // hover hold here — but only if the pointer actually left the toast; a
+      // cancelled swipe ending under the cursor must stay hover-paused (the
+      // eventual pointerleave resumes it, including the touch case where
+      // pointerleave fires right after pointerup).
+      if (!this.element.matches(":hover")) this._resume("hover")
     }
   }
 }

data/app/components/phlex_kit/toast/toast_item.rb CHANGED Viewed

@@ -60,10 +60,10 @@ module PhlexKit
       # Defaults only when the caller didn't supply their own — `mix` would
       # fuse role="status log" / tabindex="0 -1" / aria-atomic="true false"
       # instead of overriding.
-      unless @attrs.key?(:role) || @attrs.key?("role")
+      unless attr_set?(:role)
         attrs[:role] = ALERT_VARIANTS.include?(@variant) ? "alert" : "status"
       end
-      attrs[:tabindex] = "0" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+      attrs[:tabindex] = "0" unless attr_set?(:tabindex)
       unless aria_key_set?(:atomic)
         attrs[:aria] = { atomic: "true" }
       end

data/app/components/phlex_kit/toast/toaster_controller.js CHANGED Viewed

@@ -63,12 +63,26 @@ export default class extends Controller {
     // _setExpanded's state change left auto-dismiss running under the cursor.
     this._onPointerEnter = () => { this._setPaused(true); this._setExpanded(true) }
     this._onPointerLeave = () => { this._setPaused(false); if (!this.expandValue) this._setExpanded(false) }
-    this._onWindowToast = (e) => this._spawn(e.detail || {})
+    this._onWindowToast = (e) => {
+      const detail = e.detail || {}
+      // Routing: toast(msg, { region: "<id>" }) targets the region whose
+      // wrapper or list carries that id. Without region only the page's
+      // FIRST region spawns — the event is a window broadcast, so every
+      // region hears it and an unguarded spawn would duplicate the toast
+      // once per region.
+      if (!this._handlesRegion(detail.region)) return
+      this._spawn(detail)
+    }
     this._onWindowDismissAll = () => this._dismissById(null)
+    // Dismiss-by-id is a broadcast too: _dismissById only acts on a toast in
+    // its OWN list, so whichever region owns the id handles it — the api
+    // registration (last region wins) no longer has to be the owner.
+    this._onWindowDismissId = (e) => this._dismissById(e.detail?.id)
     this._onKey = this._onKey.bind(this)
     window.addEventListener("phlex-kit:toast", this._onWindowToast)
     window.addEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
+    window.addEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
@@ -81,6 +95,7 @@ export default class extends Controller {
   disconnect() {
     window.removeEventListener("phlex-kit:toast", this._onWindowToast)
     window.removeEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
+    window.removeEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
@@ -165,6 +180,15 @@ export default class extends Controller {
     return node.id
   }
+  // True when this region should act on a toast event carrying `region`
+  // (the list's base id or the wrapper's "<id>-region" both match). Without
+  // an explicit region, only the page's first region in DOM order handles
+  // the broadcast — single-region pages are unaffected.
+  _handlesRegion(region) {
+    if (region) return region === this.element.id || region === this._listEl?.id
+    return this.element === document.querySelector("[data-controller~='phlex-kit--toaster']")
+  }
   _dismissById(id) {
     if (!id) {
       this.toastTargets.forEach((el) =>
@@ -311,12 +335,14 @@ export default class extends Controller {
     api.info = (m, o) => fire("info", m, o)
     api.loading = (m, o = {}) => fire("loading", m, { ...o, duration: o.duration ?? 0 })
     api.dismiss = (id) => {
-      if (id) this._dismissById(id)
+      // Both broadcasts: whichever region owns the id dismisses it — the
+      // api may be registered by a different region than the owner.
+      if (id) window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss", { detail: { id } }))
       else window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss-all"))
     }
     api.promise = (p, msgs = {}) => {
       const id = `toast-${this._uuid()}`
-      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0 })
+      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0, region: msgs.region })
       Promise.resolve(p).then(
         (val) => this._mutate(id, "success", typeof msgs.success === "function" ? msgs.success(val) : msgs.success),
         (err) => this._mutate(id, "error", typeof msgs.error === "function" ? msgs.error(err) : msgs.error)
@@ -330,9 +356,11 @@ export default class extends Controller {
   }
   _mutate(id, variant, text) {
-    if (!this._listEl) return
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
-    if (!el) return
+    // Document-scoped: promise()'s loading toast spawns in whichever region
+    // the broadcast routed it to, which need not be the region that
+    // registered the api this closure belongs to.
+    const el = document.getElementById(id)
+    if (!el || !el.closest(".pk-toast-list")) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")
     this._swapIcon(el, variant)

data/lib/phlex_kit/base_component.rb CHANGED Viewed

@@ -31,6 +31,15 @@ module PhlexKit
       end
     end
+    # True when the caller supplied their own value for a plain attribute in
+    # @attrs — symbol or string spelling. A component with a generated default
+    # for that attribute must skip it then: `mix` merges duplicate attrs
+    # (role="dialog region") instead of overriding. Aria attributes have their
+    # own check (aria_key_set?) covering the aria: hash spelling too.
+    def attr_set?(key)
+      @attrs.key?(key) || @attrs.key?(key.to_s)
+    end
     # True when the caller supplied an accessible name in @attrs — via the
     # aria: hash or flat aria_label/aria-label(ledby) keys. Components with a
     # generated default label must skip it then: `mix` merges duplicate string

data/lib/phlex_kit/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module PhlexKit
-  VERSION = "0.12.0"
+  VERSION = "0.13.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.13.0
 platform: ruby
 authors:
 - Matt Kennedy