phlex_kit 0.9.1 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 805728288b072fe1663456e789ee106d9ca8398c53b1761255cd0167fd031677
-  data.tar.gz: 1a18b9d368989240e0f16f794ece1a7f8ca1cc9e5dd551ba38dcd002236a5f0e
+  metadata.gz: caadd4e868a63939f22013699b89f9b1557dfa9569022301602c0f1cb07020f0
+  data.tar.gz: fa3ba42e9566f171e1fdee7ddcbfc475397bf404152031adbca2fd0cacbbda61
 SHA512:
-  metadata.gz: 5b75e4ed5be4c81705389b3e3c9573986e581d04a5a97c8834c58af9f6fdd6977f02599e1aa4708454cf19ee684fd39a76439d26ec165cd47f839aa668f99d13
-  data.tar.gz: 262df1a9e8f8ecb796844c8135b706ffc953baacdb7ac863024041eb7ac28a428dd1d0379fa9cd6779e26b0ea6069a244a7ed7b94d6f4f2c3cf72cf433f9095a
+  metadata.gz: 76304ba104026fe236758b3fa93014b516ec84e65e6baefd307853da30bb7dc9d38d1f6fff0d2c7639ede3ee9116642beed8a615c24963ea3e0462c0ca89656a
+  data.tar.gz: 0c8d0dfd56d4e4b873b35149dd7c362010c97a02a4642de0b72d80606301be27dea505849753aa8754e081c38e49484b3358524267d3df497a12b8c5d9e9ccd0

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

@@ -1,6 +1,14 @@
 /* Kit utilities used by the interactive controllers (Stimulus toggles these). */
 .pk-hidden { display: none !important; }
 
+/* Kit-wide screen-reader-only utility — used by many components
+   (breadcrumb, dialog, sheet, sidebar, …), so it lives here rather
+   than in any one component's stylesheet. */
+.pk-sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
 /* Shimmer — shadcn's shimmer util: a highlight band sweeping across text, for
    loading / "thinking…" states. Pure CSS, built on currentColor: the text keeps
    its own color (any color) and the highlight derives from it via relative

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/alert.rb

@@ -15,7 +15,7 @@ module PhlexKit
   # shadcn ships default/destructive; success/warning are kit extras kept from
   # ruby_ui, restyled to the same text-tint grammar. `VARIANTS.fetch` fails loud.
   class Alert < BaseComponent
-    # variant => extra class appended after the base `ui-alert` (nil = neutral).
+    # variant => extra class appended after the base `pk-alert` (nil = neutral).
     VARIANTS = {
       default: nil,
       warning: "warning",

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

@@ -52,6 +52,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;
   }
@@ -68,6 +71,10 @@ export default class extends Controller {
   }
 
   keydown(event) {
+    // Every open clone has its own document-level listener; with stacked
+    // alert dialogs (a trigger inside a panel) only the topmost clone may
+    // handle the keyboard, or one Escape would close every layer at once.
+    if (!this.#topmost()) return;
     if (event.key === "Escape") {
       event.preventDefault();
       this.dismiss();
@@ -97,6 +104,14 @@ 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.
+  #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;
+  }
+
   #panel() {
     return this.element.querySelector('[role="alertdialog"]');
   }

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

@@ -142,21 +142,24 @@
 /* Scrollable, snapping row with an edge fade (horizontal scroll-fade). */
 .pk-attachment-group {
   --pk-scroll-fade-size: 2rem;
+  /* Gradient directions can't be logical — follow the inline axis by hand. */
+  --pk-scroll-fade-dir: to right;
   display: flex;
   gap: .5rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 2px; /* room for card rings */
-  mask-image: linear-gradient(to right,
+  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%);
 }
+.pk-attachment-group:dir(rtl) { --pk-scroll-fade-dir: to left; }
 .pk-attachment-group[data-at-start] {
-  mask-image: linear-gradient(to right,
+  mask-image: linear-gradient(var(--pk-scroll-fade-dir),
     black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
 }
 .pk-attachment-group[data-at-end] {
-  mask-image: linear-gradient(to right, transparent 0, black var(--pk-scroll-fade-size));
+  mask-image: linear-gradient(var(--pk-scroll-fade-dir), transparent 0, black var(--pk-scroll-fade-size));
 }
 .pk-attachment-group[data-at-start][data-at-end] { mask-image: none; }
 .pk-attachment-group > .pk-attachment { flex: none; scroll-snap-align: start; }

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,13 @@ 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
       @href = href
       @attrs = attrs
     end

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

@@ -29,8 +29,13 @@ export default class extends Controller {
   update() {
     const el = this.element
     if (this.axisValue === "x") {
-      el.toggleAttribute("data-at-start", el.scrollLeft <= 1)
-      el.toggleAttribute("data-at-end", el.scrollLeft + el.clientWidth >= el.scrollWidth - 1)
+      // 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)
+      el.toggleAttribute("data-at-end", scrolled + el.clientWidth >= el.scrollWidth - 1)
     } else {
       el.toggleAttribute("data-at-start", el.scrollTop <= 1)
       el.toggleAttribute("data-at-end", el.scrollTop + el.clientHeight >= el.scrollHeight - 1)

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

@@ -67,8 +67,8 @@
    modifier, glyph hidden when there's no room (shadcn's AvatarBadge). */
 .pk-avatar-badge {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   z-index: 10;
   display: inline-flex;
   align-items: center;

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

@@ -12,7 +12,3 @@
 .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; }
-.pk-sr-only {
-  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-}

data/app/components/phlex_kit/bubble/bubble.css

@@ -14,7 +14,7 @@
 .pk-message[data-align="end"] .pk-bubble { align-self: flex-end; }
 .pk-bubble-content {
   width: fit-content; max-width: 100%; min-width: 0; overflow: hidden;
-  overflow-wrap: break-word; border: 1px solid transparent; border-radius: .75rem;
+  overflow-wrap: break-word; border: 1px solid transparent; border-radius: calc(var(--pk-radius) + 2px);
   padding: .5rem .75rem; font-size: .875rem; line-height: 1.625;
 }
 .pk-bubble[data-align="end"] > .pk-bubble-content { align-self: flex-end; }

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_content.rb

@@ -1,8 +1,9 @@
 module PhlexKit
   class BubbleContent < BaseComponent
-    # `as:` is dispatched dynamically — whitelist the sensible text containers
-    # so it can't reach arbitrary (including private) methods.
-    AS_TAGS = %i[div p blockquote].freeze
+    # `as:` is dispatched dynamically — whitelist the documented containers
+    # (incl. the interactive button/a contract bubble.css styles) so it can't
+    # reach arbitrary (including private) methods.
+    AS_TAGS = %i[div p blockquote button a].freeze
     def initialize(as: :div, **attrs)
       @as = as.to_sym
       raise ArgumentError, "unknown BubbleContent as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})" unless AS_TAGS.include?(@as)

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/button_group/button_group.css

@@ -12,25 +12,25 @@
 
 /* horizontal (default) */
 .pk-button-group:not(.vertical) > :not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   border-inline-start: 0;
 }
 .pk-button-group:not(.vertical) > :not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 /* vertical */
 .pk-button-group.vertical { flex-direction: column; }
 .pk-button-group.vertical > :not(:first-child) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
 }
 .pk-button-group.vertical > :not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 /* Nested groups keep their own corners — undo the squaring the parent applied. */
@@ -45,25 +45,25 @@
    absolutely-positioned panels are untouched. */
 .pk-button-group:not(.vertical) > :not(:first-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group:not(.vertical) > :not(:first-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   border-inline-start: 0;
 }
 .pk-button-group:not(.vertical) > :not(:last-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group:not(.vertical) > :not(:last-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 .pk-button-group.vertical > :not(:first-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group.vertical > :not(:first-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
   border-top: 0;
 }
 .pk-button-group.vertical > :not(:last-child) > :is(.pk-dropdown-menu-trigger, .pk-popover-trigger, .pk-hover-card-trigger, .pk-tooltip-trigger) > .pk-button,
 .pk-button-group.vertical > :not(:last-child) > :is(.pk-select-trigger, .pk-combobox-trigger) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 /* .pk-select defaults to width:100%; as a group segment it hugs its trigger
    and lets siblings (the input) take the leftover flex space — shadcn's

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

@@ -155,6 +155,14 @@
   background: var(--pk-accent);
 }
 .pk-calendar-cell:has(> .range-cap) { background: var(--pk-accent); }
-.pk-calendar-cell:has(> .range-start.range-cap) { border-radius: var(--pk-cell-radius) 0 0 var(--pk-cell-radius); }
-.pk-calendar-cell:has(> .range-end.range-cap) { border-radius: 0 var(--pk-cell-radius) var(--pk-cell-radius) 0; }
+.pk-calendar-cell:has(> .range-start.range-cap) {
+  border-radius: 0;
+  border-start-start-radius: var(--pk-cell-radius);
+  border-end-start-radius: var(--pk-cell-radius);
+}
+.pk-calendar-cell:has(> .range-end.range-cap) {
+  border-radius: 0;
+  border-start-end-radius: var(--pk-cell-radius);
+  border-end-end-radius: var(--pk-cell-radius);
+}
 .pk-calendar-cell:has(> .range-start.range-end) { border-radius: var(--pk-cell-radius); }

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);
@@ -303,8 +305,18 @@ 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
@@ -412,7 +424,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 +440,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 +597,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.css

@@ -16,14 +16,14 @@
   transition: transform .3s ease;
   will-change: transform;
 }
-.pk-carousel.is-horizontal .pk-carousel-track { margin-left: -1rem; }
+.pk-carousel.is-horizontal .pk-carousel-track { margin-inline-start: -1rem; }
 .pk-carousel.is-vertical .pk-carousel-track { flex-direction: column; margin-top: -1rem; }
 
 .pk-carousel-item {
   min-width: 0;
   flex: 0 0 100%;
 }
-.pk-carousel.is-horizontal .pk-carousel-item { padding-left: 1rem; }
+.pk-carousel.is-horizontal .pk-carousel-item { padding-inline-start: 1rem; }
 .pk-carousel.is-vertical .pk-carousel-item { padding-top: 1rem; }
 
 /* Edge buttons (an outline icon .pk-button; same specificity, later in the
@@ -34,8 +34,8 @@
   height: 2rem;
   border-radius: 9999px;
 }
-.pk-carousel.is-horizontal .pk-carousel-previous { left: -3rem; top: 50%; transform: translateY(-50%); }
-.pk-carousel.is-horizontal .pk-carousel-next { right: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-horizontal .pk-carousel-previous { inset-inline-start: -3rem; top: 50%; transform: translateY(-50%); }
+.pk-carousel.is-horizontal .pk-carousel-next { inset-inline-end: -3rem; top: 50%; transform: translateY(-50%); }
 .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; }

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

@@ -73,6 +73,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) : [];
   }
@@ -129,6 +139,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";
@@ -183,13 +195,22 @@ export default class extends Controller {
     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 +232,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,19 @@ module PhlexKit
     end
 
     def view_template(&)
-      canvas(**mix({
+      base = {
         class: "pk-chart",
+        # 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.
+        role: "img",
         data: {
           controller: "phlex-kit--chart",
           phlex_kit__chart_options_value: JSON.generate(@options)
         }
-      }, @attrs), &)
+      }
+      base[:aria] = { label: "Chart" } unless aria_labelled?
+      canvas(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/clipboard/clipboard_controller.js

@@ -3,19 +3,42 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--clipboard". Copies the source text and
 // flashes a success/error popover (CSS-positioned, no @floating-ui). Ported from ruby_ui.
 export default class extends Controller {
-  static targets = ["trigger", "source", "successPopover", "errorPopover"]
+  // No "trigger" target: the click->#copy action alone wires the trigger.
+  static targets = ["source", "successPopover", "errorPopover"]
+
+  connect() {
+    // Turbo snapshots at turbo:before-cache, BEFORE disconnect — hide the
+    // flash now or a restore shows a permanently stuck "Copied!" popover.
+    document.addEventListener("turbo:before-cache", this.beforeCache)
+  }
 
   disconnect() {
     // Don't leave the 1.5s hide timer running into a dead/recycled element
     // (Turbo can detach and re-attach this subtree mid-flash).
+    clearTimeout(this.timer)
+    document.removeEventListener("turbo:before-cache", this.beforeCache)
+    this.hideAll()
+  }
+
+  beforeCache = () => {
     clearTimeout(this.timer)
     this.hideAll()
   }
 
   copy() {
+    // A source usually wraps one element (input/code/…), but bare text is
+    // legal too — fall back to the source's own text instead of erroring.
     const el = this.sourceTarget.children[0]
-    if (!el) { this.show(this.errorPopoverTarget); return }
-    const text = el.tagName === "INPUT" ? el.value : el.innerText
+    // TEXTAREA reads .value like INPUT — innerText would return the initial
+    // content, not the user-edited value.
+    const text = el
+      ? (["INPUT", "TEXTAREA"].includes(el.tagName) ? el.value : el.innerText)
+      : this.sourceTarget.textContent.trim()
+    if (!text) { this.show(this.errorPopoverTarget); return }
+    // navigator.clipboard is undefined in insecure contexts (plain-HTTP
+    // hosts, some webviews) — that's the error popover's job, not an
+    // unhandled TypeError's.
+    if (!navigator.clipboard) { this.show(this.errorPopoverTarget); return }
     navigator.clipboard.writeText(text)
       .then(() => this.show(this.successPopoverTarget))
       .catch(() => this.show(this.errorPopoverTarget))

data/app/components/phlex_kit/clipboard/clipboard_trigger.rb

@@ -1,6 +1,6 @@
 module PhlexKit
   class ClipboardTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
-    def view_template(&) = div(**mix({ class: "pk-clipboard-trigger", data: { phlex_kit__clipboard_target: "trigger", action: "click->phlex-kit--clipboard#copy" } }, @attrs), &)
+    def view_template(&) = div(**mix({ class: "pk-clipboard-trigger", data: { action: "click->phlex-kit--clipboard#copy" } }, @attrs), &)
   end
 end