phlex_kit 0.8.0 → 0.9.0

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

@@ -32,6 +32,7 @@ module PhlexKit
       hotkey: %w[alt t],
       dir: :ltr,
       flash: nil,
+      id: "pk-toaster",
       **attrs
     )
       @position = POSITIONS.fetch(position.to_sym)
@@ -46,12 +47,16 @@ module PhlexKit
       @hotkey = hotkey
       @dir = dir
       @flash = flash
+      # Base id for the <ol> stack; the wrapper takes "#{id}-region". Defaults
+      # keep the historical "pk-toaster"/"pk-toaster-region" pair — pass a
+      # distinct id when rendering more than one region on a page.
+      @id = id
       @attrs = attrs
     end
 
     def view_template(&block)
       div(**mix(region_attrs, @attrs)) do
-        ol(id: "pk-toaster", class: "pk-toast-list") do
+        ol(id: @id, class: "pk-toast-list") do
           render_flash if @flash
           yield(self) if block
         end
@@ -68,16 +73,23 @@ 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 }
+          # The region-wide close button must reach flash toasts too — the CSS
+          # already reserves their right padding when close_button is on.
+          render ToastClose.new if @close_button
         end
       end
     end
 
     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
@@ -94,10 +106,12 @@ module PhlexKit
 
     def region_attrs
       {
-        id: "pk-toaster-region",
+        id: "#{@id}-region",
         role: "region",
         class: "pk-toast-region",
-        aria: { label: "Notifications", live: "polite" },
+        # No aria-live here: each toast item is its own live region
+        # (role="status"/"alert"); a live wrapper would double-announce.
+        aria: { label: "Notifications" },
         data: {
           controller: "phlex-kit--toaster",
           turbo_permanent: "",

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

@@ -181,6 +181,9 @@ export default class extends Controller {
   _setExpanded(value) {
     if (this._expanded === value) return
     this._expanded = value
+    // Mirror the pause state onto the DOM so toasts spawned while the stack
+    // is already hovered can arm paused (the pause event predates them).
+    this._listEl?.toggleAttribute("data-pk-toasts-paused", value)
     document.dispatchEvent(new CustomEvent(value ? "phlex-kit:toast:pause" : "phlex-kit:toast:resume"))
     this._reflow()
   }
@@ -189,7 +192,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
@@ -224,7 +230,10 @@ export default class extends Controller {
       el.style.transformOrigin = isBottom ? "center bottom" : "center top"
       el.style.top = isBottom ? "auto" : "0"
       el.style.bottom = isBottom ? "0" : "auto"
-      el.style.transform = `translate3d(0, ${ty}px, 0) scale(${scale})`
+      // Compose the toast controller's swipe offset (custom props it sets
+      // during pointer-drag) into the stacking transform — the swipe must
+      // never overwrite this transform or non-front toasts snap out of place.
+      el.style.transform = `translate3d(var(--pk-toast-swipe-x, 0px), calc(${ty}px + var(--pk-toast-swipe-y, 0px)), 0) scale(${scale})`
       el.style.zIndex = String(1000 - i)
       el.style.pointerEvents = visible ? "auto" : "none"
       el.tabIndex = visible ? 0 : -1
@@ -237,9 +246,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 }))
@@ -253,13 +263,17 @@ export default class extends Controller {
     const wantAlt = parts.includes("alt")
     const wantCtrl = parts.includes("ctrl")
     const wantMeta = parts.includes("meta")
+    const wantShift = parts.includes("shift")
     if (e.key.toLowerCase() !== key.toLowerCase()) return
     if (wantAlt !== e.altKey) return
     if (wantCtrl !== e.ctrlKey) return
     if (wantMeta !== e.metaKey) return
+    if (wantShift !== e.shiftKey) return
     e.preventDefault()
-    const first = this._listEl.firstElementChild
-    first?.focus()
+    // Newest toast is the LAST child (append order) and fronts the stack —
+    // the first child is the oldest, faded, possibly pointer-events:none one.
+    const newest = this._listEl.lastElementChild
+    newest?.focus()
   }
 
   _registerGlobalApi() {

data/app/components/phlex_kit/toggle/toggle.css

@@ -25,7 +25,7 @@
 .pk-toggle svg { pointer-events: none; flex-shrink: 0; }
 .pk-toggle svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
 .pk-toggle.sm svg:not([class*="size-"]) { width: .875rem; height: .875rem; }
-.pk-toggle:has(> [data-icon="inline-start"]) { padding-left: .5rem; }
-.pk-toggle:has(> [data-icon="inline-end"]) { padding-right: .5rem; }
-.pk-toggle.sm:has(> [data-icon="inline-start"]) { padding-left: .375rem; }
-.pk-toggle.sm:has(> [data-icon="inline-end"]) { padding-right: .375rem; }
+.pk-toggle:has(> [data-icon="inline-start"]) { padding-inline-start: .5rem; }
+.pk-toggle:has(> [data-icon="inline-end"]) { padding-inline-end: .5rem; }
+.pk-toggle.sm:has(> [data-icon="inline-start"]) { padding-inline-start: .375rem; }
+.pk-toggle.sm:has(> [data-icon="inline-end"]) { padding-inline-end: .375rem; }

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,
@@ -52,8 +54,12 @@ module PhlexKit
     end
 
     def render_hidden_input
-      input(type: "hidden", name: @name, value: @pressed ? @value : @unpressed_value.to_s,
-        data: { phlex_kit__toggle_target: "input" })
+      # Disabled in lockstep with the button — a disabled toggle must not
+      # submit its value (matches native disabled-control form semantics).
+      a = { type: "hidden", name: @name, value: @pressed ? @value : @unpressed_value.to_s,
+            data: { phlex_kit__toggle_target: "input" } }
+      a[:disabled] = true if @disabled
+      input(**a)
     end
   end
 end

data/app/components/phlex_kit/tooltip/tooltip.css

@@ -34,9 +34,14 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity .12s ease;
+  /* Zero delay here = hover-out hides immediately; the hover-in rule below
+     re-declares the delays for the open direction only. */
+  transition: opacity .12s ease 0s, visibility 0s linear 0s;
 }
-.pk-tooltip-content:has(kbd) { padding-right: .375rem; }
+@media (prefers-reduced-motion: reduce) {
+  .pk-tooltip-content { transition-duration: 0s, 0s; }
+}
+.pk-tooltip-content:has(kbd) { padding-inline-end: .375rem; }
 /* The notch. The arrow is position:fixed so both anchors are acceptable
    (an absolute pseudo's containing block is the bubble, which doesn't
    contain the trigger — anchor() wouldn't resolve). Its center chases the
@@ -66,8 +71,25 @@
   position-area: inline-end; margin: 0 0 0 6px;
   position-try-fallbacks: flip-inline;
 }
-.pk-tooltip:hover .pk-tooltip-content,
-.pk-tooltip:focus-within .pk-tooltip-content { opacity: 1; visibility: visible; }
-/* Escape-dismissed (WCAG 1.4.13): suppressed until pointer/focus leaves. */
+/* Hover reveal only on devices that actually hover (a touch tap must not
+   stick the bubble open), with an open delay so tooltips don't flash while
+   the cursor sweeps across dense UI. Visibility gets the same delay so the
+   bubble doesn't occupy hit-testing space during the wait. */
+@media (hover: hover) {
+  .pk-tooltip:hover .pk-tooltip-content {
+    opacity: 1;
+    visibility: visible;
+    transition-delay: .4s, .4s;
+  }
+}
+/* Keyboard focus reveals instantly (:focus-visible, so pointer/touch clicks
+   that focus the trigger don't stick the bubble open). */
+.pk-tooltip:has(:focus-visible) .pk-tooltip-content {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0s, 0s;
+}
+/* Escape-dismissed (WCAG 1.4.13): suppressed until pointer/focus leaves.
+   transition: none so the hide is immediate regardless of hover-in delays. */
 .pk-tooltip[data-pk-dismissed]:hover .pk-tooltip-content,
-.pk-tooltip[data-pk-dismissed]:focus-within .pk-tooltip-content { opacity: 0; visibility: hidden; }
+.pk-tooltip[data-pk-dismissed]:focus-within .pk-tooltip-content { opacity: 0; visibility: hidden; transition: none; }

data/app/components/phlex_kit/typography/heading.rb

@@ -1,14 +1,20 @@
 module PhlexKit
-  # Heading, ported from ruby_ui's RubyUI::Heading. `level:` (1–4) picks the
+  # Heading, ported from ruby_ui's RubyUI::Heading. `level:` (1–6) picks the
   # element AND a default size; `as:` overrides the element; `size:` (1–9)
   # overrides the size on ruby_ui's scale (text-xs … text-5xl). Presentational;
   # attrs pass through via mix. Tailwind → vanilla `.pk-heading*` (typography.css).
   class Heading < BaseComponent
     SIZES = %w[1 2 3 4 5 6 7 8 9].freeze
-    # ruby_ui's level → default size mapping (h1 is big, h4 smaller).
-    LEVEL_SIZE = { "1" => "7", "2" => "6", "3" => "5", "4" => "4" }.freeze
+    # ruby_ui's level → default size mapping (h1 is big, h4 smaller); 5/6
+    # extend the scale downward — HTML has h1–h6, so all six must map.
+    LEVEL_SIZE = { "1" => "7", "2" => "6", "3" => "5", "4" => "4", "5" => "3", "6" => "2" }.freeze
 
     def initialize(level: nil, as: nil, size: nil, **attrs)
+      # Fail loud at construction: level 7 previously exploded at render time
+      # with NoMethodError (no h7 element), and 5/6 fell through the size map.
+      unless level.nil? || LEVEL_SIZE.key?(level.to_s)
+        raise ArgumentError, "Invalid heading level: #{level.inspect} — valid: 1–6"
+      end
       @level = level
       @as = as
       @size = size

data/app/components/phlex_kit/typography/typography.css

@@ -38,7 +38,8 @@
   font-size: .875rem;
   background: var(--pk-bg);
   border: 1px solid var(--pk-border);
-  border-radius: 6px;
+  /* Tracks the radius token — 6px at the default --pk-radius (0.625rem). */
+  border-radius: calc(var(--pk-radius) - 4px);
   padding: .15rem .4rem;
 }
 
@@ -47,8 +48,8 @@
 .pk-inline-link:hover { text-decoration: underline; }
 
 /* Blockquote */
-.pk-blockquote { margin: 1.5rem 0; border-left: 2px solid var(--pk-border); padding-left: 1.5rem; font-style: italic; }
+.pk-blockquote { margin: 1.5rem 0; border-inline-start: 2px solid var(--pk-border); padding-inline-start: 1.5rem; font-style: italic; }
 
 /* Prose list (shadcn typography's list style). */
-.pk-list { margin: 1.5rem 0; padding-left: 1.5rem; list-style: disc; }
+.pk-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; list-style: disc; }
 .pk-list > li { margin-top: .5rem; }

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.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 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");
-    }
-  }
-}