phlex_kit 0.10.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f20449d41b77f26b6a4272eb5f4ebd116a225af9bf2dcb6bfec5899a5b117a2
-  data.tar.gz: fd83a994ef1cc33452c19b8520934db31750babacb7508511dffb9c41b08a9dd
+  metadata.gz: 832d7d74c2bcda4dcddef6ab391ee7afff8c15a3f011b57392dfb0e5d73b9922
+  data.tar.gz: 730dd9af5257a9350c551d9b5573d919cd04dd462a19f38d55558aa282d16822
 SHA512:
-  metadata.gz: f08a4051f646822945f9f1bf72b52cfce151509322032dccba9ec7166db4bf5a99bead12adeec4969edf0fc94df5b55dc902424322fa6a351abd18d92c04496b
-  data.tar.gz: 83b2a4ea332492c19ce059611e534fc57c79fa39e136e9bd00e2cf535fe09c791f75c0c81bc12056f2678f9a1bcf4bd18bd8246b79cd7377e0f990dbd4472c50
+  metadata.gz: 545d9af3c5b4ef67ff2793618825b17fcfff6a42fd7a7e97ca2b294d447d71ded63858094dc32f938dcdabd9c39ac4c8696bdf68da4b74cf1692bf62770d8081
+  data.tar.gz: 2a98a887feff3cf7a2144baeb9f380738880f2c100e6ed3ecc3ab2a4a1d94038efe06531b725eede6e1e419c4f9a282b109b6cb2db49328f32962819a17417c3

data/app/assets/stylesheets/phlex_kit/phlex_kit.css

@@ -44,6 +44,7 @@
 @import url("form/form.css");
 @import url("form_field/form_field.css");
 @import url("hover_card/hover_card.css");
+@import url("icon/icon.css");
 @import url("input/input.css");
 @import url("input_group/input_group.css");
 @import url("input_otp/input_otp.css");

data/app/components/phlex_kit/accordion/accordion.css

@@ -9,6 +9,13 @@
   background: none; border: 0; cursor: pointer; color: inherit; transition: color .15s ease, background-color .15s ease, text-decoration-color .15s ease;
 }
 .pk-accordion-trigger:hover { text-decoration: underline; }
+/* background/border are stripped above — reinstate the kit focus ring or
+   keyboard focus falls back to the UA outline. */
+.pk-accordion-trigger:focus-visible {
+  outline: none;
+  border-radius: calc(var(--pk-radius) - 2px);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
 .pk-accordion-trigger-label { flex: 1; }
 .pk-accordion-icon { display: inline-flex; opacity: .5; transition: transform .2s ease; }
 .pk-accordion-icon svg { width: 1rem; height: 1rem; }

data/app/components/phlex_kit/alert_dialog/alert_dialog.css

@@ -22,7 +22,9 @@
   gap: 1rem;
   width: calc(100% - 2rem);
   max-width: 32rem;
-  max-height: 100vh;
+  /* Breathing room like dialog.css's max-height — 100vh touched the screen
+     edges and overflowed behind mobile browser chrome (dvh tracks it). */
+  max-height: calc(100dvh - 2rem);
   overflow-y: auto;
   border: 1px solid var(--pk-border);
   border-radius: var(--pk-radius);

data/app/components/phlex_kit/alert_dialog/alert_dialog_content.rb

@@ -20,9 +20,20 @@ module PhlexKit
         # mousedown on the overlay is prevented so a stray click can't move
         # focus out of the trap. tabindex="-1" on the panel is the focus
         # fallback when the dialog has no focusable children.
-        div(data: { controller: "phlex-kit--alert-dialog" }) do
+        # data-pk-overlay-clone is a common marker read across clone-based
+        # overlay families (see #topmost in alert_dialog_controller.js) so
+        # Escape resolves to whichever overlay is actually topmost, even when
+        # a different overlay type (e.g. a Sheet) is nested/stacked on top.
+        div(data: { controller: "phlex-kit--alert-dialog", pk_overlay_clone: "" }) do
           div(class: "pk-alert-dialog-overlay", "aria-hidden": "true", data: { action: "mousedown->phlex-kit--alert-dialog#overlayMousedown" })
-          div(**mix({ role: "alertdialog", "aria-modal": "true", tabindex: "-1", class: [ "pk-alert-dialog-panel", fetch_option(SIZES, @size, :size) ].compact.join(" ") }, @attrs), &block)
+          panel_attrs = { class: [ "pk-alert-dialog-panel", fetch_option(SIZES, @size, :size) ].compact.join(" ") }
+          # Defaults only when the caller didn't supply their own — `mix`
+          # would fuse role="alertdialog dialog" / aria-modal="true false" /
+          # tabindex="-1 0" instead of overriding.
+          panel_attrs[:role] = "alertdialog" unless @attrs.key?(:role) || @attrs.key?("role")
+          panel_attrs[:"aria-modal"] = "true" unless aria_key_set?(:modal)
+          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          div(**mix(panel_attrs, @attrs), &block)
         end
       end
     end

data/app/components/phlex_kit/alert_dialog/alert_dialog_controller.js

@@ -29,7 +29,17 @@ export default class extends Controller {
     this.previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     this.onKeydown = (event) => this.keydown(event);
-    this.beforeCache = () => this.element.remove();
+    // Turbo snapshots synchronously right after dispatching this event —
+    // BEFORE Stimulus disconnect() runs (it fires via MutationObserver, too
+    // late). Restore inert + scroll lock here so the snapshot never captures
+    // a fully-inerted, scroll-locked page; disconnect()'s later restore
+    // becomes a harmless no-op (#restoreInert clears `this.inerted`, and
+    // reassigning the same overflow value is idempotent).
+    this.beforeCache = () => {
+      this.#restoreInert();
+      document.body.style.overflow = this.previousOverflow;
+      this.element.remove();
+    };
     document.addEventListener("keydown", this.onKeydown);
     document.addEventListener("turbo:before-cache", this.beforeCache);
     this.#inertOthers();
@@ -40,7 +50,16 @@ export default class extends Controller {
   }
 
   disconnect() {
-    if (this.hasContentTarget) return;
+    if (this.hasContentTarget) {
+      // The source element (holding the template) can disconnect while a
+      // clone it spawned is still live in <body> — e.g. Turbo replacing this
+      // region out from under an open dialog. Remove the orphan rather than
+      // leaving a modal nothing can dismiss. Idempotent: if the clone
+      // already removed itself (Cancel, Escape, its own before-cache),
+      // this.clone is disconnected and the isConnected check no-ops.
+      if (this.clone?.isConnected) this.clone.remove();
+      return;
+    }
     document.removeEventListener("keydown", this.onKeydown);
     document.removeEventListener("turbo:before-cache", this.beforeCache);
     this.#restoreInert();
@@ -52,6 +71,9 @@ export default class extends Controller {
     // Double-open guard: Enter+click (or a double-click) on the trigger must
     // not stack a second clone over the first.
     if (this.clone?.isConnected) return;
+    // open: is one-shot — the reflected value sits in the Turbo snapshot, so
+    // a cache-restored reconnect would re-open a dialog the user dismissed.
+    this.openValue = false;
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     this.clone = document.body.lastElementChild;
   }
@@ -73,6 +95,12 @@ export default class extends Controller {
     // handle the keyboard, or one Escape would close every layer at once.
     if (!this.#topmost()) return;
     if (event.key === "Escape") {
+      // A native <dialog> nested inside this panel (e.g. a Dialog opened
+      // from within AlertDialogContent) owns its own Escape handling; this
+      // document-level listener still sees the keydown since it bubbles all
+      // the way up — ignore it so one Escape doesn't also dismiss the alert
+      // dialog underneath (mirrors sheet_content_controller's guard).
+      if (event.target.closest("dialog[open]")) return;
       event.preventDefault();
       this.dismiss();
       return;
@@ -101,12 +129,15 @@ export default class extends Controller {
     }
   }
 
-  // Clones are appended as direct <body> children whose direct child is the
-  // [role="alertdialog"] panel (source elements only hold a <template>, whose
-  // content never matches querySelector). The last such clone is the topmost.
+  // Clones are appended as direct <body> children. Other clone-based overlay
+  // families (sheet/drawer content) stamp the same [data-pk-overlay-clone]
+  // marker on their own clone root, so this checks z-stacking across overlay
+  // TYPES, not just other alert dialogs — a sheet opened from inside an
+  // alert dialog (or vice versa) is a later sibling and must absorb Escape
+  // first; only the last overlay clone overall may act on it.
   #topmost() {
-    const clones = document.body.querySelectorAll(':scope > [data-controller~="phlex-kit--alert-dialog"] > [role="alertdialog"]');
-    return clones.length > 0 && clones[clones.length - 1].parentElement === this.element;
+    const clones = document.body.querySelectorAll(":scope > [data-pk-overlay-clone]");
+    return clones.length > 0 && clones[clones.length - 1] === this.element;
   }
 
   #panel() {

data/app/components/phlex_kit/attachment/attachment.css

@@ -118,6 +118,21 @@
   -webkit-text-fill-color: transparent;
   animation: pk-shimmer 2s linear infinite;
 }
+/* Same two fallback arms as _tokens.css's .pk-shimmer (:49-54): never let the
+   filename disappear under reduced motion or without relative color syntax
+   (Safari <16.4 / Chrome <119). */
+@media (prefers-reduced-motion: reduce) {
+  .pk-attachment[data-state="uploading"] .pk-attachment-title,
+  .pk-attachment[data-state="processing"] .pk-attachment-title {
+    animation: none; background-image: none; -webkit-text-fill-color: currentColor;
+  }
+}
+@supports not (color: oklch(from white l c h)) {
+  .pk-attachment[data-state="uploading"] .pk-attachment-title,
+  .pk-attachment[data-state="processing"] .pk-attachment-title {
+    animation: none; background-image: none; -webkit-text-fill-color: currentColor;
+  }
+}
 .pk-attachment[data-state="error"] { border-color: color-mix(in oklab, var(--pk-red) 40%, transparent); }
 .pk-attachment[data-state="error"] .pk-attachment-media { color: var(--pk-red); background: color-mix(in oklab, var(--pk-red) 12%, transparent); }
 .pk-attachment[data-state="error"] .pk-attachment-description { color: var(--pk-red); }

data/app/components/phlex_kit/attachment/attachment_group.rb

@@ -11,9 +11,14 @@ module PhlexKit
       div(**mix({
         class: "pk-attachment-group",
         role: "group",
+        # at-start + at-end = no edge fades. Server-rendered so a group that
+        # FITS shows no false "more content" fade pre-hydration / with JS off;
+        # the controller's first update() removes them when there's overflow.
         data: {
           controller: "phlex-kit--scroll-fade",
-          phlex_kit__scroll_fade_axis_value: "x"
+          phlex_kit__scroll_fade_axis_value: "x",
+          at_start: "",
+          at_end: ""
         }
       }, @attrs), &)
     end

data/app/components/phlex_kit/attachment/attachment_trigger.rb

@@ -4,8 +4,16 @@ module PhlexKit
   # stay independently clickable. Give it an aria-label; pass `as: :a` +
   # `href:` for a link. See attachment.rb.
   class AttachmentTrigger < BaseComponent
+    AS_TAGS = %i[button a].freeze
+
     def initialize(as: :button, href: nil, **attrs)
       @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown AttachmentTrigger as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
+      if @as == :a && href.nil?
+        raise ArgumentError, "AttachmentTrigger requires href: when as: :a"
+      end
       @href = href
       @attrs = attrs
     end

data/app/components/phlex_kit/avatar/avatar_badge.rb

@@ -4,12 +4,19 @@ module PhlexKit
   # svg glyph (hidden automatically on xs/sm avatars). Recolor via style/class
   # — defaults to the brand fill. See avatar.rb.
   class AvatarBadge < BaseComponent
-    def initialize(**attrs)
+    # label: gives the color-only presence dot an accessible alternative
+    # (a .pk-sr-only span, like AttachmentAction's). No default — a purely
+    # decorative dot stays silent.
+    def initialize(label: nil, **attrs)
+      @label = label
       @attrs = attrs
     end
 
     def view_template(&block)
-      span(**mix({ class: "pk-avatar-badge" }, @attrs), &block)
+      span(**mix({ class: "pk-avatar-badge" }, @attrs)) do
+        span(class: "pk-sr-only") { @label } if @label
+        block&.call
+      end
     end
   end
 end

data/app/components/phlex_kit/badge/badge.css

@@ -15,7 +15,7 @@
   overflow: hidden;
   white-space: nowrap;
   height: 1.25rem;
-  border-radius: 2rem;
+  border-radius: 999px; /* fully-round pill (matches avatar/progress), not a --pk-radius derivative */
   border: 1px solid transparent;
   padding: .125rem .5rem;
   font-size: .75rem;

data/app/components/phlex_kit/breadcrumb/breadcrumb.css

@@ -3,6 +3,7 @@
   display: flex; flex-wrap: wrap; align-items: center;
   gap: .375rem; word-break: break-word;
   font-size: .875rem; color: var(--pk-muted);
+  list-style: none; margin: 0; padding: 0;
 }
 .pk-breadcrumb-item { display: inline-flex; align-items: center; gap: .25rem; }
 .pk-breadcrumb-link { color: inherit; text-decoration: none; transition: color .15s ease; }

data/app/components/phlex_kit/bubble/bubble.rb

@@ -3,13 +3,11 @@ module PhlexKit
   # the child BubbleContent via a data-slot selector; align: :end flips it to the
   # trailing edge. Compose Bubble > BubbleContent (+ BubbleReactions).
   class Bubble < BaseComponent
-    VARIANTS = %i[default secondary muted tinted outline ghost destructive].freeze
-    ALIGNS = %i[start end].freeze
+    VARIANTS = %i[default secondary muted tinted outline ghost destructive].to_h { |v| [ v, v ] }.freeze
+    ALIGNS = %i[start end].to_h { |v| [ v, v ] }.freeze
     def initialize(variant: :default, align: :start, **attrs)
-      @variant = variant.to_sym
-      raise KeyError, "unknown Bubble variant #{@variant}" unless VARIANTS.include?(@variant)
-      @align = align.to_sym
-      raise KeyError, "unknown Bubble align #{@align}" unless ALIGNS.include?(@align)
+      @variant = fetch_option(VARIANTS, variant.to_sym, :variant)
+      @align = fetch_option(ALIGNS, align.to_sym, :align)
       @attrs = attrs
     end
     def view_template(&)

data/app/components/phlex_kit/bubble/bubble_reactions.rb

@@ -1,12 +1,10 @@
 module PhlexKit
   class BubbleReactions < BaseComponent
-    SIDES = %i[top bottom].freeze
-    ALIGNS = %i[start end].freeze
+    SIDES = %i[top bottom].to_h { |v| [ v, v ] }.freeze
+    ALIGNS = %i[start end].to_h { |v| [ v, v ] }.freeze
     def initialize(side: :bottom, align: :end, **attrs)
-      @side = side.to_sym
-      raise KeyError, "unknown BubbleReactions side #{@side}" unless SIDES.include?(@side)
-      @align = align.to_sym
-      raise KeyError, "unknown BubbleReactions align #{@align}" unless ALIGNS.include?(@align)
+      @side = fetch_option(SIDES, side.to_sym, :side)
+      @align = fetch_option(ALIGNS, align.to_sym, :align)
       @attrs = attrs
     end
     def view_template(&)

data/app/components/phlex_kit/calendar/calendar_controller.js

@@ -159,7 +159,9 @@ export default class extends Controller {
 
   toggleMultipleDay(iso) {
     const day = this.isoDate(this.parseDate(iso));
-    const current = [...this.selectedDatesValue];
+    // Normalized copy: server-supplied entries may be datetime strings
+    // (Time#to_s) — indexOf against the bare isoDate must still match.
+    const current = this.normalizeDates(this.selectedDatesValue);
     const index = current.indexOf(day);
     if (index >= 0) {
       current.splice(index, 1);
@@ -241,7 +243,10 @@ export default class extends Controller {
     return this.isoDate(date);
   }
 
-  updateCalendar() {
+  // `focusDay` overrides the day to refocus after re-render: on a keyboard
+  // month cross the target day lives in the NEW grid, not the pre-render
+  // activeElement, so onKeydown passes it explicitly.
+  updateCalendar(focusDay = null) {
     if (this.hasTitleTarget) {
       this.titleTarget.textContent = this.monthAndYear();
     }
@@ -249,9 +254,11 @@ export default class extends Controller {
     this.syncNavButtons();
     // innerHTML replacement drops focus — remember the focused day so
     // keyboard selection/month hops don't strand focus on <body>.
-    const focusedDay = this.calendarTarget.contains(document.activeElement)
-      ? document.activeElement.dataset?.day
-      : null;
+    const focusedDay =
+      focusDay ||
+      (this.calendarTarget.contains(document.activeElement)
+        ? document.activeElement.dataset?.day
+        : null);
     this.calendarTarget.innerHTML = this.calendarHTML();
     this.ensureGridTabStop(focusedDay);
   }
@@ -280,7 +287,11 @@ export default class extends Controller {
   // boundary re-renders the grid on the target month. Enter/Space activate
   // natively (the days are real <button>s).
   onKeydown(e) {
-    const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    // In RTL the day grid mirrors: the physical LEFT arrow advances one day.
+    // The week steps (Up/Down) and the PageUp/Down/Home/End jumps are
+    // unaffected. Runtime dir check is reliable after a dynamic flip.
+    const rtl = getComputedStyle(this.element).direction === "rtl";
+    const STEPS = { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, ArrowUp: -7, ArrowDown: 7 };
     const day = e.target.closest?.("[data-day]");
     if (!day) return;
 
@@ -303,11 +314,29 @@ export default class extends Controller {
     }
     e.preventDefault();
 
-    const iso = this.isoDate(target);
-    if (this.isDateDisabled(iso)) return; // min/max/booked boundary: stay put
+    let iso = this.isoDate(target);
+    if (this.isDateDisabled(iso)) {
+      // A min/max boundary holds focus in place; an isolated booked date is
+      // SKIPPED in the travel direction (APG date-grid) — arrows only, the
+      // month/row jumps (PageUp/Home/End) still stay put.
+      if (!(e.key in STEPS) || this.outOfRange(target)) return;
+      do {
+        target.setDate(target.getDate() + STEPS[e.key]);
+        if (this.outOfRange(target)) return;
+      } while (this.isBooked(target));
+      iso = this.isoDate(target);
+    }
 
     if (target.getMonth() !== this.viewDate().getMonth() || target.getFullYear() !== this.viewDate().getFullYear()) {
-      this.viewDateValue = iso; // re-renders the grid on the target month
+      // Crossing a month re-renders the grid on the target month. Stimulus
+      // value-changed callbacks fire via MutationObserver (async), so the grid
+      // is NOT re-rendered synchronously after this assignment — querying it
+      // below would hit the OLD month, and the target day (outside it) would be
+      // missing → early return, stranding focus on <body>. Drive the re-render
+      // ourselves and hand it the target day so ensureGridTabStop focuses it.
+      this.viewDateValue = iso;
+      this.updateCalendar(iso);
+      return;
     }
     const next = this.calendarTarget.querySelector(`[data-day="${iso}"]:not([disabled])`);
     if (!next) return;
@@ -412,7 +441,7 @@ export default class extends Controller {
       );
     }
     if (this.modeValue === "multiple") {
-      return this.selectedDatesValue.includes(this.isoDate(day));
+      return this.normalizeDates(this.selectedDatesValue).includes(this.isoDate(day));
     }
     const selectedDate = this.selectedDate();
     return selectedDate && day.toDateString() === selectedDate.toDateString();
@@ -428,7 +457,17 @@ export default class extends Controller {
   }
 
   isBooked(day) {
-    return this.disabledDatesValue.includes(this.isoDate(day));
+    return this.normalizeDates(this.disabledDatesValue).includes(this.isoDate(day));
+  }
+
+  // disabled_dates / selected_dates entries may be Time#to_s or datetime ISO
+  // strings — every other date input tolerates those via parseDate, so the
+  // membership arrays must be normalized the same way (exact string equality
+  // silently no-oped for anything but bare yyyy-MM-dd).
+  normalizeDates(values) {
+    return values
+      .map((d) => { const parsed = this.parseDate(d); return parsed ? this.isoDate(parsed) : null; })
+      .filter(Boolean);
   }
 
   monthAndYear() {
@@ -575,14 +614,16 @@ export default class extends Controller {
   isDateDisabled(date) {
     const candidate = this.parseDate(date);
     if (!candidate) return false;
+    return this.outOfRange(candidate) || this.isBooked(candidate);
+  }
 
+  // min/max bounds only (not booked entries) — the keyboard skip needs to
+  // distinguish a hard boundary from a hole in the middle of the grid.
+  outOfRange(candidate) {
     const minDate = this.minDate();
     if (minDate && this.startOfDay(candidate) < this.startOfDay(minDate)) return true;
-
     const maxDate = this.maxDate();
-    if (maxDate && this.startOfDay(candidate) > this.startOfDay(maxDate)) return true;
-
-    return this.disabledDatesValue.includes(this.isoDate(candidate));
+    return !!(maxDate && this.startOfDay(candidate) > this.startOfDay(maxDate));
   }
 
   parseDate(value) {

data/app/components/phlex_kit/carousel/carousel.rb

@@ -35,12 +35,13 @@ module PhlexKit
     end
 
     # Arrow keys follow the scroll axis: left/right for horizontal, up/down
-    # for vertical.
+    # for vertical. Horizontal arrows route through keyNext/keyPrev, which
+    # flip in RTL (the next slide sits to the physical left there).
     def keyboard_action
       if @orientation == :vertical
         "keydown.down->phlex-kit--carousel#scrollNext:prevent keydown.up->phlex-kit--carousel#scrollPrev:prevent"
       else
-        "keydown.right->phlex-kit--carousel#scrollNext:prevent keydown.left->phlex-kit--carousel#scrollPrev:prevent"
+        "keydown.right->phlex-kit--carousel#keyNext:prevent keydown.left->phlex-kit--carousel#keyPrev:prevent"
       end
     end
   end

data/app/components/phlex_kit/carousel/carousel_controller.js

@@ -10,6 +10,11 @@ const DEFAULT_OPTIONS = {
 const DRAG_DISTANCE_THRESHOLD = 0.25;
 const DRAG_VELOCITY_THRESHOLD = 0.5;
 
+// Subpixel slop when comparing the current offset to the max scrollable
+// offset — layout rounding can leave a fraction of a px short of the true
+// max, which would otherwise read as "can still scroll".
+const OFFSET_EPSILON = 0.5;
+
 // Ported from ruby_ui's carousel controller with the embla-carousel dependency
 // removed: a minimal translate-based engine (scrollNext/scrollPrev, loop, x/y
 // axis from the options value) moves the track directly, so only
@@ -36,6 +41,7 @@ export default class extends Controller {
     this._onPointerMove = this._onPointerMove.bind(this);
     this._onPointerUp = this._onPointerUp.bind(this);
     this._onClickCapture = this._onClickCapture.bind(this);
+    this._onDragStart = this._onDragStart.bind(this);
     window.addEventListener("resize", this._onResize);
     // window resize misses container-only resizes (flex/grid reflow,
     // sidebar toggles) — observe the viewport itself.
@@ -45,6 +51,10 @@ export default class extends Controller {
     }
     this.viewportTarget.addEventListener("pointerdown", this._onPointerDown);
     this.viewportTarget.addEventListener("click", this._onClickCapture, true);
+    // Firefox starts a native image drag on pointerdown-over-<img>, which
+    // cancels the pointer sequence mid-swipe; -webkit-user-drag (CSS) is
+    // WebKit-only, so suppress it here for every browser.
+    this.viewportTarget.addEventListener("dragstart", this._onDragStart);
     this._update();
   }
 
@@ -54,6 +64,7 @@ export default class extends Controller {
     this._resizeObserver = null;
     this.viewportTarget.removeEventListener("pointerdown", this._onPointerDown);
     this.viewportTarget.removeEventListener("click", this._onClickCapture, true);
+    this.viewportTarget.removeEventListener("dragstart", this._onDragStart);
     // a disconnect mid-drag must drop the move/up listeners and drag state
     this.viewportTarget.removeEventListener("pointermove", this._onPointerMove);
     this.viewportTarget.removeEventListener("pointerup", this._onPointerUp);
@@ -66,6 +77,14 @@ export default class extends Controller {
   }
 
   scrollNext() {
+    // Non-loop multi-up: the track can hit its max scrollable offset before
+    // the index reaches the last slide (_offsetOf clamps). Once there, index
+    // still has room to climb but there's nothing left to reveal — bail so
+    // neither clicks (button already disables via _update) nor ArrowRight
+    // (keyNext, which routes here) produce dead no-op advances.
+    if (!this.options.loop && this._offsetOf(this.index) >= this._maxOffset() - OFFSET_EPSILON) {
+      return;
+    }
     this._goTo(this.index + 1);
   }
 
@@ -73,6 +92,16 @@ export default class extends Controller {
     this._goTo(this.index - 1);
   }
 
+  // Physical arrow keys (horizontal axis only): in RTL the next slide sits
+  // to the physical LEFT, so the right arrow must travel toward "previous".
+  keyNext() {
+    this._rtl() ? this.scrollPrev() : this.scrollNext();
+  }
+
+  keyPrev() {
+    this._rtl() ? this.scrollNext() : this.scrollPrev();
+  }
+
   get slides() {
     return this.track ? Array.from(this.track.children) : [];
   }
@@ -95,8 +124,13 @@ export default class extends Controller {
 
   _update() {
     this._applyTransform();
-    const last = this.slides.length - 1;
-    const canNext = this.options.loop ? this.slides.length > 1 : this.index < last;
+    const canNext = this.options.loop
+      ? this.slides.length > 1
+      // Offset-based, not index-based: with multi-up layouts the track
+      // reaches its max scrollable offset (_maxOffset) before this.index
+      // reaches the last slide, and _offsetOf clamps to that max — an
+      // index-based check left Next enabled for several dead clicks.
+      : this._offsetOf(this.index) < this._maxOffset() - OFFSET_EPSILON;
     const canPrev = this.options.loop ? this.slides.length > 1 : this.index > 0;
     this.nextButtonTargets.forEach((button) => (button.disabled = !canNext));
     this.prevButtonTargets.forEach((button) => (button.disabled = !canPrev));
@@ -129,6 +163,8 @@ export default class extends Controller {
     const drag = this.drag;
     if (!drag) return;
     drag.delta = this._pointerPos(e) - drag.start;
+    // Normalize to scroll-axis space: in RTL a rightward drag reveals next.
+    if (this._rtl()) drag.delta = -drag.delta;
     if (!drag.moved && Math.abs(drag.delta) > 5) {
       drag.moved = true;
       this.track.style.transition = "none";
@@ -177,19 +213,38 @@ export default class extends Controller {
     e.stopPropagation();
   }
 
+  // Firefox-only: a pointer drag that starts on an <img> slide fires a
+  // native HTML5 dragstart, which cancels the in-flight pointer sequence
+  // (pointercancel) and aborts the swipe. Chrome/Safari never fire it here
+  // because carousel.css already sets -webkit-user-drag: none.
+  _onDragStart(e) {
+    if (e.target.closest("img")) {
+      e.preventDefault();
+    }
+  }
+
   // --- geometry ---
 
   _pointerPos(e) {
     return this.options.axis === "y" ? e.clientY : e.clientX;
   }
 
+  // In RTL the horizontal track lays slides right-to-left: later slides have
+  // SMALLER offsetLeft and the track must translate in +x to reveal them.
+  // All geometry below works in a direction-neutral "offset along the scroll
+  // axis" space; _rtl() flips the signs at the physical boundaries only.
+  _rtl() {
+    return this.options.axis !== "y" && getComputedStyle(this.element).direction === "rtl";
+  }
+
   _offsetOf(index) {
     const slide = this.slides[index];
     const first = this.slides[0];
     if (!slide || !first) return 0;
-    const raw = this.options.axis === "y"
+    let raw = this.options.axis === "y"
       ? slide.offsetTop - first.offsetTop
       : slide.offsetLeft - first.offsetLeft;
+    if (this._rtl()) raw = -raw;
     // Never scroll past the content edge: with multi-up layouts the last
     // slides' offsets overshoot the max scrollable offset (track − viewport).
     return Math.min(Math.max(0, raw), this._maxOffset());
@@ -211,6 +266,6 @@ export default class extends Controller {
   _translateTo(offset) {
     this.track.style.transform = this.options.axis === "y"
       ? `translate3d(0, ${-offset}px, 0)`
-      : `translate3d(${-offset}px, 0, 0)`;
+      : `translate3d(${this._rtl() ? offset : -offset}px, 0, 0)`;
   }
 }

data/app/components/phlex_kit/chart/chart.rb

@@ -19,13 +19,21 @@ module PhlexKit
     end
 
     def view_template(&)
-      canvas(**mix({
+      base = {
         class: "pk-chart",
         data: {
           controller: "phlex-kit--chart",
           phlex_kit__chart_options_value: JSON.generate(@options)
         }
-      }, @attrs), &)
+      }
+      # Defaults only when the caller didn't supply their own — `mix` would
+      # fuse role="img figure" instead of overriding.
+      # Canvas content is invisible to AT — announce it as an image with at
+      # least a generic name; pass aria: { label: "…" } (or block fallback
+      # content) to describe the actual data.
+      base[:role] = "img" unless @attrs.key?(:role) || @attrs.key?("role")
+      base[:aria] = { label: "Chart" } unless aria_labelled?
+      canvas(**mix(base, @attrs), &)
     end
   end
 end