Updates from main: e5a1f6bb7e0e01a3d7584c9ab8b0a94a47f1611b (#364)

Author: djalmaaraujo

app/components/ruby_ui/checkbox/checkbox.rb

@@ -17,9 +17,9 @@ def default_attrs
           action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
+          "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary",
           "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]

app/components/ruby_ui/combobox/combobox_popover.rb

@@ -17,10 +17,11 @@ def default_attrs
         data: {
           ruby_ui__combobox_target: "popover",
           action: %w[
+            toggle->ruby-ui--combobox#handlePopoverToggle
             keydown.down->ruby-ui--combobox#keyDownPressed
             keydown.up->ruby-ui--combobox#keyUpPressed
             keydown.enter->ruby-ui--combobox#keyEnterPressed
-            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

app/components/ruby_ui/combobox/combobox_trigger.rb

@@ -31,7 +31,7 @@ def default_attrs
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#openPopover"
+          action: "ruby-ui--combobox#togglePopover"
         },
         aria: {
           haspopup: "listbox",

app/components/ruby_ui/context_menu/context_menu.rb

@@ -18,7 +18,7 @@ def default_attrs
       {
         data: {
           controller: "ruby-ui--context-menu",
-          popover_options_value: @options.to_json
+          ruby_ui__context_menu_options_value: @options.to_json
         }
       }
     end

app/components/ruby_ui/form/form_field_error.rb

@@ -13,7 +13,7 @@ def default_attrs
         data: {
           ruby_ui__form_field_target: "error"
         },
-        class: "text-sm font-medium text-destructive"
+        class: "text-xs font-medium text-destructive"
       }
     end
   end

app/components/ruby_ui/form/form_field_label.rb

@@ -11,7 +11,7 @@ def view_template(&)
     def default_attrs
       {
         class: [
-          "text-sm font-medium leading-none",
+          "text-sm font-medium leading-none inline-block",
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
           "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none"
         ]

app/components/ruby_ui/input/input.rb

@@ -20,11 +20,11 @@ def default_attrs
           action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: [
-          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border",
+          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0",
           "placeholder:text-muted-foreground",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm",
           "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ]
       }

app/components/ruby_ui/radio_button/radio_button.rb

@@ -18,7 +18,7 @@ def default_attrs
         class: [
           "h-4 w-4 p-0 border-primary rounded-full flex-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
+          "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary",
           "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ]
       }

app/javascript/controllers/index.js

@@ -4,6 +4,9 @@
 
 import { application } from "./application"
 
+import IframeThemeController from "./iframe_theme_controller"
+application.register("iframe-theme", IframeThemeController)
+
 import RubyUi__AccordionController from "./ruby_ui/accordion_controller"
 application.register("ruby-ui--accordion", RubyUi__AccordionController)
 
@@ -82,8 +85,5 @@ application.register("ruby-ui--theme-toggle", RubyUi__ThemeToggleController)
 import RubyUi__TooltipController from "./ruby_ui/tooltip_controller"
 application.register("ruby-ui--tooltip", RubyUi__TooltipController)
 
-import IframeThemeController from "./iframe_theme_controller"
-application.register("iframe-theme", IframeThemeController)
-
 import SidebarMenuController from "./sidebar_menu_controller"
 application.register("sidebar-menu", SidebarMenuController)

app/javascript/controllers/ruby_ui/combobox_controller.js

@@ -28,6 +28,11 @@ export default class extends Controller {
     if (this.cleanup) { this.cleanup() }
   }
 
+  handlePopoverToggle(event) {
+    // Keep ariaExpanded in sync with the actual popover state
+    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
+  }
+
   inputChanged(e) {
     this.updateTriggerContent()
 
@@ -62,9 +67,19 @@ export default class extends Controller {
     }
   }
 
-  openPopover(event) {
+  togglePopover(event) {
     event.preventDefault()
 
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+
     this.updatePopoverPosition()
     this.updatePopoverWidth()
     this.triggerTarget.ariaExpanded = "true"