diff --git a/app/components/ruby_ui/checkbox/checkbox.rb b/app/components/ruby_ui/checkbox/checkbox.rb index 3cf579d3..23ce0558 100644 --- a/app/components/ruby_ui/checkbox/checkbox.rb +++ b/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" ] diff --git a/app/components/ruby_ui/combobox/combobox_popover.rb b/app/components/ruby_ui/combobox/combobox_popover.rb index 68b937f4..4d439e2f 100644 --- a/app/components/ruby_ui/combobox/combobox_popover.rb +++ b/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 ] } diff --git a/app/components/ruby_ui/combobox/combobox_trigger.rb b/app/components/ruby_ui/combobox/combobox_trigger.rb index 09072cd6..56ea757b 100644 --- a/app/components/ruby_ui/combobox/combobox_trigger.rb +++ b/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", diff --git a/app/components/ruby_ui/context_menu/context_menu.rb b/app/components/ruby_ui/context_menu/context_menu.rb index 9d8b61df..9bbecb75 100644 --- a/app/components/ruby_ui/context_menu/context_menu.rb +++ b/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 diff --git a/app/components/ruby_ui/form/form_field_error.rb b/app/components/ruby_ui/form/form_field_error.rb index 0fceacd3..58c43d35 100644 --- a/app/components/ruby_ui/form/form_field_error.rb +++ b/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 diff --git a/app/components/ruby_ui/form/form_field_label.rb b/app/components/ruby_ui/form/form_field_label.rb index d30f8b65..5a7b85b1 100644 --- a/app/components/ruby_ui/form/form_field_label.rb +++ b/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" ] diff --git a/app/components/ruby_ui/input/input.rb b/app/components/ruby_ui/input/input.rb index 6e326a43..fdb3a484 100644 --- a/app/components/ruby_ui/input/input.rb +++ b/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" ] } diff --git a/app/components/ruby_ui/radio_button/radio_button.rb b/app/components/ruby_ui/radio_button/radio_button.rb index b0e0d9e1..870341a2 100644 --- a/app/components/ruby_ui/radio_button/radio_button.rb +++ b/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" ] } diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 9047cd23..e92a12d6 100644 --- a/app/javascript/controllers/index.js +++ b/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) diff --git a/app/javascript/controllers/ruby_ui/combobox_controller.js b/app/javascript/controllers/ruby_ui/combobox_controller.js index 8d1d9d32..d1932772 100644 --- a/app/javascript/controllers/ruby_ui/combobox_controller.js +++ b/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"