phlex_kit 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f20449d41b77f26b6a4272eb5f4ebd116a225af9bf2dcb6bfec5899a5b117a2
-  data.tar.gz: fd83a994ef1cc33452c19b8520934db31750babacb7508511dffb9c41b08a9dd
+  metadata.gz: caadd4e868a63939f22013699b89f9b1557dfa9569022301602c0f1cb07020f0
+  data.tar.gz: fa3ba42e9566f171e1fdee7ddcbfc475397bf404152031adbca2fd0cacbbda61
 SHA512:
-  metadata.gz: f08a4051f646822945f9f1bf72b52cfce151509322032dccba9ec7166db4bf5a99bead12adeec4969edf0fc94df5b55dc902424322fa6a351abd18d92c04496b
-  data.tar.gz: 83b2a4ea332492c19ce059611e534fc57c79fa39e136e9bd00e2cf535fe09c791f75c0c81bc12056f2678f9a1bcf4bd18bd8246b79cd7377e0f990dbd4472c50
+  metadata.gz: 76304ba104026fe236758b3fa93014b516ec84e65e6baefd307853da30bb7dc9d38d1f6fff0d2c7639ede3ee9116642beed8a615c24963ea3e0462c0ca89656a
+  data.tar.gz: 0c8d0dfd56d4e4b873b35149dd7c362010c97a02a4642de0b72d80606301be27dea505849753aa8754e081c38e49484b3358524267d3df497a12b8c5d9e9ccd0

data/app/assets/stylesheets/phlex_kit/phlex_kit.css

@@ -44,6 +44,7 @@
 @import url("form/form.css");
 @import url("form_field/form_field.css");
 @import url("hover_card/hover_card.css");
+@import url("icon/icon.css");
 @import url("input/input.css");
 @import url("input_group/input_group.css");
 @import url("input_otp/input_otp.css");

data/app/components/phlex_kit/accordion/accordion.css

@@ -9,6 +9,13 @@
   background: none; border: 0; cursor: pointer; color: inherit; transition: color .15s ease, background-color .15s ease, text-decoration-color .15s ease;
 }
 .pk-accordion-trigger:hover { text-decoration: underline; }
+/* background/border are stripped above — reinstate the kit focus ring or
+   keyboard focus falls back to the UA outline. */
+.pk-accordion-trigger:focus-visible {
+  outline: none;
+  border-radius: calc(var(--pk-radius) - 2px);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
 .pk-accordion-trigger-label { flex: 1; }
 .pk-accordion-icon { display: inline-flex; opacity: .5; transition: transform .2s ease; }
 .pk-accordion-icon svg { width: 1rem; height: 1rem; }

data/app/components/phlex_kit/alert_dialog/alert_dialog_controller.js

@@ -52,6 +52,9 @@ export default class extends Controller {
     // Double-open guard: Enter+click (or a double-click) on the trigger must
     // not stack a second clone over the first.
     if (this.clone?.isConnected) return;
+    // open: is one-shot — the reflected value sits in the Turbo snapshot, so
+    // a cache-restored reconnect would re-open a dialog the user dismissed.
+    this.openValue = false;
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     this.clone = document.body.lastElementChild;
   }

data/app/components/phlex_kit/attachment/attachment_group.rb

@@ -11,9 +11,14 @@ module PhlexKit
       div(**mix({
         class: "pk-attachment-group",
         role: "group",
+        # at-start + at-end = no edge fades. Server-rendered so a group that
+        # FITS shows no false "more content" fade pre-hydration / with JS off;
+        # the controller's first update() removes them when there's overflow.
         data: {
           controller: "phlex-kit--scroll-fade",
-          phlex_kit__scroll_fade_axis_value: "x"
+          phlex_kit__scroll_fade_axis_value: "x",
+          at_start: "",
+          at_end: ""
         }
       }, @attrs), &)
     end

data/app/components/phlex_kit/attachment/attachment_trigger.rb

@@ -4,8 +4,13 @@ module PhlexKit
   # stay independently clickable. Give it an aria-label; pass `as: :a` +
   # `href:` for a link. See attachment.rb.
   class AttachmentTrigger < BaseComponent
+    AS_TAGS = %i[button a].freeze
+
     def initialize(as: :button, href: nil, **attrs)
       @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown AttachmentTrigger as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @href = href
       @attrs = attrs
     end

data/app/components/phlex_kit/avatar/avatar_badge.rb

@@ -4,12 +4,19 @@ module PhlexKit
   # svg glyph (hidden automatically on xs/sm avatars). Recolor via style/class
   # — defaults to the brand fill. See avatar.rb.
   class AvatarBadge < BaseComponent
-    def initialize(**attrs)
+    # label: gives the color-only presence dot an accessible alternative
+    # (a .pk-sr-only span, like AttachmentAction's). No default — a purely
+    # decorative dot stays silent.
+    def initialize(label: nil, **attrs)
+      @label = label
       @attrs = attrs
     end
 
     def view_template(&block)
-      span(**mix({ class: "pk-avatar-badge" }, @attrs), &block)
+      span(**mix({ class: "pk-avatar-badge" }, @attrs)) do
+        span(class: "pk-sr-only") { @label } if @label
+        block&.call
+      end
     end
   end
 end

data/app/components/phlex_kit/badge/badge.css

@@ -15,7 +15,7 @@
   overflow: hidden;
   white-space: nowrap;
   height: 1.25rem;
-  border-radius: 2rem;
+  border-radius: 999px; /* fully-round pill (matches avatar/progress), not a --pk-radius derivative */
   border: 1px solid transparent;
   padding: .125rem .5rem;
   font-size: .75rem;

data/app/components/phlex_kit/bubble/bubble.rb

@@ -3,13 +3,11 @@ module PhlexKit
   # the child BubbleContent via a data-slot selector; align: :end flips it to the
   # trailing edge. Compose Bubble > BubbleContent (+ BubbleReactions).
   class Bubble < BaseComponent
-    VARIANTS = %i[default secondary muted tinted outline ghost destructive].freeze
-    ALIGNS = %i[start end].freeze
+    VARIANTS = %i[default secondary muted tinted outline ghost destructive].to_h { |v| [ v, v ] }.freeze
+    ALIGNS = %i[start end].to_h { |v| [ v, v ] }.freeze
     def initialize(variant: :default, align: :start, **attrs)
-      @variant = variant.to_sym
-      raise KeyError, "unknown Bubble variant #{@variant}" unless VARIANTS.include?(@variant)
-      @align = align.to_sym
-      raise KeyError, "unknown Bubble align #{@align}" unless ALIGNS.include?(@align)
+      @variant = fetch_option(VARIANTS, variant.to_sym, :variant)
+      @align = fetch_option(ALIGNS, align.to_sym, :align)
       @attrs = attrs
     end
     def view_template(&)

data/app/components/phlex_kit/bubble/bubble_reactions.rb

@@ -1,12 +1,10 @@
 module PhlexKit
   class BubbleReactions < BaseComponent
-    SIDES = %i[top bottom].freeze
-    ALIGNS = %i[start end].freeze
+    SIDES = %i[top bottom].to_h { |v| [ v, v ] }.freeze
+    ALIGNS = %i[start end].to_h { |v| [ v, v ] }.freeze
     def initialize(side: :bottom, align: :end, **attrs)
-      @side = side.to_sym
-      raise KeyError, "unknown BubbleReactions side #{@side}" unless SIDES.include?(@side)
-      @align = align.to_sym
-      raise KeyError, "unknown BubbleReactions align #{@align}" unless ALIGNS.include?(@align)
+      @side = fetch_option(SIDES, side.to_sym, :side)
+      @align = fetch_option(ALIGNS, align.to_sym, :align)
       @attrs = attrs
     end
     def view_template(&)

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

@@ -159,7 +159,9 @@ export default class extends Controller {
 
   toggleMultipleDay(iso) {
     const day = this.isoDate(this.parseDate(iso));
-    const current = [...this.selectedDatesValue];
+    // Normalized copy: server-supplied entries may be datetime strings
+    // (Time#to_s) — indexOf against the bare isoDate must still match.
+    const current = this.normalizeDates(this.selectedDatesValue);
     const index = current.indexOf(day);
     if (index >= 0) {
       current.splice(index, 1);
@@ -303,8 +305,18 @@ export default class extends Controller {
     }
     e.preventDefault();
 
-    const iso = this.isoDate(target);
-    if (this.isDateDisabled(iso)) return; // min/max/booked boundary: stay put
+    let iso = this.isoDate(target);
+    if (this.isDateDisabled(iso)) {
+      // A min/max boundary holds focus in place; an isolated booked date is
+      // SKIPPED in the travel direction (APG date-grid) — arrows only, the
+      // month/row jumps (PageUp/Home/End) still stay put.
+      if (!(e.key in STEPS) || this.outOfRange(target)) return;
+      do {
+        target.setDate(target.getDate() + STEPS[e.key]);
+        if (this.outOfRange(target)) return;
+      } while (this.isBooked(target));
+      iso = this.isoDate(target);
+    }
 
     if (target.getMonth() !== this.viewDate().getMonth() || target.getFullYear() !== this.viewDate().getFullYear()) {
       this.viewDateValue = iso; // re-renders the grid on the target month
@@ -412,7 +424,7 @@ export default class extends Controller {
       );
     }
     if (this.modeValue === "multiple") {
-      return this.selectedDatesValue.includes(this.isoDate(day));
+      return this.normalizeDates(this.selectedDatesValue).includes(this.isoDate(day));
     }
     const selectedDate = this.selectedDate();
     return selectedDate && day.toDateString() === selectedDate.toDateString();
@@ -428,7 +440,17 @@ export default class extends Controller {
   }
 
   isBooked(day) {
-    return this.disabledDatesValue.includes(this.isoDate(day));
+    return this.normalizeDates(this.disabledDatesValue).includes(this.isoDate(day));
+  }
+
+  // disabled_dates / selected_dates entries may be Time#to_s or datetime ISO
+  // strings — every other date input tolerates those via parseDate, so the
+  // membership arrays must be normalized the same way (exact string equality
+  // silently no-oped for anything but bare yyyy-MM-dd).
+  normalizeDates(values) {
+    return values
+      .map((d) => { const parsed = this.parseDate(d); return parsed ? this.isoDate(parsed) : null; })
+      .filter(Boolean);
   }
 
   monthAndYear() {
@@ -575,14 +597,16 @@ export default class extends Controller {
   isDateDisabled(date) {
     const candidate = this.parseDate(date);
     if (!candidate) return false;
+    return this.outOfRange(candidate) || this.isBooked(candidate);
+  }
 
+  // min/max bounds only (not booked entries) — the keyboard skip needs to
+  // distinguish a hard boundary from a hole in the middle of the grid.
+  outOfRange(candidate) {
     const minDate = this.minDate();
     if (minDate && this.startOfDay(candidate) < this.startOfDay(minDate)) return true;
-
     const maxDate = this.maxDate();
-    if (maxDate && this.startOfDay(candidate) > this.startOfDay(maxDate)) return true;
-
-    return this.disabledDatesValue.includes(this.isoDate(candidate));
+    return !!(maxDate && this.startOfDay(candidate) > this.startOfDay(maxDate));
   }
 
   parseDate(value) {

data/app/components/phlex_kit/carousel/carousel.rb

@@ -35,12 +35,13 @@ module PhlexKit
     end
 
     # Arrow keys follow the scroll axis: left/right for horizontal, up/down
-    # for vertical.
+    # for vertical. Horizontal arrows route through keyNext/keyPrev, which
+    # flip in RTL (the next slide sits to the physical left there).
     def keyboard_action
       if @orientation == :vertical
         "keydown.down->phlex-kit--carousel#scrollNext:prevent keydown.up->phlex-kit--carousel#scrollPrev:prevent"
       else
-        "keydown.right->phlex-kit--carousel#scrollNext:prevent keydown.left->phlex-kit--carousel#scrollPrev:prevent"
+        "keydown.right->phlex-kit--carousel#keyNext:prevent keydown.left->phlex-kit--carousel#keyPrev:prevent"
       end
     end
   end

data/app/components/phlex_kit/carousel/carousel_controller.js

@@ -73,6 +73,16 @@ export default class extends Controller {
     this._goTo(this.index - 1);
   }
 
+  // Physical arrow keys (horizontal axis only): in RTL the next slide sits
+  // to the physical LEFT, so the right arrow must travel toward "previous".
+  keyNext() {
+    this._rtl() ? this.scrollPrev() : this.scrollNext();
+  }
+
+  keyPrev() {
+    this._rtl() ? this.scrollNext() : this.scrollPrev();
+  }
+
   get slides() {
     return this.track ? Array.from(this.track.children) : [];
   }
@@ -129,6 +139,8 @@ export default class extends Controller {
     const drag = this.drag;
     if (!drag) return;
     drag.delta = this._pointerPos(e) - drag.start;
+    // Normalize to scroll-axis space: in RTL a rightward drag reveals next.
+    if (this._rtl()) drag.delta = -drag.delta;
     if (!drag.moved && Math.abs(drag.delta) > 5) {
       drag.moved = true;
       this.track.style.transition = "none";
@@ -183,13 +195,22 @@ export default class extends Controller {
     return this.options.axis === "y" ? e.clientY : e.clientX;
   }
 
+  // In RTL the horizontal track lays slides right-to-left: later slides have
+  // SMALLER offsetLeft and the track must translate in +x to reveal them.
+  // All geometry below works in a direction-neutral "offset along the scroll
+  // axis" space; _rtl() flips the signs at the physical boundaries only.
+  _rtl() {
+    return this.options.axis !== "y" && getComputedStyle(this.element).direction === "rtl";
+  }
+
   _offsetOf(index) {
     const slide = this.slides[index];
     const first = this.slides[0];
     if (!slide || !first) return 0;
-    const raw = this.options.axis === "y"
+    let raw = this.options.axis === "y"
       ? slide.offsetTop - first.offsetTop
       : slide.offsetLeft - first.offsetLeft;
+    if (this._rtl()) raw = -raw;
     // Never scroll past the content edge: with multi-up layouts the last
     // slides' offsets overshoot the max scrollable offset (track − viewport).
     return Math.min(Math.max(0, raw), this._maxOffset());
@@ -211,6 +232,6 @@ export default class extends Controller {
   _translateTo(offset) {
     this.track.style.transform = this.options.axis === "y"
       ? `translate3d(0, ${-offset}px, 0)`
-      : `translate3d(${-offset}px, 0, 0)`;
+      : `translate3d(${this._rtl() ? offset : -offset}px, 0, 0)`;
   }
 }

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

@@ -19,13 +19,19 @@ module PhlexKit
     end
 
     def view_template(&)
-      canvas(**mix({
+      base = {
         class: "pk-chart",
+        # 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.
+        role: "img",
         data: {
           controller: "phlex-kit--chart",
           phlex_kit__chart_options_value: JSON.generate(@options)
         }
-      }, @attrs), &)
+      }
+      base[:aria] = { label: "Chart" } unless aria_labelled?
+      canvas(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/clipboard/clipboard_controller.js

@@ -3,7 +3,8 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--clipboard". Copies the source text and
 // flashes a success/error popover (CSS-positioned, no @floating-ui). Ported from ruby_ui.
 export default class extends Controller {
-  static targets = ["trigger", "source", "successPopover", "errorPopover"]
+  // No "trigger" target: the click->#copy action alone wires the trigger.
+  static targets = ["source", "successPopover", "errorPopover"]
 
   connect() {
     // Turbo snapshots at turbo:before-cache, BEFORE disconnect — hide the
@@ -28,10 +29,16 @@ export default class extends Controller {
     // A source usually wraps one element (input/code/…), but bare text is
     // legal too — fall back to the source's own text instead of erroring.
     const el = this.sourceTarget.children[0]
+    // TEXTAREA reads .value like INPUT — innerText would return the initial
+    // content, not the user-edited value.
     const text = el
-      ? (el.tagName === "INPUT" ? el.value : el.innerText)
+      ? (["INPUT", "TEXTAREA"].includes(el.tagName) ? el.value : el.innerText)
       : this.sourceTarget.textContent.trim()
     if (!text) { this.show(this.errorPopoverTarget); return }
+    // navigator.clipboard is undefined in insecure contexts (plain-HTTP
+    // hosts, some webviews) — that's the error popover's job, not an
+    // unhandled TypeError's.
+    if (!navigator.clipboard) { this.show(this.errorPopoverTarget); return }
     navigator.clipboard.writeText(text)
       .then(() => this.show(this.successPopoverTarget))
       .catch(() => this.show(this.errorPopoverTarget))

data/app/components/phlex_kit/clipboard/clipboard_trigger.rb

@@ -1,6 +1,6 @@
 module PhlexKit
   class ClipboardTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
-    def view_template(&) = div(**mix({ class: "pk-clipboard-trigger", data: { phlex_kit__clipboard_target: "trigger", action: "click->phlex-kit--clipboard#copy" } }, @attrs), &)
+    def view_template(&) = div(**mix({ class: "pk-clipboard-trigger", data: { action: "click->phlex-kit--clipboard#copy" } }, @attrs), &)
   end
 end

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

@@ -12,7 +12,13 @@ module PhlexKit
       # tabindex=0 + role=region: the block scrolls (overflow:auto), so it must
       # be keyboard-focusable (WCAG 2.1.1 scrollable-region-focusable). Pass
       # `aria: { label: ... }` to name the region for AT.
-      div(**mix({ class: "pk-codeblock", tabindex: "0", role: "region", data: { syntax: @syntax } }, @attrs)) do
+      base = { class: "pk-codeblock", tabindex: "0", role: "region", data: { syntax: @syntax } }
+      # 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?
+        base[:aria] = { label: @syntax ? "#{@syntax} code" : "Code" }
+      end
+      div(**mix(base, @attrs)) do
         pre do
           if block
             code(&block)

data/app/components/phlex_kit/collapsible/collapsible.rb

@@ -7,7 +7,10 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&)
-      div(**mix({ class: "pk-collapsible", data: { controller: "phlex-kit--collapsible", phlex_kit__collapsible_open_value: @open } }, @attrs), &)
+      # data-state is the CSS styling hook (chevron rotation) — it must be
+      # server-rendered or an open: true collapsible renders a closed-pointing
+      # chevron until Stimulus connects (and always, with JS off).
+      div(**mix({ class: "pk-collapsible", data: { controller: "phlex-kit--collapsible", phlex_kit__collapsible_open_value: @open, state: @open ? "open" : "closed" } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/combobox/combobox_badge_trigger.rb

@@ -30,7 +30,8 @@ module PhlexKit
             "keydown.down->phlex-kit--combobox#keyDownPressed",
             "keydown.up->phlex-kit--combobox#keyUpPressed",
             "keydown.enter->phlex-kit--combobox#keyEnterPressed",
-            "keydown.esc->phlex-kit--combobox#closePopover:prevent"
+            # no :prevent — closePopover only swallows Escape while open.
+            "keydown.esc->phlex-kit--combobox#closePopover"
           ].join(" ")
         }
       }, @attrs)) do
@@ -49,7 +50,10 @@ module PhlexKit
             action: [
               "keyup->phlex-kit--combobox#filterItems",
               "input->phlex-kit--combobox#filterItems",
-              "keydown.backspace->phlex-kit--combobox#handleBadgeInputBackspace"
+              # plain keydown — "backspace" is not a Stimulus key filter
+              # (using it throws "unknown key filter" on every keystroke and
+              # the handler never ran); the method guards on e.key itself.
+              "keydown->phlex-kit--combobox#handleBadgeInputBackspace"
             ].join(" ")
           }
         )

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

@@ -45,6 +45,11 @@ export default class extends Controller {
   }
 
   connect() {
+    // A Turbo snapshot serializes aria-expanded / aria-activedescendant even
+    // though :popover-open does not survive the restore — normalize here so
+    // a restored page doesn't announce an open listbox over a closed combobox.
+    this.setExpanded(false)
+    this.clearActiveDescendant()
     this.generateItemIds()
     this.updateTriggerContent()
   }
@@ -217,6 +222,8 @@ export default class extends Controller {
   }
 
   handleBadgeInputBackspace(e) {
+    // Bound as a bare keydown: "backspace" is not a Stimulus key filter.
+    if (e.key !== "Backspace") return
     if (this.badgeInputTarget.value !== "") return
 
     const checked = this.checkedInputs()
@@ -278,7 +285,14 @@ export default class extends Controller {
     }
   }
 
-  closePopover() {
+  closePopover(e) {
+    // Escape must keep its browser default (e.g. cancelling an enclosing
+    // <dialog>) when the popover is already closed — only swallow the key
+    // when this close actually consumes it.
+    if (e?.type === "keydown") {
+      if (!this.isOpen()) return
+      e.preventDefault()
+    }
     // Hiding the popover while focus is inside it (search input, option) drops
     // focus to <body>; hand it back to the trigger. Checked BEFORE hiding, and
     // only when focus would actually be orphaned — a click elsewhere on the

data/app/components/phlex_kit/combobox/combobox_input_trigger.rb

@@ -36,7 +36,10 @@ module PhlexKit
             "keydown.down->phlex-kit--combobox#keyDownPressed",
             "keydown.up->phlex-kit--combobox#keyUpPressed",
             "keydown.enter->phlex-kit--combobox#keyEnterPressed",
-            "keydown.esc->phlex-kit--combobox#closePopover:prevent"
+            # no :prevent — closePopover only swallows Escape while the
+            # popover is open, so a closed field keeps the key's default
+            # (e.g. cancelling an enclosing <dialog>).
+            "keydown.esc->phlex-kit--combobox#closePopover"
           ].join(" ")
         }
       }, @attrs)) do

data/app/components/phlex_kit/combobox/combobox_list.rb

@@ -3,13 +3,17 @@ module PhlexKit
   # role and an id the controller points the combobox element's aria-controls
   # at (and derives option ids from). See combobox.rb.
   class ComboboxList < BaseComponent
-    def initialize(**attrs)
+    # id: is a named kwarg (not left in **attrs) because `mix` would *merge* a
+    # caller id with the generated one into an invalid two-token id, breaking
+    # aria-controls (the documented list_id: wiring) and derived option ids.
+    def initialize(id: nil, **attrs)
+      @id = id || "pk-combobox-list-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
     def view_template(&)
       div(**mix({
-        id: "pk-combobox-list-#{SecureRandom.hex(4)}",
+        id: @id,
         class: "pk-combobox-list",
         role: "listbox",
         data: { phlex_kit__combobox_target: "list" }

data/app/components/phlex_kit/combobox/combobox_toggle_all_checkbox.rb

@@ -13,6 +13,10 @@ module PhlexKit
       input(**mix({
         type: :checkbox,
         class: "pk-combobox-checkbox",
+        # The option label is the interactive surface (ARIA option); the real
+        # input must not be a second tab stop inside it — same as
+        # ComboboxCheckbox/ComboboxRadio.
+        tabindex: "-1",
         data: {
           phlex_kit__combobox_target: "toggleAll",
           action: "change->phlex-kit--combobox#toggleAllItems"

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

@@ -98,6 +98,9 @@ export default class extends Controller {
     this.searchEntries = this.searchEntries.filter(
       (entry) => entry.element !== item,
     );
+    // The highlight index is positional — after a removal it points at the
+    // wrong (or a missing) row, so Enter would activate the wrong item.
+    this.selectedIndex = -1;
   }
 
   dismiss() {
@@ -266,7 +269,9 @@ export default class extends Controller {
       this.updateSelectedItem(visibleItems, -1);
     } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
-      visibleItems[this.selectedIndex].click();
+      // Optional-chained: a stale selectedIndex after dynamic item removal
+      // (turbo stream re-render) must not throw.
+      visibleItems[this.selectedIndex]?.click();
     }
   }
 

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

@@ -18,6 +18,10 @@ module PhlexKit
         class: "pk-command-item",
         href: @href,
         role: "option",
+        # Options in an aria-activedescendant listbox are not tab stops —
+        # keyboard access is arrows/Enter from the input (cmdk parity); a
+        # tabbable anchor per row also made disabled items focusable.
+        tabindex: "-1",
         aria: { disabled: (@disabled ? "true" : nil) },
         data: {
           phlex_kit__command_target: "item",

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

@@ -3,13 +3,17 @@ module PhlexKit
   # listbox role and an id the controller points the input's aria-controls at
   # (and derives result ids from, for aria-activedescendant). See command.rb.
   class CommandList < BaseComponent
-    def initialize(**attrs)
+    # id: is a named kwarg (not left in **attrs) because `mix` would *merge* a
+    # caller id with the generated one into an invalid two-token id, breaking
+    # aria-controls (the documented list_id: wiring) and derived result ids.
+    def initialize(id: nil, **attrs)
+      @id = id || "pk-command-list-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
     def view_template(&)
       div(**mix({
-        id: "pk-command-list-#{SecureRandom.hex(4)}",
+        id: @id,
         class: "pk-command-list",
         role: "listbox",
         data: { phlex_kit__command_target: "list" }

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

@@ -23,12 +23,37 @@ export default class extends Controller {
       this.close()
     }
     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
+    // CSS keyed on the state hook would misfire after a restore).
+    this.onBeforeCache = () => {
+      if (this.contentTarget.matches(":popover-open")) this.close()
+    }
+    document.addEventListener("turbo:before-cache", this.onBeforeCache)
+    // Outstanding syncSub rAF handles — cancelled on disconnect (menubar's
+    // pattern).
+    this.subFrames = new Set()
   }
 
   disconnect() {
     document.removeEventListener("click", this.onDoc)
     document.removeEventListener("contextmenu", this.onDoc)
     document.removeEventListener("keydown", this.onKey)
+    document.removeEventListener("turbo:before-cache", this.onBeforeCache)
+    this.subFrames.forEach((id) => cancelAnimationFrame(id))
+    this.subFrames.clear()
+  }
+
+  // Mirrors the CSS-driven submenu state (:hover / :focus-within) onto the
+  // sub trigger's aria-expanded — same wiring as dropdown_menu/menubar.
+  syncSub(e) {
+    const sub = e.currentTarget
+    const id = requestAnimationFrame(() => {
+      this.subFrames.delete(id)
+      sub.querySelector(":scope > [aria-haspopup]")
+        ?.setAttribute("aria-expanded", sub.matches(":hover, :focus-within"))
+    })
+    this.subFrames.add(id)
   }
 
   open(e) {

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

@@ -5,7 +5,9 @@ module PhlexKit
   class ContextMenuSub < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu-sub" }, @attrs), &)
+      # syncSub mirrors the CSS-driven reveal state onto the sub trigger's
+      # aria-expanded (same wiring as DropdownMenuSub / MenubarSub).
+      div(**mix({ class: "pk-context-menu-sub", data: { action: "mouseenter->phlex-kit--context-menu#syncSub mouseleave->phlex-kit--context-menu#syncSub focusin->phlex-kit--context-menu#syncSub focusout->phlex-kit--context-menu#syncSub" } }, @attrs), &)
     end
   end
 end

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

@@ -9,7 +9,9 @@ module PhlexKit
         # -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" },
+        # expanded starts false and is mirrored live by the controller's
+        # syncSub (the reveal itself is pure CSS :hover/:focus-within).
+        aria: { haspopup: "menu", expanded: "false" },
         data: { phlex_kit__context_menu_target: "menuItem" }
       }, @attrs)) do
         block&.call

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

@@ -23,16 +23,6 @@
 /* "Columns" dropdown rows. */
 .pk-data-table-column-toggle { position: relative; }
 .pk-data-table-column-toggle-icon { width: 1rem; height: 1rem; margin-inline-start: .25rem; }
-.pk-data-table-column-option {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-  border-radius: calc(var(--pk-radius) - 4px);
-  padding: .375rem .5rem;
-  font-size: .875rem;
-  cursor: pointer;
-}
-.pk-data-table-column-option:hover { background: var(--pk-accent); }
 
 /* Sortable header link. */
 .pk-data-table-sort-head { color: var(--pk-text); white-space: nowrap; }