phlex_kit 0.12.0 → 0.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 832d7d74c2bcda4dcddef6ab391ee7afff8c15a3f011b57392dfb0e5d73b9922
-  data.tar.gz: 730dd9af5257a9350c551d9b5573d919cd04dd462a19f38d55558aa282d16822
+  metadata.gz: 60c4cbd0615b995e62c9dee3f19ae2c2f48ff53c5ec7f8294bf757edb7f68a25
+  data.tar.gz: b95a0dcc6976d561bb1e8d005eac32607e771386d236735b3e45e4316b0ef4c7
 SHA512:
-  metadata.gz: 545d9af3c5b4ef67ff2793618825b17fcfff6a42fd7a7e97ca2b294d447d71ded63858094dc32f938dcdabd9c39ac4c8696bdf68da4b74cf1692bf62770d8081
-  data.tar.gz: 2a98a887feff3cf7a2144baeb9f380738880f2c100e6ed3ecc3ab2a4a1d94038efe06531b725eede6e1e419c4f9a282b109b6cb2db49328f32962819a17417c3
+  metadata.gz: e76f08c320a673fbcda5e136148933c12e26cbc9a9b97f8f253382bf9b9f11f26255de504cb27b67de2b1f0de8b6d40bb1f8e257b1da5c809259c5575c0489da
+  data.tar.gz: 130fb551c26417da890ec8da4dc1cc06187ae4dc6916129e3c8a862e3da14c3317e94d6c15ce0d8afa23e353aeacd7449e7d5aaa38ca43049a3a105932d68c30

data/app/components/phlex_kit/accordion/accordion_content.rb

@@ -11,7 +11,9 @@ module PhlexKit
     def view_template(&)
       # role="region" + aria-labelledby → trigger id (wired by the controller
       # in connect(), which also assigns the ids), per the APG accordion pattern.
-      base = { class: "pk-accordion-content", role: "region", data: { phlex_kit__accordion_target: "content", state: @open ? "open" : "closed" } }
+      base = { class: "pk-accordion-content", data: { phlex_kit__accordion_target: "content", state: @open ? "open" : "closed" } }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "region" unless attr_set?(:role)
       base.merge!(style: "height: 0px;", hidden: true) unless @open
       div(**mix(base, @attrs), &)
     end

data/app/components/phlex_kit/accordion/accordion_default_trigger.rb

@@ -13,7 +13,7 @@ module PhlexKit
       # aria-expanded reflects the render-time open state; the controller keeps
       # it in sync and wires aria-controls to the content's id in connect().
       base = {
-        type: "button", class: "pk-accordion-trigger",
+        type: :button, class: "pk-accordion-trigger",
         aria_expanded: @open ? "true" : "false", disabled: @disabled,
         data: { phlex_kit__accordion_target: "trigger", action: "click->phlex-kit--accordion#toggle" }
       }

data/app/components/phlex_kit/accordion/accordion_trigger.rb

@@ -12,7 +12,7 @@ module PhlexKit
       # aria-expanded reflects the render-time open state; the controller keeps
       # it in sync and wires aria-controls to the content's id in connect().
       base = {
-        type: "button", class: "pk-accordion-trigger",
+        type: :button, class: "pk-accordion-trigger",
         aria_expanded: @open ? "true" : "false", disabled: @disabled,
         data: { phlex_kit__accordion_target: "trigger", action: "click->phlex-kit--accordion#toggle" }
       }

data/app/components/phlex_kit/alert/alert.rb

@@ -29,7 +29,11 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({ class: classes, role: "alert" }, @attrs), &block)
+      base = { class: classes }
+      # Default only when the caller didn't supply their own — `mix` fuses
+      # (downgrading to role: "status" is a standard polite-live-region use).
+      base[:role] = "alert" unless attr_set?(:role)
+      div(**mix(base, @attrs), &block)
     end
 
     private

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

@@ -30,9 +30,9 @@ module PhlexKit
           # 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[:role] = "alertdialog" unless attr_set?(:role)
           panel_attrs[:"aria-modal"] = "true" unless aria_key_set?(:modal)
-          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          panel_attrs[:tabindex] = "-1" unless attr_set?(:tabindex)
           div(**mix(panel_attrs, @attrs), &block)
         end
       end

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

@@ -95,12 +95,18 @@ 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).
+      // Yield to any inner overlay that owns this Escape so one keypress
+      // doesn't also dismiss the alert dialog underneath: a native <dialog>
+      // (its own Escape handling), or an open [popover] menu — Select /
+      // DropdownMenu / Combobox, all popover=manual — rendered inside the
+      // panel. Two signals make the outcome independent of whether the inner
+      // handler fires before or after this document-level one:
+      // event.defaultPrevented catches an inner handler (menu, native dialog)
+      // that already consumed the key; the live :popover-open check catches a
+      // menu still open because this handler ran first.
+      if (event.defaultPrevented) return;
       if (event.target.closest("dialog[open]")) return;
+      if (this.#panel()?.querySelector("[popover]:popover-open")) return;
       event.preventDefault();
       this.dismiss();
       return;
@@ -140,8 +146,12 @@ export default class extends Controller {
     return clones.length > 0 && clones[clones.length - 1] === this.element;
   }
 
+  // Select the panel structurally, not by role: AlertDialogContent lets the
+  // caller override role: (the default is skipped when attr_set?(:role)), so a
+  // role-based lookup would fail to find a custom-role panel and silently
+  // break the whole modal contract (focus trap, aria wiring, dismiss).
   #panel() {
-    return this.element.querySelector('[role="alertdialog"]');
+    return this.element.querySelector(".pk-alert-dialog-panel");
   }
 
   #focusables() {

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

@@ -8,7 +8,10 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-alert-dialog-media", aria: { hidden: "true" } }, @attrs), &)
+      base = { class: "pk-alert-dialog-media" }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:aria] = { hidden: "true" } unless aria_key_set?(:hidden)
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/aspect_ratio/aspect_ratio.rb

@@ -16,10 +16,20 @@ module PhlexKit
 
     def view_template(&block)
       # **mix on the ROOT (kit rule) — caller attrs previously landed on the
-      # inner div and could never reach the actual root element. The trailing
-      # ";" matters: mix joins duplicate string attrs with a space, so a
-      # caller style: would otherwise fuse into one invalid declaration.
-      div(**mix({ class: "pk-aspect-ratio", style: "padding-bottom: #{padding_bottom}%;" }, @attrs)) do
+      # inner div and could never reach the actual root element. Emit the
+      # generated padding-bottom in the SAME form the caller used for style:,
+      # because mix only composes same-typed values — it JOINS two strings
+      # (the trailing ";" keeps the fused declaration valid) and MERGES two
+      # hashes, but a string base against a caller hash (or vice versa) is
+      # replaced wholesale, silently dropping our ratio and collapsing the box.
+      caller_style = @attrs[:style] || @attrs["style"]
+      generated_style =
+        if caller_style.is_a?(Hash)
+          { padding_bottom: "#{padding_bottom}%" }
+        else
+          "padding-bottom: #{padding_bottom}%;"
+        end
+      div(**mix({ class: "pk-aspect-ratio", style: generated_style }, @attrs)) do
         div(class: "pk-aspect-ratio-inner", &block)
       end
     end

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

@@ -118,6 +118,12 @@
   -webkit-text-fill-color: transparent;
   animation: pk-shimmer 2s linear infinite;
 }
+/* Same RTL arm as _tokens.css's .pk-shimmer — the sweep follows reading
+   direction. */
+[dir="rtl"] .pk-attachment[data-state="uploading"] .pk-attachment-title,
+[dir="rtl"] .pk-attachment[data-state="processing"] .pk-attachment-title {
+  animation-direction: reverse;
+}
 /* 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). */
@@ -163,7 +169,7 @@
   gap: .5rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  padding: 2px; /* room for card rings */
+  padding: 3px; /* room for card rings (the trigger focus ring is 3px) */
   mask-image: linear-gradient(var(--pk-scroll-fade-dir),
     transparent 0, black var(--pk-scroll-fade-size),
     black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);

data/app/components/phlex_kit/attachment/scroll_fade_controller.js

@@ -32,9 +32,10 @@ export default class extends Controller {
       // Math.abs: in RTL scrollLeft runs 0..negative, so the raw value would
       // read as permanently "at start" — abs tracks the logical inline start.
       const scrolled = Math.abs(el.scrollLeft)
-      // <= 2, not <= 1: scroll-snap + the 2px ring padding leave the group
-      // resting at scrollLeft 2, which must still count as "at start".
-      el.toggleAttribute("data-at-start", scrolled <= 2)
+      // <= 3, not <= 1: scroll-snap + the 3px ring padding (bumped from 2px so
+      // the 3px card focus ring isn't clipped) leave the group resting at
+      // scrollLeft ~3, which must still count as "at start".
+      el.toggleAttribute("data-at-start", scrolled <= 3)
       el.toggleAttribute("data-at-end", scrolled + el.clientWidth >= el.scrollWidth - 1)
     } else {
       el.toggleAttribute("data-at-start", el.scrollTop <= 1)

data/app/components/phlex_kit/avatar/avatar.css

@@ -111,7 +111,11 @@
   font-size: .875rem;
 }
 .pk-avatar-group-count > svg { width: 1rem; height: 1rem; }
+.pk-avatar-group:has(.pk-avatar.xs) .pk-avatar-group-count { width: 1rem; height: 1rem; font-size: .5rem; }
+.pk-avatar-group:has(.pk-avatar.xs) .pk-avatar-group-count > svg { width: .5rem; height: .5rem; }
 .pk-avatar-group:has(.pk-avatar.sm) .pk-avatar-group-count { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
 .pk-avatar-group:has(.pk-avatar.sm) .pk-avatar-group-count > svg { width: .75rem; height: .75rem; }
 .pk-avatar-group:has(.pk-avatar.lg) .pk-avatar-group-count { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
 .pk-avatar-group:has(.pk-avatar.lg) .pk-avatar-group-count > svg { width: 1.25rem; height: 1.25rem; }
+.pk-avatar-group:has(.pk-avatar.xl) .pk-avatar-group-count { width: 5rem; height: 5rem; font-size: 1.875rem; }
+.pk-avatar-group:has(.pk-avatar.xl) .pk-avatar-group-count > svg { width: 2.5rem; height: 2.5rem; }

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

@@ -13,3 +13,7 @@
 .pk-breadcrumb-separator > svg { width: .875rem; height: .875rem; }
 .pk-breadcrumb-ellipsis { display: flex; height: 1.25rem; width: 1.25rem; align-items: center; justify-content: center; }
 .pk-breadcrumb-ellipsis > svg { width: 1rem; height: 1rem; }
+
+/* RTL: the default chevron separator points along the reading direction —
+   mirror the icon (custom text/block separators are left alone). */
+[dir="rtl"] .pk-breadcrumb-separator > svg { transform: scaleX(-1); }

data/app/components/phlex_kit/breadcrumb/breadcrumb.rb

@@ -3,6 +3,13 @@ module PhlexKit
   # Breadcrumb > BreadcrumbList > BreadcrumbItem (+ Link/Page/Separator/Ellipsis).
   class Breadcrumb < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
-    def view_template(&) = nav(**mix({ class: "pk-breadcrumb", aria: { label: "breadcrumb" } }, @attrs), &)
+
+    def view_template(&)
+      base = { class: "pk-breadcrumb" }
+      # Default only when the caller didn't supply their own accessible name
+      # (localization, two breadcrumbs on a page) — `mix` would fuse them.
+      base[:aria] = { label: "breadcrumb" } unless aria_labelled?
+      nav(**mix(base, @attrs), &)
+    end
   end
 end

data/app/components/phlex_kit/breadcrumb/breadcrumb_page.rb

@@ -2,7 +2,7 @@ module PhlexKit
   class BreadcrumbPage < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      span(**mix({ class: "pk-breadcrumb-page", role: "link", aria: { disabled: true, current: "page" } }, @attrs), &)
+      span(**mix({ class: "pk-breadcrumb-page", role: "link", aria: { disabled: "true", current: "page" } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/breadcrumb/breadcrumb_separator.rb

@@ -2,7 +2,7 @@ module PhlexKit
   class BreadcrumbSeparator < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&block)
-      li(**mix({ class: "pk-breadcrumb-separator", role: "presentation", aria: { hidden: true } }, @attrs)) do
+      li(**mix({ class: "pk-breadcrumb-separator", role: "presentation", aria: { hidden: "true" } }, @attrs)) do
         if block then yield else render(Icon.new(:chevron_right, size: nil)) end
       end
     end

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

@@ -10,7 +10,11 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&)
-      send(@as, **mix({ class: "pk-bubble-content", data: { slot: "bubble-content" } }, @attrs), &)
+      base = { class: "pk-bubble-content", data: { slot: "bubble-content" } }
+      # An interactive bubble inside a <form> must not be an implicit
+      # type="submit" (same default PhlexKit::Button ships).
+      base[:type] = :button if @as == :button && !attr_set?(:type)
+      send(@as, **mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/button_group/button_group_separator.rb

@@ -10,7 +10,7 @@ module PhlexKit
     def view_template
       # Purely decorative — aria-hidden only (role="separator" would
       # contradict aria-hidden and confuse AT).
-      div(**mix({ class: "pk-button-group-separator", aria: { hidden: true } }, @attrs))
+      div(**mix({ class: "pk-button-group-separator", aria: { hidden: "true" } }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/calendar/calendar.css

@@ -166,3 +166,8 @@
   border-end-end-radius: var(--pk-cell-radius);
 }
 .pk-calendar-cell:has(> .range-start.range-end) { border-radius: var(--pk-cell-radius); }
+
+/* RTL: the nav buttons swap sides via inset-inline-*; mirror the chevrons
+   so each arrow keeps pointing outward (toward its travel direction). */
+[dir="rtl"] .pk-calendar-prev svg,
+[dir="rtl"] .pk-calendar-next svg { transform: scaleX(-1); }

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

@@ -50,27 +50,39 @@ export default class extends Controller {
 
   nextMonth(e) {
     e.preventDefault();
-    this.viewDateValue = this.clampViewIso(this.adjustMonth(1));
+    this.applyViewIso(this.clampViewIso(this.adjustMonth(1)));
   }
 
   prevMonth(e) {
     e.preventDefault();
-    this.viewDateValue = this.clampViewIso(this.adjustMonth(-1));
+    this.applyViewIso(this.clampViewIso(this.adjustMonth(-1)));
   }
 
-  // month/year dropdown caption (native selects)
+  // month/year dropdown caption (native selects). When clampViewIso clamps
+  // the pick back to the CURRENT view, the value write is a same-value
+  // no-op and Stimulus fires no valueChanged — render directly so the
+  // dropdown snaps back from the disallowed choice instead of desyncing
+  // from the grid.
   setMonth(e) {
     const date = this.viewDate();
     date.setDate(2);
     date.setMonth(Number(e.target.value));
-    this.viewDateValue = this.clampViewIso(this.isoDate(date));
+    this.applyViewIso(this.clampViewIso(this.isoDate(date)));
   }
 
   setYear(e) {
     const date = this.viewDate();
     date.setDate(2);
     date.setFullYear(Number(e.target.value));
-    this.viewDateValue = this.clampViewIso(this.isoDate(date));
+    this.applyViewIso(this.clampViewIso(this.isoDate(date)));
+  }
+
+  applyViewIso(iso) {
+    if (iso === this.viewDateValue) {
+      this.updateCalendar();
+      return;
+    }
+    this.viewDateValue = iso;
   }
 
   // --- month-navigation bounds (min/max dates + the year dropdown's range) ---
@@ -144,9 +156,11 @@ export default class extends Controller {
     const end = this.parseDate(this.rangeEndValue);
 
     if (!start || (start && end)) {
-      // begin a fresh range
+      // begin a fresh range. undefined (not null) clears the value: Stimulus
+      // removes the attribute for undefined, while null goes through
+      // setAttribute and serializes as the literal string "null".
       this.rangeStartValue = this.isoDate(candidate);
-      this.rangeEndValue = null;
+      this.rangeEndValue = undefined;
     } else if (candidate < start) {
       this.rangeStartValue = this.isoDate(candidate);
     } else {
@@ -182,10 +196,17 @@ export default class extends Controller {
       return;
     }
 
-    // update the viewDateValue to the selected date's month (this re-renders)
+    // update the viewDateValue to the selected date's month. Arm the
+    // double-render guard ONLY when the write actually changes the value:
+    // Stimulus skips valueChanged for a same-value attribute write
+    // (StringMapObserver compares before invoking), so arming on a
+    // same-month selection would leave a stale flag that swallows the next
+    // genuine navigation's re-render.
     const newViewDate = new Date(selectedDate);
     newViewDate.setDate(2); // avoid month-length/timezone edges
-    this.viewDateValue = this.isoDate(newViewDate);
+    const newViewIso = this.isoDate(newViewDate);
+    this._viewRendered = newViewIso !== this.viewDateValue;
+    this.viewDateValue = newViewIso;
 
     this.updateCalendar();
 
@@ -197,6 +218,13 @@ export default class extends Controller {
   }
 
   viewDateValueChanged(value, prevValue) {
+    // Month-cross paths render synchronously right after writing
+    // viewDateValue (focus must land in the NEW grid); this async echo
+    // (MutationObserver) would render the same view a second time.
+    if (this._viewRendered) {
+      this._viewRendered = false;
+      return;
+    }
     this.updateCalendar();
   }
 
@@ -334,6 +362,7 @@ export default class extends Controller {
       // 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._viewRendered = true;
       this.viewDateValue = iso;
       this.updateCalendar(iso);
       return;

data/app/components/phlex_kit/calendar/calendar_next.rb

@@ -6,17 +6,19 @@ module PhlexKit
     end
 
     def view_template
-      button(**mix({
+      base = {
         type: :button,
         name: "next-month",
         class: "pk-calendar-next",
-        aria: { label: "Go to next month" },
         data: {
           action: "click->phlex-kit--calendar#nextMonth",
           # target so the controller can disable it at the max-date/to-year bound
           phlex_kit__calendar_target: "nextButton"
         }
-      }, @attrs)) do
+      }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:aria] = { label: "Go to next month" } unless aria_labelled?
+      button(**mix(base, @attrs)) do
         icon
       end
     end

data/app/components/phlex_kit/calendar/calendar_prev.rb

@@ -6,17 +6,19 @@ module PhlexKit
     end
 
     def view_template
-      button(**mix({
+      base = {
         type: :button,
         name: "previous-month",
         class: "pk-calendar-prev",
-        aria: { label: "Go to previous month" },
         data: {
           action: "click->phlex-kit--calendar#prevMonth",
           # target so the controller can disable it at the min-date/from-year bound
           phlex_kit__calendar_target: "prevButton"
         }
-      }, @attrs)) do
+      }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:aria] = { label: "Go to previous month" } unless aria_labelled?
+      button(**mix(base, @attrs)) do
         icon
       end
     end

data/app/components/phlex_kit/carousel/carousel.css

@@ -39,3 +39,10 @@
 .pk-carousel.is-vertical .pk-carousel-previous { top: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
 .pk-carousel.is-vertical .pk-carousel-next { bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
 .pk-carousel-previous svg, .pk-carousel-next svg { width: 1rem; height: 1rem; }
+
+/* RTL (horizontal only): the scroll engine is direction-aware and the
+   buttons swap sides via inset-inline-*; mirror the arrow glyphs so they
+   point along the actual travel direction. Vertical carousels rotate the
+   whole button, which is direction-neutral. */
+[dir="rtl"] .pk-carousel.is-horizontal .pk-carousel-previous svg,
+[dir="rtl"] .pk-carousel.is-horizontal .pk-carousel-next svg { transform: scaleX(-1); }

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

@@ -16,10 +16,14 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({
-        class: [ "pk-carousel", fetch_option(ORIENTATIONS, @orientation, :orientation) ].join(" "),
-        role: "region",
-        aria: { roledescription: "carousel" },
+      base = {
+        class: [ "pk-carousel", fetch_option(ORIENTATIONS, @orientation, :orientation) ].join(" ")
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses
+      # (a localized roledescription would announce both strings).
+      base[:role] = "region" unless attr_set?(:role)
+      base[:aria] = { roledescription: "carousel" } unless aria_key_set?(:roledescription)
+      div(**mix(base, {
         data: {
           controller: "phlex-kit--carousel",
           phlex_kit__carousel_options_value: JSON.generate(default_options.merge(@options)),

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

@@ -20,8 +20,8 @@ const OFFSET_EPSILON = 0.5;
 // axis from the options value) moves the track directly, so only
 // @hotwired/stimulus is needed. Button disabled state mirrors embla's
 // canScrollNext/canScrollPrev, and pointer drag/swipe (threshold + velocity,
-// rubber-band at the ends when not looping, click suppression after a drag)
-// replaces embla's gesture engine.
+// rubber-band at the ends, click suppression after a drag) replaces embla's
+// gesture engine.
 export default class extends Controller {
   static values = {
     options: {
@@ -36,7 +36,14 @@ export default class extends Controller {
     this.track = this.viewportTarget.firstElementChild;
     this.drag = null;
     this.suppressClick = false;
-    this._onResize = () => this._applyTransform();
+    // connect() re-derives reflected state: a Turbo snapshot can capture
+    // mid-drag markup (dragging class kills the transition; the inline
+    // transition:none was set for the drag's duration only).
+    this.viewportTarget.classList.remove("dragging");
+    this.track?.style.removeProperty("transition");
+    // _update, not just _applyTransform: a resize can change _maxOffset,
+    // which feeds the buttons' disabled state as well as the transform.
+    this._onResize = () => this._update();
     this._onPointerDown = this._onPointerDown.bind(this);
     this._onPointerMove = this._onPointerMove.bind(this);
     this._onPointerUp = this._onPointerUp.bind(this);
@@ -46,7 +53,7 @@ export default class extends Controller {
     // window resize misses container-only resizes (flex/grid reflow,
     // sidebar toggles) — observe the viewport itself.
     if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(() => this._applyTransform());
+      this._resizeObserver = new ResizeObserver(() => this._update());
       this._resizeObserver.observe(this.viewportTarget);
     }
     this.viewportTarget.addEventListener("pointerdown", this._onPointerDown);
@@ -77,18 +84,36 @@ 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) {
+    // 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 — advancing anyway
+    // produces dead no-op clicks. Non-loop bails (button already disables
+    // via _update); loop wraps straight back to the start.
+    if (this._offsetOf(this.index) >= this._maxOffset() - OFFSET_EPSILON) {
+      if (this.options.loop) this._goTo(0);
       return;
     }
     this._goTo(this.index + 1);
   }
 
   scrollPrev() {
+    if (this.options.loop) {
+      // Mirror of scrollNext's wrap: from the start, jump to the FIRST index
+      // that reaches the max offset (not count - 1 — with multi-up layouts
+      // every later index clamps to the same offset, so landing on count - 1
+      // would make the following Prev presses dead clicks).
+      if (this._offsetOf(this.index) <= OFFSET_EPSILON) {
+        this._goTo(this._lastReachableIndex());
+        return;
+      }
+      // A resize can strand the index in the clamped zone past the last
+      // reachable position — step to just before the clamp so Prev moves.
+      const last = this._lastReachableIndex();
+      if (this.index > last) {
+        this._goTo(last - 1);
+        return;
+      }
+    }
     this._goTo(this.index - 1);
   }
 
@@ -124,14 +149,18 @@ export default class extends Controller {
 
   _update() {
     this._applyTransform();
+    // Loop mode wraps, so the buttons stay enabled as long as there is any
+    // travel to wrap through — with every slide already visible (_maxOffset
+    // is 0) a wrap is a permanent no-op, so disable then too.
+    const canLoop = this.slides.length > 1 && this._maxOffset() > OFFSET_EPSILON;
     const canNext = this.options.loop
-      ? this.slides.length > 1
+      ? canLoop
       // 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;
+    const canPrev = this.options.loop ? canLoop : this.index > 0;
     this.nextButtonTargets.forEach((button) => (button.disabled = !canNext));
     this.prevButtonTargets.forEach((button) => (button.disabled = !canPrev));
   }
@@ -173,16 +202,16 @@ export default class extends Controller {
     if (!drag.moved) return;
 
     let offset = drag.offset - drag.delta;
-    if (!this.options.loop) {
-      // rubber-band past the ends
-      const max = this._offsetOf(this.slides.length - 1);
-      if (offset < 0) offset = offset / 3;
-      if (offset > max) offset = max + (offset - max) / 3;
-    }
+    // Rubber-band past the ends — in loop mode too: the translate engine has
+    // no cloned slides, so past-the-end is blank space either way (releasing
+    // still wraps via scrollNext/scrollPrev when looping).
+    const max = this._maxOffset();
+    if (offset < 0) offset = offset / 3;
+    if (offset > max) offset = max + (offset - max) / 3;
     this._translateTo(offset);
   }
 
-  _onPointerUp() {
+  _onPointerUp(e) {
     const drag = this.drag;
     this.drag = null;
     this.viewportTarget.removeEventListener("pointermove", this._onPointerMove);
@@ -192,7 +221,10 @@ export default class extends Controller {
 
     this.track.style.transition = "";
     this.viewportTarget.classList.remove("dragging");
-    this.suppressClick = true; // a drag must not activate links in the slide
+    // A drag must not activate links in the slide — but a cancelled pointer
+    // sequence never fires a click, so arming the flag on pointercancel
+    // would silently swallow the next (e.g. keyboard-initiated) click.
+    this.suppressClick = e?.type !== "pointercancel";
 
     const elapsed = Math.max(performance.now() - drag.startedAt, 1);
     const velocity = Math.abs(drag.delta) / elapsed;
@@ -257,6 +289,18 @@ export default class extends Controller {
     return Math.max(0, trackSize - viewportSize);
   }
 
+  // First index whose (clamped) offset reaches the max scrollable offset —
+  // the last position Next can travel to. count - 1 for single-up layouts;
+  // earlier with multi-up layouts, where the trailing slides all clamp to
+  // the same offset.
+  _lastReachableIndex() {
+    const max = this._maxOffset();
+    for (let i = 0; i < this.slides.length; i += 1) {
+      if (this._offsetOf(i) >= max - OFFSET_EPSILON) return i;
+    }
+    return Math.max(0, this.slides.length - 1);
+  }
+
   _slideSize() {
     const slide = this.slides[this.index];
     if (!slide) return 1;

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

@@ -7,11 +7,11 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({
-        role: "group",
-        aria: { roledescription: "slide" },
-        class: "pk-carousel-item"
-      }, @attrs), &)
+      base = { class: "pk-carousel-item" }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "group" unless attr_set?(:role)
+      base[:aria] = { roledescription: "slide" } unless aria_key_set?(:roledescription)
+      div(**mix(base, @attrs), &)
     end
   end
 end