phlex_kit 0.13.0 → 0.14.1

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

@@ -80,9 +80,17 @@ export default class extends Controller {
     this._onWindowDismissId = (e) => this._dismissById(e.detail?.id)
     this._onKey = this._onKey.bind(this)
 
+    // The region is data-turbo-permanent (in-flight toasts survive a Turbo
+    // Drive visit), but that means Turbo KEEPS this old region and DISCARDS
+    // the incoming page's — throwing away any server-rendered flash toasts it
+    // holds. Adopt them into this permanent list before the transplant so
+    // flash: works on Turbo Drive visits, not only full page loads.
+    this._onBeforeRender = (e) => this._adoptIncomingToasts(e)
+
     window.addEventListener("phlex-kit:toast", this._onWindowToast)
     window.addEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
     window.addEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
+    document.addEventListener("turbo:before-render", this._onBeforeRender)
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
@@ -96,6 +104,7 @@ export default class extends Controller {
     window.removeEventListener("phlex-kit:toast", this._onWindowToast)
     window.removeEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
     window.removeEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
+    document.removeEventListener("turbo:before-render", this._onBeforeRender)
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
@@ -170,7 +179,10 @@ export default class extends Controller {
       node.appendChild(btn)
     }
 
-    if (detail.closeButton && this.hasCloseTplTarget) {
+    // Don't append a second close button when the skeleton already baked one
+    // in (region rendered with close_button: true) — spawning with
+    // closeButton: true would otherwise stack two ×'s.
+    if (detail.closeButton && this.hasCloseTplTarget && !node.querySelector('[data-slot="close"]')) {
       const x = this._cloneSlot(this.closeTplTarget)
       node.classList.add("pk-toast-with-close")
       node.appendChild(x)
@@ -180,6 +192,22 @@ export default class extends Controller {
     return node.id
   }
 
+  // Move server-rendered flash toasts from the incoming (about-to-be-discarded)
+  // page's matching region into this permanent list, so a Turbo Drive visit
+  // doesn't silently drop them. Runs on turbo:before-render, before Turbo
+  // transplants this permanent element into the new body (children ride along).
+  _adoptIncomingToasts(e) {
+    const newBody = e.detail?.newBody
+    if (!newBody || !this._listEl?.id) return
+    const incomingList = newBody.querySelector(`#${CSS.escape(this._listEl.id)}`)
+    if (!incomingList) return
+    incomingList.querySelectorAll(":scope > [data-phlex-kit--toaster-target='toast']").forEach((el) => {
+      // Skip a flash id already showing here, so a re-render doesn't dupe it.
+      if (el.id && this._listEl.querySelector(`#${CSS.escape(el.id)}`)) return
+      this._listEl.appendChild(el.cloneNode(true))
+    })
+  }
+
   // 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

data/app/components/phlex_kit/toggle/toggle.rb

@@ -39,7 +39,7 @@ module PhlexKit
     end
 
     def button_default_attrs
-      a = { type: "button", class: classes, aria: { pressed: @pressed.to_s },
+      a = { type: :button, class: classes, aria: { pressed: @pressed.to_s },
             data: { state: @pressed ? "on" : "off", phlex_kit__toggle_target: "button" } }
       a[:disabled] = true if @disabled
       a

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

@@ -42,9 +42,16 @@ module PhlexKit
     # (`pressed || enabledItems()[0]`). Items call this once each, in render
     # order, as they're constructed — a single-threaded sequential claim, not
     # a lookahead over siblings not yet rendered.
-    def claim_tab_stop(item_disabled)
-      return false unless selected_values.empty?
+    def claim_tab_stop(item_disabled, pressed: false)
+      # A pressed-but-disabled item can't take focus (reconcile() mirrors
+      # this with `pressed && !el.disabled`): unlock the fallback claim so a
+      # LATER enabled item takes the stop instead of the whole group
+      # rendering Tab-unreachable. (If every enabled item precedes the
+      # pressed-disabled one, the pre-JS render still has no stop — the
+      # sequential claim can't look ahead; reconcile() fixes it at connect.)
+      @selection_unfocusable = true if pressed && item_disabled
       return false if item_disabled
+      return false unless selected_values.empty? || @selection_unfocusable
       return false if @tab_stop_claimed
       @tab_stop_claimed = true
       true
@@ -61,10 +68,17 @@ module PhlexKit
 
     def render_hidden_inputs
       return unless @name
+      # Disabled in lockstep with the group — a disabled toggle group must
+      # not submit its value (matches toggle.rb and native form semantics).
+      disabled = @disabled ? true : nil
       if @type == :single
-        input(type: "hidden", name: @name, value: selected_values.first.to_s, data: { phlex_kit__toggle_group_target: "input" })
+        input(type: "hidden", name: @name, value: selected_values.first.to_s, disabled: disabled,
+          data: { phlex_kit__toggle_group_target: "input" })
       else
-        selected_values.each { |v| input(type: "hidden", name: "#{@name}[]", value: v, data: { phlex_kit__toggle_group_target: "input" }) }
+        selected_values.each do |v|
+          input(type: "hidden", name: "#{@name}[]", value: v, disabled: disabled,
+            data: { phlex_kit__toggle_group_target: "input" })
+        end
       end
     end
 
@@ -74,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/app/components/phlex_kit/toggle_group/toggle_group_item.rb

@@ -17,7 +17,7 @@ module PhlexKit
       # group_context[:group] is nil for a hand-built context (bypassing
       # ToggleGroup#item_context) — treat that as "no tab-stop claim" rather
       # than raising, since standalone tests construct contexts by hand.
-      @is_first_tab_stop = group_context[:group]&.claim_tab_stop(item_disabled) || false
+      @is_first_tab_stop = group_context[:group]&.claim_tab_stop(item_disabled, pressed: pressed) || false
       super(pressed: pressed, name: nil, value: @item_value,
             variant: variant || group_context[:variant],
             size: size || group_context[:size],
@@ -31,7 +31,7 @@ module PhlexKit
     private
 
     def item_default_attrs
-      a = { type: "button",
+      a = { type: :button,
             class: ([ "pk-toggle" ] + self.class.modifier_classes(variant: @variant, size: @size) + [ "pk-toggle-group-item" ]).join(" "),
             data: { state: @pressed ? "on" : "off", value: @item_value,
               phlex_kit__toggle_group_target: "item",

data/app/components/phlex_kit/tooltip/tooltip_controller.js

@@ -20,6 +20,11 @@ export default class extends Controller {
       })
     }
 
+    // connect() re-derives reflected state from live truth: a Turbo snapshot
+    // serializes an Escape-dismissed suppression, and a cache restore must
+    // not resurrect it (the pointer/focus that justified it is gone).
+    delete this.element.dataset.pkDismissed
+
     this._onKeydown = (e) => {
       if (e.key !== "Escape") return
       if (this.element.matches(":hover, :focus-within")) this.element.dataset.pkDismissed = ""

data/app/components/phlex_kit/typography/typography.css

@@ -50,6 +50,9 @@
 /* Blockquote */
 .pk-blockquote { margin: 1.5rem 0; border-inline-start: 2px solid var(--pk-border); padding-inline-start: 1.5rem; font-style: italic; }
 
-/* Prose list (shadcn typography's list style). */
-.pk-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; list-style: disc; }
+/* Prose list (shadcn typography's list style). Ordered variant (as: :ol)
+   keeps its numbers — the disc is scoped to unordered lists. */
+.pk-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; }
+ul.pk-list { list-style: disc; }
+ol.pk-list { list-style: decimal; }
 .pk-list > li { margin-top: .5rem; }

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.13.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.13.0
+  version: 0.14.1
 platform: ruby
 authors:
 - Matt Kennedy