loco_motion-rails 0.0.8 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d4d1891389f5b0a860f930a6d4e6dbb9053b6a77e349cd0f43b9de22740482b
-  data.tar.gz: 2f99a232731636bfaeca166092c0fb4ca51ddae6300e420951d0c0791997e1d7
+  metadata.gz: 687d91be39ee325ca12d4244a2f3f87d8fc4578b0b6c00df334851c453c6de78
+  data.tar.gz: ba936057cb428d3173bdade09ce87c168958e1d3ad8b894ed6114462e907e2fc
 SHA512:
-  metadata.gz: ad963fe072e997ad83879704d8a5d9285f2e964371ee9c7418dfe7377db7950b09f43e3ff8555fad25aee3d141b7b6927ba5e70f965684d749057aaa1d6223c8
-  data.tar.gz: 367ecb0bf6b3b9d3ff77e6f596b12322fe1b1026bcecc619032c70e59ed94d344f3b18907e8dc8caf63b4d95343e351a808254b50da0db14c8a98b8282cb5a18
+  metadata.gz: 01d611aeba154bef36533cc860774e0c640e6e6e9417de8c3f3e060be59b4c1b33071a205b5321b6b99ec5a59814fbcb6ca230757a1d1d10b3bbdfcf1ac8d27f
+  data.tar.gz: c8e51c9a451c0199286b1b631da4e126054375113230bab242aad7c9c8387fdadc5244b80654abf0f11eb542615fef90087e522f7dddff01f7f200d3572dc91a

data/README.md

@@ -6,19 +6,45 @@ ViewComponent, TailwindCSS, DaisyUI and more!
 
 <img src="//loco-motion-docs.profoundry.us/images/loco-chats.png" width="500px" style="border: 1px solid #bbb; padding: 2px; border-radius: 10px;">
 
-_**DISCLAIMER**_
+<!-- omit from toc -->
+## DISCLAIMER / CURRENT STATUS
 
 This project is in active development and many changes occur with every release!
-In particular, new Daisy components are being added frequently and older
-components are being updated with new features meaning the APIs are very likely
-to change!
+
+We've added a very basic / untested version of all DaisyUI 4 components. While
+we originally intended to take some time to flesh out and attempt to use these
+components, with the recent release of Tailwind 4 and DaisyUI 5, we feel our
+time is best spent updating all of the components and dependencies for these
+new releases.
+
+This means that we will **NOT** be making any bug fixes to the current branch
+(0.4.0), and will instead include any bug fixes / improvements into the 0.5.0
+branch which will also upgrade to Tailwind 4 and DaisyUI 5.
+
+ - Current Release **(0.4.0)** - Works with DaisyUI 4 and Tailwind 3
+ - Next Release **(0.5.0)** - Will work with DaisyUI 5 and Tailwind 4
+
+<!-- omit from toc -->
+## Additional Notes
+
+### DataInput Components
+
+Many of the DataInput elements (file input, text input, select dropdown, etc)
+were built rather hastily so that we would have a base version to start from.
+
+However, the new DaisyUI 5 components are implemented in a much cleaner way and
+we didn't want to invest too much time building these out and making them more
+ideal since we're about to change them.
+
+### Hosting / Sites
 
 We expect to settle on and purchase a real domain name in the near future, but
 for the time being, the latest documentation is available at the links below.
 
- - [Docs / Demo (Latest Release)][1]
- - [API Docs (Latest Release)][2]
- - [Docs / Demo (Main Branch / Staging)][3]
+ - [Latest Release][1]
+ - [Main / Staging][3]
+
+### Getting Help
 
 Please reach out by opening an
 [Issue](https://github.com/profoundry-us/loco_motion/issues) if you've found a
@@ -47,6 +73,8 @@ your solution is aligned with our goals.
   - [Install](#install)
   - [Using Components](#using-components)
 - [Developing](#developing)
+  - [Contributing](#contributing)
+  - [Releasing](#releasing)
   - [Tooling](#tooling)
 - [TODO / Next Steps](#todo--next-steps)
 
@@ -731,7 +759,7 @@ gem "loco_motion", github: "profoundry-us/loco_motion", branch: "main", require:
 
 # or
 
-gem "loco_motion-rails", "0.0.7", require: "loco_motion"
+gem "loco_motion-rails", "0.4.0", require: "loco_motion"
 ```
 
 Next add the following lines to the `contents` section of your
@@ -856,6 +884,20 @@ See the `Makefile` for all available commands.
 > make demo-restart
 > ```
 
+### Contributing
+
+If you're interested in contributing to LocoMotion, please check out our
+[CONTRIBUTING guide](docs/dev_guides/CONTRIBUTING.md) which provides detailed
+information about the contribution process, code standards, documentation
+requirements, and testing procedures.
+
+### Releasing
+
+For core team members who need to release new versions of LocoMotion, please
+refer to our [RELEASING guide](docs/dev_guides/RELEASING.md) for step-by-step
+instructions on version updates, building, testing, and publishing both the Ruby
+gem and NPM package.
+
 ### Tooling
 
 For VSCode, you may want to add the following to your settings to get
@@ -919,9 +961,9 @@ the GitHub Discussions feature and let us know!
 - [x] Basic versions of DaisyUI Data Display
 - [x] Basic versions of DaisyUI Navigation
 - [x] Basic versions of DaisyUI Feedback
-- [ ] Basic versions of DaisyUI Data Input
-- [ ] Basic versions of DaisyUI Layout
-- [ ] Basic versions of DaisyUI Mockup
+- [x] Basic versions of DaisyUI Data Input
+- [x] Basic versions of DaisyUI Layout
+- [x] Basic versions of DaisyUI Mockup
 - [x] ~~Get YARD docs rendering with (better) Markdown~~ _**Working for now**_
 - [x] Extract relevant pieces into a yard-loco_motion plugin
 - [x] Publish Gem
@@ -932,9 +974,9 @@ the GitHub Discussions feature and let us know!
 - [ ] Choose, recommend, and document a pagination gem
 - [ ] Discuss caching techniques / setup
 - [x] Create / publish a staging version of the demo site ([Demo Staging][2])
-- [ ] Create / publish a staging version of the docs site
-- [ ] Create / publish a production version of the demo site
-- [ ] Create / publish a production version of the docs site
+- [x] Create / publish a staging version of the docs site
+- [x] Create / publish a production version of the demo site
+- [x] Create / publish a production version of the docs site
 - [x] Update demo site to allow for a different docs site using ENV var
 - [x] Update README to suggest Playwright
 - [ ] Build some have docs / guides / examples for using playwright-ruby-client
@@ -946,6 +988,12 @@ the GitHub Discussions feature and let us know!
 - [ ] See if we can update the Join component to auto-add the `join-item` CSS
       under certain conditions
 - [ ] Add title and description content_for blocks to all examples for SEO purposes
+- [ ] Update to Tailwind 4 and DaisyUI 5
+- [ ] Rename the `Dockerfile` to `Dockerfile.loco` to be more concise
+- [x] See if we can remove all of the `set_loco_parent` calls in favor of using
+      the `lib/loco_motion/patches/view_component/slot_loco_parent_patch.rb`
+- [ ] Make the tooltips documentation button a component and use it for the
+      Labelable concern docs too
 
 [1]: https://loco-motion.profoundry.us/
 [2]: https://loco-motion-demo-staging.profoundry.us/

data/app/components/daisy/actions/button_component.html.haml

@@ -2,6 +2,6 @@
   - if content?
     = content
   - else
-    = heroicon_tag(@left_icon, **left_icon_html) if @left_icon
+    = render_left_icon
     = @simple_title if @simple_title
-    = heroicon_tag(@right_icon, **right_icon_html) if @right_icon
+    = render_right_icon

data/app/components/daisy/actions/button_component.rb

@@ -3,7 +3,7 @@
 # that are styled to look like a clickable element.
 #
 # Note that we do **not** use component parts for the icons since we're calling
-# `heroicon_tag` within the component. But we **do** provide custom CSS & HTML
+# `heroicon` within the component. But we **do** provide custom CSS & HTML
 # options to allow overriding / customization.
 #
 # Includes the {LocoMotion::Concerns::TippableComponent} module to enable easy
@@ -19,8 +19,88 @@
 #
 #   = daisy_button(title: "Button with Two Icons", left_icon: "heart", right_icon: "plus")
 #
+# @loco_example Button Group
+#   = daisy_button_group do
+#     = daisy_button do
+#       Button 1
+#     = daisy_button do
+#       Button 2
+#
+# @loco_example Default Button
+#   = daisy_button { "Default Button" }
+#
+# @loco_example Primary Button
+#   = daisy_button(css: "btn-primary") { "Primary Button" }
+#
+# @loco_example Secondary Button
+#   = daisy_button(css: "btn-secondary") { "Secondary Button" }
+#
+# @loco_example Accent Button
+#   = daisy_button(css: "btn-accent") { "Accent Button" }
+#
+# @loco_example Ghost Button
+#   = daisy_button(css: "btn-ghost") { "Ghost Button" }
+#
+# @loco_example Link Button
+#   = daisy_button(css: "btn-link") { "Link Button" }
+#
+# @loco_example Info Button
+#   = daisy_button(css: "btn-info") { "Info Button" }
+#
+# @loco_example Success Button
+#   = daisy_button(css: "btn-success") { "Success Button" }
+#
+# @loco_example Warning Button
+#   = daisy_button(css: "btn-warning") { "Warning Button" }
+#
+# @loco_example Error Button
+#   = daisy_button(css: "btn-error") { "Error Button" }
+#
+# @loco_example Outline Primary Button
+#   = daisy_button(css: "btn-primary btn-outline") { "Outline Primary" }
+#
+# @loco_example Outline Success Button
+#   = daisy_button(css: "btn-success btn-outline") { "Outline Success" }
+#
+# @loco_example Outline Warning Button
+#   = daisy_button(css: "btn-warning btn-outline") { "Outline Warning" }
+#
+# @loco_example Outline Error Button
+#   = daisy_button(css: "btn-error btn-outline") { "Outline Error" }
+#
+# @loco_example Soft Primary Button
+#   = daisy_button(css: "btn-primary btn-soft") { "Soft Primary" }
+#
+# @loco_example Soft Success Button
+#   = daisy_button(css: "btn-success btn-soft") { "Soft Success" }
+#
+# @loco_example Soft Warning Button
+#   = daisy_button(css: "btn-warning btn-soft") { "Soft Warning" }
+#
+# @loco_example Soft Error Button
+#   = daisy_button(css: "btn-error btn-soft") { "Soft Error" }
+#
+# @loco_example Dash Primary Button
+#   = daisy_button(css: "btn-primary btn-dash") { "Dash Primary" }
+#
+# @loco_example Dash Success Button
+#   = daisy_button(css: "btn-success btn-dash") { "Dash Success" }
+#
+# @loco_example Dash Warning Button
+#   = daisy_button(css: "btn-warning btn-dash") { "Dash Warning" }
+#
+# @loco_example Dash Error Button
+#   = daisy_button(css: "btn-error btn-dash") { "Dash Error" }
+#
+# @loco_example Wide Button
+#   = daisy_button(css: "btn-wide") { "Wide Button" }
+#
 class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::LinkableComponent
+  include LocoMotion::Concerns::IconableComponent
+
+  define_parts :label
 
   #
   # Instantiate a new Button component.
@@ -29,20 +109,11 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   #   of title, left icon, or right icon is provided. Will be considered the
   #   `action` parameter if **both** the title and a block are provided.
   #
-  # @param action [String] The Stimulus action that should fire when the button
-  #   is clicked.
-  #
   # @param kws    [Hash] The keyword arguments for the component.
   #
   # @option kws title           [String] The title of the button. You can also
   #   pass the title, icons, or any other HTML content as a block.
   #
-  # @option kws action          [String] The Stimulus action that should fire
-  #   when the button is clicked.
-  #
-  #   > **Note:** _You should use either the `action` or the `href` option, but
-  #   not both._
-  #
   # @option kws href            [String] A path or URL to which the user will be
   #   directed when the button is clicked. Forces the Button to use an `<a>`
   #   tag.
@@ -74,11 +145,9 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   # @option kws right_icon      [String] The name of Hero icon to render inside
   #   the button to the right of the text.
   #
-  # @option kws right_icon_css  [String] The CSS classes to apply to the right
-  #   icon.
+  # @option kws right_icon_css  [String] Right icon CSS (via IconableComponent).
   #
-  # @option kws right_icon_html [Hash] Additional HTML attributes to apply to
-  #   the right icon.
+  # @option kws right_icon_html [Hash] Right icon HTML (via IconableComponent).
   #
   def initialize(title = nil, action = nil, **kws, &block)
     super
@@ -92,21 +161,7 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
 
     @action = config_option(:action, action)
 
-    @href = config_option(:href)
-    @target = config_option(:target)
-
-    @icon = config_option(:icon)
-    @icon_css = config_option(:icon_css, "[:where(&)]:size-5")
-    @icon_html = config_option(:icon_html, {})
-
-    @left_icon = config_option(:left_icon, @icon)
-    @left_icon_css = config_option(:left_icon_css, @icon_css)
-    @left_icon_html = config_option(:left_icon_html, @icon_html)
-
-    @right_icon = config_option(:right_icon)
-    @right_icon_css = config_option(:right_icon_css, @icon_css)
-    @right_icon_html = config_option(:right_icon_html, @icon_html)
-
+    # Initialize concerns -- handled by BaseComponent hook
     default_title = @left_icon || @right_icon ? nil : "Submit"
     @simple_title = config_option(:title, title || default_title)
   end
@@ -115,42 +170,26 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   # Calls the {setup_component} method before rendering the component.
   #
   def before_render
+    # Run before the super so LinkableComponent can override our tag name
     setup_component
+
+    super
   end
 
   #
-  # Sets the tagname to `<a>` if an `href` is provided, otherwise sets it to
-  # `<button>`. Adds the `btn` CSS class to the component. Also adds
-  # `items-center` and `gap-2` CSS classes if an icon is present.
+  # Performs button-specific setup. Adds the `btn` CSS class to the component.
+  # Also adds `items-center` and `gap-2` CSS classes if an icon is present.
+  # Tag name setup (`<a>` vs `<button>`) and tooltip setup are handled by
+  # LinkableComponent and TippableComponent concerns via BaseComponent hooks.
   #
   def setup_component
-    if @href
-      set_tag_name(:component, :a)
-      add_html(:component, { href: @href, target: @target })
-    else
-      set_tag_name(:component, :button)
-    end
-
-    add_css(:component, "btn")
+    # Ensure tag is button if LinkableComponent didn't set it to <a>
+    set_tag_name(:component, :button)
 
-    if @icon || @left_icon || @right_icon
-      add_css(:component, "[:where(&)]:items-center [:where(&)]:gap-2")
-    end
+    # Add the btn class
+    add_css(:component, "btn") unless @skip_styling
 
-      add_html(:component, { "data-action": @action }) if @action
-  end
-
-  #
-  # Returns the HTML attributes for the left icon.
-  #
-  def left_icon_html
-    { class: @left_icon_css }.merge(@left_icon_html)
-  end
-
-  #
-  # Returns the HTML attributes for the right icon.
-  #
-  def right_icon_html
-    { class: @right_icon_css }.merge(@right_icon_html)
+    # Add data-action if specified
+    add_html(:component, { "data-action": @action }) if @action
   end
 end

data/app/components/daisy/actions/dropdown_component.html.haml

@@ -7,7 +7,6 @@
   - if items.any?
     = part(:menu) do
       - items.each do |item|
-        = part(:menu_item) do
-          = item
+        = item
   - else
     = content

data/app/components/daisy/actions/dropdown_component.rb

@@ -31,7 +31,7 @@
 # @loco_example Custom Activator
 #   = daisy_dropdown do |dropdown|
 #     - dropdown.with_activator do
-#       = heroicon_tag "bars-3", css: "size-6"
+#       = heroicon "bars-3", css: "size-6"
 #     - dropdown.with_item do
 #       Menu Item 1
 #     - dropdown.with_item do
@@ -43,26 +43,26 @@
 #       User Settings
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center
-#         = heroicon_tag "user-circle"
+#         = heroicon "user-circle"
 #         Profile
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center
-#         = heroicon_tag "cog-6-tooth"
+#         = heroicon "cog-6-tooth"
 #         Settings
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center.text-error
-#         = heroicon_tag "arrow-right-on-rectangle"
+#         = heroicon "arrow-right-on-rectangle"
 #         Logout
 #
 class Daisy::Actions::DropdownComponent < LocoMotion::BaseComponent
 
   include ViewComponent::SlotableDefault
 
-  define_parts :menu, :menu_item
+  define_parts :menu
 
   renders_one :activator, LocoMotion::BasicComponent.build(html: { role: "button", tabindex: 0 })
   renders_one :button, Daisy::Actions::ButtonComponent
-  renders_many :items
+  renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li, css: "menu-item")
 
   #
   # Creates a new instance of the DropdownComponent.
@@ -102,10 +102,7 @@ class Daisy::Actions::DropdownComponent < LocoMotion::BaseComponent
   def setup_menu
     # Setup menu itself
     set_tag_name(:menu, :ul)
-    add_css(:menu, "dropdown-content menu bg-base-100 rounded-box shadow w-52 p-2 z-[1]")
-
-    # Setup menu items
-    set_tag_name(:menu_item, :li)
+    add_css(:menu, "dropdown-content where:menu where:bg-base-100 where:rounded-box where:shadow where:w-52 where:p-2 where:z-[1]")
   end
 
   #

data/app/components/daisy/actions/modal_component.html.haml

@@ -11,7 +11,7 @@
           - if close_icon?
             = close_icon
           - else
-            = heroicon_tag "x-mark"
+            = heroicon "x-mark"
 
     - if title?
       = title
@@ -21,12 +21,14 @@
 
     = content
 
-    = part(:actions) do
-      = part(:start_actions) do
-        - if start_actions?
-          = start_actions
-      = part(:end_actions) do
-        - if end_actions?
-          = end_actions
+    - if start_actions? || end_actions?
+      = part(:actions) do
+        = part(:start_actions) do
+          - if start_actions?
+            = start_actions
+        = part(:end_actions) do
+          - if end_actions?
+            = end_actions
+
   = part(:backdrop) do
     %button close

data/app/components/daisy/actions/modal_component.rb

@@ -7,7 +7,6 @@
 # (`showModal()` and `close()`). This provides better accessibility and keyboard
 # navigation compared to div-based modals.
 #
-# @part dialog The main `<dialog>` container that wraps the modal content.
 # @part box The container for the modal content, providing padding and layout.
 # @part close_icon_wrapper The container for the close icon, positioned in the
 #   top-right corner.
@@ -55,7 +54,7 @@
 #   = daisy_modal(title: "User Details") do |modal|
 #     - modal.with_activator do
 #       .flex.items-center.gap-2.cursor-pointer
-#         = heroicon_tag "user-circle"
+#         = heroicon "user-circle"
 #         %span View Details
 #
 #     %dl.space-y-2
@@ -71,7 +70,7 @@
 class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
   set_component_name :modal
 
-  define_parts :dialog, :box, :actions, :close_icon_wrapper, :close_icon,
+  define_parts :box, :actions, :close_icon_wrapper, :close_icon,
     :backdrop, :title, :start_actions, :end_actions
 
   renders_one :activator, LocoMotion::BasicComponent.build(html: { role: "button", tabindex: 0 })
@@ -165,15 +164,16 @@ class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
     add_html(:close_icon_wrapper, { method: "dialog" })
 
     set_tag_name(:close_icon, :button)
-    add_css(:close_icon, "absolute top-2 right-2 p-1 btn btn-circle btn-ghost btn-xs")
+    add_css(:close_icon, "where:absolute where:top-2 where:right-2 where:p-1 where:btn where:btn-circle where:btn-ghost where:btn-xs")
   end
 
   def setup_title
-    add_css(:title, "mb-2 text-xl font-bold")
+    set_tag_name(:title, 'h4')
+    add_css(:title, "where:mb-2 where:text-xl where:font-bold")
   end
 
   def setup_actions
-    add_css(:actions, "mt-2 flex flex-row items-center justify-between")
+    add_css(:actions, "where:mt-2 where:flex where:flex-row where:items-center where:justify-between")
   end
 
   # Provide a default button if no button is supplied.

data/app/components/daisy/actions/swap_component.rb

@@ -32,9 +32,9 @@
 # @loco_example Icon Swap with Tooltip
 #   = daisy_swap(tip: "Toggle Theme") do |swap|
 #     - swap.with_on do
-#       = heroicon_tag "sun", css: "size-6"
+#       = heroicon "sun", css: "size-6"
 #     - swap.with_off do
-#       = heroicon_tag "moon", css: "size-6"
+#       = heroicon "moon", css: "size-6"
 #
 # @loco_example Complex Content with Animation
 #   = daisy_swap(css: "swap-flip") do |swap|
@@ -51,19 +51,19 @@
 #   = daisy_swap(css: "swap-flip", tip: "Task Status") do |swap|
 #     - swap.with_on do
 #       .text-success
-#         = heroicon_tag "check-circle"
+#         = heroicon "check-circle"
 #         %span Complete
 #     - swap.with_off do
 #       .text-error
-#         = heroicon_tag "x-circle"
+#         = heroicon "x-circle"
 #         %span Failed
 #     - swap.with_indeterminate do
 #       .text-warning
-#         = heroicon_tag "clock"
+#         = heroicon "clock"
 #         %span Processing
 #
 class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   class SwapOn < LocoMotion::BasicComponent
     def before_render
@@ -121,6 +121,9 @@ class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
   # @option kws indeterminate [Boolean] If true, starts the swap in an indeterminate
   #   state. Requires the indeterminate slot to be meaningful.
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(on = nil, off = nil, checked = nil, **kws, &block)
     super
 
@@ -133,9 +136,10 @@ class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
   # Sets up the component with various CSS classes and HTML attributes.
   #
   def before_render
-    setup_component
-    setup_checkbox
-    setup_on_off
+    setup_component # Set tag, base CSS
+    setup_checkbox  # Setup the hidden checkbox part
+    setup_on_off    # Setup the on/off part CSS
+    super           # Run TippableComponent hook
   end
 
   private

data/app/components/daisy/actions/theme_controller.js

@@ -0,0 +1,113 @@
+/**
+ * Theme Controller
+ *
+ * A Stimulus controller that manages theme selection and persistence.
+ * It handles theme switching, localStorage persistence, and synchronization
+ * across multiple theme selectors on the same page.
+ */
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  /**
+   * Called when the controller is connected to the DOM.
+   * Sets the initial theme input state and sets up event listeners.
+   */
+  connect() {
+    this.setInput()
+
+    // Setup a custom listener to watch for changes on the page in case the
+    // page has multiple theme selectors
+    this.storageChangeListener = this.storageChanged.bind(this)
+
+    window.addEventListener('localstorage-update', this.storageChangeListener)
+  }
+
+  /**
+   * Called when the controller is disconnected from the DOM.
+   * Removes event listeners to prevent memory leaks.
+   */
+  disconnect() {
+    window.removeEventListener('localstorage-update', this.storageChangeListener)
+  }
+
+  /**
+   * Sets the appropriate radio input as checked based on the current theme.
+   * This ensures the UI reflects the active theme.
+   */
+  setInput() {
+    const theme = this.getCurrentTheme()
+    const input = this.element.querySelector(`input[value='${theme}']`);
+
+    if (input) {
+      input.checked = true;
+    }
+  }
+
+  /**
+   * Clears the user's theme preference from localStorage.
+   * Removes the saved theme and dispatches an event to notify other controllers.
+   *
+   * @param {Event} event - The triggering click event
+   */
+  clearTheme(event) {
+    // If we are passed a themeName parameter, clear all inputs with that theme
+    if (event && event.params && event.params.themeName) {
+      const inputs = document.querySelectorAll(`input[name='${event.params.themeName}']`)
+
+      if (inputs) {
+        inputs.forEach(input => {
+          input.checked = false
+        })
+      }
+    }
+
+    // Remove the savedTheme from local storage
+    localStorage.removeItem("savedTheme")
+
+    // Fire off an update
+    const updateEvent = new CustomEvent('localstorage-update', { detail: { key: 'savedTheme', newValue: null } })
+    window.dispatchEvent(updateEvent)
+  }
+
+  /**
+   * Changes the theme based on user selection.
+   * Updates localStorage and dispatches a custom event to notify other controllers.
+   *
+   * @param {Event} event - The triggering click event
+   */
+  setTheme(event) {
+    const input = event.currentTarget.querySelector('input')
+
+    if (input) {
+      localStorage.setItem("savedTheme", input.value)
+
+      const updateEvent = new CustomEvent('localstorage-update', { detail: { key: 'savedTheme', newValue: input.value } })
+      window.dispatchEvent(updateEvent)
+    }
+
+    event.preventDefault();
+  }
+
+  /**
+   * Retrieves the current theme from localStorage.
+   *
+   * @returns {string} The current theme name
+   */
+  getCurrentTheme() {
+    const savedTheme = localStorage.getItem('savedTheme')
+
+    if (savedTheme) {
+      return savedTheme
+    }
+  }
+
+  /**
+   * Event handler for 'localstorage-update' events.
+   * Updates the input state when theme changes in another controller.
+   *
+   * @param {CustomEvent} event - The storage changed event
+   */
+  storageChanged(event) {
+    this.setInput()
+  }
+}