phlex_kit 0.8.1 → 0.9.1

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

@@ -3,26 +3,62 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--theme-toggle". Sits on the same wrapper
 // as phlex-kit--toggle; pressed = dark. Flips :root[data-theme] to match the
 // PhlexKit token system (not .dark/.light classes). Adapted from ruby_ui.
+//
+// With no stored choice the root is stamped data-theme="system" — _tokens.css
+// resolves that via prefers-color-scheme, and the matchMedia listener below
+// keeps the toggle's pressed state live when the OS preference flips. Only an
+// explicit user toggle persists "dark"/"light". localStorage access is
+// try/catch-wrapped (storage-blocked contexts): the toggle then still works,
+// just non-persistently, via the in-memory fallback.
 export default class extends Controller {
-  connect() { this.applyTheme(this.currentTheme()) }
+  connect() {
+    this._media = window.matchMedia("(prefers-color-scheme: dark)")
+    this._onMediaChange = () => {
+      // Only re-apply while the user has no explicit choice.
+      if (!this.storedTheme()) this.applyTheme("system")
+    }
+    this._media.addEventListener("change", this._onMediaChange)
+    this.applyTheme(this.storedTheme() || "system")
+  }
+
+  disconnect() {
+    this._media?.removeEventListener("change", this._onMediaChange)
+  }
+
   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
+    // gate it). If the incoming theme already matches the resolved 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
+    if (theme === this.resolvedTheme()) return
+    this.storeTheme(theme)
     this.applyTheme(theme)
   }
-  currentTheme() {
-    if (localStorage.theme === "dark") return "dark"
-    if (localStorage.theme === "light") return "light"
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+
+  // The user's explicit choice, if any ("dark"/"light"), else null.
+  storedTheme() {
+    try {
+      const t = localStorage.theme
+      if (t === "dark" || t === "light") return t
+    } catch {}
+    return this._fallbackTheme || null
+  }
+
+  storeTheme(theme) {
+    this._fallbackTheme = theme
+    try { localStorage.theme = theme } catch {}
   }
+
+  // The theme actually in effect right now: explicit choice, else OS.
+  resolvedTheme() {
+    return this.storedTheme() || (this._media.matches ? "dark" : "light")
+  }
+
   applyTheme(theme) {
     document.documentElement.setAttribute("data-theme", theme)
-    this.element.setAttribute("data-phlex-kit--toggle-pressed-value", theme === "dark" ? "true" : "false")
+    const dark = theme === "system" ? this._media.matches : theme === "dark"
+    this.element.setAttribute("data-phlex-kit--toggle-pressed-value", dark ? "true" : "false")
   }
 }

data/app/components/phlex_kit/toast/toast.css

@@ -45,7 +45,7 @@
   color: var(--pk-text);
   padding: 1rem;
   font-size: 13px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--pk-shadow-color) 10%, transparent);
   transition: transform .3s ease-out, opacity .3s ease-out;
   will-change: transform;
   opacity: var(--opacity, 1);
@@ -53,9 +53,27 @@
 .pk-toast[data-state="pending"], .pk-toast[data-state="closing"] { opacity: 0; }
 .pk-toast[data-swipe="move"] { transition: none; }
 
+/* Swipe-out: fly along the direction the controller stamps into
+   --swipe-end-x/y (implicit `from` = the inline transform, which still
+   carries the drag offset via --pk-toast-swipe-x/y). forwards keeps the
+   end pose until the 200ms unmount removes the node. */
+.pk-toast[data-swipe="end"] {
+  animation: pk-toast-swipe-out .2s ease-out forwards;
+}
+@keyframes pk-toast-swipe-out {
+  to {
+    transform: translate3d(var(--swipe-end-x, 0px), calc(var(--y-offset, 0px) + var(--swipe-end-y, 0px)), 0);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* No fly-out; [data-state="closing"] still fades it. */
+  .pk-toast[data-swipe="end"] { animation: none; }
+}
+
 /* Room for the corner close button (region-wide, or per-spawned-toast). */
 .pk-toast-region[data-close-button="true"] .pk-toast,
-.pk-toast.pk-toast-with-close { padding-right: 2.5rem; }
+.pk-toast.pk-toast-with-close { padding-inline-end: 2.5rem; }
 
 .pk-toast-icon {
   position: relative;
@@ -65,11 +83,11 @@
   justify-content: flex-start;
   width: 1rem;
   height: 1rem;
-  margin-left: -3px;
-  margin-right: .25rem;
+  margin-inline-start: -3px;
+  margin-inline-end: .25rem;
   color: var(--pk-text);
 }
-.pk-toast-icon-svg { width: 1rem; height: 1rem; margin-left: -1px; }
+.pk-toast-icon-svg { width: 1rem; height: 1rem; margin-inline-start: -1px; }
 .pk-toast-icon-svg.spin { animation: pk-toast-spin 1s linear infinite; }
 @keyframes pk-toast-spin { to { transform: rotate(360deg); } }
 
@@ -93,7 +111,7 @@
   justify-content: center;
   flex: none;
   height: 1.5rem;
-  margin-left: auto;
+  margin-inline-start: auto;
   border: 0;
   border-radius: calc(var(--pk-radius) - 4px);
   padding: 0 .5rem;
@@ -106,9 +124,9 @@
   transition: opacity .15s ease;
 }
 .pk-toast-action:hover { opacity: .9; }
-.pk-toast-action:focus {
+.pk-toast-action:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-toast-action:disabled { pointer-events: none; opacity: .5; }
 
@@ -119,7 +137,7 @@
   justify-content: center;
   flex: none;
   height: 1.5rem;
-  margin-left: auto;
+  margin-inline-start: auto;
   border: 0;
   border-radius: calc(var(--pk-radius) - 4px);
   padding: 0 .5rem;
@@ -132,15 +150,15 @@
   transition: background-color .15s ease;
 }
 .pk-toast-cancel:hover { background: color-mix(in oklab, var(--pk-text) 15%, transparent); }
-.pk-toast-cancel:focus {
+.pk-toast-cancel:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 
 /* Corner × close. */
 .pk-toast-close {
   position: absolute;
-  right: .5rem;
+  inset-inline-end: .5rem;
   top: .5rem;
   display: flex;
   align-items: center;
@@ -156,8 +174,8 @@
   transition: background-color .15s ease, color .15s ease;
 }
 .pk-toast-close:hover { background: var(--pk-accent); color: var(--pk-text); }
-.pk-toast-close:focus {
+.pk-toast-close:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-toast-close svg { width: .875rem; height: .875rem; }

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

@@ -50,7 +50,17 @@ export default class extends Controller {
 
     requestAnimationFrame(() => {
       this.element.dataset.state = "open"
-      this._start()
+      // Spawned under an already-hovered stack (the toaster stamps
+      // data-pk-toasts-paused while dispatching pause): arm as paused so the
+      // region's resume event starts the timer, instead of ticking away
+      // under the user's cursor.
+      if (Number.isFinite(this.durationValue) && this.durationValue > 0 &&
+          this.element.closest("[data-pk-toasts-paused]")) {
+        this._paused = true
+        this._remaining = this.durationValue
+      } else {
+        this._start()
+      }
     })
   }
 
@@ -142,7 +152,11 @@ export default class extends Controller {
     const dx = e.clientX - this._swipe.x
     const dy = e.clientY - this._swipe.y
     this.element.dataset.swipe = "move"
-    this.element.style.transform = `translate(${dx}px, ${dy}px)`
+    // Never write style.transform here: the toaster owns it (stacking
+    // translate3d + scale, written to compose these vars). Writing it
+    // directly snapped non-front toasts out of position.
+    this.element.style.setProperty("--pk-toast-swipe-x", `${dx}px`)
+    this.element.style.setProperty("--pk-toast-swipe-y", `${dy}px`)
   }
 
   _onPointerUp(e) {
@@ -156,14 +170,20 @@ export default class extends Controller {
     this.element.removeEventListener("pointercancel", this._onPointerUp)
     this._swipe.active = false
     if (dist > SWIPE_THRESHOLD || velocity > 0.5) {
+      // Keep the swipe vars in place: they are the animation's start point.
+      // toast.css's [data-swipe="end"] keyframes fly the toast out along
+      // --swipe-end-x/y while _close fades + removes it.
       this.element.style.setProperty("--swipe-end-x", `${Math.sign(dx) * 500}px`)
       this.element.style.setProperty("--swipe-end-y", `${Math.sign(dy) * 500}px`)
       this.element.dataset.swipe = "end"
-      this.element.style.transform = ""
       this._close("dismiss")
     } else {
+      // Clearing the vars composes the toast back into the toaster's stacking
+      // transform; the transition (re-enabled once data-swipe leaves "move")
+      // animates it home.
       this.element.dataset.swipe = "cancel"
-      this.element.style.transform = ""
+      this.element.style.removeProperty("--pk-toast-swipe-x")
+      this.element.style.removeProperty("--pk-toast-swipe-y")
       this._resume()
     }
   }

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
@@ -73,6 +78,9 @@ module PhlexKit
         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
@@ -98,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()
   }
@@ -227,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
@@ -257,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

@@ -54,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/lib/phlex_kit/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.1
 platform: ruby
 authors:
 - Matt Kennedy