phlex_kit 0.4.0 → 0.5.0

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

@@ -1,20 +1,65 @@
-/* Co-located with checkbox.rb — UI::Checkbox. ruby_ui draws a fully custom box
-   with peer/checked Tailwind utilities; we instead let the native control render
-   and tint it with the brand token via accent-color (themes correctly on the
-   dark background, no SVG). Vanilla CSS, our own look, redesign later. Theme
-   tokens come from the global stylesheet. */
+/* Co-located with checkbox.rb — PhlexKit::Checkbox. Matched to shadcn/ui's
+   current checkbox: appearance:none custom box (size-4, 4px radius,
+   input-border, translucent input fill in dark), solid brand fill when
+   checked with a masked check glyph (currentColor-free — the mask carries
+   the shape, the fill is brand-ink), an :indeterminate minus, an extended
+   touch target (::before inset bleed, their after:-inset-x-3/-inset-y-2),
+   focus + invalid rings. Native input semantics kept — no JS. */
 .pk-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: grid;
+  place-content: center;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  border-radius: calc(var(--pk-radius) - 4px);
-  accent-color: var(--pk-brand);
+  margin: 0;
+  border: 1px solid var(--pk-input);
+  border-radius: 4px;
+  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;
+}
+/* Extended touch target. */
+.pk-checkbox::before { content: ""; position: absolute; inset: -.5rem -.75rem; }
+.pk-checkbox:checked, .pk-checkbox:indeterminate {
+  background: var(--pk-brand);
+  border-color: var(--pk-brand);
+}
+.pk-checkbox:checked::after, .pk-checkbox:indeterminate::after {
+  content: "";
+  width: .875rem;
+  height: .875rem;
+  background: var(--pk-brand-ink);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.pk-checkbox:indeterminate::after {
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 .pk-checkbox:focus-visible {
   outline: none;
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
+.pk-checkbox[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
+.pk-checkbox[aria-invalid="true"]:checked { border-color: var(--pk-brand); }
 .pk-checkbox:disabled { cursor: not-allowed; opacity: .5; }
+:root[data-theme="light"] .pk-checkbox:not(:checked):not(:indeterminate) { background: transparent; }
+:root[data-theme="light"] .pk-checkbox[aria-invalid="true"] {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-checkbox:not(:checked):not(:indeterminate) { background: transparent; }
+  :root[data-theme="system"] .pk-checkbox[aria-invalid="true"] {
+    border-color: var(--pk-red);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+  }
+}
 
 /* A checkbox paired inline with its label (ruby_ui's `flex items-center
    space-x-3` row). Used for checkbox lists like store-assignment; vertical

data/app/components/phlex_kit/collapsible/collapsible.css

@@ -1,3 +1,12 @@
-/* Co-located with collapsible.rb. Theme tokens from the global stylesheet. */
+/* Co-located with collapsible.rb. Theme tokens from the global stylesheet.
+   The controller stamps data-state="open|closed" on the root (shadcn's
+   styling hook). Give a trigger glyph .pk-collapsible-chevron to rotate it
+   when open — 180deg by default, override with --pk-collapsible-rotate
+   (file trees use 90deg on a chevron-right). Scoped to the nearest root so
+   nested collapsibles rotate independently. */
 .pk-collapsible-trigger { cursor: pointer; }
 .pk-collapsible-content { overflow-y: hidden; }
+.pk-collapsible-chevron { transition: transform .15s ease; }
+.pk-collapsible[data-state="open"] > .pk-collapsible-trigger .pk-collapsible-chevron {
+  transform: rotate(var(--pk-collapsible-rotate, 180deg));
+}

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

@@ -9,6 +9,13 @@ export default class extends Controller {
   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 } }
-  close() { if (this.hasContentTarget) { this.contentTarget.classList.add("pk-hidden"); this.openValue = false } }
+  open() {
+    if (this.hasContentTarget) { this.contentTarget.classList.remove("pk-hidden"); this.openValue = true }
+    this.element.dataset.state = "open";
+  }
+
+  close() {
+    if (this.hasContentTarget) { this.contentTarget.classList.add("pk-hidden"); this.openValue = false }
+    this.element.dataset.state = "closed";
+  }
 }

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

@@ -24,10 +24,15 @@
   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 { background: color-mix(in oklab, var(--pk-input) 30%, transparent); }
+.pk-combobox-trigger:hover { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+.pk-combobox-trigger[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
 .pk-combobox-trigger:focus-visible {
   outline: none;
-  border-color: var(--pk-brand);
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-combobox-trigger:disabled,
@@ -177,8 +182,18 @@
   cursor: text;
   transition: border-color .15s ease, box-shadow .15s ease;
 }
+.pk-combobox-input-trigger { background: color-mix(in oklab, var(--pk-input) 30%, transparent); }
+.pk-combobox-input-trigger[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
+.pk-combobox-input-trigger:has(.pk-combobox-input-trigger-field:disabled) {
+  pointer-events: none;
+  opacity: .5;
+  background: color-mix(in oklab, var(--pk-input) 80%, transparent);
+}
 .pk-combobox-input-trigger:focus-within {
-  border-color: var(--pk-brand);
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-combobox-input-trigger-field {
@@ -308,3 +323,22 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-combobox-clear-button svg { width: .875rem; height: .875rem; }
+
+:root[data-theme="light"] .pk-combobox-trigger,
+:root[data-theme="light"] .pk-combobox-input-trigger { background: transparent; }
+:root[data-theme="light"] .pk-combobox-trigger:hover { background: transparent; }
+:root[data-theme="light"] .pk-combobox-trigger[aria-invalid="true"],
+:root[data-theme="light"] .pk-combobox-input-trigger[aria-invalid="true"] {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-combobox-trigger,
+  :root[data-theme="system"] .pk-combobox-input-trigger { background: transparent; }
+  :root[data-theme="system"] .pk-combobox-trigger:hover { background: transparent; }
+  :root[data-theme="system"] .pk-combobox-trigger[aria-invalid="true"],
+  :root[data-theme="system"] .pk-combobox-input-trigger[aria-invalid="true"] {
+    border-color: var(--pk-red);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+  }
+}

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

@@ -13,8 +13,9 @@ module PhlexKit
   # 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)
+    def initialize(term: nil, auto_highlight: false, **attrs)
       @term = term
+      @auto_highlight = auto_highlight
       @attrs = attrs
     end
 
@@ -25,6 +26,7 @@ module PhlexKit
         data: {
           controller: "phlex-kit--combobox",
           phlex_kit__combobox_term_value: @term,
+          phlex_kit__combobox_auto_highlight_value: (@auto_highlight ? "true" : nil),
           action: "turbo:morph@window->phlex-kit--combobox#updateTriggerContent click@window->phlex-kit--combobox#onClickOutside"
         }
       }, @attrs), &)

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

@@ -14,7 +14,8 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static values = {
     term: String,
-    minPopoverWidth: { type: Number, default: 240 }
+    minPopoverWidth: { type: Number, default: 240 },
+    autoHighlight: { type: Boolean, default: false }
   }
 
   static targets = [
@@ -241,6 +242,13 @@ export default class extends Controller {
     if (this.hasEmptyStateTarget) {
       this.emptyStateTarget.classList.toggle("pk-hidden", resultCount !== 0)
     }
+
+    // autoHighlight: keep the first visible option marked while typing so
+    // Enter picks it immediately (their autoHighlight prop).
+    if (this.autoHighlightValue && filterTerm && resultCount > 0) {
+      this.selectedItemIndex = 0
+      this.focusSelectedInput()
+    }
   }
 
   keyDownPressed(e) {

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

@@ -9,15 +9,19 @@ module PhlexKit
   # popover's own bindings only fire for the button+search layout.
   # See combobox.rb.
   class ComboboxInputTrigger < BaseComponent
-    def initialize(placeholder: "", **attrs)
+    def initialize(placeholder: "", disabled: false, invalid: false, **attrs)
       @placeholder = placeholder
+      @disabled = disabled
+      @invalid = invalid
       @attrs = attrs
     end
 
     def view_template
+      wrapper_aria = { haspopup: "listbox", expanded: "false" }
+      wrapper_aria[:invalid] = "true" if @invalid
       div(**mix({
         class: "pk-combobox-input-trigger",
-        aria: { haspopup: "listbox", expanded: "false" },
+        aria: wrapper_aria,
         data: {
           placeholder: @placeholder,
           phlex_kit__combobox_target: "trigger",
@@ -34,6 +38,7 @@ module PhlexKit
         input(
           type: :text,
           placeholder: @placeholder,
+          disabled: @disabled,
           autocomplete: "off",
           autocorrect: "off",
           spellcheck: "false",

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

@@ -1,9 +1,16 @@
-/* Co-located with command.rb — UI::Command (+ CommandDialog overlay). ruby_ui's
-   structure kept (template cloned into <body>, custom backdrop + centered panel,
-   like the shipped sheet); fuse.js replaced with a substring filter in the
-   controller, Tailwind with vanilla CSS on the palette tokens. Geometry from
-   ruby_ui (h-10 input, p-1 groups, px-2 py-1.5 rows, divide-y list). Theme
-   tokens come from the global stylesheet. */
+/* Co-located with command.rb — PhlexKit::Command (+ CommandDialog overlay).
+   Matched to shadcn/ui's current command (nova): the palette is a padded
+   rounded-xl popover surface; the search field is a bordered PILL inside it
+   (input-wrapper > input-group) rather than a full-width divider row; groups
+   are no longer divide-y — an explicit CommandSeparator (hidden while
+   filtering) draws the line; selected rows fill with the muted surface.
+   fuse.js stays replaced by the controller's substring scorer. */
+.pk-command {
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  border-radius: .75rem;
+  padding: .25rem;
+}
 .pk-command-dialog-trigger { display: inline-block; }
 
 /* Backdrop of the cloned overlay. */
@@ -12,8 +19,8 @@
   inset: 0;
   z-index: 50;
   pointer-events: auto;
-  background: rgb(0 0 0 / .5);
-  backdrop-filter: blur(8px);
+  background: rgb(0 0 0 / .1);
+  backdrop-filter: blur(4px);
 }
 
 /* Centered palette panel. */
@@ -24,12 +31,10 @@
   transform: translate(-50%, -50%);
   z-index: 50;
   pointer-events: auto;
-  display: grid;
-  gap: 1rem;
   width: 100%;
   max-width: 32rem;
   border: 1px solid var(--pk-border);
-  border-radius: var(--pk-radius);
+  border-radius: .75rem;
   background: var(--pk-surface);
   color: var(--pk-text);
   box-shadow: 0 10px 30px rgb(0 0 0 / .35);
@@ -40,18 +45,22 @@
 .pk-command-dialog.xl { max-width: 56rem; }
 .pk-command-dialog.full { max-width: 100%; }
 
-/* Search row. */
-.pk-command-input-row {
+/* Search pill (their input-wrapper > input-group). */
+.pk-command-input-wrapper { padding: .25rem .25rem 0; }
+.pk-command-input-pill {
   display: flex;
   align-items: center;
-  padding: 0 .75rem;
-  border-bottom: 1px solid var(--pk-border);
+  gap: .5rem;
+  height: 2rem;
+  padding: 0 .5rem;
+  border: 1px solid color-mix(in oklab, var(--pk-input) 30%, transparent);
+  border-radius: var(--pk-radius);
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
 }
-.pk-command-input-icon { flex: none; width: 1rem; height: 1rem; margin-right: .375rem; }
+.pk-command-input-icon { flex: none; width: 1rem; height: 1rem; opacity: .5; }
 .pk-command-input {
   width: 100%;
-  height: 2.5rem;
-  padding: .75rem 0;
+  height: 100%;
   border: none;
   outline: none;
   background: transparent;
@@ -62,8 +71,16 @@
 .pk-command-input::placeholder { color: var(--pk-muted); }
 .pk-command-input:disabled { cursor: not-allowed; opacity: .5; }
 
-/* Groups, divided. */
-.pk-command-list > * + * { border-top: 1px solid var(--pk-border); }
+/* Scrollable results (their max-h-72, hidden scrollbar). */
+.pk-command-list {
+  max-height: 18rem;
+  overflow-y: auto;
+  scroll-padding-block: .25rem;
+  outline: none;
+  scrollbar-width: none;
+}
+.pk-command-list::-webkit-scrollbar { display: none; }
+
 .pk-command-group {
   overflow: hidden;
   padding: .25rem;
@@ -76,6 +93,12 @@
   color: var(--pk-muted);
 }
 
+.pk-command-separator {
+  height: 1px;
+  margin: 0 -.25rem;
+  background: var(--pk-border);
+}
+
 /* One result row. */
 .pk-command-item {
   position: relative;
@@ -87,18 +110,31 @@
   font-size: .875rem;
   color: var(--pk-text);
   text-decoration: none;
-  cursor: pointer;
+  cursor: default;
   user-select: none;
   outline: none;
   transition: background-color .12s ease;
 }
+.pk-command-item svg:not([width]) { width: 1rem; height: 1rem; }
 .pk-command-item:hover,
-.pk-command-item[aria-selected="true"] { background: var(--pk-accent); }
+.pk-command-item[aria-selected="true"] { background: var(--pk-surface-2); color: var(--pk-text); }
 .pk-command-item[data-disabled] { pointer-events: none; opacity: .5; }
 
+.pk-command-shortcut {
+  margin-left: auto;
+  font-size: .75rem;
+  letter-spacing: .1em;
+  color: var(--pk-muted);
+}
+.pk-command-item:hover .pk-command-shortcut,
+.pk-command-item[aria-selected="true"] .pk-command-shortcut { color: var(--pk-text); }
+
 /* Filter empty state (hidden/shown by the controller). */
 .pk-command-empty {
   padding: 1.5rem 0;
   text-align: center;
   font-size: .875rem;
 }
+@supports not (backdrop-filter: blur(1px)) {
+  .pk-command-overlay { background: rgb(0 0 0 / .5); }
+}

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

@@ -33,7 +33,7 @@ function fuzzyScore(query, value) {
 // nav, dismiss) is unchanged.
 // Connects to data-controller="phlex-kit--command"
 export default class extends Controller {
-  static targets = ["input", "group", "item", "empty"];
+  static targets = ["input", "group", "item", "empty", "separator"];
 
   connect() {
     this.selectedIndex = -1;
@@ -76,6 +76,7 @@ export default class extends Controller {
     );
 
     this.toggleVisibility(this.emptyTargets, results.length === 0);
+    this.toggleVisibility(this.separatorTargets, false);
     this.updateGroupVisibility();
   }
 
@@ -96,6 +97,7 @@ export default class extends Controller {
   resetVisibility() {
     this.toggleVisibility(this.itemTargets, true);
     this.toggleVisibility(this.groupTargets, true);
+    this.toggleVisibility(this.separatorTargets, true);
     this.toggleVisibility(this.emptyTargets, false);
   }
 

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

@@ -1,6 +1,8 @@
 module PhlexKit
   # Search field at the top of a PhlexKit::Command — filters the items as you
-  # type, arrows/enter drive selection, esc dismisses. See command.rb.
+  # type, arrows/enter drive selection, esc dismisses. Renders as shadcn's
+  # current bordered pill inside the padded palette (input-wrapper >
+  # input-group). See command.rb.
   class CommandInput < BaseComponent
     def initialize(placeholder: "Type a command or search...", **attrs)
       @placeholder = placeholder
@@ -8,30 +10,32 @@ module PhlexKit
     end
 
     def view_template
-      div(class: "pk-command-input-row") do
-        search_icon
-        input(**mix({
-          type: :text,
-          class: "pk-command-input",
-          placeholder: @placeholder,
-          autocomplete: "off",
-          autocorrect: "off",
-          spellcheck: "false",
-          autofocus: true,
-          role: "combobox",
-          value: "",
-          aria: { autocomplete: "list", expanded: "true" },
-          data: {
-            phlex_kit__command_target: "input",
-            action: [
-              "input->phlex-kit--command#filter",
-              "keydown.down->phlex-kit--command#handleKeydown",
-              "keydown.up->phlex-kit--command#handleKeydown",
-              "keydown.enter->phlex-kit--command#handleKeydown",
-              "keydown.esc->phlex-kit--command#dismiss"
-            ].join(" ")
-          }
-        }, @attrs))
+      div(class: "pk-command-input-wrapper") do
+        div(class: "pk-command-input-pill") do
+          search_icon
+          input(**mix({
+            type: :text,
+            class: "pk-command-input",
+            placeholder: @placeholder,
+            autocomplete: "off",
+            autocorrect: "off",
+            spellcheck: "false",
+            autofocus: true,
+            role: "combobox",
+            value: "",
+            aria: { autocomplete: "list", expanded: "true" },
+            data: {
+              phlex_kit__command_target: "input",
+              action: [
+                "input->phlex-kit--command#filter",
+                "keydown.down->phlex-kit--command#handleKeydown",
+                "keydown.up->phlex-kit--command#handleKeydown",
+                "keydown.enter->phlex-kit--command#handleKeydown",
+                "keydown.esc->phlex-kit--command#dismiss"
+              ].join(" ")
+            }
+          }, @attrs))
+        end
       end
     end
 

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

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Hairline between CommandGroups, ported from shadcn/ui's CommandSeparator.
+  # Hidden while a filter query is active (like cmdk). See command.rb.
+  class CommandSeparator < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-command-separator",
+        role: "separator",
+        aria: { hidden: true },
+        data: { phlex_kit__command_target: "separator" }
+      }, @attrs))
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Right-aligned keyboard hint on a CommandItem, ported from shadcn/ui's
+  # CommandShortcut. See command.rb.
+  class CommandShortcut < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-command-shortcut" }, @attrs), &block)
+    end
+  end
+end

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

@@ -1,19 +1,91 @@
-/* Co-located with context_menu.rb. CSS-positioned at the cursor. Tokens global. */
+/* Co-located with context_menu.rb. CSS-positioned at the cursor. Matches the
+   dropdown-menu grammar (shadcn's context menu shares the same part set):
+   gap-based rows, destructive variant, hidden-input checkbox/radio rows with
+   :has() indicators, pure-CSS hover submenus. Tokens global. */
 .pk-context-menu { position: relative; }
 .pk-context-menu-content {
-  position: absolute; z-index: 50; min-width: 8rem; overflow: hidden;
+  position: absolute; z-index: 50; min-width: 8rem; overflow: visible;
   border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
   color: var(--pk-text); padding: .25rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
 }
 .pk-context-menu-item {
-  position: relative; display: flex; cursor: pointer; user-select: none; align-items: center;
-  border-radius: .125rem; padding: .375rem .5rem .375rem 2rem; font-size: .875rem;
-  color: inherit; text-decoration: none; outline: none;
+  position: relative; display: flex; align-items: center; gap: .5rem;
+  width: 100%; cursor: pointer; user-select: none;
+  border-radius: calc(var(--pk-radius) - 4px); padding: .375rem .5rem; font-size: .875rem;
+  color: var(--pk-text); text-decoration: none; outline: none;
 }
+.pk-context-menu-item > svg { flex: none; width: 1rem; height: 1rem; color: var(--pk-muted); }
 .pk-context-menu-item:hover, .pk-context-menu-item:focus { background: var(--pk-accent); color: var(--pk-text); }
 .pk-context-menu-item[data-disabled="true"] { pointer-events: none; opacity: .5; }
-.pk-context-menu-check { position: absolute; left: .5rem; display: inline-flex; height: .875rem; width: .875rem; align-items: center; justify-content: center; }
+.pk-context-menu-item.inset { padding-left: 2rem; }
+.pk-context-menu-check {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: none; width: 1rem; height: 1rem;
+}
+.pk-context-menu-check svg { width: .875rem; height: .875rem; }
 .pk-context-menu-shortcut { margin-left: auto; font-size: .75rem; letter-spacing: .1em; color: var(--pk-muted); }
 .pk-context-menu-label { padding: .375rem .5rem; font-size: .875rem; font-weight: 600; color: var(--pk-text); }
 .pk-context-menu-label.inset { padding-left: 2rem; }
 .pk-context-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }
+.pk-context-menu-group { display: contents; }
+
+/* Destructive rows (irreversible actions). */
+.pk-context-menu-item.destructive { color: var(--pk-red); }
+.pk-context-menu-item.destructive > svg { color: var(--pk-red); }
+.pk-context-menu-item.destructive:hover,
+.pk-context-menu-item.destructive:focus {
+  background: color-mix(in oklab, var(--pk-red) 12%, transparent);
+  color: var(--pk-red);
+}
+
+/* Checkbox / radio rows: real (hidden) inputs; indicator shows via :has. */
+.pk-context-menu-item-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.pk-context-menu-checkbox-item,
+.pk-context-menu-radio-item { position: relative; }
+.pk-context-menu-item-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  visibility: hidden;
+}
+.pk-context-menu-item-indicator svg { width: .875rem; height: .875rem; }
+.pk-context-menu-radio-item .pk-context-menu-item-indicator svg { width: .5rem; height: .5rem; }
+.pk-context-menu-item:has(.pk-context-menu-item-input:checked) .pk-context-menu-item-indicator { visibility: visible; }
+.pk-context-menu-item:has(.pk-context-menu-item-input:focus-visible) {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+
+/* Submenu: trigger row + side panel, revealed on hover/focus — pure CSS. */
+.pk-context-menu-sub { position: relative; }
+.pk-context-menu-sub-chevron { margin-left: auto; width: 1rem; height: 1rem; }
+.pk-context-menu-sub-content {
+  position: absolute;
+  top: -0.25rem;
+  left: 100%;
+  z-index: 60;
+  min-width: 10rem;
+  padding-left: .25rem; /* hover bridge over the gap */
+  display: none;
+}
+.pk-context-menu-sub-viewport {
+  min-width: 10rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  border: 1px solid var(--pk-border);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding: .25rem;
+  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
+}
+.pk-context-menu-sub:hover > .pk-context-menu-sub-content,
+.pk-context-menu-sub:focus-within > .pk-context-menu-sub-content { display: block; }
+.pk-context-menu-sub:hover > .pk-context-menu-sub-trigger,
+.pk-context-menu-sub:focus-within > .pk-context-menu-sub-trigger { background: var(--pk-accent); }

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

@@ -0,0 +1,27 @@
+module PhlexKit
+  # Toggleable row, mirroring shadcn/ui's ContextMenuCheckboxItem: a <label>
+  # around a real (hidden) checkbox — clicking toggles it natively and the ✓
+  # shows via CSS, without closing the menu (matching Radix). Pass `name:`/
+  # `value:` to submit the state with a form. See context_menu.rb.
+  class ContextMenuCheckboxItem < BaseComponent
+    def initialize(checked: false, name: nil, value: "1", **attrs)
+      @checked = checked
+      @name = name
+      @value = value
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({
+        class: "pk-context-menu-item pk-context-menu-checkbox-item",
+        role: "menuitemcheckbox"
+      }, @attrs)) do
+        input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do
+          render Icon.new(:check, size: nil)
+        end
+        yield if block
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Grouping wrapper for related rows (with an optional leading
+  # ContextMenuLabel). Mirrors shadcn/ui's ContextMenuGroup. See context_menu.rb.
+  class ContextMenuGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-context-menu-group", role: "group" }, @attrs), &)
+    end
+  end
+end