phlex_kit 0.7.0 → 0.8.1

data/app/components/phlex_kit/resizable/resizable_controller.js

@@ -1,13 +1,25 @@
 import { Controller } from "@hotwired/stimulus"
 
 // PhlexKit's stand-in for react-resizable-panels behind shadcn's Resizable:
-// dragging a handle rebalances the flex-grow of the two panels around it.
+// dragging (or arrow-keying) a handle rebalances the flex-grow of the two
+// panels around it. The handle is a focusable role="separator", so it also
+// carries the ARIA value contract: aria-valuenow tracks the leading panel's
+// share of the pair, and aria-orientation follows the group direction (a
+// handle in a horizontal group is a vertical separator).
 // Connects to data-controller="phlex-kit--resizable"
 export default class extends Controller {
   static targets = ["panel", "handle"]
   static values = { direction: { type: String, default: "horizontal" } }
 
+  handleTargetConnected(handle) {
+    handle.setAttribute("aria-orientation", this.directionValue === "horizontal" ? "vertical" : "horizontal")
+    handle.setAttribute("aria-valuemin", "0")
+    handle.setAttribute("aria-valuemax", "100")
+    this.syncValuenow(handle)
+  }
+
   start(e) {
+    if (e.button !== 0 || !e.isPrimary) return
     const handle = e.currentTarget
     const prev = handle.previousElementSibling
     const next = handle.nextElementSibling
@@ -20,6 +32,10 @@ export default class extends Controller {
       startPos: horizontal ? e.clientX : e.clientY,
       prevSize: sizeOf(prev),
       nextSize: sizeOf(next),
+      // The drag redistributes the PAIR's combined flex-grow, not a fixed
+      // constant: normalizing to 2 rescaled the pair against untouched
+      // siblings, so in a 25/25/50 group the 50 panel ballooned on first drag.
+      pairGrow: this.growOf(prev) + this.growOf(next) || 2,
     }
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
@@ -27,8 +43,9 @@ export default class extends Controller {
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
       const total = drag.prevSize + drag.nextSize
       const prevSize = Math.min(Math.max(drag.prevSize + delta, 0), total)
-      prev.style.flexGrow = (prevSize / total) * 2
-      next.style.flexGrow = ((total - prevSize) / total) * 2
+      prev.style.flexGrow = (prevSize / total) * drag.pairGrow
+      next.style.flexGrow = ((total - prevSize) / total) * drag.pairGrow
+      this.syncValuenow(handle)
     }
     const onUp = () => {
       handle.removeEventListener("pointermove", onMove)
@@ -39,4 +56,49 @@ export default class extends Controller {
     handle.addEventListener("pointerup", onUp)
     handle.addEventListener("pointercancel", onUp)
   }
+
+  // Arrow keys resize by 5% of the pair per press (matching the drag axis);
+  // Home/End collapse the leading panel to its min/max.
+  keydown(e) {
+    const handle = e.currentTarget
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+
+    const horizontal = this.directionValue === "horizontal"
+    const steps = horizontal
+      ? { ArrowLeft: -0.05, ArrowRight: 0.05 }
+      : { ArrowUp: -0.05, ArrowDown: 0.05 }
+
+    const pairGrow = this.growOf(prev) + this.growOf(next) || 2
+    let share = this.growOf(prev) / (pairGrow || 1)
+    if (e.key in steps) {
+      share = Math.min(1, Math.max(0, share + steps[e.key]))
+    } else if (e.key === "Home") {
+      share = 0
+    } else if (e.key === "End") {
+      share = 1
+    } else {
+      return
+    }
+    e.preventDefault()
+
+    prev.style.flexGrow = share * pairGrow
+    next.style.flexGrow = (1 - share) * pairGrow
+    this.syncValuenow(handle)
+  }
+
+  growOf(el) {
+    const g = parseFloat(getComputedStyle(el).flexGrow)
+    return Number.isFinite(g) ? g : 1
+  }
+
+  syncValuenow(handle) {
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+    const pair = this.growOf(prev) + this.growOf(next)
+    const share = pair > 0 ? this.growOf(prev) / pair : 0.5
+    handle.setAttribute("aria-valuenow", String(Math.round(share * 100)))
+  }
 }

data/app/components/phlex_kit/resizable/resizable_handle.rb

@@ -12,10 +12,12 @@ module PhlexKit
         class: "pk-resizable-handle",
         role: "separator",
         tabindex: "0",
+        # Correct for the default horizontal group; the controller re-stamps
+        # orientation (and aria-valuenow/min/max) per group direction on connect.
         aria: { orientation: "vertical" },
         data: {
           phlex_kit__resizable_target: "handle",
-          action: "pointerdown->phlex-kit--resizable#start"
+          action: "pointerdown->phlex-kit--resizable#start keydown->phlex-kit--resizable#keydown"
         }
       }, @attrs)) do
         span(class: "pk-resizable-handle-grip", aria: { hidden: "true" }) if @with_handle

data/app/components/phlex_kit/select/select.rb

@@ -2,11 +2,13 @@ module PhlexKit
   # Custom dropdown select, ported from ruby_ui's RubyUI::Select — the styled
   # popover (Image #2), NOT the native <select> (that's PhlexKit::NativeSelect). Unlike
   # the rest of the kit this component IS JS-driven: it keeps ruby_ui's Stimulus
-  # wiring (`phlex-kit--select` / `phlex-kit--select-item`, in
-  # app/javascript/controllers/ruby_ui/), since the open/close, selection, and
-  # keyboard nav are the point. The one change from upstream: the controller drops
-  # the `@floating-ui/dom` dependency and positions the panel with plain CSS
-  # (opens directly below the trigger). Tailwind → vanilla `.pk-select-*` (select.css).
+  # wiring (`phlex-kit--select`), since the open/close, selection, and keyboard
+  # nav are the point. Two changes from upstream: the controller drops the
+  # `@floating-ui/dom` dependency and positions the panel with plain CSS (opens
+  # directly below the trigger), and selection flips aria-selected via the
+  # instance-scoped itemTargets rather than upstream's document-scoped
+  # `.pk-select-item` outlet (which clobbered every other Select on the page).
+  # Tailwind → vanilla `.pk-select-*` (select.css).
   #
   # Multi-part. The hidden SelectInput carries the form value/name; SelectTrigger +
   # SelectValue are the closed-state button; SelectContent > SelectGroup >
@@ -34,8 +36,7 @@ module PhlexKit
         data: {
           controller: "phlex-kit--select",
           phlex_kit__select_open_value: "false",
-          action: "click@window->phlex-kit--select#clickOutside",
-          phlex_kit__select_phlex_kit__select_item_outlet: ".pk-select-item"
+          action: "click@window->phlex-kit--select#clickOutside"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/select/select_controller.js

@@ -8,7 +8,6 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
   static values = { open: Boolean };
-  static outlets = ["phlex-kit--select-item"];
 
   connect() {
     this.generateItemsIds();
@@ -17,13 +16,20 @@ export default class extends Controller {
   selectItem(event) {
     event.preventDefault();
 
-    this.phlexKitSelectItemOutlets.forEach((item) => item.handleSelectItem(event));
+    // currentTarget, not target: the click may land on a child of the item
+    // (target.dataset.value would be undefined). itemTargets, not a
+    // document-scoped outlet: outlets match `.pk-select-item` page-wide and
+    // clobbered every other Select's aria-selected.
+    const item = event.currentTarget;
+    this.itemTargets.forEach((el) => {
+      el.setAttribute("aria-selected", el === item ? "true" : "false");
+    });
 
     const oldValue = this.inputTarget.value;
-    const newValue = event.target.dataset.value;
+    const newValue = item.dataset.value;
 
     this.inputTarget.value = newValue;
-    this.valueTarget.innerText = event.target.innerText;
+    this.valueTarget.innerText = item.innerText;
 
     this.dispatchOnChange(oldValue, newValue);
     this.closeContent();
@@ -89,21 +95,30 @@ export default class extends Controller {
   }
 
   clickOutside(event) {
-    if (!this.openValue) return;
+    if (!this.contentTarget.matches(":popover-open")) return;
     if (this.element.contains(event.target)) return;
 
     event.preventDefault();
-    this.toogleContent();
+    this.#hide();
   }
 
+  // Open/close derive from the live :popover-open state, never a stored
+  // flag — a stale flag is how a close on an already-closed panel becomes
+  // an open (bit the popover's keyboard toggle).
   toogleContent() {
-    this.openValue = !this.openValue;
-    if (this.openValue) {
-      this.contentTarget.showPopover();
-    } else if (this.contentTarget.matches(":popover-open")) {
-      this.contentTarget.hidePopover();
-    }
-    this.triggerTarget.setAttribute("aria-expanded", this.openValue);
+    this.contentTarget.matches(":popover-open") ? this.#hide() : this.#show();
+  }
+
+  #show() {
+    this.openValue = true;
+    this.contentTarget.showPopover();
+    this.triggerTarget.setAttribute("aria-expanded", "true");
+  }
+
+  #hide() {
+    this.openValue = false;
+    if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover();
+    this.triggerTarget.setAttribute("aria-expanded", "false");
   }
 
   generateItemsIds() {
@@ -123,7 +138,7 @@ export default class extends Controller {
   }
 
   closeContent() {
-    this.toogleContent();
+    this.#hide();
     this.resetCurrent();
 
     // aria-activedescendant holds an element id; on close it must be removed,

data/app/components/phlex_kit/select/select_item.rb

@@ -21,7 +21,6 @@ module PhlexKit
         "aria-selected": (@selected ? "true" : "false"),
         data: {
           value: @value,
-          controller: "phlex-kit--select-item",
           action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
                   "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
                   "keydown.esc->phlex-kit--select#handleEsc",

data/app/components/phlex_kit/sidebar/sidebar.css

@@ -169,14 +169,23 @@
 .pk-sidebar-wrapper.collapsible-offcanvas .pk-sidebar,
 .pk-sidebar-wrapper.collapsible-icon .pk-sidebar {
   position: relative;
-  transition: margin-left .2s ease, transform .2s ease, width .2s ease;
+  /* visibility rides the transition: it stays visible while sliding out and
+     flips hidden at the end — hidden also drops the off-screen links from
+     the tab order (they stayed focusable while invisible before). */
+  transition: margin-left .2s ease, transform .2s ease, width .2s ease, visibility .2s;
 }
-.pk-sidebar-wrapper.collapsible-offcanvas[data-collapsed] .pk-sidebar { margin-left: -16rem; }
+.pk-sidebar-wrapper.collapsible-offcanvas[data-collapsed] .pk-sidebar { margin-left: -16rem; visibility: hidden; }
 
 /* Icon mode: the rail shrinks to a 3rem strip — labels and text hide, menu
    buttons become centered icon squares, hover shows a data-tooltip bubble. */
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar { width: 3rem; }
-.pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: none; }
+/* Desktop-only: at mobile widths icon mode becomes the full drawer, and the
+   labels/subs must keep their AUTHOR display values (flex). The old approach
+   un-hid them with `display: revert`, but revert rolls back to the USER-AGENT
+   origin — group labels lost their flex centering, sub lists their gap. */
+@media (min-width: 768px) {
+  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: none; }
+}
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-header, .pk-sidebar-content, .pk-sidebar-footer) {
   padding-inline: .5rem;
   align-items: center;
@@ -187,7 +196,9 @@
   padding: .5rem;
   justify-content: center;
 }
-.pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: none; }
+@media (min-width: 768px) {
+  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: none; }
+}
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button[data-tooltip] { position: relative; }
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button[data-tooltip]:hover::after {
   content: attr(data-tooltip);
@@ -252,9 +263,8 @@
 @media (max-width: 767px) {
   /* Below the cutoff both collapsible modes become the overlay drawer. */
   .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar { width: 16rem; }
-  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: revert; }
+  /* No un-hiding needed: the icon-mode hide rules are scoped to >=768px. */
   .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button { width: 100%; height: auto; padding: .5rem; justify-content: flex-start; }
-  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: revert; }
   .pk-sidebar-wrapper.collapsible-icon .pk-sidebar-rail { display: none; }
   .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon) .pk-sidebar {
     position: fixed;
@@ -264,9 +274,11 @@
     height: 100dvh;
     margin-left: 0;
     transform: translateX(-100%);
+    /* closed drawer: invisible AND out of the tab order */
+    visibility: hidden;
     box-shadow: 0 8px 30px rgb(0 0 0 / .35);
   }
-  .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon)[data-open] .pk-sidebar { transform: none; }
+  .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon)[data-open] .pk-sidebar { transform: none; visibility: visible; }
   .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon)[data-open] .pk-sidebar-scrim {
     display: block;
     position: fixed;

data/app/components/phlex_kit/slider/slider.css

@@ -25,7 +25,7 @@
   margin-top: -0.25rem;
   border-radius: 9999px;
   border: 1px solid var(--pk-ring);
-  background: #fff;
+  background: var(--pk-bg);
   box-shadow: 0 1px 2px rgb(0 0 0 / .25);
   transition: box-shadow .15s ease;
 }
@@ -51,7 +51,7 @@
   height: .75rem;
   border-radius: 9999px;
   border: 1px solid var(--pk-ring);
-  background: #fff;
+  background: var(--pk-bg);
 }
 .pk-slider:hover::-moz-range-thumb,
 .pk-slider:active::-moz-range-thumb {

data/app/components/phlex_kit/theme_toggle/theme_toggle.rb

@@ -2,6 +2,17 @@ module PhlexKit
   # Light/dark theme switch built on Toggle. Ported from ruby_ui's RubyUI::
   # ThemeToggle. The sibling phlex-kit--theme-toggle controller listens for the
   # toggle's change event and flips :root[data-theme] (matching the token system).
+  # Only an actual user toggle is persisted to localStorage — with no stored
+  # choice the OS preference is followed live on every load.
+  #
+  # The controller applies the stored theme at Stimulus connect, which is late
+  # enough to flash light-mode for returning dark-theme users. To avoid the
+  # FOUC, inline this in <head> before any stylesheets:
+  #
+  #   <script>
+  #     const t = localStorage.theme;
+  #     if (t === "dark" || t === "light") document.documentElement.dataset.theme = t;
+  #   </script>
   class ThemeToggle < BaseComponent
     def initialize(wrapper: {}, aria: {}, **attrs)
       @wrapper = wrapper

data/app/components/phlex_kit/theme_toggle/theme_toggle_controller.js

@@ -7,6 +7,12 @@ export default class extends Controller {
   connect() { this.applyTheme(this.currentTheme()) }
   apply(e) {
     const theme = e.detail?.pressed ? "dark" : "light"
+    // connect()'s own pressed-state sync re-enters here via the toggle's
+    // change event (Stimulus value observation is async, so a flag can't
+    // gate it). If the incoming theme already matches the applied one this
+    // is that echo, not a user toggle — persisting it would silently pin
+    // the visitor's OS preference in localStorage on first visit.
+    if (theme === document.documentElement.getAttribute("data-theme")) return
     localStorage.theme = theme
     this.applyTheme(theme)
   }

data/app/components/phlex_kit/toast/toast_region.rb

@@ -68,7 +68,9 @@ module PhlexKit
       @flash.each do |key, message|
         next if message.nil? || message.to_s.empty?
         variant = Toast.flash_variant(key)
-        render ToastItem.new(variant: variant, id: "flash-#{key}") do
+        # Stamp the region's duration — without it the toast controller's
+        # 4000ms default wins and ToastRegion(duration:) is dead config.
+        render ToastItem.new(variant: variant, id: "flash-#{key}", duration: @duration) do
           render ToastIcon.new(variant: variant)
           render ToastTitle.new { message.to_s }
         end
@@ -77,7 +79,9 @@ module PhlexKit
 
     def skeleton(variant)
       template(data: { phlex_kit__toaster_target: "skeleton", variant: variant.to_s }) do
-        render ToastItem.new(variant: variant) do
+        # Region duration baked into the skeleton; _spawn overrides it only
+        # when the caller passes a per-toast duration.
+        render ToastItem.new(variant: variant, duration: @duration) do
           render ToastIcon.new(variant: variant)
           div(class: "pk-toast-body") do
             render ToastTitle.new

data/app/components/phlex_kit/toast/toaster_controller.js

@@ -189,7 +189,10 @@ export default class extends Controller {
     if (!this._listEl) return
     const isBottom = this.positionValue.startsWith("bottom")
     const items = this.toastTargets
-    const order = isBottom ? items.slice().reverse() : items.slice()
+    // Newest toast fronts the stack at BOTH edges (index 0 = front); only
+    // the offset direction flips with the position. Using DOM order at
+    // top-* put the oldest toast in front and stacked new ones behind it.
+    const order = items.slice().reverse()
     const heights = order.map(el => this._heights.get(el) || el.offsetHeight || 64)
     const gap = this.gapValue
     const peekOffset = 16
@@ -237,9 +240,10 @@ export default class extends Controller {
 
   _enforceMax(items) {
     if (items.length <= this.maxValue) return
-    const isBottom = this.positionValue.startsWith("bottom")
     const dropping = items.length - this.maxValue
-    const candidates = isBottom ? items.slice(0, dropping) : items.slice(-dropping)
+    // Evict the OLDEST toasts (DOM order = append order) regardless of edge;
+    // slicing from the tail at top-* dropped the newest ones instead.
+    const candidates = items.slice(0, dropping)
     candidates.forEach(el => {
       if (el.dataset.state !== "closing") {
         el.dispatchEvent(new CustomEvent("phlex-kit:toast:force-dismiss", { bubbles: true }))

data/app/components/phlex_kit/toggle/toggle.rb

@@ -7,7 +7,9 @@ module PhlexKit
     SIZES = { sm: "sm", default: nil, lg: "lg" }.freeze
 
     def self.modifier_classes(variant:, size:)
-      [ VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil) ].compact
+      # Plain fetch — an unknown variant/size raises KeyError (kit-wide
+      # fail-loud rule); the nil-default form silently rendered unstyled.
+      [ VARIANTS.fetch(variant), SIZES.fetch(size) ].compact
     end
 
     def initialize(pressed: false, name: nil, value: "1", unpressed_value: nil,

data/app/javascript/phlex_kit/controllers/index.js

@@ -36,7 +36,6 @@ import PopoverController from "phlex_kit/controllers/popover_controller"
 import ResizableController from "phlex_kit/controllers/resizable_controller"
 import ScrollFadeController from "phlex_kit/controllers/scroll_fade_controller"
 import SelectController from "phlex_kit/controllers/select_controller"
-import SelectItemController from "phlex_kit/controllers/select_item_controller"
 import SheetController from "phlex_kit/controllers/sheet_controller"
 import SheetContentController from "phlex_kit/controllers/sheet_content_controller"
 import SidebarController from "phlex_kit/controllers/sidebar_controller"
@@ -78,7 +77,6 @@ export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--resizable", ResizableController)
   application.register("phlex-kit--scroll-fade", ScrollFadeController)
   application.register("phlex-kit--select", SelectController)
-  application.register("phlex-kit--select-item", SelectItemController)
   application.register("phlex-kit--sheet", SheetController)
   application.register("phlex-kit--sheet-content", SheetContentController)
   application.register("phlex-kit--sidebar", SidebarController)

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.7.0"
+  VERSION = "0.8.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.1
 platform: ruby
 authors:
 - Matt Kennedy
@@ -486,7 +486,6 @@ files:
 - app/components/phlex_kit/select/select_group.rb
 - app/components/phlex_kit/select/select_input.rb
 - app/components/phlex_kit/select/select_item.rb
-- app/components/phlex_kit/select/select_item_controller.js
 - app/components/phlex_kit/select/select_label.rb
 - app/components/phlex_kit/select/select_separator.rb
 - app/components/phlex_kit/select/select_trigger.rb

data/app/components/phlex_kit/select/select_item_controller.js

@@ -1,14 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Ported verbatim from ruby_ui's phlex-kit--select-item controller. Flips its own
-// element's aria-selected when an item is chosen (the select controller invokes
-// this on every item via the outlet), which drives the checkmark in select.css.
-export default class extends Controller {
-  handleSelectItem({ target }) {
-    if (this.element.dataset.value == target.dataset.value) {
-      this.element.setAttribute("aria-selected", true);
-    } else {
-      this.element.removeAttribute("aria-selected");
-    }
-  }
-}