RubyGems - phlex_kit - Versions diffs - 0.8.0 → 0.9.0 - Mend

phlex_kit 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

data/app/components/phlex_kit/sidebar/sidebar_controller.js CHANGED Viewed

@@ -9,23 +9,54 @@ import { Controller } from "@hotwired/stimulus"
 // media query. The desktop state persists in a `pk_sidebar_state` cookie so a
 // host layout can render the collapsed rail server-side (no flash) via
 // SidebarWrapper's `default_collapsed:`.
+//
+// A11y: connect() wires aria-controls on every trigger/rail that didn't get one
+// server-side (generating an id on the .pk-sidebar if needed) and keeps their
+// aria-expanded in sync on every toggle. The mobile overlay drawer is a real
+// modal: opening moves focus into it and inerts the rest of the wrapper + page
+// (the scrim stays live — it IS the close control), closing (scrim, Escape,
+// trigger, turbo:before-cache) restores inert state and returns focus to the
+// opener.
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
 export default class extends Controller {
   static MOBILE = "(max-width: 767px)"
   static COOKIE = "pk_sidebar_state"
+  connect() {
+    this.#wireAriaControls()
+    this.#syncExpanded()
+  }
+  disconnect() {
+    this.#restoreInert()
+  }
   toggle(event) {
     if (event?.type === "keydown" && !(event.metaKey || event.ctrlKey)) return
     if (this.mobile) {
-      this.element.toggleAttribute("data-open")
+      if (this.element.hasAttribute("data-open")) {
+        this.closeMobile()
+      } else {
+        this.element.setAttribute("data-open", "")
+        this.#trapMobile(event)
+      }
     } else {
       this.element.toggleAttribute("data-collapsed")
       this.persist()
     }
+    this.#syncExpanded()
   }
   closeMobile() {
+    if (!this.element.hasAttribute("data-open")) return
     this.element.removeAttribute("data-open")
+    this.#restoreInert()
+    if (this.opener?.isConnected) this.opener.focus()
+    this.opener = null
+    this.#syncExpanded()
   }
   persist() {
@@ -36,4 +67,70 @@ export default class extends Controller {
   get mobile() {
     return window.matchMedia(this.constructor.MOBILE).matches
   }
+  get sidebar() {
+    return this.element.querySelector(".pk-sidebar")
+  }
+  get togglers() {
+    return this.element.querySelectorAll(".pk-sidebar-trigger, .pk-sidebar-rail")
+  }
+  // Open mobile drawer: remember the opener, inert everything that isn't the
+  // sidebar or its scrim, and move focus into the drawer.
+  #trapMobile(event) {
+    this.opener = event?.currentTarget instanceof HTMLElement ? event.currentTarget : document.activeElement
+    this.#inertOthers()
+    const sidebar = this.sidebar
+    if (!sidebar) return
+    const focusable = sidebar.querySelector(FOCUSABLE)
+    ;(focusable || sidebar).focus()
+  }
+  // Inert the page behind the scrim: the wrapper's siblings in <body>, plus
+  // wrapper children other than the sidebar and the scrim (typically the
+  // SidebarInset). Prior inert state is saved per element and restored on
+  // close/disconnect (turbo:before-cache routes through closeMobile).
+  #inertOthers() {
+    this.inerted = []
+    const skip = ["SCRIPT", "STYLE", "LINK", "TEMPLATE"]
+    const mark = (el) => {
+      if (skip.includes(el.tagName)) return
+      this.inerted.push([el, el.inert])
+      el.inert = true
+    }
+    for (const el of document.body.children) {
+      if (el === this.element || el.contains(this.element)) continue
+      mark(el)
+    }
+    for (const el of this.element.children) {
+      if (el.matches(".pk-sidebar, .pk-sidebar-scrim")) continue
+      mark(el)
+    }
+  }
+  #restoreInert() {
+    for (const [el, wasInert] of this.inerted || []) el.inert = wasInert
+    this.inerted = null
+  }
+  // aria-controls: point every trigger/rail at the sidebar's id (server-side
+  // `controls:` wins; an id is generated when the sidebar has none).
+  #wireAriaControls() {
+    const sidebar = this.sidebar
+    if (!sidebar) return
+    if (!sidebar.id) sidebar.id = `pk-sidebar-${Math.random().toString(36).slice(2, 10)}`
+    for (const el of this.togglers) {
+      if (!el.getAttribute("aria-controls")) el.setAttribute("aria-controls", sidebar.id)
+    }
+  }
+  // aria-expanded mirrors the surface the viewport is actually showing:
+  // the mobile drawer's data-open below the cutoff, data-collapsed above it.
+  #syncExpanded() {
+    const expanded = this.mobile
+      ? this.element.hasAttribute("data-open")
+      : !this.element.hasAttribute("data-collapsed")
+    for (const el of this.togglers) el.setAttribute("aria-expanded", String(expanded))
+  }
 }

data/app/components/phlex_kit/sidebar/sidebar_menu_button.rb CHANGED Viewed

@@ -2,9 +2,14 @@ module PhlexKit
   # The interactive element of a SidebarMenuItem. `as:` is :button (default) or :a
   # (pass `href:`); `active: true` marks the current page (drives the highlight via
   # data-active — a named kwarg, not an attr, since `mix` would merge a repeated
-  # attribute rather than override). `tooltip:` labels the button while an
-  # icon-collapsed rail hides its text (pure-CSS hover bubble). Attrs pass
-  # through via mix. See sidebar.rb.
+  # attribute rather than override; an active link also gets aria-current="page").
+  # `tooltip:` labels the button while an icon-collapsed rail hides its text
+  # (pure-CSS hover bubble) and doubles as the aria-label so the button keeps an
+  # accessible name once the text is hidden. Bare block text is wrapped in a
+  # <span> automatically so the collapsed rail's `> :not(svg)` rule can hide it;
+  # blocks that emit their own markup (icon + <span>Label</span>) pass through
+  # untouched — keep the label in a real element there. Attrs pass through via
+  # mix. See sidebar.rb.
   class SidebarMenuButton < BaseComponent
     def initialize(as: :button, active: false, tooltip: nil, **attrs)
       @as = as
@@ -15,8 +20,22 @@ module PhlexKit
     def view_template(&block)
       base = { class: "pk-sidebar-menu-button", "data-active": (@active ? "true" : "false") }
-      base["data-tooltip"] = @tooltip if @tooltip
-      send(@as, **mix(base, @attrs), &block)
+      base["aria-current"] = "page" if @active && @as == :a
+      if @tooltip
+        base["data-tooltip"] = @tooltip
+        base["aria-label"] = @tooltip
+      end
+      send(@as, **mix(base, @attrs)) do
+        # capture renders the block once; pure text (no markup) gets the span
+        # wrapper the icon-collapsed CSS needs. The captured output is
+        # already-escaped HTML, so re-emit it via raw(safe(...)).
+        content = capture(&block)
+        if content.include?("<") || content.empty?
+          raw safe(content)
+        else
+          span { raw safe(content) }
+        end
+      end
     end
   end
 end

data/app/components/phlex_kit/sidebar/sidebar_rail.rb CHANGED Viewed

@@ -1,21 +1,30 @@
 module PhlexKit
   # Invisible grab strip along the sidebar's trailing edge — clicking it
   # toggles the collapse, like shadcn/ui's SidebarRail. Place it as the last
-  # child of a Sidebar inside a collapsible wrapper. See sidebar.rb.
+  # child of a Sidebar inside a collapsible wrapper. `expanded:` renders the
+  # initial aria-expanded (pass false when the wrapper starts
+  # default_collapsed); the phlex-kit--sidebar controller keeps it in sync on
+  # toggle. `controls:` renders aria-controls pointing at the Sidebar's id —
+  # when omitted, the controller wires it on connect. See sidebar.rb.
   class SidebarRail < BaseComponent
-    def initialize(**attrs)
+    def initialize(expanded: true, controls: nil, **attrs)
+      @expanded = expanded
+      @controls = controls
       @attrs = attrs
     end
     def view_template
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-sidebar-rail",
         aria_label: "Toggle sidebar",
+        "aria-expanded": @expanded ? "true" : "false",
         tabindex: "-1",
         title: "Toggle sidebar",
         data: { action: "click->phlex-kit--sidebar#toggle" }
-      }, @attrs))
+      }
+      base["aria-controls"] = @controls if @controls
+      button(**mix(base, @attrs))
     end
   end
 end

data/app/components/phlex_kit/sidebar/sidebar_trigger.rb CHANGED Viewed

@@ -3,19 +3,29 @@ module PhlexKit
   # SidebarTrigger. Place it anywhere inside a
   # SidebarWrapper(collapsible: :offcanvas) — typically at the top of the
   # SidebarInset. Renders the :menu icon unless a block supplies its own
-  # content. Hidden by CSS unless the wrapper is offcanvas. See sidebar.rb.
+  # content. Hidden by CSS unless the wrapper is offcanvas. `expanded:` renders
+  # the initial aria-expanded (pass false when the wrapper starts
+  # default_collapsed); the phlex-kit--sidebar controller keeps it in sync on
+  # toggle. `controls:` renders aria-controls pointing at the Sidebar's id —
+  # when omitted, the controller wires it on connect (generating an id on the
+  # sidebar if needed). See sidebar.rb.
   class SidebarTrigger < BaseComponent
-    def initialize(**attrs)
+    def initialize(expanded: true, controls: nil, **attrs)
+      @expanded = expanded
+      @controls = controls
       @attrs = attrs
     end
     def view_template(&block)
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-sidebar-trigger",
         aria_label: "Toggle sidebar",
+        "aria-expanded": @expanded ? "true" : "false",
         data: { action: "click->phlex-kit--sidebar#toggle" }
-      }, @attrs)) do
+      }
+      base["aria-controls"] = @controls if @controls
+      button(**mix(base, @attrs)) do
         block ? yield : render(Icon.new(:menu, size: nil))
       end
     end

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

@@ -25,8 +25,8 @@
   margin-top: -0.25rem;
   border-radius: 9999px;
   border: 1px solid var(--pk-ring);
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
+  background: var(--pk-bg);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-shadow-color) 25%, transparent);
   transition: box-shadow .15s ease;
 }
 .pk-slider:hover::-webkit-slider-thumb,
@@ -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/slider/slider.rb CHANGED Viewed

@@ -20,7 +20,9 @@ module PhlexKit
         step: @step,
         value: @value,
         class: "pk-slider",
-        style: "--pk-slider-progress: #{progress}%",
+        # Trailing ";" — mix joins a caller style: with a space; without it
+        # both declarations fuse into one invalid declaration.
+        style: "--pk-slider-progress: #{progress}%;",
         data: {
           controller: "phlex-kit--slider",
           action: "input->phlex-kit--slider#update"

data/app/components/phlex_kit/switch/switch.rb CHANGED Viewed

@@ -16,7 +16,12 @@ module PhlexKit
     def view_template
       label(**mix({ class: [ "pk-switch", fetch_option(SIZES, @size, :size) ].compact.join(" ") }, @wrapper)) do
-        input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden && @attrs[:name]
+        if @include_hidden && @attrs[:name]
+          # Disabled in lockstep with the checkbox (Rails' check_box idiom) —
+          # a disabled switch must not still post its unchecked value.
+          input(type: "hidden", name: @attrs[:name], value: @unchecked_value,
+            disabled: @attrs[:disabled] ? true : nil)
+        end
         # role="switch" belongs on the focusable control: native checkedness then
         # maps to aria-checked for AT, and the label stays a plain label.
         input(**mix({ class: "pk-switch-input", role: "switch" }, @attrs).merge(type: "checkbox", value: @checked_value))

data/app/components/phlex_kit/table/table.css CHANGED Viewed

@@ -16,13 +16,15 @@
 .pk-table-head {
   height: 2.5rem;
   padding: 0 .5rem;
-  text-align: left;
+  text-align: start;
   vertical-align: middle;
   font-weight: 500;
   white-space: nowrap;
   color: var(--pk-text);
 }
-.pk-table-head:has([role="checkbox"]),
-.pk-table-cell:has([role="checkbox"]) { padding-right: 0; }
+/* Native inputs (the kit Checkbox) have no role="checkbox" — match both;
+   the [role] arm covers custom/ARIA checkboxes. */
+.pk-table-head:has(input[type="checkbox"], [role="checkbox"]),
+.pk-table-cell:has(input[type="checkbox"], [role="checkbox"]) { padding-inline-end: 0; }
 .pk-table-cell { padding: .5rem; vertical-align: middle; white-space: nowrap; }
 .pk-table-caption { margin-top: 1rem; font-size: .875rem; color: var(--pk-muted); }

data/app/components/phlex_kit/tabs/tabs.css CHANGED Viewed

@@ -22,8 +22,8 @@
 .pk-tabs-trigger:hover { color: var(--pk-text); }
 .pk-tabs-trigger svg { pointer-events: none; flex-shrink: 0; }
 .pk-tabs-trigger svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
-.pk-tabs-trigger:has(> [data-icon="inline-start"]) { padding-left: .25rem; }
-.pk-tabs-trigger:has(> [data-icon="inline-end"]) { padding-right: .25rem; }
+.pk-tabs-trigger:has(> [data-icon="inline-start"]) { padding-inline-start: .25rem; }
+.pk-tabs-trigger:has(> [data-icon="inline-end"]) { padding-inline-end: .25rem; }
 .pk-tabs-trigger:focus-visible {
   outline: none;
   border-color: var(--pk-ring);
@@ -33,7 +33,7 @@
   background: color-mix(in oklab, var(--pk-input) 30%, transparent);
   border-color: var(--pk-input);
   color: var(--pk-text);
-  box-shadow: 0 1px 2px rgb(0 0 0 / .1);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-shadow-color) 10%, transparent);
 }
 .pk-tabs-trigger:disabled { pointer-events: none; opacity: .5; }
@@ -57,7 +57,7 @@
 .pk-tabs.vertical .pk-tabs-trigger::after {
   inset-inline: auto;
   inset-block: 0;
-  right: -.25rem;
+  inset-inline-end: -.25rem;
   width: 2px;
   height: auto;
 }

data/app/components/phlex_kit/tabs/tabs_content.rb CHANGED Viewed

@@ -1,14 +1,17 @@
 module PhlexKit
   class TabsContent < BaseComponent
-    def initialize(value:, **attrs)
+    def initialize(value:, active: false, **attrs)
       @value = value
+      @active = active
       @attrs = attrs
     end
     def view_template(&)
       # id / aria-labelledby mirror TabsTrigger's deterministic ids (re-scoped
       # per instance by the controller); tabindex="0" makes the panel itself
-      # focusable, per the APG tabs pattern.
-      div(**mix({ class: "pk-tabs-content pk-hidden", role: "tabpanel", id: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+      # focusable, per the APG tabs pattern. `active:` (mirroring TabsTrigger's)
+      # renders the panel visible pre-JS/no-JS; the controller's sync()
+      # reconciles visibility from the active value after connect.
+      div(**mix({ class: @active ? "pk-tabs-content" : "pk-tabs-content pk-hidden", role: "tabpanel", id: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/tabs/tabs_controller.js CHANGED Viewed

@@ -33,7 +33,9 @@ export default class extends Controller {
     const index = triggers.indexOf(document.activeElement)
     let target
     if (nextKeys.includes(event.key)) target = triggers[(index + 1) % triggers.length]
-    else if (prevKeys.includes(event.key)) target = triggers[(index - 1 + triggers.length) % triggers.length]
+    // index is -1 when focus isn't on a trigger — treat prev as "last"
+    // (the modulo would land on n-2 otherwise).
+    else if (prevKeys.includes(event.key)) target = triggers[index === -1 ? triggers.length - 1 : (index - 1 + triggers.length) % triggers.length]
     else if (event.key === "Home") target = triggers[0]
     else if (event.key === "End") target = triggers[triggers.length - 1]
     if (!target) return

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

@@ -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>
+  #     let t; try { t = localStorage.theme } catch {}
+  #     document.documentElement.dataset.theme = (t === "dark" || t === "light") ? t : "system";
+  #   </script>
   class ThemeToggle < BaseComponent
     def initialize(wrapper: {}, aria: {}, **attrs)
       @wrapper = wrapper

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

@@ -3,20 +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"
-    localStorage.theme = theme
+    // 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 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 === 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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()
     }
   }