maquina-components 0.7.3 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a908d12ac4b955850c1c9cf41cab32bbc12d4687d68fad543b43c74fc4f678d6
-  data.tar.gz: 83fa5e89747cd635883e93e6e47a034b64f59633f3b2207a9e9ae7e3aa5aad35
+  metadata.gz: f12b51321ecf3ce0e3c1372bab8dec0770be3fc69f66ac68384f8980994d1018
+  data.tar.gz: 6b24d430d5014890dc45a78cf2b13e5ef1d4b8991732b59b0002c40d8f7f598d
 SHA512:
-  metadata.gz: 903deaa1e5cdb313f8ae2b71a7e59d1c0608926d2951fc66aba2eb787d0e94763379dcfbe2e828c21e001e344f8dff474f5961e31e8c3f06592d13d558f6f61c
-  data.tar.gz: 9b62919d2c5bbabeba0842af06a2b3d24d576f3f307dd198e43119790b0bce36c0b0cc3108006c3f10cb5e6e02340d426baa01ca76a567f0800b805b748cd8d4
+  metadata.gz: c64b09b67ffc2f10d85e7870edfa538c11171e210abf0381b1ac8f7e481771e83f24327317bb2208795fdd675dd8133ae58557c7eba17913f5d6f7fcd5cd176c
+  data.tar.gz: 2d66b6f096c3cfc5854e4fff1daea50f4f7f2dfe9b640db6f849cda507ae449f6ccf7a37b9b0f2a2724d3a72e5f8859575072a4ce35284a3f93a82c5f13b7fea

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
@@ -174,6 +187,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

data/app/javascript/controllers/calendar_controller.js

@@ -11,7 +11,9 @@ export default class extends Controller {
     minDate: String,
     maxDate: String,
     mode: { type: String, default: "single" },
-    weekStartsOn: { type: String, default: "sunday" }
+    weekStartsOn: { type: String, default: "sunday" },
+    disabledDates: Array,
+    showOutsideDays: { type: Boolean, default: true }
   }
 
   connect() {
@@ -98,30 +100,35 @@ export default class extends Controller {
       weeks.push(week)
     }
 
-    // Parse dates for comparison
-    const selectedDate = this.selectedValue ? new Date(this.selectedValue) : null
-    const selectedEndDate = this.selectedEndValue ? new Date(this.selectedEndValue) : null
-    const minDate = this.minDateValue ? new Date(this.minDateValue) : null
-    const maxDate = this.maxDateValue ? new Date(this.maxDateValue) : null
-
     // Rebuild grid HTML
-    grid.innerHTML = weeks.map(week => this.buildWeekHTML(week, month, selectedDate, selectedEndDate, minDate, maxDate)).join('')
+    grid.innerHTML = weeks.map(week => this.buildWeekHTML(week, month)).join('')
   }
 
-  buildWeekHTML(days, displayMonth, selectedDate, selectedEndDate, minDate, maxDate) {
-    // Use string comparisons for range to avoid timezone issues
+  // Mirrors calendar/_week.html.erb. Dates compare as ISO strings, which sort
+  // lexicographically and avoid the UTC shift of new Date("YYYY-MM-DD").
+  buildWeekHTML(days, displayMonth) {
     const selectedStr = this.selectedValue || ""
     const selectedEndStr = this.selectedEndValue || ""
+    const minStr = this.minDateValue || ""
+    const maxStr = this.maxDateValue || ""
+    const disabledDates = new Set(this.disabledDatesValue)
 
     const daysHTML = days.map(day => {
       const dateStr = this.formatDate(day)
       const isOutside = day.getMonth() + 1 !== displayMonth
+
+      // A hidden outside day keeps its grid column
+      if (isOutside && !this.showOutsideDaysValue) {
+        return '<span aria-hidden="true" data-calendar-part="outside-day"></span>'
+      }
       const isToday = this.isSameDate(day, new Date())
       const isSelected = selectedStr && dateStr === selectedStr
       const isRangeEnd = selectedEndStr && dateStr === selectedEndStr
       // ISO date strings are lexicographically sortable
       const isRangeMiddle = selectedStr && selectedEndStr && dateStr > selectedStr && dateStr < selectedEndStr
-      const isDisabled = (minDate && day < minDate) || (maxDate && day > maxDate)
+      const isDisabled = (minStr && dateStr < minStr) ||
+                         (maxStr && dateStr > maxStr) ||
+                         disabledDates.has(dateStr)
 
       let dayState = null
       if (isSelected && this.modeValue === "range" && selectedEndStr) {
@@ -221,7 +228,8 @@ export default class extends Controller {
 
   handleKeydown(event) {
     const currentButton = event.currentTarget
-    const currentDate = new Date(currentButton.dataset.date)
+    // Local midnight: a bare "YYYY-MM-DD" parses as UTC and shifts a day west of it
+    const currentDate = new Date(currentButton.dataset.date + "T00:00:00")
     let targetDate = null
 
     switch (event.key) {
@@ -269,8 +277,9 @@ export default class extends Controller {
     const dateStr = this.formatDate(date)
     const targetButton = this.dayTargets.find(btn => btn.dataset.date === dateStr)
 
-    if (targetButton && !targetButton.disabled) {
-      targetButton.focus()
+    if (targetButton) {
+      // A disabled day in the visible month is not focusable; stay put
+      if (!targetButton.disabled) targetButton.focus()
     } else {
       this.navigateToMonth(date.getMonth() + 1, date.getFullYear())
       requestAnimationFrame(() => {
@@ -329,15 +338,13 @@ export default class extends Controller {
 
   updateNavigationState() {
     if (this.minDateValue && this.hasPrevButtonTarget) {
-      const minDate = new Date(this.minDateValue)
-      const firstOfMonth = new Date(this.yearValue, this.monthValue - 1, 1)
-      this.prevButtonTarget.disabled = firstOfMonth <= minDate
+      const firstOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue - 1, 1))
+      this.prevButtonTarget.disabled = firstOfMonth <= this.minDateValue
     }
 
     if (this.maxDateValue && this.hasNextButtonTarget) {
-      const maxDate = new Date(this.maxDateValue)
-      const lastOfMonth = new Date(this.yearValue, this.monthValue, 0)
-      this.nextButtonTarget.disabled = lastOfMonth >= maxDate
+      const lastOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue, 0))
+      this.nextButtonTarget.disabled = lastOfMonth >= this.maxDateValue
     }
   }
 
@@ -348,12 +355,8 @@ export default class extends Controller {
       selectedEnd: this.selectedEndValue || null
     }
 
+    // Stimulus dispatches a bubbling "calendar:change" — once
     this.dispatch("change", { detail })
-
-    this.element.dispatchEvent(new CustomEvent("calendar:change", {
-      bubbles: true,
-      detail
-    }))
   }
 
   formatDate(date) {

data/app/javascript/controllers/combobox_controller.js

@@ -9,9 +9,10 @@ import { Controller } from "@hotwired/stimulus"
  * - Single selection with toggle
  * - Keyboard navigation
  * - Focus management
+ * - Form submission through a hidden input (rendered when `name:` is given)
  */
 export default class extends Controller {
-  static targets = ["trigger", "content", "input", "option", "empty", "label"]
+  static targets = ["trigger", "content", "input", "option", "empty", "label", "hiddenInput"]
 
   static values = {
     value: { type: String, default: "" },
@@ -171,6 +172,9 @@ export default class extends Controller {
 
     this.updateSelection()
     this.updateTriggerState()
+    // valueValueChanged runs later (attribute observer); write the input now so
+    // it is current when combobox:change fires
+    this.updateHiddenInput()
 
     // Close popover
     if (this.hasContentTarget) {
@@ -326,9 +330,20 @@ export default class extends Controller {
     }
   }
 
-  // Value change callback
+  // Value change callback: also covers a programmatic
+  // data-combobox-value-value write
   valueValueChanged() {
     this.updateSelection()
     this.updateTriggerState()
+    this.updateHiddenInput()
+  }
+
+  updateHiddenInput() {
+    if (!this.hasHiddenInputTarget) return
+    if (this.hiddenInputTarget.value === this.valueValue) return
+
+    this.hiddenInputTarget.value = this.valueValue
+    // Let form listeners (autosave, validation) see the new value
+    this.hiddenInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
   }
 }