maquina-components 0.7.3 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a908d12ac4b955850c1c9cf41cab32bbc12d4687d68fad543b43c74fc4f678d6
-  data.tar.gz: 83fa5e89747cd635883e93e6e47a034b64f59633f3b2207a9e9ae7e3aa5aad35
+  metadata.gz: 95885780d4ac7c947e4561e821d4c3cb2f985a3a363738f7cdc7fc01a858fc11
+  data.tar.gz: 35100ad72833ef5be786a40444f5af15c37866d0dc8dce4dee34232f04bfe0a5
 SHA512:
-  metadata.gz: 903deaa1e5cdb313f8ae2b71a7e59d1c0608926d2951fc66aba2eb787d0e94763379dcfbe2e828c21e001e344f8dff474f5961e31e8c3f06592d13d558f6f61c
-  data.tar.gz: 9b62919d2c5bbabeba0842af06a2b3d24d576f3f307dd198e43119790b0bce36c0b0cc3108006c3f10cb5e6e02340d426baa01ca76a567f0800b805b748cd8d4
+  metadata.gz: b1e7d220b352af1cd2e9fabf11902165c2d7d958608ea504f0b6a896fef336c3c8cd1e556090ab2db7dfa54c8812249fc5611c1a19820701c37c015c15b82a10
+  data.tar.gz: 347641b6a36dac6f72f9344e8e6af0a81f0c80bf29dd1ce022e20db9a295db2141d540eb16d41cea92fc19f4a59345438712f9b958c802b3cc1f109bd2d5abbb

data/app/assets/stylesheets/calendar.css

@@ -7,15 +7,24 @@
  * Structure:
  * - calendar (root container)
  *   - header (navigation)
+ *     - caption, or with caption_layout: :dropdown
+ *       dropdowns > month-select, year-select (native [data-component="select"])
  *   - weekdays (day name headers)
  *   - grid (day buttons grid)
  *     - week (row)
  *       - day (button)
+ *   - footer (optional, the partial's block)
+ *
+ * Inside a popover the controller sets data-side="top|bottom" on the root.
+ * Flipped above its trigger, a popover is pinned at its bottom edge while
+ * months change height (4-6 weeks), so [data-side="top"] moves the header
+ * last — next to the trigger, where the arrows stay put.
  *
  * Cascade order in this file (full contract documented in form.css):
  *   1. base      [data-component="calendar"], [data-calendar-part="…"]
  *   2. sizes     — none (cell metrics come from --cell-size)
- *   3. variants  [data-calendar-part="day"]:where([data-today], [data-state="…"], [data-outside])
+ *   3. variants  [data-calendar-part="day"]:where([data-today], [data-state="…"], [data-outside]),
+ *                [data-component="calendar"]:where([data-side="top"])
  *   4. states    […]:where(:hover, :focus-visible, :disabled)
  *   5. dark      — none; dark-mode differences are tokens (see tokens.css)
  * Every rule is flattened to 0,1,0 with :where() and lives in
@@ -94,6 +103,26 @@
     color: var(--foreground);
   }
 
+  /* ===== Caption dropdowns =====
+     Month and year are native selects styled by form.css (colors, radius,
+     focus, chevron, dark mode). Here they only shrink to fit beside the
+     arrows in a 7-cell header: calendar.css loads after form.css, so these
+     0,1,0 rules win on source order. */
+  [data-calendar-part="dropdowns"] {
+    display: flex;
+    align-items: center;
+    @apply gap-1;
+  }
+
+  :where([data-calendar-part="dropdowns"]) [data-component="select"] {
+    width: auto;
+    height: var(--cell-size);
+    @apply pl-2 pr-6 py-0 text-sm;
+    font-weight: var(--label-weight, 500);
+    background-position: right 0.25rem center;
+    background-size: 1rem 1rem;
+  }
+
   /* ===== Weekday Headers ===== */
   [data-calendar-part="weekdays"] {
     display: grid;
@@ -123,6 +152,11 @@
     grid-template-columns: repeat(7, var(--cell-size));
   }
 
+  /* ===== Footer ===== */
+  [data-calendar-part="footer"] {
+    @apply mt-4;
+  }
+
   /* ===== Day Button Base ===== */
   [data-calendar-part="day"] {
     display: inline-flex;
@@ -205,6 +239,19 @@
     @apply opacity-30;
   }
 
+  /* ===== Popover side ===== */
+
+  /* Opened above the trigger: weekdays, grid, footer, then the header */
+  [data-component="calendar"]:where([data-side="top"]) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where([data-component="calendar"][data-side="top"]) [data-calendar-part="header"] {
+    order: 1;
+    @apply mt-4 mb-0;
+  }
+
   /* ===== Day States ===== */
 
   /* Hover — only for cells with no selection state of their own */

data/app/assets/stylesheets/date_picker.css

@@ -14,7 +14,8 @@
  *   2. sizes     :where([data-size="sm"|"lg"]) [data-date-picker-part="trigger"]
  *   3. variants  :where([data-full-width]) …
  *   4. states    […]:where(:hover, :focus-visible, :disabled, [aria-expanded],
- *                          :has(input:invalid))
+ *                          :has(input:invalid)); popover open/closed, and
+ *                          :has(calendar[data-side="top"]) for the animation
  *   5. dark      — none; dark-mode differences are tokens (see tokens.css)
  * Every rule is flattened to 0,1,0 with :where() and lives in
  * @layer components, so a caller's utility class wins and source order is
@@ -160,6 +161,17 @@
     }
   }
 
+  /* Opened above the trigger (the calendar's data-side): grow upward out of it */
+  [data-date-picker-part="popover"]:where(:not(:popover-open):has([data-component="calendar"][data-side="top"])) {
+    transform: translateY(0.5rem) scale(0.95);
+  }
+
+  @starting-style {
+    [data-date-picker-part="popover"]:where(:popover-open:has([data-component="calendar"][data-side="top"])) {
+      transform: translateY(0.5rem) scale(0.95);
+    }
+  }
+
   /* Backdrop */
   [data-date-picker-part="popover"]::backdrop {
     background-color: transparent;

data/app/assets/stylesheets/drawer.css

@@ -96,10 +96,8 @@
   }
 
   /* ===== Drawer Trigger ===== */
-  [data-drawer-part="trigger"]:where(:hover) {
-    background-color: var(--accent-hover, var(--accent));
-    color: var(--accent-foreground);
-  }
+  /* The trigger is a data-component="button"; its variant: and size: locals
+     style it through form.css, hover included — no drawer-specific rule. */
 
   /* ===== Drawer Title ===== */
   [data-drawer-part="title"] {
@@ -112,24 +110,26 @@
   }
 
   /* ===== Drawer Close Button ===== */
-  [data-drawer-part="close"] {
+  /* An icon button by default. Given data-component="button" (a footer
+     "Cancel"), the button styles in form.css own it instead. */
+  [data-drawer-part="close"]:where(:not([data-component="button"])) {
     @apply inline-flex items-center justify-center p-1;
     @apply transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--drawer-close-radius, var(--control-radius, 0.375rem));
     color: var(--foreground);
   }
 
-  [data-drawer-part="close"] svg {
+  [data-drawer-part="close"]:where(:not([data-component="button"])) svg {
     @apply size-4;
   }
 
-  [data-drawer-part="close"]:where(:hover) {
+  [data-drawer-part="close"]:where(:not([data-component="button"]):hover) {
     background-color: var(--accent-hover, var(--accent));
     color: var(--accent-foreground);
   }
 
   /* outline, not a ring: the drawer panel clips box-shadow rings */
-  [data-drawer-part="close"]:where(:focus-visible) {
+  [data-drawer-part="close"]:where(:not([data-component="button"]):focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, var(--ring));

data/app/assets/stylesheets/form.css

@@ -283,11 +283,21 @@
     @apply pointer-events-none cursor-not-allowed opacity-50;
   }
 
-  [data-component="select"]:where([aria-invalid="true"]) {
+  [data-component="select"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive-border, var(--destructive));
   }
 
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="select"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===================================================================
      CHECKBOX
      Usage: <%= f.check_box :terms, data: { component: "checkbox" } %>
@@ -365,9 +375,15 @@
     @apply cursor-not-allowed opacity-50;
   }
 
-  [data-component="checkbox"]:where([aria-invalid="true"]) {
+  [data-component="checkbox"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="checkbox"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
@@ -421,6 +437,21 @@
     @apply cursor-not-allowed opacity-50;
   }
 
+  [data-component="radio"]:where([aria-invalid="true"], :user-invalid) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="radio"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===================================================================
      SWITCH (Toggle)
      Usage: <%= f.check_box :notifications, data: { component: "switch" } %>
@@ -465,6 +496,23 @@
     @apply cursor-not-allowed opacity-50;
   }
 
+  /* The track's border is transparent at rest, so an invalid switch gains a
+     destructive outline of the track rather than a recolored one */
+  [data-component="switch"]:where([aria-invalid="true"], :user-invalid) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="switch"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===================================================================
      BUTTON
      Usage:
@@ -679,14 +727,20 @@
 
   :where(.field_with_errors) [data-component="input"],
   :where(.field_with_errors) [data-component="textarea"],
-  :where(.field_with_errors) [data-component="select"] {
+  :where(.field_with_errors) [data-component="select"],
+  :where(.field_with_errors) [data-component="checkbox"],
+  :where(.field_with_errors) [data-component="radio"],
+  :where(.field_with_errors) [data-component="switch"] {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive-border, var(--destructive));
   }
 
   :where(.field_with_errors) [data-component="input"]:where(:focus-visible),
   :where(.field_with_errors) [data-component="textarea"]:where(:focus-visible),
-  :where(.field_with_errors) [data-component="select"]:where(:focus-visible) {
+  :where(.field_with_errors) [data-component="select"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="checkbox"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="radio"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="switch"]:where(:focus-visible) {
     outline-width: var(--focus-ring-width, 3px);
     outline-style: var(--focus-ring-style, solid);
     outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));

data/app/assets/stylesheets/separator.css

@@ -16,16 +16,21 @@
 
 @layer components {
   [data-component="separator"] {
-    @apply mx-2 shrink-0;
+    @apply shrink-0;
     background-color: var(--border);
   }
 
+  /* Full width and no horizontal margin: a margin on top of width: 100%
+     overflows the container. Parents that want an inset (sidebar, drawer)
+     set their own margin with width: auto. */
   [data-component="separator"]:where([data-orientation="horizontal"]) {
     height: 1px;
     width: 100%;
   }
 
+  /* The inline gap between the items a vertical separator divides. */
   [data-component="separator"]:where([data-orientation="vertical"]) {
+    @apply mx-2;
     width: 1px;
     height: 1rem;
   }

data/app/assets/tailwind/maquina_components_engine/tokens.css

@@ -54,6 +54,7 @@
   --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   --elevation-raised:  var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   --elevation-overlay: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --elevation-none:    none;   /* ghost/link buttons, inset sidebar */
 
   /* Weight */
   --label-weight: 500;

data/app/helpers/maquina_components/calendar_helper.rb

@@ -12,6 +12,19 @@ module MaquinaComponents
   #   calendar_date_in_range?(date, start_date, end_date)
   #
   module CalendarHelper
+    # Coerce a Date, Time, DateTime or ISO string to a Date
+    #
+    # @param value [Date, Time, DateTime, String, nil]
+    # @return [Date, nil] nil for blank or unparseable input
+    def calendar_to_date(value)
+      case value
+      when Date, Time, DateTime then value.to_date
+      when String then Date.parse(value)
+      end
+    rescue ArgumentError
+      nil
+    end
+
     # Generate calendar month data
     #
     # @param date [Date] Any date within the target month
@@ -59,6 +72,43 @@ module MaquinaComponents
       end
     end
 
+    # Years offered by the caption's year select (caption_layout: :dropdown)
+    #
+    # min_date/max_date set the bounds when present; otherwise years applies,
+    # 100 years back to 10 ahead by default. Given both, the narrower bound
+    # wins. The displayed year is always included.
+    #
+    # @param display_year [Integer] Year the calendar shows
+    # @param min_date [Date, nil] Minimum selectable date
+    # @param max_date [Date, nil] Maximum selectable date
+    # @param years [Range, nil] Explicit span of years
+    # @return [Range]
+    def calendar_year_range(display_year, min_date: nil, max_date: nil, years: nil)
+      first, last = (years || ((Date.current.year - 100)..(Date.current.year + 10))).minmax
+      first = min_date.year if min_date && (years.nil? || min_date.year > first)
+      last = max_date.year if max_date && (years.nil? || max_date.year < last)
+
+      [first, display_year].min..[last, display_year].max
+    end
+
+    # Options for the caption's month select: abbreviated localized names
+    # (the full ones do not fit beside the year in a 7-cell header), with the
+    # months wholly outside min_date/max_date disabled for that year
+    #
+    # @param year [Integer] Year the months belong to
+    # @param min_date [Date, nil] Minimum selectable date
+    # @param max_date [Date, nil] Maximum selectable date
+    # @return [Array<Array(String, Integer, Boolean)>] [name, month, disabled]
+    def calendar_month_options(year, min_date: nil, max_date: nil)
+      I18n.t("date.abbr_month_names").drop(1).each_with_index.map do |name, index|
+        first_of_month = Date.new(year, index + 1, 1)
+        disabled = (min_date && first_of_month.end_of_month < min_date) ||
+          (max_date && first_of_month > max_date)
+
+        [name, index + 1, !!disabled]
+      end
+    end
+
     # Check if a date falls within a range
     #
     # @param date [Date] The date to check
@@ -174,6 +224,25 @@ module MaquinaComponents
       nil
     end
 
+    # The I18n date data date_picker_format reads, for the date picker
+    # controller to format client-side exactly as the server does. Formats a
+    # locale defines as a Proc are left out; the controller then falls back
+    # to Intl.DateTimeFormat for them.
+    #
+    # @return [Hash] strftime patterns and localized month/day names
+    def date_picker_locale_data
+      {
+        formats: {
+          long: I18n.t("date.formats.long", default: nil),
+          short: I18n.t("date.formats.short", default: nil)
+        }.select { |_, pattern| pattern.is_a?(String) },
+        month_names: I18n.t("date.month_names"),
+        abbr_month_names: I18n.t("date.abbr_month_names"),
+        day_names: I18n.t("date.day_names"),
+        abbr_day_names: I18n.t("date.abbr_day_names")
+      }
+    end
+
     # Format date range for display
     #
     # @param start_date [Date, String, nil] Start date

data/app/helpers/maquina_components/drawer_helper.rb

@@ -1,11 +1,9 @@
 module MaquinaComponents
   module DrawerHelper
+    # The drawer's persisted state. A missing cookie means :closed, matching the
+    # provider's default_open: false and the controller's default.
     def drawer_state(cookie_name = "drawer_state")
-      cookie_value = cookies[cookie_name]
-
-      return :open if cookie_value.nil?
-
-      (cookie_value == "true") ? :open : :closed
+      (cookies[cookie_name] == "true") ? :open : :closed
     end
 
     def drawer_open?(cookie_name = "drawer_state")

data/app/helpers/maquina_components/dropdown_menu_helper.rb

@@ -53,6 +53,13 @@ module MaquinaComponents
 
     # Renders a simple dropdown menu from data
     #
+    # Each item hash renders as one of:
+    # - a separator: `separator: true` or `type: :separator`
+    # - a label (heading): `type: :label`, or — for backwards compatibility — a
+    #   hash with neither `href` nor `action` and no `type`
+    # - an item: `type: :item`, or any hash with `href` or `action`. Without an
+    #   `href` it renders as a `<button>`; `action` is its Stimulus data-action
+    #
     # @param trigger_text [String] Text for the trigger button
     # @param items [Array<Hash>] Array of item configurations
     # @param trigger_options [Hash] Options for the trigger button
@@ -64,19 +71,20 @@ module MaquinaComponents
 
         menu.content(**content_options) do |content|
           items.each do |item|
-            if item[:separator]
+            case dropdown_menu_simple_entry_type(item)
+            when :separator
               content.separator
-            elsif item[:label] && item[:href].nil? && item[:action].nil?
+            when :label
               content.label item[:label]
             else
-              variant = item[:destructive] ? :destructive : :default
               content.item(
                 item[:label],
                 href: item[:href],
                 method: item[:method],
                 icon: item[:icon],
-                variant: variant,
-                disabled: item[:disabled]
+                variant: item[:destructive] ? :destructive : :default,
+                disabled: item[:disabled],
+                data: {action: item[:action], **item.fetch(:data, {})}.compact
               )
             end
           end
@@ -84,6 +92,15 @@ module MaquinaComponents
       end
     end
 
+    private
+
+    def dropdown_menu_simple_entry_type(item)
+      return :separator if item[:separator]
+      return item[:type].to_sym if item[:type]
+
+      (item[:href].nil? && item[:action].nil?) ? :label : :item
+    end
+
     # Builder class for constructing dropdown menus
     class DropdownMenuBuilder
       def initialize(view_context)

data/app/helpers/maquina_components/empty_helper.rb

@@ -6,10 +6,10 @@ module MaquinaComponents
   # Provides convenient methods for creating empty state components.
   #
   # @example Simple empty state
-  #   <%= empty_state title: "No projects", description: "Get started by creating one.", icon: :folder_open %>
+  #   <%= empty_state title: "No projects", description: "Get started by creating one.", icon: :folder %>
   #
   # @example With action button
-  #   <%= empty_state title: "No projects", icon: :folder_open do %>
+  #   <%= empty_state title: "No projects", icon: :folder do %>
   #     <%= link_to "Create Project", new_project_path, data: { component: "button", variant: "primary" } %>
   #   <% end %>
   #
@@ -86,7 +86,7 @@ module MaquinaComponents
     # @param icon [Symbol] Icon to display
     # @param size [Symbol] Size variant
     # @return [String] Rendered HTML
-    def empty_list_state(resource_name:, new_path: nil, icon: :folder_open, size: :default)
+    def empty_list_state(resource_name:, new_path: nil, icon: :folder, size: :default)
       empty_state(
         title: "No #{resource_name} yet",
         description: "Get started by creating your first #{resource_name.singularize}.",

data/app/helpers/maquina_components/icons_helper.rb

@@ -62,16 +62,20 @@ module MaquinaComponents
     end
 
     def apply_icon_options(svg, options)
-      return svg.html_safe unless options&.any?
-
+      options ||= {}
       css_classes = options[:class]
-      if css_classes&.is_a?(String)
+
+      svg = if css_classes.is_a?(String) && css_classes.present?
         escaped_css_classes = ERB::Util.html_escape(css_classes)
-        svg = if /\bclass\s*=\s*(['"])(.*?)\1/.match?(svg)
+        if /\bclass\s*=\s*(['"])(.*?)\1/.match?(svg)
           svg.sub(/\bclass\s*=\s*(['"])(.*?)\1/, "class=\\1#{escaped_css_classes}\\1")
         else
           svg.sub(/<svg(?=(\s|>))/, "<svg class=\"#{escaped_css_classes}\"")
         end
+      else
+        # The SVG sources carry a class="" placeholder; with no classes to
+        # fill it, drop it rather than render an empty attribute.
+        svg.sub(/\s+class\s*=\s*(['"])\1/, "")
       end
 
       if options[:stroke_width]
@@ -221,7 +225,7 @@ module MaquinaComponents
             <path d="m15 18-6-6 6-6"/>
           </svg>
         SVG
-      when :left_panel
+      when :left_panel, :panel_left # :panel_left is lucide's name (PanelLeft)
         <<~SVG.freeze
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
             <rect width="18" height="18" x="3" y="3" rx="2"></rect>

data/app/helpers/maquina_components/pagination_helper.rb

@@ -76,8 +76,8 @@ module MaquinaComponents
     # @param extra_params [Hash] Additional params
     # @return [String] URL path
     def paginated_path(route_helper, pagy, page, extra_params = {})
-      page_param = pagy.vars[:page_param] || Pagy::DEFAULT[:page_param]
-      query_params = request.query_parameters.except(page_param.to_s).merge(extra_params)
+      page_param = pagy_page_param(pagy)
+      query_params = request.query_parameters.except(page_param).merge(extra_params)
       query_params[page_param] = page
 
       send(route_helper, query_params)
@@ -85,11 +85,33 @@ module MaquinaComponents
 
     private
 
+    # Pagy 43 renamed the API this helper reads; these keep both working.
+    #
+    #   Pagy <= 9:  pagy.vars[:page_param] (Symbol), Pagy::DEFAULT, pagy.prev,
+    #               public pagy.series
+    #   Pagy >= 43: pagy.options[:page_key] (String), pagy.previous, protected
+    #               pagy.series
+    def pagy_page_param(pagy)
+      options = pagy.respond_to?(:options) ? pagy.options : pagy.vars
+      key = options[:page_key] || options[:page_param]
+      key ||= Pagy::DEFAULT[:page_key] || Pagy::DEFAULT[:page_param] if defined?(Pagy::DEFAULT)
+
+      (key || :page).to_s
+    end
+
+    def pagy_previous(pagy)
+      pagy.respond_to?(:previous) ? pagy.previous : pagy.prev
+    end
+
+    def pagy_series(pagy)
+      pagy.send(:series)
+    end
+
     def pagination_previous_item(pagy, route_helper, params, turbo, show_label)
       render "components/pagination/item" do
-        if pagy.prev
+        if (previous_page = pagy_previous(pagy))
           render "components/pagination/previous",
-            href: paginated_path(route_helper, pagy, pagy.prev, params),
+            href: paginated_path(route_helper, pagy, previous_page, params),
             show_label: show_label,
             data: turbo_data(turbo)
         else
@@ -116,7 +138,7 @@ module MaquinaComponents
     end
 
     def pagination_page_items(pagy, route_helper, params, turbo)
-      pagy.series.map do |item|
+      pagy_series(pagy).map do |item|
         render "components/pagination/item" do
           case item
           when Integer