phlex_kit 0.8.1 → 0.9.0

data/app/components/phlex_kit/data_table/data_table_per_page_select.rb

@@ -1,28 +1,42 @@
 module PhlexKit
   # Per-page NativeSelect in a GET form that self-submits on change (targeting
-  # the table's turbo-frame when `frame_id:` is given). See data_table.rb.
+  # the table's turbo-frame when `frame_id:` is given). Extra filter params
+  # (search/sort/direction/...) survive via `preserved_params:` hidden inputs,
+  # mirroring DataTableSearch. See data_table.rb.
   class DataTablePerPageSelect < BaseComponent
-    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], **attrs)
+    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, **attrs)
       @path = path
       @name = name
       @value = value
       @frame_id = frame_id
       @options = options
+      @preserved_params = preserved_params
       @attrs = attrs
     end
 
     def view_template
-      form_attrs = { class: "pk-data-table-per-page", action: @path, method: "get" }
-      form_attrs[:data] = { turbo_frame: @frame_id } if @frame_id
+      form_attrs = {
+        class: "pk-data-table-per-page",
+        action: @path,
+        method: "get",
+        # Reuse the search controller for its CSP-safe #submitNow action.
+        data: { controller: "phlex-kit--data-table-search" }
+      }
+      form_attrs[:data][:turbo_frame] = @frame_id if @frame_id
 
       form(**mix(form_attrs, @attrs)) do
-        render NativeSelect.new(name: @name, onchange: safe("this.form.requestSubmit()")) do
+        render NativeSelect.new(name: @name, data: { action: "change->phlex-kit--data-table-search#submitNow" }) do
           @options.each do |opt|
             option_attrs = { value: opt.to_s }
             option_attrs[:selected] = true if opt.to_s == @value.to_s
             option(**option_attrs) { plain opt.to_s }
           end
         end
+        @preserved_params.each do |k, v|
+          next if v.nil? || (v.respond_to?(:empty?) && v.empty?)
+          next if k.to_s == @name
+          input(type: :hidden, name: k.to_s, value: v.to_s)
+        end
       end
     end
   end

data/app/components/phlex_kit/data_table/data_table_search_controller.js

@@ -32,6 +32,13 @@ export default class extends Controller {
     this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
   }
 
+  // Immediate, undebounced submit — used by change-driven controls like the
+  // per-page select (CSP-safe replacement for an inline onchange handler).
+  submitNow() {
+    clearTimeout(this.timer);
+    this.element.requestSubmit();
+  }
+
   captureBeforeRender() {
     const input = this.input();
     if (!input || document.activeElement !== input) return;
@@ -62,6 +69,11 @@ export default class extends Controller {
   }
 
   key() {
-    return this.element.action || "_";
+    // The key must survive the Turbo Frame swap (the form element is replaced),
+    // so it's derived from stable markup: the form id when the caller set one,
+    // else action URL + search-input name — two same-path forms (e.g. search
+    // alongside the per-page select) must not share a focus-restore slot.
+    if (this.element.id) return `#${this.element.id}`;
+    return `${this.element.action || "_"}::${this.input()?.name ?? ""}`;
   }
 }

data/app/components/phlex_kit/date_picker/date_picker.rb

@@ -24,10 +24,13 @@ module PhlexKit
       @id = id || "date-picker-#{SecureRandom.hex(4)}"
       @name = name
       @label = label
-      @value = value || selected_date&.to_s
-      @placeholder = placeholder
       @selected_date = selected_date
       @date_format = date_format
+      # Seed the input with the same date_format the calendar controller
+      # writes — a bare `selected_date.to_s` (ISO) would mismatch the format
+      # until the first interaction.
+      @value = value || format_selected_date
+      @placeholder = placeholder
       @input_attrs = input_attrs
       @calendar_attrs = calendar_attrs
       @trigger_attrs = trigger_attrs
@@ -45,7 +48,7 @@ module PhlexKit
             end
           end
           render PopoverContent.new(**@content_attrs) do
-            render Calendar.new(input_id: "##{@id}", selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
+            render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
           end
         end
       end
@@ -53,6 +56,50 @@ module PhlexKit
 
     private
 
+    # The outlet takes a CSS selector. "#id" is only valid for CSS-identifier
+    # ids — anything else (Rails-style "user:due.date" etc) must go through a
+    # quoted attribute selector or querySelector throws.
+    def input_selector
+      return "##{@id}" if @id.match?(/\A[A-Za-z][\w-]*\z/)
+
+      %([id="#{@id.gsub(/[\\"]/) { |c| "\\#{c}" }}"])
+    end
+
+    # Mirrors the calendar controller's formatDate tokens (calendar_controller.js)
+    # so the server-rendered input matches what JS writes after a pick.
+    FORMAT_TOKENS = /yyyy|MMMM|MM|dd|HH|mm|ss|EEEE|PPPP|do/
+
+    def format_selected_date
+      return nil unless @selected_date
+
+      date = @selected_date.respond_to?(:strftime) ? @selected_date : Date.parse(@selected_date.to_s)
+      day = date.day
+      suffix = day_suffix(day)
+      day_name = Date::DAYNAMES[date.wday]
+      month_name = Date::MONTHNAMES[date.month]
+      map = {
+        "yyyy" => date.year.to_s,
+        "MMMM" => month_name,
+        "MM" => Kernel.format("%02d", date.month),
+        "dd" => Kernel.format("%02d", day),
+        "HH" => Kernel.format("%02d", date.respond_to?(:hour) ? date.hour : 0),
+        "mm" => Kernel.format("%02d", date.respond_to?(:min) ? date.min : 0),
+        "ss" => Kernel.format("%02d", date.respond_to?(:sec) ? date.sec : 0),
+        "EEEE" => day_name,
+        "do" => "#{day}#{suffix}",
+        "PPPP" => "#{day_name}, #{month_name} #{day}#{suffix}, #{date.year}"
+      }
+      @date_format.gsub(FORMAT_TOKENS) { |token| map[token] }
+    rescue Date::Error
+      @selected_date.to_s
+    end
+
+    def day_suffix(day)
+      return "th" if day > 3 && day < 21
+
+      { 1 => "st", 2 => "nd", 3 => "rd" }.fetch(day % 10, "th")
+    end
+
     def trigger_attrs
       mix({ class: "pk-date-picker-trigger" }, @trigger_attrs)
     end

data/app/components/phlex_kit/dialog/dialog.css

@@ -17,12 +17,12 @@
   border-radius: .75rem; background: var(--pk-surface); color: var(--pk-text);
   padding: var(--pk-dialog-spacing);
   font-size: .875rem;
-  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-dialog[open] { display: flex; flex-direction: column; }
-.pk-dialog::backdrop { background: rgb(0 0 0 / .1); backdrop-filter: blur(4px); }
+.pk-dialog::backdrop { background: color-mix(in srgb, var(--pk-overlay) 10%, transparent); backdrop-filter: blur(4px); }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-dialog::backdrop { background: rgb(0 0 0 / .5); }
+  .pk-dialog::backdrop { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }
 .pk-dialog.xs { max-width: min(16rem, calc(100% - 2rem)); }
 .pk-dialog.sm { max-width: min(20rem, calc(100% - 2rem)); }
@@ -51,6 +51,6 @@
 }
 .pk-overlay-close:hover { opacity: 1; }
 @media (min-width: 640px) {
-  .pk-dialog-header { text-align: left; }
+  .pk-dialog-header { text-align: start; }
   .pk-dialog-footer { flex-direction: row; justify-content: flex-end; }
 }

data/app/components/phlex_kit/dialog/dialog_controller.js

@@ -24,10 +24,26 @@ export default class extends Controller {
   }
   disconnect() {
     this.dialogTarget.removeEventListener("close", this.handleClose)
-    document.body.style.removeProperty("overflow")
+    if (this.dialogTarget.open) this.handleClose()
+  }
+  open(e) {
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    // Save/restore rather than removeProperty: a host page (or another
+    // component) may have set body overflow itself.
+    this.previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
   }
-  open(e) { e?.preventDefault(); this.dialogTarget.showModal(); document.body.style.overflow = "hidden" }
   dismiss() { this.dialogTarget.close() }
-  backdropClick(e) { if (e.target === this.dialogTarget) this.dismiss() }
-  handleClose = () => { document.body.style.removeProperty("overflow") }
+  // Only a click on the ::backdrop dismisses. e.target is the <dialog> for
+  // backdrop clicks, but ALSO for clicks on the dialog's own padding/flex
+  // gaps — disambiguate by testing the click point against the dialog's box.
+  backdropClick(e) {
+    if (e.target !== this.dialogTarget) return
+    if (e.detail === 0) return // synthetic/keyboard click — no coordinates
+    const r = this.dialogTarget.getBoundingClientRect()
+    const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom
+    if (!inside) this.dismiss()
+  }
+  handleClose = () => { document.body.style.overflow = this.previousOverflow ?? "" }
 }

data/app/components/phlex_kit/drawer/drawer.css

@@ -9,7 +9,7 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background: rgb(0 0 0 / .1);
+  background: color-mix(in srgb, var(--pk-overlay) 10%, transparent);
   backdrop-filter: blur(4px);
 }
 .pk-drawer {
@@ -87,8 +87,8 @@
   padding: 1rem;
 }
 @media (min-width: 768px) {
-  .pk-drawer-header { text-align: left; }
+  .pk-drawer-header { text-align: start; }
 }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-drawer-overlay { background: rgb(0 0 0 / .5); }
+  .pk-drawer-overlay { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -37,7 +37,7 @@
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: .25rem;
-  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);
 }
 
 .pk-dropdown-menu-item {
@@ -76,7 +76,7 @@
 
 /* Keyboard hint, pushed to the row's end. */
 .pk-dropdown-menu-shortcut {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: .75rem;
   letter-spacing: .1em;
   color: var(--pk-muted);
@@ -112,7 +112,7 @@
    The row is its own scoped anchor; the panel flips to the other side at
    the viewport right edge. */
 .pk-dropdown-menu-sub { anchor-name: --pk-dropdown-menu-sub; anchor-scope: --pk-dropdown-menu-sub; }
-.pk-dropdown-menu-sub-chevron { margin-left: auto; width: 1rem; height: 1rem; }
+.pk-dropdown-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
 .pk-dropdown-menu-sub-content {
   position: fixed;
   position-anchor: --pk-dropdown-menu-sub;

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.rb

@@ -5,7 +5,10 @@ module PhlexKit
   # Trigger + Content (+ Item / Label / Separator). Tailwind → vanilla
   # `.pk-dropdown-menu*` (dropdown_menu.css).
   class DropdownMenu < BaseComponent
-    def initialize(**attrs)
+    # `open: true` renders the menu open on connect (matching Collapsible's
+    # kwarg -> Stimulus value -> connect flow).
+    def initialize(open: false, **attrs)
+      @open = open
       @attrs = attrs
     end
 
@@ -14,6 +17,7 @@ module PhlexKit
         class: "pk-dropdown-menu",
         data: {
           controller: "phlex-kit--dropdown-menu",
+          phlex_kit__dropdown_menu_open_value: @open,
           action: "click@window->phlex-kit--dropdown-menu#onClickOutside"
         }
       }, @attrs), &block)

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_controller.js

@@ -21,6 +21,9 @@ export default class extends Controller {
     this.invoker = this.triggerTarget.querySelector("button, a, [tabindex]") || this.triggerTarget;
     this.invoker.setAttribute("aria-haspopup", "menu");
     this.invoker.setAttribute("aria-expanded", "false");
+    // `open:` on the Ruby side renders the value — start open (same
+    // kwarg -> value -> connect flow as Collapsible).
+    if (this.openValue) this.#open();
   }
 
   disconnect() {
@@ -33,6 +36,9 @@ export default class extends Controller {
     if (!this.contentTarget.matches(":popover-open")) return;
     if (this.element.contains(event.target)) return;
 
+    // Deliberate (matches Radix's modal dismiss): the outside click ONLY
+    // dismisses the menu — it is swallowed rather than also acting on
+    // whatever was under the pointer (e.g. navigating a link).
     event.preventDefault();
     this.close();
   }
@@ -104,9 +110,36 @@ export default class extends Controller {
         this.close();
         this.invoker.focus();
         break;
+      case "ArrowRight":
+        // On a sub trigger, enter the submenu (focus reveals it via
+        // :focus-within, making its rows visible to the roving nav).
+        // Same keyboard grammar as context_menu.
+        if (document.activeElement?.matches(".pk-dropdown-menu-sub-trigger")) {
+          e.preventDefault();
+          this.#enterSub(document.activeElement);
+        }
+        break;
+      case "ArrowLeft": {
+        // Inside a submenu, step back to its trigger (closes it on focus-out).
+        const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
+        if (sub) {
+          e.preventDefault();
+          sub.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-trigger")?.focus();
+        }
+        break;
+      }
     }
   }
 
+  #enterSub(trigger) {
+    trigger.focus();
+    const panel = trigger.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-content");
+    if (!panel) return;
+    const first = [...panel.querySelectorAll('[role^="menuitem"]')]
+      .find((el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0);
+    first?.focus();
+  }
+
   // Rows inside a closed submenu are display:none (revealed by CSS on
   // hover/focus-within) — focus() on them silently fails and the roving
   // navigation would jam at the submenu boundary.

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_label.rb

@@ -6,7 +6,9 @@ module PhlexKit
     end
 
     def view_template(&block)
-      h3(**mix({ class: "pk-dropdown-menu-label" }, @attrs), &block)
+      # div, not a heading: role="menu" only allows menuitem/group/separator
+      # children, so an <h3> is invalid ARIA there (shadcn uses a div too).
+      div(**mix({ class: "pk-dropdown-menu-label" }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/field/field.css

@@ -110,7 +110,7 @@
   font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
-  text-align: left;
+  text-align: start;
 }
 .pk-field-description a { text-decoration: underline; text-underline-offset: 4px; color: inherit; }
 .pk-field-description a:hover { color: var(--pk-brand); }

data/app/components/phlex_kit/field/field_error.rb

@@ -1,8 +1,8 @@
 module PhlexKit
   # Validation message(s) for a Field, ported from shadcn/ui's FieldError.
   # Pass `errors:` an array of message strings (deduped; one renders plain,
-  # several render a list) or give a block. Renders nothing when empty —
-  # matching theirs. Distinct from FormFieldError, which is the Stimulus
+  # several render a list) or give a block — both render (block after the
+  # list) when both are given. Renders nothing when empty — matching theirs. Distinct from FormFieldError, which is the Stimulus
   # live-validation slot; server-rendered errors belong here. See field.rb.
   class FieldError < BaseComponent
     def initialize(errors: nil, **attrs)
@@ -14,15 +14,14 @@ module PhlexKit
       return if @errors.empty? && !block
 
       div(**mix({ class: "pk-field-error", role: "alert", data: { slot: "field-error" } }, @attrs)) do
-        if block
-          yield
-        elsif @errors.length == 1
+        if @errors.length == 1
           plain @errors.first
-        else
+        elsif @errors.length > 1
           ul(class: "pk-field-error-list") do
             @errors.each { |message| li { message } }
           end
         end
+        yield if block
       end
     end
   end

data/app/components/phlex_kit/form_field/form_field_controller.js

@@ -14,7 +14,7 @@ export default class extends Controller {
 
   connect() {
     if (this.hasErrorTarget) {
-      if (this.errorTarget.textContent) {
+      if (this.errorTarget.textContent.trim()) {
         this.shouldValidateValue = true;
       } else {
         this.errorTarget.classList.add("pk-hidden");
@@ -31,41 +31,60 @@ export default class extends Controller {
     error.preventDefault();
 
     this.shouldValidateValue = true;
-    this.#setErrorMessage();
+    this.#setErrorMessage(error);
   }
 
-  onInput() {
-    this.#setErrorMessage();
+  onInput(event) {
+    this.#setErrorMessage(event);
   }
 
-  onChange() {
-    this.#setErrorMessage();
+  onChange(event) {
+    this.#setErrorMessage(event);
   }
 
-  #setErrorMessage() {
+  // The event's own control, when it's one of ours — radio/checkbox groups
+  // register several input targets and validity/aria-invalid must land on
+  // the control that fired, not always the first.
+  #inputFor(event) {
+    if (event && this.inputTargets.includes(event.target)) return event.target;
+    return this.inputTarget;
+  }
+
+  #setErrorMessage(event) {
     if (!this.shouldValidateValue || !this.hasErrorTarget) return;
 
+    const input = this.#inputFor(event);
     // aria-invalid drives the red ring for LIVE validation too (input.css
     // only matched server-rendered attrs); aria-describedby ties the message
     // to the control for AT.
-    if (this.errorTarget.id) {
-      this.inputTarget.setAttribute("aria-describedby", this.errorTarget.id);
-    }
-    if (this.inputTarget.validity.valid) {
-      this.inputTarget.removeAttribute("aria-invalid");
+    if (input.validity.valid) {
+      input.removeAttribute("aria-invalid");
+      this.#describeBy(input, false);
       this.errorTarget.textContent = "";
       this.errorTarget.classList.add("pk-hidden");
     } else {
-      this.inputTarget.setAttribute("aria-invalid", "true");
-      this.errorTarget.textContent = this.#getValidationMessage();
+      input.setAttribute("aria-invalid", "true");
+      this.#describeBy(input, true);
+      this.errorTarget.textContent = this.#getValidationMessage(input);
       this.errorTarget.classList.remove("pk-hidden");
     }
   }
 
-  #getValidationMessage() {
+  // Append/remove the error's id on the control's aria-describedby without
+  // clobbering pre-existing tokens (e.g. a hint's id).
+  #describeBy(input, present) {
+    const id = this.errorTarget.id;
+    if (!id) return;
+    const tokens = (input.getAttribute("aria-describedby") || "").split(/\s+/).filter((t) => t && t !== id);
+    if (present) tokens.push(id);
+    if (tokens.length) input.setAttribute("aria-describedby", tokens.join(" "));
+    else input.removeAttribute("aria-describedby");
+  }
+
+  #getValidationMessage(input) {
     let errorMessage;
 
-    const { validity, dataset, validationMessage } = this.inputTarget;
+    const { validity, dataset, validationMessage } = input;
 
     if (validity.tooLong) errorMessage = dataset.tooLong;
     if (validity.tooShort) errorMessage = dataset.tooShort;

data/app/components/phlex_kit/form_field/form_field_error.rb

@@ -5,7 +5,10 @@ module PhlexKit
   # with server-rendered model errors — non-empty content arms validation on
   # connect. See form_field.rb.
   class FormFieldError < BaseComponent
-    def initialize(**attrs)
+    def initialize(id: nil, **attrs)
+      # A default id (like SelectContent / CommandList) so the controller can
+      # always wire aria-describedby from the control to this message.
+      @id = id || "pk-form-field-error-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
@@ -13,6 +16,7 @@ module PhlexKit
       # role="alert": the controller swaps this text live on invalid/input —
       # without a live region the announcement never reaches screen readers.
       p(**mix({
+        id: @id,
         class: "pk-form-field-error",
         role: "alert",
         data: { phlex_kit__form_field_target: "error" }

data/app/components/phlex_kit/hover_card/hover_card.css

@@ -19,7 +19,7 @@
   border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
   border-radius: var(--pk-radius); background: var(--pk-surface);
   color: var(--pk-text); padding: .625rem; font-size: .875rem;
-  box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent); outline: none;
 }
 .pk-hover-card-content.top { position-area: block-start span-inline-end; margin: 0 0 .25rem; }
 .pk-hover-card-content.left {

data/app/components/phlex_kit/hover_card/hover_card_controller.js

@@ -4,6 +4,9 @@ import { Controller } from "@hotwired/stimulus"
 // with a small open/close delay. The panel is a native [popover=manual]
 // (top layer; manual because the controller owns open/close — hover
 // semantics want no light dismiss), anchor-positioned by hover_card.css.
+// Manual popovers get no built-in Escape dismiss, so a window keydown
+// listener (bound only while open, cf. tooltip_controller.js) closes the
+// card immediately — the keyboard/touch escape hatch for a hover surface.
 export default class extends Controller {
   static targets = ["trigger", "content"]
   static values = { openDelay: { type: Number, default: 200 }, closeDelay: { type: Number, default: 200 } }
@@ -12,14 +15,35 @@ export default class extends Controller {
     this.t = setTimeout(() => {
       if (!this.contentTarget.matches(":popover-open")) this.contentTarget.showPopover()
       this.contentTarget.dataset.state = "open"
+      this.#bindEscape()
     }, this.openDelayValue)
   }
   hide() {
     clearTimeout(this.t)
-    this.t = setTimeout(() => {
-      if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover()
-      this.contentTarget.dataset.state = "closed"
-    }, this.closeDelayValue)
+    this.t = setTimeout(() => this.#close(), this.closeDelayValue)
+  }
+  disconnect() {
+    clearTimeout(this.t)
+    this.#unbindEscape()
+  }
+
+  #close() {
+    if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover()
+    this.contentTarget.dataset.state = "closed"
+    this.#unbindEscape()
+  }
+  #bindEscape() {
+    if (this.onKeydown) return
+    this.onKeydown = (e) => {
+      if (e.key !== "Escape") return
+      clearTimeout(this.t)
+      this.#close()
+    }
+    window.addEventListener("keydown", this.onKeydown)
+  }
+  #unbindEscape() {
+    if (!this.onKeydown) return
+    window.removeEventListener("keydown", this.onKeydown)
+    this.onKeydown = null
   }
-  disconnect() { clearTimeout(this.t) }
 }

data/app/components/phlex_kit/input/input.css

@@ -30,7 +30,7 @@
   font: inherit;
   font-size: .875rem;
   font-weight: 500;
-  margin-right: .5rem;
+  margin-inline-end: .5rem;
 }
 .pk-input:focus-visible {
   outline: none;

data/app/components/phlex_kit/input_group/input_group.css

@@ -24,7 +24,9 @@
   flex-direction: column;
   align-items: stretch;
 }
-.pk-input-group:focus-within {
+/* Ring only when the CONTROL is focused (shadcn gates on the control's
+   focus-visible) — :focus-within would also light it for addon buttons. */
+.pk-input-group:has(.pk-input:focus-visible, .pk-textarea:focus-visible) {
   border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
@@ -48,8 +50,8 @@
 .pk-input-group .pk-input:disabled,
 .pk-input-group .pk-textarea:disabled { background: transparent; }
 /* Tighten the control's near-side padding beside an inline addon. */
-.pk-input-group:has(> .pk-input-group-addon.start) > .pk-input { padding-left: .375rem; }
-.pk-input-group:has(> .pk-input-group-addon.end) > .pk-input { padding-right: .375rem; }
+.pk-input-group:has(> .pk-input-group-addon.start) > .pk-input { padding-inline-start: .375rem; }
+.pk-input-group:has(> .pk-input-group-addon.end) > .pk-input { padding-inline-end: .375rem; }
 
 .pk-input-group-addon {
   display: flex;
@@ -64,8 +66,8 @@
   font-size: .875rem;
   font-weight: 500;
 }
-.pk-input-group-addon.start { order: -1; padding-left: .5rem; }
-.pk-input-group-addon.end { order: 99; padding-right: .5rem; }
+.pk-input-group-addon.start { order: -1; padding-inline-start: .5rem; }
+.pk-input-group-addon.end { order: 99; padding-inline-end: .5rem; }
 .pk-input-group-addon.block-start,
 .pk-input-group-addon.block-end {
   width: 100%;
@@ -78,8 +80,8 @@
 .pk-input-group-addon.block-end.bordered { border-top: 1px solid var(--pk-border); padding-top: .5rem; }
 .pk-input-group-addon svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
 .pk-input-group-addon > kbd { border-radius: calc(var(--pk-radius) - 5px); }
-.pk-input-group-addon.start:has(> .pk-button) { margin-left: -0.3rem; }
-.pk-input-group-addon.end:has(> .pk-button) { margin-right: -0.3rem; }
+.pk-input-group-addon.start:has(> .pk-button) { margin-inline-start: -0.3rem; }
+.pk-input-group-addon.end:has(> .pk-button) { margin-inline-end: -0.3rem; }
 
 .pk-button.pk-input-group-button {
   gap: .25rem;

data/app/components/phlex_kit/input_group/input_group_addon.rb

@@ -17,7 +17,11 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-input-group-addon #{fetch_option(ALIGNS, @align, :align)}", role: "group" }, @attrs), &)
+      # No role: shadcn puts role="group" on its addon, but an unnamed group
+      # nested inside the InputGroup's own group is noise for AT — a text or
+      # icon addon needs no role, and interactive addon children (buttons)
+      # carry their own semantics.
+      div(**mix({ class: "pk-input-group-addon #{fetch_option(ALIGNS, @align, :align)}" }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/input_otp/input_otp.css

@@ -16,7 +16,7 @@
   outline: none;
   transition: border-color .15s ease, box-shadow .15s ease;
 }
-.pk-input-otp-slot:not(:first-child) { margin-left: -1px; }
+.pk-input-otp-slot:not(:first-child) { margin-inline-start: -1px; }
 .pk-input-otp-group .pk-input-otp-slot:first-child {
   border-top-left-radius: var(--pk-radius);
   border-bottom-left-radius: var(--pk-radius);

data/app/components/phlex_kit/input_otp/input_otp_controller.js

@@ -10,6 +10,12 @@ export default class extends Controller {
   static values = { length: Number }
 
   connect() {
+    // Slots compose without knowing their position, so `length:` can drift
+    // from the actual slot count — flag the mismatch instead of silently
+    // truncating/underfilling codes.
+    if (this.hasLengthValue && this.lengthValue !== this.slotTargets.length) {
+      console.warn(`phlex-kit--input-otp: length is ${this.lengthValue} but ${this.slotTargets.length} slots rendered`, this.element)
+    }
     // Slots compose without knowing their position — label them here so AT
     // announces "Digit N of M" instead of anonymous edit fields.
     this.slotTargets.forEach((slot, i) => {
@@ -17,6 +23,13 @@ export default class extends Controller {
         slot.setAttribute("aria-label", `Digit ${i + 1} of ${this.slotTargets.length}`)
       }
     })
+    // A server-provided value renders on the hidden input only — distribute
+    // it into the empty slots BEFORE syncing, or syncValue would join the
+    // empty slots and wipe the value with a spurious change event.
+    if (this.hasValueTarget && this.valueTarget.value && this.slotTargets.every((slot) => !slot.value)) {
+      const chars = this.valueTarget.value.split("")
+      this.slotTargets.forEach((slot, i) => { if (chars[i] != null) slot.value = chars[i] })
+    }
     this.syncValue()
   }