phlex_kit 0.8.0 → 0.8.1

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.8.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.8.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");
-    }
-  }
-}