phlex_kit 0.8.0 → 0.9.0

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

@@ -2,18 +2,33 @@ import { Controller } from "@hotwired/stimulus";
 
 // Ported from ruby_ui's command-dialog controller (Stimulus-only upstream),
 // identifiers renamed ruby-ui → phlex-kit and the Tailwind body scroll-lock
-// class swapped for inline overflow (matching the shipped dialog).
+// class swapped for inline overflow (matching the shipped dialog). Unlike
+// upstream's document-scoped outlet (which let one dialog adopt another's
+// open palette), each instance tracks its own clone — sheet_controller's
+// pattern — and clears it on turbo:before-cache so a cached page never
+// restores a stale overlay + scroll lock.
 // Connects to data-controller="phlex-kit--command-dialog"
 export default class extends Controller {
   static targets = ["content"];
-  static outlets = ["phlex-kit--command"];
 
-  phlexKitCommandOutletConnected(controller) {
-    this.openOutlet = controller;
+  initialize() {
+    this.overlay = null;
+    this.clearOverlay = () => {
+      if (this.overlay?.isConnected) {
+        this.overlay.remove();
+        document.body.style.removeProperty("overflow");
+      }
+      this.overlay = null;
+    };
   }
 
-  phlexKitCommandOutletDisconnected() {
-    this.openOutlet = null;
+  connect() {
+    document.addEventListener("turbo:before-cache", this.clearOverlay);
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this.clearOverlay);
+    this.clearOverlay();
   }
 
   open(e) {
@@ -25,12 +40,15 @@ export default class extends Controller {
       return;
     }
 
-    if (this.openOutlet) {
-      this.openOutlet.focusInput();
+    // Already open (the command controller's dismiss may have removed the
+    // clone behind our back — isConnected catches that): just refocus.
+    if (this.overlay?.isConnected) {
+      this.overlay.querySelector("[data-phlex-kit--command-target='input']")?.focus();
       return;
     }
 
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    this.overlay = document.body.lastElementChild;
     // prevent scroll on body
     document.body.style.overflow = "hidden";
   }

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

@@ -8,9 +8,13 @@ module PhlexKit
   # stays "true" because the list is always visible (filtering hides items,
   # never the listbox itself).
   class CommandInput < BaseComponent
-    def initialize(placeholder: "Type a command or search...", list_id: nil, **attrs)
+    # `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)
       @placeholder = placeholder
       @list_id = list_id
+      @autofocus = autofocus
       @attrs = attrs
     end
 
@@ -25,7 +29,7 @@ module PhlexKit
             autocomplete: "off",
             autocorrect: "off",
             spellcheck: "false",
-            autofocus: true,
+            autofocus: @autofocus,
             role: "combobox",
             value: "",
             aria: { autocomplete: "list", expanded: "true", controls: @list_id },

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

@@ -23,7 +23,10 @@ module PhlexKit
           phlex_kit__command_target: "item",
           value: @value,
           text: @text,
-          disabled: (@disabled ? "true" : nil)
+          disabled: (@disabled ? "true" : nil),
+          # Guards the default href="#": without it a mouse click (or the
+          # Enter-synthesized click()) scrolls to top and appends # to the URL.
+          action: "click->phlex-kit--command#onItemClick"
         }
       }, @attrs), &)
     end

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

@@ -9,7 +9,7 @@
 .pk-context-menu-content {
   position: fixed; inset: auto; margin: 0; min-width: 8rem; overflow: visible;
   border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
-  color: var(--pk-text); padding: .25rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+  color: var(--pk-text); padding: .25rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent); outline: none;
 }
 .pk-context-menu-item {
   position: relative; display: flex; align-items: center; gap: .5rem;
@@ -20,15 +20,15 @@
 .pk-context-menu-item > svg { flex: none; width: 1rem; height: 1rem; color: var(--pk-muted); }
 .pk-context-menu-item:hover, .pk-context-menu-item:focus { background: var(--pk-accent); color: var(--pk-text); }
 .pk-context-menu-item[data-disabled="true"] { pointer-events: none; opacity: .5; }
-.pk-context-menu-item.inset { padding-left: 2rem; }
+.pk-context-menu-item.inset { padding-inline-start: 2rem; }
 .pk-context-menu-check {
   display: inline-flex; align-items: center; justify-content: center;
   flex: none; width: 1rem; height: 1rem;
 }
 .pk-context-menu-check svg { width: .875rem; height: .875rem; }
-.pk-context-menu-shortcut { margin-left: auto; font-size: .75rem; letter-spacing: .1em; color: var(--pk-muted); }
+.pk-context-menu-shortcut { margin-inline-start: auto; font-size: .75rem; letter-spacing: .1em; color: var(--pk-muted); }
 .pk-context-menu-label { padding: .375rem .5rem; font-size: .875rem; font-weight: 600; color: var(--pk-text); }
-.pk-context-menu-label.inset { padding-left: 2rem; }
+.pk-context-menu-label.inset { padding-inline-start: 2rem; }
 .pk-context-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }
 .pk-context-menu-group { display: contents; }
 
@@ -71,7 +71,7 @@
    The row is its own scoped anchor; the panel flips to the other side at
    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-left: auto; width: 1rem; height: 1rem; }
+.pk-context-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
 .pk-context-menu-sub-content {
   position: fixed;
   position-anchor: --pk-context-menu-sub;
@@ -92,7 +92,7 @@
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: .25rem;
-  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent);
 }
 .pk-context-menu-sub:hover > .pk-context-menu-sub-content,
 .pk-context-menu-sub:focus-within > .pk-context-menu-sub-content { display: block; }

data/app/components/phlex_kit/context_menu/context_menu_checkbox_item.rb

@@ -14,9 +14,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-context-menu-item pk-context-menu-checkbox-item",
-        role: "menuitemcheckbox"
+        role: "menuitemcheckbox",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked)
+        input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
+              tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do
           render Icon.new(:check, size: nil)
         end

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

@@ -12,12 +12,22 @@ export default class extends Controller {
   static targets = ["content", "trigger", "menuItem"]
 
   connect() {
-    this.onDoc = (e) => { if (!this.contentTarget.contains(e.target)) this.close() }
+    this.onDoc = (e) => {
+      if (this.contentTarget.contains(e.target)) return
+      // The opening right-click bubbles to document AFTER open() adds this
+      // listener — a contextmenu inside our own element must not close what
+      // it just opened (it repositions instead). A contextmenu anywhere
+      // else closes us, which also covers opening a second kit context
+      // menu: its trigger's contextmenu is "outside" for this instance.
+      if (e.type === "contextmenu" && this.element.contains(e.target)) return
+      this.close()
+    }
     this.onKey = (e) => this.keydown(e)
   }
 
   disconnect() {
     document.removeEventListener("click", this.onDoc)
+    document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
   }
 
@@ -38,14 +48,21 @@ export default class extends Controller {
     c.style.top = `${y}px`
     c.dataset.state = "open"
     document.addEventListener("click", this.onDoc)
+    document.addEventListener("contextmenu", this.onDoc)
     document.addEventListener("keydown", this.onKey)
     this.items()[0]?.focus()
   }
 
   close(opts = {}) {
+    // Menu rows default to href="#"; without this an Enter/click on a
+    // non-link row scrolls to top and appends # to the URL. (`opts` is the
+    // click event when close runs as the item's data-action; Enter/Space
+    // arrive here too, via keydown()'s synthesized click.)
+    if (opts?.target?.closest?.('a[href="#"]')) opts.preventDefault()
     if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover()
     this.contentTarget.dataset.state = "closed"
     document.removeEventListener("click", this.onDoc)
+    document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
     if (opts.refocus === true) this.anchor().focus()
   }
@@ -74,14 +91,64 @@ export default class extends Controller {
         e.preventDefault()
         items[items.length - 1]?.focus()
         break
+      case "Enter":
+      case " ":
+        // Explicit click so label rows (checkbox/radio) activate — labels
+        // have no native keyboard activation (and this gives links Space).
+        if (index >= 0) {
+          e.preventDefault()
+          items[index].click()
+        }
+        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()
+        }
+        break
+      }
     }
   }
 
+  enterSub(trigger) {
+    trigger.focus()
+    const panel = trigger.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-content")
+    if (!panel) return
+    const first = [...panel.querySelectorAll("[role^=\"menuitem\"]")]
+      .find((el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0)
+    first?.focus()
+  }
+
+  // Mirrors a checkbox/radio row's native input state onto the row's
+  // aria-checked (radios also reset their group's siblings).
+  syncChecked(e) {
+    const input = e.target
+    const group = input.name
+      ? this.element.querySelectorAll(`input[name="${CSS.escape(input.name)}"]`)
+      : [input]
+    group.forEach((i) => i.closest("[role^=\"menuitem\"]")?.setAttribute("aria-checked", i.checked))
+  }
+
   anchor() {
     return this.hasTriggerTarget ? this.triggerTarget : this.element
   }
 
   items() {
-    return this.menuItemTargets.filter((el) => !el.closest("[data-disabled]") && !el.closest(".pk-hidden"))
+    // getClientRects also skips rows inside a CLOSED sub panel (its
+    // display:none comes from the hover/focus-within CSS, not .pk-hidden) —
+    // focus() on those silently fails and the roving nav jams there.
+    return this.menuItemTargets.filter(
+      (el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0
+    )
   }
 }

data/app/components/phlex_kit/context_menu/context_menu_radio_item.rb

@@ -13,9 +13,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-context-menu-item pk-context-menu-radio-item",
-        role: "menuitemradio"
+        role: "menuitemradio",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :radio, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked)
+        input(type: :radio, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
+              tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do
           # A filled selection dot is geometry, not icon-library vocabulary —
           # identical across icon_library settings (matches the dropdown).

data/app/components/phlex_kit/context_menu/context_menu_sub_trigger.rb

@@ -6,8 +6,11 @@ module PhlexKit
       div(**mix({
         class: "pk-context-menu-item pk-context-menu-sub-trigger",
         role: "menuitem",
-        tabindex: "0",
-        aria: { haspopup: "menu" }
+        # -1: roving focus reaches it via arrows (focus-within opens the sub);
+        # tabindex 0 made it a stray tab stop inside the menu.
+        tabindex: "-1",
+        aria: { haspopup: "menu" },
+        data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
         block&.call
         render Icon.new(:chevron_right, size: nil, class: "pk-context-menu-sub-chevron")

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

@@ -22,7 +22,7 @@
 
 /* "Columns" dropdown rows. */
 .pk-data-table-column-toggle { position: relative; }
-.pk-data-table-column-toggle-icon { width: 1rem; height: 1rem; margin-left: .25rem; }
+.pk-data-table-column-toggle-icon { width: 1rem; height: 1rem; margin-inline-start: .25rem; }
 .pk-data-table-column-option {
   display: flex;
   align-items: center;

data/app/components/phlex_kit/data_table/data_table_column_toggle.rb

@@ -22,18 +22,17 @@ module PhlexKit
           end
           render DropdownMenuContent.new do
             @columns.each do |col|
-              label(class: "pk-data-table-column-option") do
-                input(
-                  type: :checkbox,
-                  checked: true,
-                  class: "pk-checkbox",
-                  data: {
-                    column_key: col[:key].to_s,
-                    action: "change->phlex-kit--data-table-column-visibility#toggle"
-                  }
-                )
-                span { plain col[:label] }
-              end
+              # A real menu row (role="menuitemcheckbox" + aria-checked, arrow-
+              # navigable) — plain <label>s directly inside role="menu" are
+              # invalid ARIA. The change event bubbles from the hidden checkbox
+              # to this row, where our toggle action picks it up.
+              render DropdownMenuCheckboxItem.new(
+                checked: true,
+                data: {
+                  column_key: col[:key].to_s,
+                  action: "change->phlex-kit--data-table-column-visibility#toggle"
+                }
+              ) { plain col[:label] }
             end
           end
         end

data/app/components/phlex_kit/data_table/data_table_column_visibility_controller.js

@@ -7,8 +7,11 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="phlex-kit--data-table-column-visibility"
 export default class extends Controller {
   toggle(event) {
-    const key = event.target.dataset.columnKey;
+    // The change event originates on the checkbox, but data-column-key lives
+    // on the menu row (DropdownMenuCheckboxItem) — look up through ancestors.
+    const key = event.target.closest("[data-column-key]")?.dataset.columnKey;
     const visible = event.target.checked;
+    if (!key) return;
     const root = this.element.closest('[data-controller~="phlex-kit--data-table"]');
     if (!root) return;
     root

data/app/components/phlex_kit/data_table/data_table_pagy_adapter.rb

@@ -12,6 +12,7 @@ module PhlexKit
 
     def total_count = @pagy.count
 
-    def per_page = @pagy.items
+    # Pagy 9 renamed #items to #limit (and removed #items) — support both.
+    def per_page = @pagy.respond_to?(:limit) ? @pagy.limit : @pagy.items
   end
 end

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

@@ -1,28 +1,42 @@
 module PhlexKit
   # Per-page NativeSelect in a GET form that self-submits on change (targeting
-  # the table's turbo-frame when `frame_id:` is given). See data_table.rb.
+  # the table's turbo-frame when `frame_id:` is given). Extra filter params
+  # (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 ], **attrs)
+    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, **attrs)
       @path = path
       @name = name
       @value = value
       @frame_id = frame_id
       @options = options
+      @preserved_params = preserved_params
       @attrs = attrs
     end
 
     def view_template
-      form_attrs = { class: "pk-data-table-per-page", action: @path, method: "get" }
-      form_attrs[:data] = { turbo_frame: @frame_id } if @frame_id
+      form_attrs = {
+        class: "pk-data-table-per-page",
+        action: @path,
+        method: "get",
+        # Reuse the search controller for its CSP-safe #submitNow action.
+        data: { controller: "phlex-kit--data-table-search" }
+      }
+      form_attrs[:data][:turbo_frame] = @frame_id if @frame_id
 
       form(**mix(form_attrs, @attrs)) do
-        render NativeSelect.new(name: @name, onchange: safe("this.form.requestSubmit()")) do
+        render NativeSelect.new(name: @name, data: { action: "change->phlex-kit--data-table-search#submitNow" }) do
           @options.each do |opt|
             option_attrs = { value: opt.to_s }
             option_attrs[:selected] = true if opt.to_s == @value.to_s
             option(**option_attrs) { plain opt.to_s }
           end
         end
+        @preserved_params.each do |k, v|
+          next if v.nil? || (v.respond_to?(:empty?) && v.empty?)
+          next if k.to_s == @name
+          input(type: :hidden, name: k.to_s, value: v.to_s)
+        end
       end
     end
   end

data/app/components/phlex_kit/data_table/data_table_search_controller.js

@@ -32,6 +32,13 @@ export default class extends Controller {
     this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
   }
 
+  // Immediate, undebounced submit — used by change-driven controls like the
+  // per-page select (CSP-safe replacement for an inline onchange handler).
+  submitNow() {
+    clearTimeout(this.timer);
+    this.element.requestSubmit();
+  }
+
   captureBeforeRender() {
     const input = this.input();
     if (!input || document.activeElement !== input) return;
@@ -62,6 +69,11 @@ export default class extends Controller {
   }
 
   key() {
-    return this.element.action || "_";
+    // The key must survive the Turbo Frame swap (the form element is replaced),
+    // so it's derived from stable markup: the form id when the caller set one,
+    // else action URL + search-input name — two same-path forms (e.g. search
+    // alongside the per-page select) must not share a focus-restore slot.
+    if (this.element.id) return `#${this.element.id}`;
+    return `${this.element.action || "_"}::${this.input()?.name ?? ""}`;
   }
 }

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

@@ -24,10 +24,13 @@ module PhlexKit
       @id = id || "date-picker-#{SecureRandom.hex(4)}"
       @name = name
       @label = label
-      @value = value || selected_date&.to_s
-      @placeholder = placeholder
       @selected_date = selected_date
       @date_format = date_format
+      # 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.
+      @value = value || format_selected_date
+      @placeholder = placeholder
       @input_attrs = input_attrs
       @calendar_attrs = calendar_attrs
       @trigger_attrs = trigger_attrs
@@ -45,7 +48,7 @@ module PhlexKit
             end
           end
           render PopoverContent.new(**@content_attrs) do
-            render Calendar.new(input_id: "##{@id}", 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, **@calendar_attrs)
           end
         end
       end
@@ -53,6 +56,50 @@ module PhlexKit
 
     private
 
+    # The outlet takes a CSS selector. "#id" is only valid for CSS-identifier
+    # ids — anything else (Rails-style "user:due.date" etc) must go through a
+    # quoted attribute selector or querySelector throws.
+    def input_selector
+      return "##{@id}" if @id.match?(/\A[A-Za-z][\w-]*\z/)
+
+      %([id="#{@id.gsub(/[\\"]/) { |c| "\\#{c}" }}"])
+    end
+
+    # Mirrors the calendar controller's formatDate tokens (calendar_controller.js)
+    # so the server-rendered input matches what JS writes after a pick.
+    FORMAT_TOKENS = /yyyy|MMMM|MM|dd|HH|mm|ss|EEEE|PPPP|do/
+
+    def format_selected_date
+      return nil unless @selected_date
+
+      date = @selected_date.respond_to?(:strftime) ? @selected_date : Date.parse(@selected_date.to_s)
+      day = date.day
+      suffix = day_suffix(day)
+      day_name = Date::DAYNAMES[date.wday]
+      month_name = Date::MONTHNAMES[date.month]
+      map = {
+        "yyyy" => date.year.to_s,
+        "MMMM" => month_name,
+        "MM" => Kernel.format("%02d", date.month),
+        "dd" => Kernel.format("%02d", day),
+        "HH" => Kernel.format("%02d", date.respond_to?(:hour) ? date.hour : 0),
+        "mm" => Kernel.format("%02d", date.respond_to?(:min) ? date.min : 0),
+        "ss" => Kernel.format("%02d", date.respond_to?(:sec) ? date.sec : 0),
+        "EEEE" => day_name,
+        "do" => "#{day}#{suffix}",
+        "PPPP" => "#{day_name}, #{month_name} #{day}#{suffix}, #{date.year}"
+      }
+      @date_format.gsub(FORMAT_TOKENS) { |token| map[token] }
+    rescue Date::Error
+      @selected_date.to_s
+    end
+
+    def day_suffix(day)
+      return "th" if day > 3 && day < 21
+
+      { 1 => "st", 2 => "nd", 3 => "rd" }.fetch(day % 10, "th")
+    end
+
     def trigger_attrs
       mix({ class: "pk-date-picker-trigger" }, @trigger_attrs)
     end

data/app/components/phlex_kit/dialog/dialog.css

@@ -17,12 +17,12 @@
   border-radius: .75rem; background: var(--pk-surface); color: var(--pk-text);
   padding: var(--pk-dialog-spacing);
   font-size: .875rem;
-  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
+  box-shadow: 0 10px 30px color-mix(in srgb, var(--pk-shadow-color) 35%, transparent);
 }
 .pk-dialog[open] { display: flex; flex-direction: column; }
-.pk-dialog::backdrop { background: rgb(0 0 0 / .1); backdrop-filter: blur(4px); }
+.pk-dialog::backdrop { background: color-mix(in srgb, var(--pk-overlay) 10%, transparent); backdrop-filter: blur(4px); }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-dialog::backdrop { background: rgb(0 0 0 / .5); }
+  .pk-dialog::backdrop { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }
 .pk-dialog.xs { max-width: min(16rem, calc(100% - 2rem)); }
 .pk-dialog.sm { max-width: min(20rem, calc(100% - 2rem)); }
@@ -51,6 +51,6 @@
 }
 .pk-overlay-close:hover { opacity: 1; }
 @media (min-width: 640px) {
-  .pk-dialog-header { text-align: left; }
+  .pk-dialog-header { text-align: start; }
   .pk-dialog-footer { flex-direction: row; justify-content: flex-end; }
 }

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

@@ -24,10 +24,26 @@ export default class extends Controller {
   }
   disconnect() {
     this.dialogTarget.removeEventListener("close", this.handleClose)
-    document.body.style.removeProperty("overflow")
+    if (this.dialogTarget.open) this.handleClose()
+  }
+  open(e) {
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    // Save/restore rather than removeProperty: a host page (or another
+    // component) may have set body overflow itself.
+    this.previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
   }
-  open(e) { e?.preventDefault(); this.dialogTarget.showModal(); document.body.style.overflow = "hidden" }
   dismiss() { this.dialogTarget.close() }
-  backdropClick(e) { if (e.target === this.dialogTarget) this.dismiss() }
-  handleClose = () => { document.body.style.removeProperty("overflow") }
+  // Only a click on the ::backdrop dismisses. e.target is the <dialog> for
+  // backdrop clicks, but ALSO for clicks on the dialog's own padding/flex
+  // gaps — disambiguate by testing the click point against the dialog's box.
+  backdropClick(e) {
+    if (e.target !== this.dialogTarget) return
+    if (e.detail === 0) return // synthetic/keyboard click — no coordinates
+    const r = this.dialogTarget.getBoundingClientRect()
+    const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom
+    if (!inside) this.dismiss()
+  }
+  handleClose = () => { document.body.style.overflow = this.previousOverflow ?? "" }
 }

data/app/components/phlex_kit/drawer/drawer.css

@@ -9,7 +9,7 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background: rgb(0 0 0 / .1);
+  background: color-mix(in srgb, var(--pk-overlay) 10%, transparent);
   backdrop-filter: blur(4px);
 }
 .pk-drawer {
@@ -87,8 +87,8 @@
   padding: 1rem;
 }
 @media (min-width: 768px) {
-  .pk-drawer-header { text-align: left; }
+  .pk-drawer-header { text-align: start; }
 }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-drawer-overlay { background: rgb(0 0 0 / .5); }
+  .pk-drawer-overlay { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }

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

@@ -37,7 +37,7 @@
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: .25rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-shadow-color) 40%, transparent);
 }
 
 .pk-dropdown-menu-item {
@@ -54,9 +54,10 @@
   text-decoration: none; /* href items render as <a> — no UA underline at rest */
   outline: none;
 }
+/* Keyboard nav moves real focus — :focus is the highlight (no aria-selected:
+   that attribute is unsupported on menuitems and AT ignores it). */
 .pk-dropdown-menu-item:hover,
-.pk-dropdown-menu-item:focus,
-.pk-dropdown-menu-item[aria-selected="true"] { background: var(--pk-accent); text-decoration: none; }
+.pk-dropdown-menu-item:focus { background: var(--pk-accent); text-decoration: none; }
 
 .pk-dropdown-menu-label { margin: 0; padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
 .pk-dropdown-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }
@@ -75,7 +76,7 @@
 
 /* Keyboard hint, pushed to the row's end. */
 .pk-dropdown-menu-shortcut {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: .75rem;
   letter-spacing: .1em;
   color: var(--pk-muted);
@@ -111,7 +112,7 @@
    The row is its own scoped anchor; the panel flips to the other side at
    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-left: auto; width: 1rem; height: 1rem; }
+.pk-dropdown-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
 .pk-dropdown-menu-sub-content {
   position: fixed;
   position-anchor: --pk-dropdown-menu-sub;