RubyGems - phlex_kit - Versions diffs - 0.8.0 → 0.9.0 - Mend

phlex_kit 0.8.0 → 0.9.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 (148) hide show

data/app/components/phlex_kit/chart/chart_controller.js CHANGED Viewed

@@ -59,8 +59,12 @@ export default class extends Controller {
   defaultThemeColor(index) {
     const color = this.seriesColor(index)
     const translucentFill = ["line", "radar"].includes(this.optionsValue.type)
+    // color-mix, not hex + "33": the token may be any CSS color — the shipped
+    // zinc/neutral themes use oklch(...), and appending an alpha suffix to
+    // those produced invalid colors (fills silently broke).
+    const translucent = `color-mix(in oklab, ${color} 20%, transparent)`
     return {
-      backgroundColor: this.isCircular() ? undefined : (translucentFill ? color + "33" : color),
+      backgroundColor: this.isCircular() ? undefined : (translucentFill ? translucent : color),
       hoverBackgroundColor: color,
       borderColor: color,
       borderWidth: 2,
@@ -76,15 +80,22 @@ export default class extends Controller {
   setDefaultColorsForChart() {
     const Chart = this.chartLibrary()
-    Chart.defaults.color = this.getThemeColor("pk-muted") // font color
-    Chart.defaults.borderColor = this.getThemeColor("pk-border") // border color
-    Chart.defaults.backgroundColor = this.getThemeColor("pk-bg") // background color
+    // One computed-style resolve for all nine tokens (this runs on every
+    // connect; assigning identical values to Chart.defaults is free — charts
+    // read defaults at construction — so the style resolves are the only cost
+    // worth trimming).
+    const styles = getComputedStyle(document.documentElement)
+    const token = (name) => styles.getPropertyValue(`--${name}`).trim()
+    Chart.defaults.color = token("pk-muted") // font color
+    Chart.defaults.borderColor = token("pk-border") // border color
+    Chart.defaults.backgroundColor = token("pk-bg") // background color
     // tooltip colors
-    Chart.defaults.plugins.tooltip.backgroundColor = this.getThemeColor("pk-surface")
-    Chart.defaults.plugins.tooltip.borderColor = this.getThemeColor("pk-border")
-    Chart.defaults.plugins.tooltip.titleColor = this.getThemeColor("pk-text")
-    Chart.defaults.plugins.tooltip.bodyColor = this.getThemeColor("pk-muted")
+    Chart.defaults.plugins.tooltip.backgroundColor = token("pk-surface")
+    Chart.defaults.plugins.tooltip.borderColor = token("pk-border")
+    Chart.defaults.plugins.tooltip.titleColor = token("pk-text")
+    Chart.defaults.plugins.tooltip.bodyColor = token("pk-muted")
     Chart.defaults.plugins.tooltip.borderWidth = 1
     // legend
@@ -95,7 +106,7 @@ export default class extends Controller {
     Chart.defaults.plugins.legend.labels.borderRadius = 2
     // shadcn look: hairline grid, no axis borders, muted ticks
-    Chart.defaults.scale.grid = { ...Chart.defaults.scale.grid, color: this.getThemeColor("pk-border"), drawTicks: false }
+    Chart.defaults.scale.grid = { ...Chart.defaults.scale.grid, color: token("pk-border"), drawTicks: false }
     Chart.defaults.scale.border = { ...Chart.defaults.scale.border, display: false }
   }
@@ -104,14 +115,30 @@ export default class extends Controller {
     this.initChart()
   }
-  // The kit themes via <html data-theme="...">, not a class — watch that.
+  // The kit themes via <html data-theme="...">, not a class — but a class can
+  // re-theme too (.pk-dark, custom theme classes), so watch both. ANY root
+  // class mutation fires the observer though, so only rebuild when the
+  // resolved token values actually changed — rebuilding every chart on an
+  // unrelated class flip is the expensive path.
   initThemeObserver() {
+    this._themeKey = this.currentThemeKey()
     this.themeObserver = new MutationObserver(() => {
+      const key = this.currentThemeKey()
+      if (key === this._themeKey) return
+      this._themeKey = key
       this.refreshChart()
     })
     this.themeObserver.observe(document.documentElement, { attributeFilter: ["data-theme", "class"] })
   }
+  // Cheap fingerprint of the resolved theme: two tokens that differ between
+  // every light/dark pair. One style resolve per mutation vs a full chart
+  // rebuild.
+  currentThemeKey() {
+    const styles = getComputedStyle(document.documentElement)
+    return `${styles.getPropertyValue("--pk-bg")}|${styles.getPropertyValue("--pk-text")}`
+  }
   mergeOptionsWithDefaults() {
     return {
       ...this.optionsValue,

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

@@ -16,7 +16,8 @@
   height: 1rem;
   margin: 0;
   border: 1px solid var(--pk-input);
-  border-radius: 4px;
+  /* Tracks the radius token — 4px at the default --pk-radius (0.625rem). */
+  border-radius: calc(var(--pk-radius) - 6px);
   background: color-mix(in oklab, var(--pk-input) 30%, transparent);
   cursor: pointer;
   transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;

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

@@ -4,5 +4,5 @@
 .pk-clipboard-popover { position: absolute; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; }
 .pk-clipboard-popover-inner {
   border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
-  color: var(--pk-text); padding: .125rem .5rem; font-size: .875rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3);
+  color: var(--pk-text); padding: .125rem .5rem; font-size: .875rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent);
 }

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

@@ -5,6 +5,13 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["trigger", "source", "successPopover", "errorPopover"]
+  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)
+    this.hideAll()
+  }
   copy() {
     const el = this.sourceTarget.children[0]
     if (!el) { this.show(this.errorPopoverTarget); return }

data/app/components/phlex_kit/clipboard/clipboard_popover.rb CHANGED Viewed

@@ -6,7 +6,9 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&block)
-      div(class: "pk-clipboard-popover pk-hidden", data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
+      # role="status": the shown/hidden confirmation is a live region, so
+      # screen readers announce "Copied!" instead of a silent visual flash.
+      div(class: "pk-clipboard-popover pk-hidden", role: "status", data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
         div(**mix({ class: "pk-clipboard-popover-inner" }, @attrs), &block)
       end
     end

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

@@ -9,7 +9,10 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&block)
-      div(**mix({ class: "pk-codeblock", data: { syntax: @syntax } }, @attrs)) do
+      # 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
         pre do
           if block
             code(&block)

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

@@ -1,8 +1,21 @@
 module PhlexKit
+  # Collapsed region of a Collapsible. Pass `open:` matching the parent
+  # Collapsible's so a closed region is hidden before JS (no flash-open, and
+  # no stuck-open region without JS); the controller toggles `.pk-hidden`
+  # from there. The default id lets the trigger's aria-controls point here.
   class CollapsibleContent < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    def initialize(open: false, id: nil, **attrs)
+      @open = open
+      @id = id || "pk-collapsible-content-#{SecureRandom.hex(4)}"
+      @attrs = attrs
+    end
     def view_template(&)
-      div(**mix({ class: "pk-collapsible-content", data: { phlex_kit__collapsible_target: "content" } }, @attrs), &)
+      div(**mix({
+        class: @open ? "pk-collapsible-content" : "pk-collapsible-content pk-hidden",
+        id: @id,
+        data: { phlex_kit__collapsible_target: "content" }
+      }, @attrs), &)
     end
   end
 end

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

@@ -2,20 +2,29 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--collapsible"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["trigger", "content"]
   static values = { open: { type: Boolean, default: false } }
-  connect() { this.openValue ? this.open() : this.close() }
+  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)
+    }
+    this.openValue ? this.open() : this.close()
+  }
   toggle() { this.openValue = !this.openValue }
   openValueChanged(isOpen) { isOpen ? this.open() : this.close() }
   open() {
     if (this.hasContentTarget) { this.contentTarget.classList.remove("pk-hidden"); this.openValue = true }
+    if (this.hasTriggerTarget) this.triggerTarget.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")
     this.element.dataset.state = "closed";
   }
 }

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

@@ -1,8 +1,23 @@
 module PhlexKit
+  # Toggle for a Collapsible. Renders a plain wrapper carrying the click
+  # action — it deliberately has no role of its own, so nest a real focusable
+  # 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().
   class CollapsibleTrigger < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
     def view_template(&)
-      div(**mix({ class: "pk-collapsible-trigger", data: { action: "click->phlex-kit--collapsible#toggle" } }, @attrs), &)
+      div(**mix({
+        class: "pk-collapsible-trigger",
+        aria_expanded: @open ? "true" : "false",
+        data: { phlex_kit__collapsible_target: "trigger", action: "click->phlex-kit--collapsible#toggle" }
+      }, @attrs), &)
     end
   end
 end

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

@@ -41,7 +41,7 @@
 .pk-combobox-trigger:disabled,
 .pk-combobox-trigger[aria-disabled="true"] { pointer-events: none; opacity: .5; }
 .pk-combobox-trigger-content { overflow: hidden; text-overflow: ellipsis; }
-.pk-combobox-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-left: .5rem; opacity: .5; }
+.pk-combobox-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-inline-start: .5rem; opacity: .5; }
 /* Dropdown panel — anchored below the combobox, flips above at the viewport
    bottom. Width: trigger width with a 15rem floor (was JS
@@ -58,7 +58,7 @@
   border-radius: var(--pk-radius);
   background: var(--pk-surface);
   color: var(--pk-text);
-  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);
 }
 /* Search row. */
@@ -69,7 +69,7 @@
   border-bottom: 1px solid var(--pk-border);
   color: var(--pk-muted);
 }
-.pk-combobox-search-icon { flex: none; width: 1rem; height: 1rem; margin-right: .5rem; opacity: .5; }
+.pk-combobox-search-icon { flex: none; width: 1rem; height: 1rem; margin-inline-end: .5rem; opacity: .5; }
 .pk-combobox-search-input {
   width: 100%;
   height: 2rem;
@@ -95,8 +95,10 @@
   color: var(--pk-text);
 }
-/* Labelled group — the label renders from the `label` attribute, and the group
-   hides itself (pure CSS) when filtering leaves no visible item inside. */
+/* Labelled group — the label renders from the `data-label` attribute (the
+   invalid bare `label` attribute was dropped; aria-label carries it for AT),
+   and the group hides itself (pure CSS) when filtering leaves no visible item
+   inside. */
 .pk-combobox-group { display: none; }
 .pk-combobox-group:has(label:not(.pk-hidden)) {
   display: flex;
@@ -106,7 +108,7 @@
   border-bottom: 1px solid var(--pk-border);
 }
 .pk-combobox-group::before {
-  content: attr(label);
+  content: attr(data-label);
   padding: .375rem .5rem;
   font-size: .75rem;
   font-weight: 500;
@@ -159,7 +161,7 @@
 /* Trailing ✓, visible while the row's input is checked. */
 .pk-combobox-item-indicator {
-  margin-left: auto;
+  margin-inline-start: auto;
   width: 1rem;
   height: 1rem;
   flex: none;
@@ -314,7 +316,7 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  margin-left: auto;
+  margin-inline-start: auto;
   border: 0;
   border-radius: .125rem;
   padding: 0;

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

@@ -37,23 +37,37 @@ export default class extends Controller {
   selectedItemIndex = null
+  initialize() {
+    // Stimulus fires [target]Connected before connect(): anything
+    // itemTargetConnected uses must be initialized here.
+    this.itemIdCounter = 0
+    this.refocusing = false
+  }
   connect() {
     this.generateItemIds()
     this.updateTriggerContent()
   }
-  // ARIA plumbing: every option gets an id derived from the listbox id so the
-  // combobox element can point aria-activedescendant at the keyboard highlight,
-  // and aria-controls is wired to the listbox (mirrors select_controller.js).
+  // ARIA plumbing: aria-controls is wired to the listbox (mirrors
+  // select_controller.js); the per-option ids come from itemTargetConnected.
   generateItemIds() {
+    this.ariaExpandedElements().forEach((el) => el.setAttribute("aria-controls", this.listId()))
+  }
+  listId() {
     const list = this.hasListTarget ? this.listTarget : (this.hasPopoverTarget ? this.popoverTarget : this.element)
     if (!list.id) list.id = `pk-combobox-list-${Math.random().toString(36).slice(2, 10)}`
+    return list.id
+  }
-    this.itemTargets.forEach((item, index) => {
-      if (!item.id) item.id = `${list.id}-${index}`
-    })
-    this.ariaExpandedElements().forEach((el) => el.setAttribute("aria-controls", list.id))
+  // Every option gets an id derived from the listbox id so the combobox
+  // element can point aria-activedescendant at the keyboard highlight. A
+  // target callback (not a connect() loop) so options added after connect —
+  // e.g. rendered in by the host — get ids too. Counter-based, so a removed
+  // option's id is never reissued to a later arrival.
+  itemTargetConnected(item) {
+    if (!item.id) item.id = `${this.listId()}-${this.itemIdCounter++}`
   }
   // The elements carrying the open/closed combobox state: the trigger button
@@ -120,7 +134,13 @@ export default class extends Controller {
   toggleAllItems() {
     const isChecked = this.toggleAllTarget.checked
-    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.inputTargets.forEach(input => {
+      if (input.checked === isChecked) return
+      input.checked = isChecked
+      // Programmatic .checked flips fire no event — host listeners and the
+      // form-field validation must still hear select-all (uncheck() does this).
+      input.dispatchEvent(new Event("change", { bubbles: true }))
+    })
     this.updateTriggerContent()
   }
@@ -207,7 +227,11 @@ export default class extends Controller {
       e.preventDefault()
       e.stopPropagation() // the button sits inside the trigger's click-to-open area
     }
-    this.inputTargets.forEach(input => input.checked = false)
+    this.inputTargets.forEach(input => {
+      if (!input.checked) return
+      input.checked = false
+      input.dispatchEvent(new Event("change", { bubbles: true })) // see toggleAllItems
+    })
     if (this.hasToggleAllTarget) this.toggleAllTarget.checked = false
     this.updateTriggerContent()
   }
@@ -223,6 +247,14 @@ export default class extends Controller {
   }
   openPopover(event) {
+    // The remove-× on a chip and the clear-all button live inside the badge
+    // trigger, whose focusin (and click) actions open the popover — clicking
+    // them must not reopen it (stopPropagation covers click but focusin still
+    // fires when the button takes focus).
+    if (event?.target?.closest?.(".pk-combobox-badge-remove, .pk-combobox-clear-button")) return
+    // closePopover's focus restore fires the input/badge wrapper's
+    // focusin->openPopover action synchronously — don't bounce straight back open.
+    if (this.refocusing) return
     if (event) event.preventDefault()
     if (this.isOpen()) return
@@ -242,12 +274,31 @@ export default class extends Controller {
   }
   closePopover() {
+    // 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
+    // page (onClickOutside) must not have its focus stolen.
+    const focusWasInside = this.hasPopoverTarget && this.popoverTarget.contains(document.activeElement)
     this.setExpanded(false)
     // 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()
     this.updateTriggerContent() // reflect the selection into an input trigger
+    if (focusWasInside) {
+      const field = this.filterField()
+      // Input/badge layouts: back to the filter field (it lives outside the
+      // popover). Button layout: back to the trigger button (its search input
+      // is inside the popover, now hidden).
+      const anchor = (field && !this.popoverTarget.contains(field)) ? field : (this.hasTriggerTarget ? this.triggerTarget : null)
+      // focus() dispatches focusin synchronously; the flag stops the
+      // wrapper's focusin->openPopover action from reopening the panel.
+      this.refocusing = true
+      anchor?.focus()
+      this.refocusing = false
+    }
   }
   onClickOutside(event) {
@@ -267,7 +318,9 @@ export default class extends Controller {
   }
   filterItems(e) {
-    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+    // Escape's keyup arrives after keydown.esc already closed the popover —
+    // re-running the filter then would wipe the highlight state for nothing.
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter", "Escape"].includes(e.key)) {
       return
     }
@@ -287,6 +340,9 @@ export default class extends Controller {
     this.selectedItemIndex = null
     this.clearActiveDescendant()
+    // Also drop the highlight itself: a filtered-out option that kept
+    // aria-current="true" stayed the Enter target while invisible.
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
     this.inputTargets.forEach((input) => {
       const text = this.inputContent(input).toLowerCase()

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

@@ -1,14 +1,22 @@
 module PhlexKit
-  # Labelled option group. Pass `label:` as a plain attribute — CSS renders it via
-  # ::before content(attr(label)), and the group auto-hides (pure CSS :has) when
-  # filtering leaves it with no visible items. See combobox.rb.
+  # Labelled option group. Pass `label:` — it renders as aria-label (a bare
+  # `label` attribute is invalid on <div> and silent to AT) plus data-label,
+  # which CSS renders via ::before content(attr(data-label)). The group
+  # auto-hides (pure CSS :has) when filtering leaves it with no visible items.
+  # See combobox.rb.
   class ComboboxListGroup < BaseComponent
-    def initialize(**attrs)
+    def initialize(label: nil, **attrs)
+      @label = label
       @attrs = attrs
     end
     def view_template(&)
-      div(**mix({ class: "pk-combobox-group", role: "group" }, @attrs), &)
+      div(**mix({
+        class: "pk-combobox-group",
+        role: "group",
+        aria: { label: @label },
+        data: { label: @label }
+      }, @attrs), &)
     end
   end
 end

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

@@ -19,7 +19,7 @@
   inset: 0;
   z-index: 50;
   pointer-events: auto;
-  background: rgb(0 0 0 / .1);
+  background: color-mix(in srgb, var(--pk-overlay) 10%, transparent);
   backdrop-filter: blur(4px);
 }
@@ -37,7 +37,7 @@
   border-radius: .75rem;
   background: var(--pk-surface);
   color: var(--pk-text);
-  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-command-dialog.xs { max-width: 24rem; }
 .pk-command-dialog.sm { max-width: 28rem; }
@@ -121,7 +121,7 @@
 .pk-command-item[data-disabled] { pointer-events: none; opacity: .5; }
 .pk-command-shortcut {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: .75rem;
   letter-spacing: .1em;
   color: var(--pk-muted);
@@ -136,5 +136,5 @@
   font-size: .875rem;
 }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-command-overlay { background: rgb(0 0 0 / .5); }
+  .pk-command-overlay { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }

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

@@ -47,11 +47,19 @@ export default class extends Controller {
     }
     this.generateItemIds();
-    this.inputTarget.focus();
+    // Only the cloned dialog overlay grabs focus on connect — an inline
+    // palette connecting at page load must not steal it.
+    if (this.isDialogClone()) this.inputTarget.focus();
     this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
   }
+  // The command-dialog controller clones its <template> content into <body>;
+  // the clone's wrapper carries this marker (CommandDialogContent renders it).
+  isDialogClone() {
+    return this.element.hasAttribute("data-phlex-kit--command-dialog-instance");
+  }
   // ARIA plumbing: every result gets an id derived from the listbox id so the
   // input can point aria-activedescendant at the keyboard highlight, and
   // aria-controls is wired to the listbox (mirrors select_controller.js).
@@ -67,15 +75,37 @@ export default class extends Controller {
   }
   dismiss() {
-    // allow scroll on body
-    document.body.style.removeProperty("overflow");
-    const previous = this.previouslyFocused;
-    // remove the element
-    this.element.remove();
-    // restore focus to wherever it was before the palette opened
-    if (previous instanceof HTMLElement && document.contains(previous)) {
-      previous.focus();
+    // Cloned dialog overlay: tear the clone down and hand focus back.
+    if (this.isDialogClone()) {
+      // allow scroll on body
+      document.body.style.removeProperty("overflow");
+      const previous = this.previouslyFocused;
+      // remove the element
+      this.element.remove();
+      // restore focus to wherever it was before the palette opened
+      if (previous instanceof HTMLElement && document.contains(previous)) {
+        previous.focus();
+      }
+      return;
     }
+    // Inline palette: removing the element would delete it permanently.
+    // Reset the query instead and let the host react via the dispatched
+    // phlex-kit--command:dismiss event.
+    if (this.hasInputTarget && this.inputTarget.value !== "") {
+      this.inputTarget.value = "";
+      this.deselectAll();
+      this.resetVisibility();
+      this.announceResultCount(null);
+    }
+    this.dispatch("dismiss");
+  }
+  // Guards the items' default href="#": without it an Enter-synthesized
+  // click() or a mouse click scrolls to top and appends # to the URL
+  // (mirrors dropdown_menu_controller's close() guard).
+  onItemClick(event) {
+    if (event?.target?.closest?.('a[href="#"]')) event.preventDefault();
   }
   // Focus trap for the cloned dialog overlay: Tab / Shift+Tab cycle among the
@@ -173,16 +203,25 @@ export default class extends Controller {
   // Upstream builds a Fuse index here; this keeps the same search() shape —
   // [{ item }] sorted best-match-first — using the fuzzy scorer above.
+  // Both data-value and data-text are searchable (an item's `text:` was
+  // rendered but never indexed); the better of the two scores wins.
   buildSearchIndex() {
     const items = this.itemTargets.map((el) => ({
       value: (el.dataset.value || "").toLowerCase(),
+      text: (el.dataset.text || "").toLowerCase(),
       element: el,
     }));
     return {
       search(query) {
         const q = query.toLowerCase();
         return items
-          .map((item) => ({ item, score: fuzzyScore(q, item.value) }))
+          .map((item) => {
+            const scores = [item.value, item.text]
+              .filter(Boolean)
+              .map((field) => fuzzyScore(q, field))
+              .filter((score) => score !== null);
+            return { item, score: scores.length ? Math.max(...scores) : null };
+          })
           .filter((result) => result.score !== null)
           .sort((a, b) => b.score - a.score);
       },
@@ -225,6 +264,8 @@ export default class extends Controller {
     }
     this.toggleAriaSelected(visibleItems[this.selectedIndex], true);
+    // Keep the highlight visible inside the max-height scrollable list.
+    visibleItems[this.selectedIndex].scrollIntoView({ block: "nearest" });
     // Focus stays in the input; the highlighted option is exposed via
     // aria-activedescendant (result ids come from generateItemIds).

data/app/components/phlex_kit/command/command_dialog.rb CHANGED Viewed

@@ -1,7 +1,9 @@
 module PhlexKit
   # Wrapper wiring a CommandDialogTrigger to its CommandDialogContent. The
-  # outlet selector finds the live palette instance (if already open) so a
-  # second trigger press just refocuses the input. See command.rb.
+  # controller tracks its own live clone (sheet pattern) so a second trigger
+  # press just refocuses the input — per instance, unlike the old
+  # document-scoped outlet selector, which let one dialog adopt another's
+  # open palette. See command.rb.
   class CommandDialog < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
@@ -9,10 +11,7 @@ module PhlexKit
     def view_template(&)
       div(**mix({
-        data: {
-          controller: "phlex-kit--command-dialog",
-          phlex_kit__command_dialog_phlex_kit__command_outlet: "[data-phlex-kit--command-dialog-instance]"
-        }
+        data: { controller: "phlex-kit--command-dialog" }
       }, @attrs), &)
     end
   end