phlex_kit 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60c4cbd0615b995e62c9dee3f19ae2c2f48ff53c5ec7f8294bf757edb7f68a25
-  data.tar.gz: b95a0dcc6976d561bb1e8d005eac32607e771386d236735b3e45e4316b0ef4c7
+  metadata.gz: 7e817130c54d3e6a8c547328c09b8e632e13adda0cafa7ed0f415359fd1c0ed9
+  data.tar.gz: bcb04540a46d3442ac21b8d54d10b1f903bbcf33af2ec65344e7ad6879ab8462
 SHA512:
-  metadata.gz: e76f08c320a673fbcda5e136148933c12e26cbc9a9b97f8f253382bf9b9f11f26255de504cb27b67de2b1f0de8b6d40bb1f8e257b1da5c809259c5575c0489da
-  data.tar.gz: 130fb551c26417da890ec8da4dc1cc06187ae4dc6916129e3c8a862e3da14c3317e94d6c15ce0d8afa23e353aeacd7449e7d5aaa38ca43049a3a105932d68c30
+  metadata.gz: ad56db4fec9925c964ed13084658ddf29942d79d17d4cd141bdb3efa0bef5d3e0be0c6c9ff8f53b28da163dfb0f080c1a79c8330b806f01823e0e092b479a5f5
+  data.tar.gz: 3e90c49dc0cb097b2aee66a28d7537c7c834df03015338832e6f00c9cbe40c93374d7a1d034a3c9765b848dc12407afc44681d2b6ef4aa62176295fecb1f3ad2

data/app/components/phlex_kit/calendar/calendar.rb

@@ -16,7 +16,11 @@ module PhlexKit
   # the year list). Pass `input_id:` a CSS selector (e.g. "#due-date") to
   # push the picked date (or "start – end" range) into a
   # phlex-kit--calendar-input outlet — that's how PhlexKit::DatePicker binds
-  # an Input. Sizing rides --pk-cell-size/--pk-cell-radius (calendar.css).
+  # an Input. `locale:` (a BCP 47 tag) drives every Intl call the controller
+  # makes — caption, weekday headers, month dropdown, day accessible names and
+  # the EEEE/MMMM format tokens; unset follows the browser. The server-rendered
+  # month/weekday words stay English as the pre-JS baseline. Note the `do`/PPPP
+  # ordinal suffixes (st/nd/rd/th) are an English rule and stay English. Sizing rides --pk-cell-size/--pk-cell-radius (calendar.css).
   class Calendar < BaseComponent
     MODES = { single: "single", range: "range", multiple: "multiple" }.freeze
     CAPTION_LAYOUTS = %i[label dropdown].freeze
@@ -25,7 +29,7 @@ module PhlexKit
     def initialize(mode: :single, selected_date: nil, selected_dates: [], range_start: nil, range_end: nil,
                    min_date: nil, max_date: nil, disabled_dates: [], week_numbers: false,
                    caption_layout: :label, from_year: nil, to_year: nil,
-                   input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+                   input_id: nil, date_format: "yyyy-MM-dd", locale: nil, **attrs)
       @mode = MODES.fetch(mode.to_sym)
       @selected_date = selected_date
       @selected_dates = Array(selected_dates).map(&:to_s)
@@ -41,6 +45,7 @@ module PhlexKit
       @to_year = to_year
       @input_id = input_id
       @date_format = date_format
+      @locale = locale
       @attrs = attrs
     end
 
@@ -112,6 +117,8 @@ module PhlexKit
       data[:phlex_kit__calendar_selected_dates_value] = JSON.generate(@selected_dates) if @selected_dates.any?
       data[:phlex_kit__calendar_disabled_dates_value] = JSON.generate(@disabled_dates) if @disabled_dates.any?
       data[:phlex_kit__calendar_week_numbers_value] = "true" if @week_numbers
+      # Unset = the runtime's own locale (the controller passes undefined to Intl).
+      data[:phlex_kit__calendar_locale_value] = @locale if @locale
       # Seed the view on the selection so the grid opens on the right month.
       view_seed = @selected_date || @range_start || @selected_dates.first
       data[:phlex_kit__calendar_view_date_value] = view_seed.to_s if view_seed

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

@@ -41,6 +41,10 @@ export default class extends Controller {
     // toISOString() is UTC (wrong day for non-UTC users near midnight).
     viewDate: { type: String, default: "" },
     format: { type: String, default: "yyyy-MM-dd" },
+    // BCP 47 tag for every Intl call below. Unset = "" = undefined to Intl,
+    // i.e. the runtime's own locale (the server markup is English only as the
+    // pre-JS baseline, so the grid localizes itself on first render).
+    locale: { type: String, default: "" },
   };
   static outlets = ["phlex-kit--calendar-input"];
 
@@ -274,6 +278,34 @@ export default class extends Controller {
   // `focusDay` overrides the day to refocus after re-render: on a keyboard
   // month cross the target day lives in the NEW grid, not the pre-render
   // activeElement, so onKeydown passes it explicitly.
+  // undefined (not "") is what Intl wants for "use the runtime default".
+  locale() {
+    return this.localeValue || undefined;
+  }
+
+  // The weekday <th>s are cloned verbatim from a server template and the month
+  // dropdown's <option>s are server-rendered — both English. Relabel them from
+  // Intl on every render so the whole chrome speaks one language.
+  localizeChrome() {
+    const heads = [...this.calendarTarget.querySelectorAll(".pk-calendar-weekday")].filter(
+      (th) => !th.classList.contains("pk-calendar-weeknumber-head"),
+    );
+    // The server row runs Monday..Sunday; 2024-01-01 was a Monday.
+    heads.forEach((th, index) => {
+      const day = new Date(2024, 0, 1 + index);
+      const name = day.toLocaleDateString(this.locale(), { weekday: "long" });
+      th.setAttribute("aria-label", name);
+      th.textContent = day.toLocaleDateString(this.locale(), { weekday: "short" }).slice(0, 2);
+    });
+
+    if (!this.hasMonthSelectTarget) return;
+    [...this.monthSelectTarget.options].forEach((option) => {
+      const month = Number(option.value);
+      if (!Number.isFinite(month)) return;
+      option.textContent = new Date(2024, month, 1).toLocaleDateString(this.locale(), { month: "long" });
+    });
+  }
+
   updateCalendar(focusDay = null) {
     if (this.hasTitleTarget) {
       this.titleTarget.textContent = this.monthAndYear();
@@ -288,6 +320,7 @@ export default class extends Controller {
         ? document.activeElement.dataset?.day
         : null);
     this.calendarTarget.innerHTML = this.calendarHTML();
+    this.localizeChrome();
     this.ensureGridTabStop(focusedDay);
   }
 
@@ -419,7 +452,7 @@ export default class extends Controller {
       dayDate: day.getDate(),
       // full human-readable date for the button's accessible name — a bare
       // day number ("14") is meaningless to a screen reader
-      dayLabel: day.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
+      dayLabel: day.toLocaleDateString(this.locale(), { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
       state: this.dayState(day),
     };
 
@@ -499,10 +532,10 @@ export default class extends Controller {
       .filter(Boolean);
   }
 
+  // One Intl call rather than `${month} ${year}` so locales that order the
+  // parts differently (ja-JP → "2026年1月") come out right, not just translated.
   monthAndYear() {
-    const month = this.viewDate().toLocaleString("en-US", { month: "long" });
-    const year = this.viewDate().getFullYear();
-    return `${month} ${year}`;
+    return this.viewDate().toLocaleDateString(this.locale(), { month: "long", year: "numeric" });
   }
 
   selectedDate() {
@@ -592,8 +625,8 @@ export default class extends Controller {
     const hours = date.getHours();
     const minutes = date.getMinutes();
     const seconds = date.getSeconds();
-    const dayOfWeek = date.toLocaleString("en-US", { weekday: "long" });
-    const monthName = date.toLocaleString("en-US", { month: "long" });
+    const dayOfWeek = date.toLocaleString(this.locale(), { weekday: "long" });
+    const monthName = date.toLocaleString(this.locale(), { month: "long" });
     const daySuffix = this.getDaySuffix(day);
 
     const map = {

data/app/components/phlex_kit/command/command.rb

@@ -7,7 +7,15 @@ module PhlexKit
   # Upstream's fuse.js fuzzy search is replaced with a dependency-free substring
   # match in the controller. Tailwind → vanilla `.pk-command*` (command.css).
   class Command < BaseComponent
-    def initialize(**attrs)
+    # Announcement templates for the live region — the only strings the
+    # controller writes itself (CommandEmpty is server-rendered, so it
+    # localizes with the rest of your markup). %{count} is interpolated.
+    DEFAULT_RESULTS_FORMAT = "%{count} result(s)"
+    DEFAULT_NO_RESULTS_TEXT = "No results"
+
+    def initialize(results_format: DEFAULT_RESULTS_FORMAT, no_results_text: DEFAULT_NO_RESULTS_TEXT, **attrs)
+      @results_format = results_format
+      @no_results_text = no_results_text
       @attrs = attrs
     end
 
@@ -21,12 +29,17 @@ module PhlexKit
     private
 
     # Screen-reader announcement of the filtered result count — the controller
-    # writes "N results" / "No results" into it from filter().
+    # writes the results_format / no_results_text strings into it from
+    # filter(), interpolating %{count}.
     def live_region
       div(
         class: "pk-sr-only",
         aria: { live: "polite" },
-        data: { phlex_kit__command_target: "liveRegion" }
+        data: {
+          phlex_kit__command_target: "liveRegion",
+          results_format: @results_format,
+          no_results_text: @no_results_text
+        }
       )
     end
   end

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

@@ -262,8 +262,13 @@ export default class extends Controller {
     if (count === null) {
       this.liveRegionTarget.textContent = "";
     } else {
+      // Templates come from the server (Command's results_format: /
+      // no_results_text: kwargs) — the defaults mirror command.rb's.
+      const data = this.liveRegionTarget.dataset;
       this.liveRegionTarget.textContent =
-        count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"}`;
+        count === 0
+          ? data.noResultsText || "No results"
+          : (data.resultsFormat || "%{count} result(s)").replace("%{count}", count);
     }
   }
 

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/date_picker/date_picker.rb

@@ -20,6 +20,7 @@ module PhlexKit
       placeholder: "Select a date",
       selected_date: value,
       date_format: "yyyy-MM-dd",
+      locale: nil,
       input_attrs: {},
       calendar_attrs: {},
       trigger_attrs: {},
@@ -31,6 +32,7 @@ module PhlexKit
       @label = label
       @selected_date = selected_date
       @date_format = date_format
+      @locale = locale
       # Seed the input with the same date_format the calendar controller
       # writes — a bare `selected_date.to_s` (ISO) would mismatch the format
       # until the first interaction.
@@ -65,7 +67,8 @@ module PhlexKit
             end
           end
           render PopoverContent.new(**@content_attrs) do
-            render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
+            render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format,
+              locale: @locale, **@calendar_attrs)
           end
         end
       end

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.15.0"
 end

metadata

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