RubyGems - phlex_kit - Versions diffs - 0.9.1 → 0.10.0 - Mend

phlex_kit 0.9.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 805728288b072fe1663456e789ee106d9ca8398c53b1761255cd0167fd031677
-  data.tar.gz: 1a18b9d368989240e0f16f794ece1a7f8ca1cc9e5dd551ba38dcd002236a5f0e
+  metadata.gz: 9f20449d41b77f26b6a4272eb5f4ebd116a225af9bf2dcb6bfec5899a5b117a2
+  data.tar.gz: fd83a994ef1cc33452c19b8520934db31750babacb7508511dffb9c41b08a9dd
 SHA512:
-  metadata.gz: 5b75e4ed5be4c81705389b3e3c9573986e581d04a5a97c8834c58af9f6fdd6977f02599e1aa4708454cf19ee684fd39a76439d26ec165cd47f839aa668f99d13
-  data.tar.gz: 262df1a9e8f8ecb796844c8135b706ffc953baacdb7ac863024041eb7ac28a428dd1d0379fa9cd6779e26b0ea6069a244a7ed7b94d6f4f2c3cf72cf433f9095a
+  metadata.gz: f08a4051f646822945f9f1bf72b52cfce151509322032dccba9ec7166db4bf5a99bead12adeec4969edf0fc94df5b55dc902424322fa6a351abd18d92c04496b
+  data.tar.gz: 83b2a4ea332492c19ce059611e534fc57c79fa39e136e9bd00e2cf535fe09c791f75c0c81bc12056f2678f9a1bcf4bd18bd8246b79cd7377e0f990dbd4472c50

data/app/assets/stylesheets/phlex_kit/_tokens.css CHANGED Viewed

@@ -1,6 +1,14 @@
 /* Kit utilities used by the interactive controllers (Stimulus toggles these). */
 .pk-hidden { display: none !important; }
+/* Kit-wide screen-reader-only utility — used by many components
+   (breadcrumb, dialog, sheet, sidebar, …), so it lives here rather
+   than in any one component's stylesheet. */
+.pk-sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
 /* Shimmer — shadcn's shimmer util: a highlight band sweeping across text, for
    loading / "thinking…" states. Pure CSS, built on currentColor: the text keeps
    its own color (any color) and the highlight derives from it via relative

data/app/components/phlex_kit/alert/alert.rb CHANGED Viewed

@@ -15,7 +15,7 @@ module PhlexKit
   # shadcn ships default/destructive; success/warning are kit extras kept from
   # ruby_ui, restyled to the same text-tint grammar. `VARIANTS.fetch` fails loud.
   class Alert < BaseComponent
-    # variant => extra class appended after the base `ui-alert` (nil = neutral).
+    # variant => extra class appended after the base `pk-alert` (nil = neutral).
     VARIANTS = {
       default: nil,
       warning: "warning",

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

@@ -68,6 +68,10 @@ export default class extends Controller {
   }
   keydown(event) {
+    // Every open clone has its own document-level listener; with stacked
+    // alert dialogs (a trigger inside a panel) only the topmost clone may
+    // handle the keyboard, or one Escape would close every layer at once.
+    if (!this.#topmost()) return;
     if (event.key === "Escape") {
       event.preventDefault();
       this.dismiss();
@@ -97,6 +101,14 @@ export default class extends Controller {
     }
   }
+  // Clones are appended as direct <body> children whose direct child is the
+  // [role="alertdialog"] panel (source elements only hold a <template>, whose
+  // content never matches querySelector). The last such clone is the topmost.
+  #topmost() {
+    const clones = document.body.querySelectorAll(':scope > [data-controller~="phlex-kit--alert-dialog"] > [role="alertdialog"]');
+    return clones.length > 0 && clones[clones.length - 1].parentElement === this.element;
+  }
   #panel() {
     return this.element.querySelector('[role="alertdialog"]');
   }

data/app/components/phlex_kit/attachment/attachment.css CHANGED Viewed

@@ -142,21 +142,24 @@
 /* Scrollable, snapping row with an edge fade (horizontal scroll-fade). */
 .pk-attachment-group {
   --pk-scroll-fade-size: 2rem;
+  /* Gradient directions can't be logical — follow the inline axis by hand. */
+  --pk-scroll-fade-dir: to right;
   display: flex;
   gap: .5rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 2px; /* room for card rings */
-  mask-image: linear-gradient(to right,
+  mask-image: linear-gradient(var(--pk-scroll-fade-dir),
     transparent 0, black var(--pk-scroll-fade-size),
     black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
 }
+.pk-attachment-group:dir(rtl) { --pk-scroll-fade-dir: to left; }
 .pk-attachment-group[data-at-start] {
-  mask-image: linear-gradient(to right,
+  mask-image: linear-gradient(var(--pk-scroll-fade-dir),
     black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
 }
 .pk-attachment-group[data-at-end] {
-  mask-image: linear-gradient(to right, transparent 0, black var(--pk-scroll-fade-size));
+  mask-image: linear-gradient(var(--pk-scroll-fade-dir), transparent 0, black var(--pk-scroll-fade-size));
 }
 .pk-attachment-group[data-at-start][data-at-end] { mask-image: none; }
 .pk-attachment-group > .pk-attachment { flex: none; scroll-snap-align: start; }

data/app/components/phlex_kit/attachment/scroll_fade_controller.js CHANGED Viewed

@@ -29,8 +29,13 @@ export default class extends Controller {
   update() {
     const el = this.element
     if (this.axisValue === "x") {
-      el.toggleAttribute("data-at-start", el.scrollLeft <= 1)
-      el.toggleAttribute("data-at-end", el.scrollLeft + el.clientWidth >= el.scrollWidth - 1)
+      // Math.abs: in RTL scrollLeft runs 0..negative, so the raw value would
+      // read as permanently "at start" — abs tracks the logical inline start.
+      const scrolled = Math.abs(el.scrollLeft)
+      // <= 2, not <= 1: scroll-snap + the 2px ring padding leave the group
+      // resting at scrollLeft 2, which must still count as "at start".
+      el.toggleAttribute("data-at-start", scrolled <= 2)
+      el.toggleAttribute("data-at-end", scrolled + el.clientWidth >= el.scrollWidth - 1)
     } else {
       el.toggleAttribute("data-at-start", el.scrollTop <= 1)
       el.toggleAttribute("data-at-end", el.scrollTop + el.clientHeight >= el.scrollHeight - 1)

data/app/components/phlex_kit/avatar/avatar.css CHANGED Viewed

@@ -67,8 +67,8 @@
    modifier, glyph hidden when there's no room (shadcn's AvatarBadge). */
 .pk-avatar-badge {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   z-index: 10;
   display: inline-flex;
   align-items: center;

data/app/components/phlex_kit/breadcrumb/breadcrumb.css CHANGED Viewed

@@ -12,7 +12,3 @@
 .pk-breadcrumb-separator > svg { width: .875rem; height: .875rem; }
 .pk-breadcrumb-ellipsis { display: flex; height: 1.25rem; width: 1.25rem; align-items: center; justify-content: center; }
 .pk-breadcrumb-ellipsis > svg { width: 1rem; height: 1rem; }
-.pk-sr-only {
-  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-}

data/app/components/phlex_kit/bubble/bubble.css CHANGED Viewed

@@ -14,7 +14,7 @@
 .pk-message[data-align="end"] .pk-bubble { align-self: flex-end; }
 .pk-bubble-content {
   width: fit-content; max-width: 100%; min-width: 0; overflow: hidden;
-  overflow-wrap: break-word; border: 1px solid transparent; border-radius: .75rem;
+  overflow-wrap: break-word; border: 1px solid transparent; border-radius: calc(var(--pk-radius) + 2px);
   padding: .5rem .75rem; font-size: .875rem; line-height: 1.625;
 }
 .pk-bubble[data-align="end"] > .pk-bubble-content { align-self: flex-end; }

data/app/components/phlex_kit/bubble/bubble_content.rb CHANGED Viewed

@@ -1,8 +1,9 @@
 module PhlexKit
   class BubbleContent < BaseComponent
-    # `as:` is dispatched dynamically — whitelist the sensible text containers
-    # so it can't reach arbitrary (including private) methods.
-    AS_TAGS = %i[div p blockquote].freeze
+    # `as:` is dispatched dynamically — whitelist the documented containers
+    # (incl. the interactive button/a contract bubble.css styles) so it can't
+    # reach arbitrary (including private) methods.
+    AS_TAGS = %i[div p blockquote button a].freeze
     def initialize(as: :div, **attrs)
       @as = as.to_sym
       raise ArgumentError, "unknown BubbleContent as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})" unless AS_TAGS.include?(@as)

data/app/components/phlex_kit/button_group/button_group.css CHANGED Viewed

@@ -12,25 +12,25 @@
 /* horizontal (default) */
 .pk-button-group:not(.vertical) > :not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   border-inline-start: 0;
 }
 .pk-button-group:not(.vertical) > :not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 /* vertical */
 .pk-button-group.vertical { flex-direction: column; }
 .pk-button-group.vertical > :not(:first-child) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
 }
 .pk-button-group.vertical > :not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 /* Nested groups keep their own corners — undo the squaring the parent applied. */
@@ -45,25 +45,25 @@
    absolutely-positioned panels are untouched. */
 .pk-button-group:not(.vertical) > :not(:first-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group:not(.vertical) > :not(:first-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   border-inline-start: 0;
 }
 .pk-button-group:not(.vertical) > :not(:last-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group:not(.vertical) > :not(:last-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 .pk-button-group.vertical > :not(:first-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group.vertical > :not(:first-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
 }
 .pk-button-group.vertical > :not(:last-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group.vertical > :not(:last-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 /* .pk-select defaults to width:100%; as a group segment it hugs its trigger
    and lets siblings (the input) take the leftover flex space — shadcn's

data/app/components/phlex_kit/calendar/calendar.css CHANGED Viewed

@@ -155,6 +155,14 @@
   background: var(--pk-accent);
 }
 .pk-calendar-cell:has(> .range-cap) { background: var(--pk-accent); }
-.pk-calendar-cell:has(> .range-start.range-cap) { border-radius: var(--pk-cell-radius) 0 0 var(--pk-cell-radius); }
-.pk-calendar-cell:has(> .range-end.range-cap) { border-radius: 0 var(--pk-cell-radius) var(--pk-cell-radius) 0; }
+.pk-calendar-cell:has(> .range-start.range-cap) {
+  border-radius: 0;
+  border-start-start-radius: var(--pk-cell-radius);
+  border-end-start-radius: var(--pk-cell-radius);
+}
+.pk-calendar-cell:has(> .range-end.range-cap) {
+  border-radius: 0;
+  border-start-end-radius: var(--pk-cell-radius);
+  border-end-end-radius: var(--pk-cell-radius);
+}
 .pk-calendar-cell:has(> .range-start.range-end) { border-radius: var(--pk-cell-radius); }

data/app/components/phlex_kit/carousel/carousel.css CHANGED Viewed

@@ -16,14 +16,14 @@
   transition: transform .3s ease;
   will-change: transform;
 }
-.pk-carousel.is-horizontal .pk-carousel-track { margin-left: -1rem; }
+.pk-carousel.is-horizontal .pk-carousel-track { margin-inline-start: -1rem; }
 .pk-carousel.is-vertical .pk-carousel-track { flex-direction: column; margin-top: -1rem; }
 .pk-carousel-item {
   min-width: 0;
   flex: 0 0 100%;
 }
-.pk-carousel.is-horizontal .pk-carousel-item { padding-left: 1rem; }
+.pk-carousel.is-horizontal .pk-carousel-item { padding-inline-start: 1rem; }
 .pk-carousel.is-vertical .pk-carousel-item { padding-top: 1rem; }
 /* Edge buttons (an outline icon .pk-button; same specificity, later in the
@@ -34,8 +34,8 @@
   height: 2rem;
   border-radius: 9999px;
 }
-.pk-carousel.is-horizontal .pk-carousel-previous { left: -3rem; top: 50%; transform: translateY(-50%); }
-.pk-carousel.is-horizontal .pk-carousel-next { right: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-horizontal .pk-carousel-previous { inset-inline-start: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-horizontal .pk-carousel-next { inset-inline-end: -3rem; top: 50%; transform: translateY(-50%); }
 .pk-carousel.is-vertical .pk-carousel-previous { top: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
 .pk-carousel.is-vertical .pk-carousel-next { bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
 .pk-carousel-previous svg, .pk-carousel-next svg { width: 1rem; height: 1rem; }

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

@@ -5,17 +5,33 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["trigger", "source", "successPopover", "errorPopover"]
+  connect() {
+    // Turbo snapshots at turbo:before-cache, BEFORE disconnect — hide the
+    // flash now or a restore shows a permanently stuck "Copied!" popover.
+    document.addEventListener("turbo:before-cache", this.beforeCache)
+  }
   disconnect() {
     // Don't leave the 1.5s hide timer running into a dead/recycled element
     // (Turbo can detach and re-attach this subtree mid-flash).
+    clearTimeout(this.timer)
+    document.removeEventListener("turbo:before-cache", this.beforeCache)
+    this.hideAll()
+  }
+  beforeCache = () => {
     clearTimeout(this.timer)
     this.hideAll()
   }
   copy() {
+    // 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]
-    if (!el) { this.show(this.errorPopoverTarget); return }
-    const text = el.tagName === "INPUT" ? el.value : el.innerText
+    const text = el
+      ? (el.tagName === "INPUT" ? el.value : el.innerText)
+      : this.sourceTarget.textContent.trim()
+    if (!text) { this.show(this.errorPopoverTarget); return }
     navigator.clipboard.writeText(text)
       .then(() => this.show(this.successPopoverTarget))
       .catch(() => this.show(this.errorPopoverTarget))

data/app/components/phlex_kit/collapsible/collapsible_controller.js CHANGED Viewed

@@ -6,10 +6,19 @@ export default class extends Controller {
   static values = { open: { type: Boolean, default: false } }
   connect() {
-    // The trigger renders aria-expanded from its own `open:` kwarg but can't
-    // know the content's id at render time — wire aria-controls here.
-    if (this.hasTriggerTarget && this.hasContentTarget && this.contentTarget.id) {
-      this.triggerTarget.setAttribute("aria-controls", this.contentTarget.id)
+    // aria-expanded must live on the element AT reads state from — the
+    // focused control, not the plain wrapper div. The trigger wrapper renders
+    // aria-expanded server-side (it can't reach into its block), so resolve
+    // the nested focusable control here, relocate the state onto it, and keep
+    // toggling there. Wrapper-only triggers keep the wrapper as carrier.
+    if (this.hasTriggerTarget) {
+      this.control = this.triggerTarget.querySelector("button, [role='button'], a[href], input") || this.triggerTarget
+      if (this.control !== this.triggerTarget) this.triggerTarget.removeAttribute("aria-expanded")
+      // The trigger can't know the content's id at render time — wire
+      // aria-controls here.
+      if (this.hasContentTarget && this.contentTarget.id) {
+        this.control.setAttribute("aria-controls", this.contentTarget.id)
+      }
     }
     this.openValue ? this.open() : this.close()
   }
@@ -18,13 +27,13 @@ export default class extends Controller {
   open() {
     if (this.hasContentTarget) { this.contentTarget.classList.remove("pk-hidden"); this.openValue = true }
-    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true")
+    if (this.control) this.control.setAttribute("aria-expanded", "true")
     this.element.dataset.state = "open";
   }
   close() {
     if (this.hasContentTarget) { this.contentTarget.classList.add("pk-hidden"); this.openValue = false }
-    if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false")
+    if (this.control) this.control.setAttribute("aria-expanded", "false")
     this.element.dataset.state = "closed";
   }
 }

data/app/components/phlex_kit/collapsible/collapsible_trigger.rb CHANGED Viewed

@@ -4,8 +4,11 @@ module PhlexKit
   # control (a <button>, e.g. PhlexKit::Button) inside it for keyboard
   # operability and semantics, the same composition pattern as
   # AttachmentTrigger. Pass `open:` matching the parent Collapsible's so
-  # aria-expanded is correct before JS; the controller keeps it in sync and
-  # wires aria-controls to the content's id in connect().
+  # aria-expanded is correct before JS. The wrapper carries the server-rendered
+  # aria-expanded only because the component can't reach into its block; on
+  # connect the controller relocates it (plus aria-controls) onto the nested
+  # focusable control — AT reads state from the focused element, not the
+  # wrapper — falling back to the wrapper when no control is nested.
   class CollapsibleTrigger < BaseComponent
     def initialize(open: false, **attrs)
       @open = open

data/app/components/phlex_kit/combobox/combobox.css CHANGED Viewed

@@ -152,7 +152,7 @@
   margin: 0;
   accent-color: var(--pk-brand);
 }
-.pk-combobox-checkbox { border-radius: .125rem; }
+.pk-combobox-checkbox { border-radius: calc(var(--pk-radius) - 8px); }
 .pk-combobox-checkbox:disabled, .pk-combobox-radio:disabled { cursor: not-allowed; opacity: .5; }
 .pk-combobox-checkbox:focus-visible, .pk-combobox-radio:focus-visible {
   outline: none;
@@ -296,7 +296,7 @@
   width: .875rem;
   height: .875rem;
   border: 0;
-  border-radius: .125rem;
+  border-radius: calc(var(--pk-radius) - 8px);
   padding: 0;
   background: transparent;
   color: var(--pk-muted);
@@ -318,7 +318,7 @@
   flex: none;
   margin-inline-start: auto;
   border: 0;
-  border-radius: .125rem;
+  border-radius: calc(var(--pk-radius) - 8px);
   padding: 0;
   background: transparent;
   color: var(--pk-muted);

data/app/components/phlex_kit/combobox/combobox.rb CHANGED Viewed

@@ -5,9 +5,9 @@ module PhlexKit
   # toggle-all live in the phlex-kit--combobox controller. Like PhlexKit::Select, the
   # @floating-ui/dom + native-popover positioning is replaced with CSS (panel
   # anchored below the trigger, click-outside via window action). Compose
-  # Combobox(term:) > trigger + Popover(SearchInput + List(ListGroup >
-  # Item(Checkbox|Radio + text + ItemIndicator)) + EmptyState [+
-  # ToggleAllCheckbox]). Three trigger flavours: ComboboxTrigger (button +
+  # Combobox(term:) > trigger + Popover(SearchInput + List([Item(
+  # ToggleAllCheckbox) first +] ListGroup > Item(Checkbox|Radio + text +
+  # ItemIndicator) + EmptyState)). Three trigger flavours: ComboboxTrigger (button +
   # popover search), ComboboxInputTrigger (the field is the filter), and
   # ComboboxBadgeTrigger (multi-select chips + ComboboxClearButton) — the
   # latter two shipped unfinished in ruby_ui (no controller support) and are

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

@@ -174,6 +174,11 @@ export default class extends Controller {
     this.inputTargets.forEach((input) => {
       input.parentElement.setAttribute("aria-selected", input.checked ? "true" : "false")
     })
+    // The toggle-all row is an option too (first row inside the listbox) —
+    // keep its aria-selected in step with its checkbox.
+    if (this.hasToggleAllTarget && this.toggleAllTarget.parentElement.getAttribute("role") === "option") {
+      this.toggleAllTarget.parentElement.setAttribute("aria-selected", this.toggleAllTarget.checked ? "true" : "false")
+    }
   }
   renderBadges(checked) {
@@ -284,7 +289,7 @@ export default class extends Controller {
     // aria-activedescendant holds an element id; on close it must be removed,
     // not left pointing at a hidden option.
     this.clearActiveDescendant()
-    if (this.popoverTarget.matches(":popover-open")) this.popoverTarget.hidePopover()
+    if (this.hasPopoverTarget && this.popoverTarget.matches(":popover-open")) this.popoverTarget.hidePopover()
     this.updateTriggerContent() // reflect the selection into an input trigger
     if (focusWasInside) {
@@ -398,20 +403,23 @@ export default class extends Controller {
   }
   focusSelectedInput() {
-    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("pk-hidden"))
-    if (visibleInputs.length === 0) return
+    // Walk the option rows themselves, not the inner selection inputs: the
+    // toggle-all row is an option without an "input" target and must be
+    // arrow-reachable like any other option.
+    const visibleItems = this.itemTargets.filter(item => !item.classList.contains("pk-hidden"))
+    if (visibleItems.length === 0) return
-    this.wrapSelectedInputIndex(visibleInputs.length)
+    this.wrapSelectedInputIndex(visibleItems.length)
-    visibleInputs.forEach((input, index) => {
+    visibleItems.forEach((item, index) => {
       if (index == this.selectedItemIndex) {
-        input.parentElement.ariaCurrent = "true"
+        item.ariaCurrent = "true"
         // Focus stays in the filter field; the highlighted option is exposed
         // via aria-activedescendant (option ids come from generateItemIds).
-        this.setActiveDescendant(input.parentElement.id)
-        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+        this.setActiveDescendant(item.id)
+        item.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
       } else {
-        input.parentElement.ariaCurrent = "false"
+        item.ariaCurrent = "false"
       }
     })
   }

data/app/components/phlex_kit/combobox/combobox_search_input.rb CHANGED Viewed

@@ -26,7 +26,9 @@ module PhlexKit
           class: "pk-combobox-search-input",
           data: {
             phlex_kit__combobox_target: "searchInput",
-            action: "keyup->phlex-kit--combobox#filterItems search->phlex-kit--combobox#filterItems"
+            # `input` covers context-menu paste and IME composition, which
+            # fire no keyup/search (mirrors ComboboxInputTrigger).
+            action: "keyup->phlex-kit--combobox#filterItems input->phlex-kit--combobox#filterItems search->phlex-kit--combobox#filterItems"
           }
         }, @attrs))
       end

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

@@ -1,6 +1,8 @@
 module PhlexKit
   # "Select all" checkbox for a multi-select combobox — wrap it in a
-  # PhlexKit::ComboboxItem above the list. Hidden while a filter term is active.
+  # PhlexKit::ComboboxItem as the FIRST row inside the ComboboxList (the item
+  # carries role="option", which is only valid inside the listbox, and arrow-key
+  # nav walks the list's rows). Hidden while a filter term is active.
   # See combobox.rb.
   class ComboboxToggleAllCheckbox < BaseComponent
     def initialize(**attrs)

data/app/components/phlex_kit/command/command.css CHANGED Viewed

@@ -8,7 +8,7 @@
 .pk-command {
   background: var(--pk-surface);
   color: var(--pk-text);
-  border-radius: .75rem;
+  border-radius: calc(var(--pk-radius) + 2px);
   padding: .25rem;
 }
 .pk-command-dialog-trigger { display: inline-block; }
@@ -34,7 +34,7 @@
   width: 100%;
   max-width: 32rem;
   border: 1px solid var(--pk-border);
-  border-radius: .75rem;
+  border-radius: calc(var(--pk-radius) + 2px);
   background: var(--pk-surface);
   color: var(--pk-text);
   box-shadow: 0 10px 30px color-mix(in srgb, var(--pk-shadow-color) 35%, transparent);