chore(mcp): rebuild registry.json for ComboboxCheckbox validation

Author: pierry01

mcp/data/registry.json

@@ -935,15 +935,15 @@
         },
         {
           "path": "combobox_checkbox.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ComboboxCheckbox < Base\n    def view_template\n      input(type: \"checkbox\", **attrs)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"checked:bg-primary checked:text-primary-foreground\",\n          \"aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ],\n        data: {\n          ruby_ui__combobox_target: \"input\",\n          action: \"ruby-ui--combobox#inputChanged\"\n        }\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ComboboxCheckbox < Base\n    def view_template\n      input(type: \"checkbox\", **attrs)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"checked:bg-primary checked:text-primary-foreground\",\n          \"aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ],\n        data: {\n          ruby_ui__combobox_target: \"input\",\n          ruby_ui__form_field_target: \"input\",\n          action: %w[\n            ruby-ui--combobox#inputChanged\n            input->ruby-ui--form-field#onInput\n            invalid->ruby-ui--form-field#onInvalid\n          ]\n        }\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "combobox_clear_button.rb",
           "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ComboboxClearButton < Base\n    def view_template\n      button(**attrs) do\n        svg(\n          xmlns: \"http://www.w3.org/2000/svg\",\n          width: \"24\",\n          height: \"24\",\n          viewbox: \"0 0 24 24\",\n          fill: \"none\",\n          stroke: \"currentColor\",\n          stroke_width: \"2\",\n          stroke_linecap: \"round\",\n          stroke_linejoin: \"round\",\n          class: \"size-3.5\"\n        ) do |s|\n          s.path(d: \"M18 6 6 18\")\n          s.path(d: \"m6 6 12 12\")\n        end\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        type: \"button\",\n        class: \"ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden\",\n        aria: {label: \"Clear selection\"},\n        data: {\n          ruby_ui__combobox_target: \"clearButton\",\n          # JS implementation in combobox_controller.js\n          action: \"ruby-ui--combobox#clearAll\"\n        }\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "combobox_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport { computePosition, autoUpdate, offset, flip } from \"@floating-ui/dom\";\n\n// Connects to data-controller=\"ruby-ui--combobox\"\nexport default class extends Controller {\n  static values = {\n    term: String,\n    minPopoverWidth: { type: Number, default: 240 }\n  }\n\n  static targets = [\n    \"input\",\n    \"toggleAll\",\n    \"popover\",\n    \"item\",\n    \"emptyState\",\n    \"searchInput\",\n    \"trigger\",\n    \"triggerContent\"\n  ]\n\n  selectedItemIndex = null\n\n  connect() {\n    this.updateTriggerContent()\n  }\n\n  disconnect() {\n    if (this.cleanup) { this.cleanup() }\n  }\n\n  handlePopoverToggle(event) {\n    // Keep ariaExpanded in sync with the actual popover state\n    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'\n  }\n\n  inputChanged(e) {\n    this.updateTriggerContent()\n\n    if (e.target.type == \"radio\") {\n      this.closePopover()\n    }\n\n    if (this.hasToggleAllTarget && !e.target.checked) {\n      this.toggleAllTarget.checked = false\n    }\n  }\n\n  inputContent(input) {\n    return input.dataset.text || input.parentElement.textContent\n  }\n\n  toggleAllItems() {\n    const isChecked = this.toggleAllTarget.checked\n    this.inputTargets.forEach(input => input.checked = isChecked)\n    this.updateTriggerContent()\n  }\n\n  updateTriggerContent() {\n    const checkedInputs = this.inputTargets.filter(input => input.checked)\n\n    if (checkedInputs.length === 0) {\n      this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder\n    } else if (this.termValue && checkedInputs.length > 1) {\n      this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`\n    } else {\n      this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(\", \")\n    }\n  }\n\n  togglePopover(event) {\n    event.preventDefault()\n\n    if (this.triggerTarget.ariaExpanded === \"true\") {\n      this.closePopover()\n    } else {\n      this.openPopover(event)\n    }\n  }\n\n  openPopover(event) {\n    if (event) event.preventDefault()\n\n    this.updatePopoverPosition()\n    this.updatePopoverWidth()\n    this.triggerTarget.ariaExpanded = \"true\"\n    this.selectedItemIndex = null\n    this.itemTargets.forEach(item => item.ariaCurrent = \"false\")\n    this.popoverTarget.showPopover()\n  }\n\n  closePopover() {\n    this.triggerTarget.ariaExpanded = \"false\"\n    this.popoverTarget.hidePopover()\n  }\n\n  filterItems(e) {\n    if ([\"ArrowDown\", \"ArrowUp\", \"Tab\", \"Enter\"].includes(e.key)) {\n      return\n    }\n\n    const filterTerm = this.searchInputTarget.value.toLowerCase()\n\n    if (this.hasToggleAllTarget) {\n      if (filterTerm) this.toggleAllTarget.parentElement.classList.add(\"hidden\")\n      else this.toggleAllTarget.parentElement.classList.remove(\"hidden\")\n    }\n\n    let resultCount = 0\n\n    this.selectedItemIndex = null\n\n    this.inputTargets.forEach((input) => {\n      const text = this.inputContent(input).toLowerCase()\n\n      if (text.indexOf(filterTerm) > -1) {\n        input.parentElement.classList.remove(\"hidden\")\n        resultCount++\n      } else {\n        input.parentElement.classList.add(\"hidden\")\n      }\n    })\n\n    this.emptyStateTarget.classList.toggle(\"hidden\", resultCount !== 0)\n  }\n\n  keyDownPressed() {\n    if (this.selectedItemIndex !== null) {\n      this.selectedItemIndex++\n    } else {\n      this.selectedItemIndex = 0\n    }\n\n    this.focusSelectedInput()\n  }\n\n  keyUpPressed() {\n    if (this.selectedItemIndex !== null) {\n      this.selectedItemIndex--\n    } else {\n      this.selectedItemIndex = -1\n    }\n\n    this.focusSelectedInput()\n  }\n\n  focusSelectedInput() {\n    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains(\"hidden\"))\n\n    this.wrapSelectedInputIndex(visibleInputs.length)\n\n    visibleInputs.forEach((input, index) => {\n      if (index == this.selectedItemIndex) {\n        input.parentElement.ariaCurrent = \"true\"\n        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })\n      } else {\n        input.parentElement.ariaCurrent = \"false\"\n      }\n    })\n  }\n\n  keyEnterPressed(event) {\n    event.preventDefault()\n    const option = this.itemTargets.find(item => item.ariaCurrent === \"true\")\n\n    if (option) {\n      option.click()\n    }\n  }\n\n  wrapSelectedInputIndex(length) {\n    this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length\n  }\n\n  updatePopoverPosition() {\n    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {\n      computePosition(this.triggerTarget, this.popoverTarget, {\n        placement: 'bottom-start',\n        middleware: [offset(4), flip()],\n      }).then(({ x, y }) => {\n        Object.assign(this.popoverTarget.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n      });\n    });\n  }\n\n  updatePopoverWidth() {\n    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)\n    this.popoverTarget.style.width = `${width}px`\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport { computePosition, autoUpdate, offset, flip } from \"@floating-ui/dom\";\n\n// Connects to data-controller=\"ruby-ui--combobox\"\nexport default class extends Controller {\n  static values = {\n    term: String,\n    minPopoverWidth: { type: Number, default: 240 }\n  }\n\n  static targets = [\n    \"input\",\n    \"toggleAll\",\n    \"popover\",\n    \"item\",\n    \"emptyState\",\n    \"searchInput\",\n    \"trigger\",\n    \"triggerContent\"\n  ]\n\n  selectedItemIndex = null\n\n  connect() {\n    this.updateTriggerContent()\n    this.requiredInputs = this.inputTargets.filter((input) => input.required)\n    this.syncValidity()\n  }\n\n  disconnect() {\n    if (this.cleanup) { this.cleanup() }\n  }\n\n  handlePopoverToggle(event) {\n    // Keep ariaExpanded in sync with the actual popover state\n    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'\n  }\n\n  inputChanged(e) {\n    this.updateTriggerContent()\n    this.syncValidity()\n\n    if (e.target.type == \"radio\") {\n      this.closePopover()\n    }\n\n    if (this.hasToggleAllTarget && !e.target.checked) {\n      this.toggleAllTarget.checked = false\n    }\n  }\n\n  syncValidity() {\n    if (this.requiredInputs.length === 0) return\n\n    const anyChecked = this.requiredInputs.some((input) => input.checked)\n\n    this.requiredInputs.forEach((input) => { input.required = !anyChecked })\n  }\n\n  inputContent(input) {\n    return input.dataset.text || input.parentElement.textContent\n  }\n\n  toggleAllItems() {\n    const isChecked = this.toggleAllTarget.checked\n    this.inputTargets.forEach(input => input.checked = isChecked)\n    this.updateTriggerContent()\n    this.syncValidity()\n  }\n\n  updateTriggerContent() {\n    const checkedInputs = this.inputTargets.filter(input => input.checked)\n\n    if (checkedInputs.length === 0) {\n      this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder\n    } else if (this.termValue && checkedInputs.length > 1) {\n      this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`\n    } else {\n      this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(\", \")\n    }\n  }\n\n  togglePopover(event) {\n    event.preventDefault()\n\n    if (this.triggerTarget.ariaExpanded === \"true\") {\n      this.closePopover()\n    } else {\n      this.openPopover(event)\n    }\n  }\n\n  openPopover(event) {\n    if (event) event.preventDefault()\n\n    this.updatePopoverPosition()\n    this.updatePopoverWidth()\n    this.triggerTarget.ariaExpanded = \"true\"\n    this.selectedItemIndex = null\n    this.itemTargets.forEach(item => item.ariaCurrent = \"false\")\n    this.popoverTarget.showPopover()\n  }\n\n  closePopover() {\n    this.triggerTarget.ariaExpanded = \"false\"\n    this.popoverTarget.hidePopover()\n  }\n\n  filterItems(e) {\n    if ([\"ArrowDown\", \"ArrowUp\", \"Tab\", \"Enter\"].includes(e.key)) {\n      return\n    }\n\n    const filterTerm = this.searchInputTarget.value.toLowerCase()\n\n    if (this.hasToggleAllTarget) {\n      if (filterTerm) this.toggleAllTarget.parentElement.classList.add(\"hidden\")\n      else this.toggleAllTarget.parentElement.classList.remove(\"hidden\")\n    }\n\n    let resultCount = 0\n\n    this.selectedItemIndex = null\n\n    this.inputTargets.forEach((input) => {\n      const text = this.inputContent(input).toLowerCase()\n\n      if (text.indexOf(filterTerm) > -1) {\n        input.parentElement.classList.remove(\"hidden\")\n        resultCount++\n      } else {\n        input.parentElement.classList.add(\"hidden\")\n      }\n    })\n\n    this.emptyStateTarget.classList.toggle(\"hidden\", resultCount !== 0)\n  }\n\n  keyDownPressed() {\n    if (this.selectedItemIndex !== null) {\n      this.selectedItemIndex++\n    } else {\n      this.selectedItemIndex = 0\n    }\n\n    this.focusSelectedInput()\n  }\n\n  keyUpPressed() {\n    if (this.selectedItemIndex !== null) {\n      this.selectedItemIndex--\n    } else {\n      this.selectedItemIndex = -1\n    }\n\n    this.focusSelectedInput()\n  }\n\n  focusSelectedInput() {\n    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains(\"hidden\"))\n\n    this.wrapSelectedInputIndex(visibleInputs.length)\n\n    visibleInputs.forEach((input, index) => {\n      if (index == this.selectedItemIndex) {\n        input.parentElement.ariaCurrent = \"true\"\n        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })\n      } else {\n        input.parentElement.ariaCurrent = \"false\"\n      }\n    })\n  }\n\n  keyEnterPressed(event) {\n    event.preventDefault()\n    const option = this.itemTargets.find(item => item.ariaCurrent === \"true\")\n\n    if (option) {\n      option.click()\n    }\n  }\n\n  wrapSelectedInputIndex(length) {\n    this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length\n  }\n\n  updatePopoverPosition() {\n    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {\n      computePosition(this.triggerTarget, this.popoverTarget, {\n        placement: 'bottom-start',\n        middleware: [offset(4), flip()],\n      }).then(({ x, y }) => {\n        Object.assign(this.popoverTarget.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n      });\n    });\n  }\n\n  updatePopoverWidth() {\n    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)\n    this.popoverTarget.style.width = `${width}px`\n  }\n}\n"
         },
         {
           "path": "combobox_empty_state.rb",