phlex_kit 0.2.0

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

@@ -0,0 +1,310 @@
+/* Co-located with combobox.rb — UI::Combobox. ruby_ui's structure + Stimulus
+   kept; the @floating-ui/native-popover positioning replaced with plain CSS
+   (panel below the trigger), and Tailwind with vanilla CSS on the palette
+   tokens. Geometry from ruby_ui (h-9 trigger, rounded-lg panel, p-1 list,
+   px-2 py-1 label rows, group labels via ::before content(attr(label))).
+   Theme tokens come from the global stylesheet. */
+.pk-combobox { position: relative; width: 100%; }
+
+/* Closed-state trigger (mirrors .pk-select-trigger geometry). */
+.pk-combobox-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 2rem;
+  white-space: nowrap;
+  border-radius: var(--pk-radius);
+  border: 1px solid var(--pk-input);
+  background: transparent;
+  color: var(--pk-text);
+  padding: .5rem 1rem;
+  font: inherit;
+  font-size: .875rem;
+  cursor: pointer;
+  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.pk-combobox-trigger:hover { background: var(--pk-accent); }
+.pk-combobox-trigger:focus-visible {
+  outline: none;
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.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; }
+
+/* Dropdown panel — opens below the trigger (no floating-ui); the controller
+   toggles .pk-hidden and matches its width to the trigger. */
+.pk-combobox-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  margin-top: .25rem;
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+}
+
+/* Search row. */
+.pk-combobox-search {
+  display: flex;
+  align-items: center;
+  padding: 0 .75rem;
+  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-input {
+  width: 100%;
+  height: 2rem;
+  padding: .75rem 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+}
+.pk-combobox-search-input::placeholder { color: var(--pk-muted); }
+.pk-combobox-search-input:disabled { cursor: not-allowed; opacity: .5; }
+
+/* Option list. */
+.pk-combobox-list {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  padding: .25rem;
+  max-height: 18rem;
+  overflow-y: auto;
+  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. */
+.pk-combobox-group { display: none; }
+.pk-combobox-group:has(label:not(.pk-hidden)) {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  padding: .25rem 0;
+  border-bottom: 1px solid var(--pk-border);
+}
+.pk-combobox-group::before {
+  content: attr(label);
+  padding: .375rem .5rem;
+  font-size: .75rem;
+  font-weight: 500;
+  font-style: normal;
+  color: var(--pk-muted);
+}
+
+/* Option row (a <label> around the input + text + indicator). */
+.pk-combobox-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: .5rem;
+  width: 100%;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .5rem;
+  font-size: .875rem;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color .12s ease;
+}
+.pk-combobox-item:hover,
+.pk-combobox-item:has(:checked) { background: var(--pk-accent); }
+.pk-combobox-item[aria-current="true"] {
+  background: var(--pk-accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-combobox-item:has(:disabled) { opacity: .5; cursor: not-allowed; }
+.pk-combobox-item > span, .pk-combobox-item > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pk-combobox-item > svg { pointer-events: none; flex: none; width: 1rem; height: 1rem; }
+
+/* The real inputs that carry the selection. */
+.pk-combobox-checkbox, .pk-combobox-radio {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--pk-brand);
+}
+.pk-combobox-checkbox { border-radius: .125rem; }
+.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;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+
+/* Trailing ✓, visible while the row's input is checked. */
+.pk-combobox-item-indicator {
+  margin-left: auto;
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  opacity: 0;
+}
+.pk-combobox-item :checked ~ .pk-combobox-item-indicator { opacity: 1; }
+
+/* Filter empty state. */
+.pk-combobox-empty {
+  padding: 1.5rem 0;
+  text-align: center;
+  font-size: .875rem;
+}
+
+/* Input trigger — the field doubles as the filter (autocomplete style). */
+.pk-combobox-input-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 2rem;
+  border: 1px solid var(--pk-input);
+  border-radius: var(--pk-radius);
+  background: transparent;
+  padding: 0 .75rem;
+  font-size: .875rem;
+  cursor: text;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.pk-combobox-input-trigger:focus-within {
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-combobox-input-trigger-field {
+  flex: 1;
+  min-width: 2rem;
+  border: 0;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+}
+.pk-combobox-input-trigger-field::placeholder { color: var(--pk-muted); }
+.pk-combobox-input-trigger-field:disabled { cursor: not-allowed; }
+.pk-combobox-input-trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  color: var(--pk-muted);
+  transition: background-color .15s ease, color .15s ease;
+}
+.pk-combobox-input-trigger-icon:hover { background: var(--pk-accent); color: var(--pk-text); }
+.pk-combobox-input-trigger-icon svg { pointer-events: none; width: 1rem; height: 1rem; }
+
+/* Badge trigger — checked options render as removable chips; the controller
+   toggles .has-badges so the row grows past one line. */
+.pk-combobox-badge-trigger {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .25rem;
+  width: 100%;
+  height: 2rem;
+  border: 1px solid var(--pk-input);
+  border-radius: var(--pk-radius);
+  background: transparent;
+  padding: 0 .75rem;
+  font-size: .875rem;
+  cursor: text;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.pk-combobox-badge-trigger:focus-within {
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-combobox-badge-trigger.has-badges {
+  height: auto;
+  min-height: 2rem;
+  padding-top: .375rem;
+  padding-bottom: .375rem;
+}
+.pk-combobox-badge-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+}
+.pk-combobox-badge-input {
+  flex: 1;
+  min-width: 2rem;
+  border: 0;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+}
+.pk-combobox-badge-input::placeholder { color: var(--pk-muted); }
+
+/* One selected-value chip. */
+.pk-combobox-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  border: 1px solid var(--pk-border);
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: var(--pk-surface-2);
+  padding: .125rem .375rem;
+  font-size: .75rem;
+  font-weight: 500;
+  color: var(--pk-text);
+}
+.pk-combobox-badge-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: .875rem;
+  height: .875rem;
+  border: 0;
+  border-radius: .125rem;
+  padding: 0;
+  background: transparent;
+  color: var(--pk-muted);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: color .15s ease, background-color .15s ease;
+}
+.pk-combobox-badge-remove:hover {
+  color: var(--pk-text);
+  background: color-mix(in oklab, var(--pk-text) 10%, transparent);
+}
+
+/* × clearing the whole selection (hidden until something is checked). */
+.pk-combobox-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-left: auto;
+  border: 0;
+  border-radius: .125rem;
+  padding: 0;
+  background: transparent;
+  color: var(--pk-muted);
+  cursor: pointer;
+  transition: color .15s ease;
+}
+.pk-combobox-clear-button:hover { color: var(--pk-text); }
+.pk-combobox-clear-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-combobox-clear-button svg { width: .875rem; height: .875rem; }

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

@@ -0,0 +1,33 @@
+module PhlexKit
+  # Combobox (searchable multi/single select), ported from ruby_ui's
+  # RubyUI::Combobox. Selection state lives in real checkbox/radio inputs, so the
+  # value submits with the form; the trigger label, filtering, keyboard nav and
+  # 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 +
+  # 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
+  # completed here. Tailwind → vanilla `.pk-combobox*` (combobox.css).
+  class Combobox < BaseComponent
+    def initialize(term: nil, **attrs)
+      @term = term
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        role: "combobox",
+        class: "pk-combobox",
+        data: {
+          controller: "phlex-kit--combobox",
+          phlex_kit__combobox_term_value: @term,
+          action: "turbo:morph@window->phlex-kit--combobox#updateTriggerContent click@window->phlex-kit--combobox#onClickOutside"
+        }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Selected-value chip, ported from ruby_ui's RubyUI::ComboboxBadge. The
+  # controller builds chips with this class into the ComboboxBadgeTrigger's
+  # container client-side; render the component directly when server-rendering
+  # an initial selection. See combobox.rb.
+  class ComboboxBadge < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      span(**mix({ class: "pk-combobox-badge" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+module PhlexKit
+  # Multi-select trigger for PhlexKit::Combobox that shows each checked option as
+  # a removable chip: the controller renders ComboboxBadge-style chips into the
+  # badge container, backspace in the empty field removes the last one, and
+  # `clear_button: true` adds a ComboboxClearButton. Ported from ruby_ui's
+  # RubyUI::ComboboxBadgeTrigger; upstream shipped the markup without controller
+  # support, so the badge rendering / backspace-removal / clear-all behaviour is
+  # PhlexKit's completion of it. Keyboard actions live here because focus stays
+  # in this field (see ComboboxInputTrigger). See combobox.rb.
+  class ComboboxBadgeTrigger < BaseComponent
+    def initialize(placeholder: "", clear_button: false, **attrs)
+      @placeholder = placeholder
+      @clear_button = clear_button
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-combobox-badge-trigger",
+        aria: { haspopup: "listbox", expanded: "false" },
+        data: {
+          placeholder: @placeholder,
+          phlex_kit__combobox_target: "trigger",
+          action: [
+            "click->phlex-kit--combobox#openPopover",
+            "focusin->phlex-kit--combobox#openPopover",
+            "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"
+          ].join(" ")
+        }
+      }, @attrs)) do
+        div(class: "pk-combobox-badge-container pk-hidden", data: { phlex_kit__combobox_target: "badgeContainer" })
+        input(
+          type: :text,
+          placeholder: @placeholder,
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          class: "pk-combobox-badge-input",
+          data: {
+            phlex_kit__combobox_target: "badgeInput",
+            action: [
+              "keyup->phlex-kit--combobox#filterItems",
+              "input->phlex-kit--combobox#filterItems",
+              "keydown.backspace->phlex-kit--combobox#handleBadgeInputBackspace"
+            ].join(" ")
+          }
+        )
+        render ComboboxClearButton.new if @clear_button
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+module PhlexKit
+  # Multi-select input inside a PhlexKit::ComboboxItem. A real checkbox (pass
+  # `name:`/`value:`/`checked:`), so the selection submits with the form.
+  # See combobox.rb.
+  class ComboboxCheckbox < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: :checkbox,
+        class: "pk-combobox-checkbox",
+        data: {
+          phlex_kit__combobox_target: "input",
+          action: "phlex-kit--combobox#inputChanged"
+        }
+      }, @attrs))
+    end
+  end
+end

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

@@ -0,0 +1,39 @@
+module PhlexKit
+  # × button clearing the whole combobox selection — hidden until something is
+  # checked. Ported from ruby_ui's RubyUI::ComboboxClearButton; upstream
+  # referenced a clearAll action its controller never defined, so the behaviour
+  # is PhlexKit's completion of it. See combobox.rb.
+  class ComboboxClearButton < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        class: "pk-combobox-clear-button pk-hidden",
+        aria: { label: "Clear selection" },
+        data: {
+          phlex_kit__combobox_target: "clearButton",
+          action: "phlex-kit--combobox#clearAll"
+        }
+      }, @attrs)) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+module PhlexKit
+  # "No results" placeholder — hidden until filtering empties the list.
+  # See combobox.rb.
+  class ComboboxEmptyState < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        role: "presentation",
+        class: "pk-combobox-empty pk-hidden",
+        data: { phlex_kit__combobox_target: "emptyState" }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,69 @@
+module PhlexKit
+  # Single-field trigger for PhlexKit::Combobox — the input doubles as the filter
+  # (autocomplete style): focusing or clicking opens the popover, typing
+  # filters, arrows/enter pick, and the chosen option's text becomes the field
+  # value. Ported from ruby_ui's RubyUI::ComboboxInputTrigger; upstream shipped
+  # the markup without controller support, so the behaviour (open-on-focus,
+  # keyboard nav from the field, selection reflection) is PhlexKit's completion
+  # of it. Keyboard actions live here because focus stays in this field — the
+  # popover's own bindings only fire for the button+search layout.
+  # See combobox.rb.
+  class ComboboxInputTrigger < BaseComponent
+    def initialize(placeholder: "", **attrs)
+      @placeholder = placeholder
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-combobox-input-trigger",
+        aria: { haspopup: "listbox", expanded: "false" },
+        data: {
+          placeholder: @placeholder,
+          phlex_kit__combobox_target: "trigger",
+          action: [
+            "click->phlex-kit--combobox#openPopover",
+            "focusin->phlex-kit--combobox#openPopover",
+            "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"
+          ].join(" ")
+        }
+      }, @attrs)) do
+        input(
+          type: :text,
+          placeholder: @placeholder,
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          class: "pk-combobox-input-trigger-field",
+          data: {
+            phlex_kit__combobox_target: "inputTrigger",
+            action: "keyup->phlex-kit--combobox#filterItems input->phlex-kit--combobox#filterItems"
+          }
+        )
+        chevron_icon
+      end
+    end
+
+    private
+
+    def chevron_icon
+      span(class: "pk-combobox-input-trigger-icon") do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        ) { |s| s.path(d: "m6 9 6 6 6-6") }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+module PhlexKit
+  # One option row — a <label> wrapping a ComboboxCheckbox/ComboboxRadio, the
+  # option text, and optionally a ComboboxItemIndicator. Being a label, clicking
+  # anywhere toggles the input; the controller hides it (.pk-hidden) when
+  # filtered out. See combobox.rb.
+  class ComboboxItem < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      label(**mix({
+        class: "pk-combobox-item",
+        role: "option",
+        data: { phlex_kit__combobox_target: "item" }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+module PhlexKit
+  # Trailing ✓ in a PhlexKit::ComboboxItem, visible (pure CSS) while the item's
+  # input is checked. See combobox.rb.
+  class ComboboxItemIndicator < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      svg(**mix({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-combobox-item-indicator",
+        "aria-hidden": "true"
+      }, @attrs)) do |s|
+        s.path(d: "M20 6 9 17l-5-5")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Scrollable option list in a PhlexKit::ComboboxPopover. See combobox.rb.
+  class ComboboxList < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-combobox-list", role: "listbox" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+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.
+  class ComboboxListGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-combobox-group", role: "group" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+module PhlexKit
+  # The combobox dropdown panel. Upstream uses the native Popover API +
+  # @floating-ui; here it's a CSS-positioned panel toggled with .pk-hidden (the
+  # keyboard nav actions ride on it, since focus sits in the search input
+  # inside). See combobox.rb.
+  class ComboboxPopover < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-combobox-popover pk-hidden",
+        data: {
+          phlex_kit__combobox_target: "popover",
+          action: [
+            "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",
+            "resize@window->phlex-kit--combobox#updatePopoverWidth"
+          ].join(" ")
+        }
+      }, @attrs), &)
+    end
+  end
+end