phlex_kit 0.14.0 → 0.14.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60c4cbd0615b995e62c9dee3f19ae2c2f48ff53c5ec7f8294bf757edb7f68a25
-  data.tar.gz: b95a0dcc6976d561bb1e8d005eac32607e771386d236735b3e45e4316b0ef4c7
+  metadata.gz: cc498540064c2a8e95dbe9b86dad991b2decb5dbd36c58f8ea8c39dce04fd146
+  data.tar.gz: 4b04765fe0ef28d0562542546df1d841fe2a9bd0a6df3cde2c344a5f80902d98
 SHA512:
-  metadata.gz: e76f08c320a673fbcda5e136148933c12e26cbc9a9b97f8f253382bf9b9f11f26255de504cb27b67de2b1f0de8b6d40bb1f8e257b1da5c809259c5575c0489da
-  data.tar.gz: 130fb551c26417da890ec8da4dc1cc06187ae4dc6916129e3c8a862e3da14c3317e94d6c15ce0d8afa23e353aeacd7449e7d5aaa38ca43049a3a105932d68c30
+  metadata.gz: f94e22d2a6537aae8571df45dea339fe6f03c2ed64b084223ee9359240f4032c85c1ce2132b63321e9d334b99cd9e0619babe7ec390937446913759434ae2a6c
+  data.tar.gz: e8a31936f3a6bd52fa30b61f3faf36e0ac8845ad78fd5c10624a021f3c0c6e6e99124eab540e42e0a0fd0dbe99bb4e6e2e2845c978939f646755a92e0576e30e

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

@@ -164,7 +164,7 @@ export default class extends Controller {
     // 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 items = this.rovingItems()
     const index = items.indexOf(document.activeElement)
     switch (e.key) {
       case "Escape":
@@ -254,4 +254,18 @@ export default class extends Controller {
       (el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0
     )
   }
+
+  // The list ArrowUp/Down/Home/End rove — level-aware. A submenu reveals on
+  // :focus-within, so focusing a sub-trigger makes its rows visible and
+  // items() would pick them up; roving would then dive into the submenu on
+  // ArrowDown instead of moving to the next PARENT item (APG reserves
+  // ArrowRight/enterKey for entering). When focus is inside a sub panel, rove
+  // that panel's own rows; otherwise rove the top-level rows, excluding any
+  // sub-content the reveal exposed. Mirrored in menubar/dropdown (shared model).
+  rovingItems() {
+    const rows = this.items()
+    const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
+    if (sub) return rows.filter((el) => el.closest(".pk-context-menu-sub-content") === sub)
+    return rows.filter((el) => !el.closest(".pk-context-menu-sub-content"))
+  }
 }

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

@@ -164,7 +164,7 @@ export default class extends Controller {
     // while the menu is open (APG).
     if (e.key !== "Escape" && !this.element.contains(document.activeElement)) return;
 
-    const items = this.#items();
+    const items = this.#rovingItems();
     if (items.length === 0) return;
     const index = items.indexOf(document.activeElement);
 
@@ -245,6 +245,20 @@ export default class extends Controller {
     );
   }
 
+  // The list ArrowUp/Down/Home/End rove — level-aware. A submenu reveals on
+  // :focus-within, so focusing a sub-trigger makes its rows visible and
+  // #items() would pick them up; roving would then dive into the submenu on
+  // ArrowDown instead of moving to the next PARENT item (APG reserves
+  // ArrowRight/enterKey for entering). When focus is inside a sub panel, rove
+  // that panel's own rows; otherwise rove the top-level rows, excluding any
+  // sub-content the reveal exposed. Mirrored in menubar/context (shared model).
+  #rovingItems() {
+    const rows = this.#items();
+    const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
+    if (sub) return rows.filter((el) => el.closest(".pk-dropdown-menu-sub-content") === sub);
+    return rows.filter((el) => !el.closest(".pk-dropdown-menu-sub-content"));
+  }
+
   #addEventListeners() {
     document.addEventListener("keydown", this.boundHandleKeydown);
   }

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

@@ -210,7 +210,7 @@ export default class extends Controller {
       }
       return
     }
-    const items = this.items(this.openMenu)
+    const items = this.rovingItems()
     const index = items.indexOf(document.activeElement)
     switch (e.key) {
       case "Escape":
@@ -333,6 +333,22 @@ export default class extends Controller {
     return menu.querySelector("[role=\"menu\"], .pk-menubar-content, .pk-navigation-menu-content")
   }
 
+  // The list ArrowUp/Down/Home/End rove — level-aware. A submenu reveals on
+  // :focus-within, so focusing a sub-trigger makes its rows visible and
+  // items() would pick them up; roving would then dive into the submenu on
+  // ArrowDown instead of moving to the next PARENT item (APG reserves
+  // ArrowRight/enterKey for entering). When focus is inside a sub panel, rove
+  // that panel's own rows; otherwise rove the top-level rows, excluding any
+  // sub-content the reveal exposed. Mirrored in dropdown/context (shared model).
+  rovingItems() {
+    const menu = this.openMenu
+    if (!menu) return []
+    const rows = this.items(menu)
+    const sub = document.activeElement?.closest(".pk-menubar-sub-content")
+    if (sub) return rows.filter((el) => el.closest(".pk-menubar-sub-content") === sub)
+    return rows.filter((el) => !el.closest(".pk-menubar-sub-content"))
+  }
+
   items(menu) {
     const panel = this.panel(menu)
     if (!panel) return []

data/app/components/phlex_kit/popover/popover_content.rb

@@ -13,7 +13,14 @@ module PhlexKit
 
     def view_template(&)
       classes = [ "pk-popover-content", fetch_option(ALIGNS, @align, :align) ].compact.join(" ")
-      div(**mix({ class: classes, popover: "auto", data: { phlex_kit__popover_target: "content", state: "closed" } }, @attrs), &)
+      # `popover:` is a named default, not a merged attr: `mix` joins duplicate
+      # attrs (a caller's `popover: "manual"` would fuse into "auto manual",
+      # which the browser normalizes to manual — killing the native light
+      # dismiss/Escape this controller relies on). Skip the default when the
+      # caller sets it (mirrors MenubarContent).
+      base = { class: classes, data: { phlex_kit__popover_target: "content", state: "closed" } }
+      base[:popover] = "auto" unless attr_set?(:popover)
+      div(**mix(base, @attrs), &)
     end
   end
 end

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

@@ -16,6 +16,10 @@ export default class extends Controller {
     const invoker = this.triggerTarget.querySelector("button")
     if (invoker) {
       invoker.popoverTargetElement = this.contentTarget
+      // popoverTargetElement gives native aria-expanded but not haspopup —
+      // shadcn/Radix Popover.Trigger ships aria-haspopup="dialog", so add it
+      // (leave a caller-set value alone) to match the button-less path below.
+      if (!invoker.hasAttribute("aria-haspopup")) invoker.setAttribute("aria-haspopup", "dialog")
     } else {
       // Button-less fallback: keyboard toggling and popup semantics don't
       // come for free like they do with popoverTargetElement — wire Enter

data/app/components/phlex_kit/radio_button/radio_button.css

@@ -38,6 +38,22 @@
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
 }
 .pk-radio[aria-invalid="true"]:checked { border-color: var(--pk-brand); }
+/* Invalid + keyboard focus: the always-on invalid ring above would otherwise
+   swallow the equal-specificity :focus-visible rule, leaving no visible focus
+   change (and the theme-scoped invalid arms below beat it outright in light).
+   Keep the red border (invalid stays legible) but switch the ring to the
+   standard focus color — mirrors checkbox.css. */
+.pk-radio[aria-invalid="true"]:focus-visible,
+:root[data-theme="light"] .pk-radio[aria-invalid="true"]:focus-visible {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-radio[aria-invalid="true"]:focus-visible {
+    border-color: var(--pk-red);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+  }
+}
 .pk-radio:disabled { cursor: not-allowed; opacity: .5; }
 :root[data-theme="light"] .pk-radio:not(:checked) { background: transparent; }
 :root[data-theme="light"] .pk-radio[aria-invalid="true"] {

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

@@ -39,7 +39,7 @@ module PhlexKit
           # keydown.esc rides on the root (not only the items) so Escape closes
           # the [popover=manual] panel with focus on the trigger too; handleEsc
           # no-ops while closed.
-          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc focusout->phlex-kit--select#onFocusout"
+          action: "mousedown@window->phlex-kit--select#onMousedownOutside click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc focusout->phlex-kit--select#onFocusout"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/select/select_controller.js

@@ -1,5 +1,20 @@
 import { Controller } from "@hotwired/stimulus";
 
+// One-shot capture listener swallowing the click an outside mousedown is about
+// to produce (see onMousedownOutside; same helper in dropdown/context/menubar
+// — duplicated per controller by design). Select is a MODAL menu: the
+// dismissing outside click ONLY dismisses, never also acts on what sits under
+// the pointer. Armed at MOUSEDOWN because for a focusable click target the same
+// gesture's focusout closes the panel before the click fires (a click-time
+// check would already see it closed and skip the swallow — audit round 8).
+const swallowClick = (ev) => {
+  ev.preventDefault();
+  ev.stopPropagation();
+};
+function armSwallowClick() {
+  window.addEventListener("click", swallowClick, { once: true, capture: true });
+}
+
 // Ported from ruby_ui's phlex-kit--select controller, minus the
 // @floating-ui/dom dependency: the panel is a native [popover=manual] in the
 // top layer, anchor-positioned with viewport-edge flipping by select.css
@@ -53,6 +68,12 @@ export default class extends Controller {
     const newValue = item.dataset.value;
 
     this.inputTarget.value = newValue;
+    // Also set the value ATTRIBUTE, not just the .value property: a Turbo
+    // snapshot restore clones the DOM (dropping the dirty property) and would
+    // otherwise revert the hidden input to its server value while the label
+    // and aria-selected still show the chosen item — submitting the wrong
+    // value behind a correct-looking UI. (re-derive-from-live-truth rule.)
+    this.inputTarget.setAttribute("value", newValue);
     this.valueTarget.innerText = item.innerText;
 
     this.dispatchOnChange(oldValue, newValue);
@@ -162,6 +183,17 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
   }
 
+  // Modal dismiss: arm the swallow at mousedown so the outside click that
+  // dismisses an open select doesn't ALSO activate a focusable control under
+  // the pointer (the same gesture's focusout closes the panel before the
+  // click, so clickOutside below would already see it closed). Mirrors
+  // dropdown/context/menubar.
+  onMousedownOutside(event) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    if (this.element.contains(event.target)) return;
+    armSwallowClick();
+  }
+
   clickOutside(event) {
     if (!this.contentTarget.matches(":popover-open")) return;
     if (this.element.contains(event.target)) return;

data/app/components/phlex_kit/table/table_head.rb

@@ -6,7 +6,12 @@ module PhlexKit
     end
 
     def view_template(&block)
-      th(**mix({ class: "pk-table-head" }, @attrs), &block)
+      # scope="col" is the common case (header cells sit in a TableHeader row);
+      # a generated default, not a merged attr — `mix` would fuse a caller's
+      # `scope: "row"` into "col row" — so skip it when the caller sets scope.
+      base = { class: "pk-table-head" }
+      base[:scope] = "col" unless attr_set?(:scope)
+      th(**mix(base, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/toggle_group/toggle_group.rb

@@ -88,6 +88,7 @@ module PhlexKit
         data: { controller: "phlex-kit--toggle-group",
           phlex_kit__toggle_group_type_value: @type.to_s,
           phlex_kit__toggle_group_name_value: @name.to_s,
+          phlex_kit__toggle_group_disabled_value: @disabled.to_s,
           orientation: @orientation.to_s, spacing: @spacing.to_s } }
       # spacing: N gaps the items by N × .25rem (Tailwind-style scale) via the
       # custom property toggle_group.css reads. Trailing ";" so a caller

data/app/components/phlex_kit/toggle_group/toggle_group_controller.js

@@ -3,7 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--toggle-group"
 export default class extends Controller {
   static targets = ["item", "input"]
-  static values = { type: String, name: String }
+  static values = { type: String, name: String, disabled: Boolean }
 
   connect() { this.reconcile() }
 
@@ -100,6 +100,11 @@ export default class extends Controller {
     input.type = "hidden"
     input.name = name
     input.value = value
+    // A disabled group's hidden input is server-rendered `disabled` so it
+    // won't submit (toggle_group.rb). rebuildInputs() removes that server
+    // input and recreates it here on connect() — carry the disabled flag or
+    // the group would start submitting its value post-hydration.
+    if (this.disabledValue) input.disabled = true
     input.setAttribute("data-phlex-kit--toggle-group-target", "input")
     return input
   }

data/lib/phlex_kit/version.rb

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

metadata

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