daisyui 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3abc9fef4016ee849011068ae3e5408a7439b277d0ed27328e38d6a4c2da75e4
-  data.tar.gz: 875978b29efce3b7de66a3152123cc633d0a444cc86b1074d34a2b7112763fdf
+  metadata.gz: d82c1b4f52e8a5b62fb723e83557c1def70805b24c855aced7381c8c2f80dc0e
+  data.tar.gz: 831d1acb486a33fb1b779643d273a58925a921a456d20be7374cf4a5ed6c3cf4
 SHA512:
-  metadata.gz: 2857784ae12a775ba2da3f123082b613cd92b8223a1ceb4ab440eb6110ebb2814be2f3802146b47ce2819e2dfa35604ca24feac65cd454f997a066b156b25d26
-  data.tar.gz: b0298c37b0eaf65b7b9984d7a846b6640c2a3a716e25ad7f96cd6dc822b798305096ae529f1be64195c37de73d890083f6893cdaeadb57db4f8c4b6fc9d7a92e
+  metadata.gz: 061d1ff9eb34a488db5ab1aff21491e9c4f8b39912c7749637e3941d9738edd5cbef993b5d52bd6e55620f4b6f4207f9ad7285df0f672507c3552f16be775d1a
+  data.tar.gz: 598db62e9eefc346e30b1d42d449bc49c54c6a80c5d917c21360fb1511ea0ed17380a2c9b2be8b4f1edd647d4281b5b134e18995be66ff1d884de17428a9d127

data/CHANGELOG.md

@@ -0,0 +1,30 @@
+## [Unreleased]
+
+### Added
+
+- Aura component (DaisyUI 5.6) with style variants (dual, rainbow, holo, gold, silver, glow) and sizes
+- Megamenu component (DaisyUI 5.6) with wide, full, vertical modifiers, sizes, and active_indicator sub-component
+- OTP component (DaisyUI 5.6) for one-time password inputs with configurable digit count, joined modifier, sizes, and color variants
+- `Dropdown` `:popover` modifier — renders the menu via the native Popover API
+  and CSS anchor positioning, so it opens in the top layer and escapes
+  `overflow` clipping (e.g. inside a table's `overflow-x-auto`). Accepts a
+  `popover_id:` for a stable id. Wires `aria-controls`/`aria-expanded` on the
+  trigger and `role="menu"` on the menu popover (the latter overridable, and
+  omitted for non-menu `content` panels). Default and `:tap_to_close` dropdowns
+  are unchanged. See the README "Dropdown `:popover` positioning" note for the
+  optional older-browser polyfill.
+- Opt-in `daisy-dropdown` Stimulus controller for `:popover` dropdowns
+  (`Dropdown(:popover, stimulus: true)`), delivered to importmap-rails apps via
+  a gated Rails engine that auto-pins it. Provides a feature-detected JS
+  positioning fallback (Safari < 26, Firefox < 147) and optional roving
+  keyboard navigation. The default `:popover` dropdown remains zero-JS, and the
+  gem stays a plain Phlex library when Rails is absent.
+
+### Changed
+
+- Range component: added range-vertical modifier for vertical orientation (DaisyUI 5.6)
+- Tooltip component: added alignment modifiers (tooltip-start, tooltip-center, tooltip-end) and tooltip-content sub-component (DaisyUI 5.6)
+
+## [0.1.0] - 2024-08-02
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 David Alejandro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,327 @@
+<picture>
+  <source srcset="https://github.com/user-attachments/assets/2c4d7fdb-abe7-4f71-a6d0-ef4d41b5625a" media="(prefers-color-scheme: dark)">
+  <img src="https://github.com/user-attachments/assets/9afa9755-4aab-412a-9dc9-5eb2f76c12d6" width="350" alt="DaisyUI logo"><br>
+</picture>
+
+A Ruby UI component library for DaisyUI using Phlex
+
+# Installation
+
+## 1. Install CSS dependencies
+
+You can install TailwindCSS and DaisyUI either via a JS bundler or via importmaps.
+
+### JS Bundler
+
+**TailwindCSS**
+
+Install TailwindCSS by following the instructions in the TailwindCSS documentation, using either the Tailwind CLI or PostCSS.
+
+**DaisyUI**
+
+Install DaisyUI by following the instructions in the DaisyUI documentation as a Node package.
+
+### Importmaps
+
+**TailwindCSS with DaisyUI**
+
+You'll need to download a TailwindCSS standalone CLI that comes bundled with DaisyUI by following the instructions in the [tailwind-cli-extra repo](https://github.com/dobicinaitis/tailwind-cli-extra).
+
+Afterwards, place it somewhere in your project, e.g. in the bin directory.
+
+If you want to compile the standalone TailwindCSS CLI with DaisyUI yourself, you can follow the instructions here.
+
+**tailwindcss-rails gem**
+
+Install tailwindcss-rails gem for Rails to automatically include your TailwindCSS stylesheets when the asset pipeline compiles your assets.
+
+For this, you'll need to install the gem by following the instructions in the [tailwindcss-rails repo](https://github.com/rails/tailwindcss-rails).
+
+Finally, you'll need to set the `TAILWINDCSS_INSTALL_DIR` environment variable in your Rails app pointing to the directory where you placed the binary from the tailwind-cli-extra repo mentioned above. e.g. `TAILWINDCSS_INSTALL_DIR=bin`
+
+## 2. Install Ruby dependencies
+
+### Install Phlex
+
+Install Phlex by following the instructions in the [Phlex documentation](https://www.phlex.fun/#rails-introduction).
+
+### Install DaisyUI gem
+
+1. Add the DaisyUI gem to your Gemfile:
+
+```
+bundle add daisyui
+```
+
+2. (Optional) Include the `DaisyUI` module in `ApplicationComponent`:
+
+```rb
+class ApplicationComponent < Phlex::HTML
+  include DaisyUI
+end
+```
+
+This will allow you to use DaisyUI components using the short-form syntax. For example:
+
+```rb
+class SomeView < ApplicationView
+  def view_template
+    Button :primary do
+      "Hello, world!"
+    end
+  end
+end
+```
+
+If you don't include DaisyUI, you can still use the namespaced syntax:
+
+```rb
+class SomeView < ApplicationView
+  def view_template
+    render DaisyUI::Button.new(:primary) do
+      "Hello, world!"
+    end
+  end
+end
+```
+
+Consider not including DaisyUI in ApplicationComponent if:
+
+- You have your own component library with the same component names as DaisyUI.
+- You're including your own components module in `ApplicationComponent`.
+
+In this scenario, including both DaisyUI and your own component library in `ApplicationComponent` will lead to naming conflicts.
+
+3. Update your `tailwind.config.js` file to include DaisyUI component styles:
+
+```js
+const execSync = require("child_process").execSync;
+const outputDaisyUI = execSync("bundle show daisyui", { encoding: "utf-8" });
+const daisyUIPath = outputDaisyUI.trim() + "/**/*.rb";
+module.exports = {
+  content: [
+    // ... other paths
+    daisyUIPath,
+  ],
+};
+```
+
+4. Update your tailwind.config.js file to detect TailwindCSS classes in Ruby files.
+
+```js
+module.exports = {
+  content: [
+    // ... other paths
+    //
+    // Note the "rb" extension at the end
+    "./app/views/**/*.{erb,haml,html,slim,rb}",
+  ],
+};
+```
+
+# Compatibility Notes
+
+## @tailwindcss/forms plugin
+
+If you're using the `@tailwindcss/forms` plugin alongside DaisyUI, you may encounter styling conflicts with form components like Toggle, Checkbox, and Radio. The forms plugin adds default checkbox/radio styling that can interfere with DaisyUI's custom styling.
+
+**Solution:** Add the following CSS to your stylesheet to override the forms plugin styling for DaisyUI components:
+
+```css
+/* Override @tailwindcss/forms checkbox styles for DaisyUI components */
+.toggle,
+.checkbox,
+.radio {
+  background-image: none !important;
+}
+.toggle:checked,
+.checkbox:checked,
+.radio:checked {
+  background-image: none !important;
+}
+```
+
+Alternatively, you can configure `@tailwindcss/forms` to use the `class` strategy instead of `base`, which only applies styles when you explicitly add form classes:
+
+```js
+// tailwind.config.js
+plugins: [
+  require('@tailwindcss/forms')({
+    strategy: 'class', // only apply form styles to elements with form-* classes
+  }),
+],
+```
+
+## Dropdown `:popover` positioning on older browsers
+
+The `:popover` Dropdown modifier renders the menu in the browser top layer (so it
+escapes `overflow` clipping) and positions it next to the trigger using **CSS
+anchor positioning** (`anchor-name` / `position-anchor`). This works with **zero
+JavaScript** on Chrome/Edge 125+, Safari 26+, and Firefox 147+.
+
+```ruby
+Dropdown(:popover, :end) do |dropdown|
+  dropdown.button(:ghost, :sm) { "Actions" }
+  dropdown.menu(:sm, class: "w-52") do |menu|
+    menu.item { a(href: "#") { "Edit" } }
+    menu.item { a(href: "#") { "Delete" } }
+  end
+end
+```
+
+On **older engines (Safari < 26, Firefox < 147)** the popover still opens in the
+top layer, but without CSS anchor positioning it falls back to the viewport
+default (DaisyUI centers it via `@supports not (position-area)`), so it is not
+positioned next to the trigger.
+
+To position correctly on those browsers with no application code, pin the
+[OddBird CSS anchor positioning polyfill](https://github.com/oddbird/css-anchor-positioning)
+and load it lazily:
+
+```ruby
+# config/importmap.rb
+pin "@oddbird/css-anchor-positioning", to: "https://ga.jspm.io/npm:@oddbird/css-anchor-positioning@1/dist/css-anchor-positioning.fn.js", preload: false
+```
+
+```js
+// app/javascript/application.js — load only when the browser lacks native support
+if (!CSS.supports("anchor-name: --x")) {
+  import("@oddbird/css-anchor-positioning").then(({ default: polyfill }) => polyfill())
+}
+```
+
+Modern browsers fetch nothing extra; the polyfill loads only where it is needed.
+For WAI-ARIA roving keyboard navigation inside `role="menu"` menus (which a CSS
+polyfill cannot provide), see the optional Stimulus controller below.
+
+## Optional `daisy-dropdown` Stimulus controller
+
+The `:popover` dropdown needs **no JavaScript** on modern browsers. For two
+specific cases — a JS positioning fallback on browsers without CSS anchor
+positioning, and roving keyboard navigation over `role="menu"` items — the gem
+ships an **opt-in** Stimulus controller. It deliberately does **not** re-implement
+open/toggle, light-dismiss, or Escape; the native Popover API already handles
+those.
+
+Under Rails with importmap-rails, the gem auto-pins the controller (no manual
+pin). Register it once, lazily:
+
+```js
+// app/javascript/controllers/index.js
+import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+lazyLoadControllersFrom("daisy_ui/controllers", application)
+```
+
+Then opt in per call site:
+
+```ruby
+Dropdown(:popover, :end, stimulus: true) do |dropdown|
+  dropdown.button(:ghost, :sm) { "Actions" }
+  dropdown.menu(:sm, class: "w-52") do |menu|
+    menu.item { a(href: "#", role: "menuitem", tabindex: "-1") { "Edit" } }
+  end
+end
+```
+
+- `stimulus: true` wires the `daisy-dropdown` controller (namespaced to avoid
+  colliding with your own `dropdown` controller).
+- `stimulus: "your-id"` overrides the identifier.
+- The positioning fallback lazily imports `@floating-ui/dom` **only** when CSS
+  anchor positioning is unavailable (Safari < 26, Firefox < 147), so modern
+  browsers fetch nothing. The gem does **not** bundle it — if you enable the
+  controller **and** need to support those browsers, pin it yourself (lazy, so
+  modern browsers still skip it):
+
+  ```ruby
+  # config/importmap.rb
+  pin "@floating-ui/dom", to: "https://ga.jspm.io/npm:@floating-ui/dom@1.7.6/dist/floating-ui.dom.mjs", preload: false
+  ```
+
+  If the pin is missing the menu still opens (native popover) — it just won't be
+  repositioned on those legacy browsers, and the controller logs a console
+  warning. Evergreen-only apps can skip the pin entirely.
+- Enable keyboard navigation with
+  `data: { daisy_dropdown_keyboard_value: true }` on the dropdown. Roving focus
+  targets `role="menuitem"` items, falling back to links/buttons in the menu.
+
+JS-bundler (esbuild/vite/webpack) consumers: import the controller from the
+gem's `app/javascript/daisy_ui/controllers/daisy_dropdown_controller.js` and
+register it manually.
+
+# MCP Server (Claude Code Integration)
+
+This gem includes an MCP (Model Context Protocol) server that provides component information to AI assistants like Claude Code.
+
+## Setup
+
+Add to your Claude Code MCP settings (`~/.claude.json` or project `.claude.json`):
+
+```json
+{
+  "mcpServers": {
+    "daisyui": {
+      "command": "bundle",
+      "args": ["exec", "daisyui-mcp"]
+    }
+  }
+}
+```
+
+## Available Tools
+
+- **list_components** - List all available DaisyUI components
+- **get_component** - Get detailed info about a specific component (modifiers, usage examples)
+- **search_components** - Search components by name or modifier
+
+# Usage
+
+Refer to [the docs](https://daisyui.phlex.fun) to see how to use components. Here's an example:
+
+```rb
+Card :base_100 do |card|
+  figure do
+    img(src:)
+  end
+  card.body do
+    card.title do
+      "Shoes!"
+    end
+    p do
+      "If a dog chews shoes whose shoes does he choose?"
+    end
+    card.actions class: "justify-end" do
+      Button :primary do
+        "Buy Now"
+      end
+    end
+  end
+end
+```
+
+Which produces:
+
+<img width="544" alt="Card example" src="https://github.com/user-attachments/assets/fad06a89-85fa-43cd-8c8f-7ed23b4ad77b">
+
+# Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `bundle exec rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+# Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/mhenrixon/daisyui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/mhenrixon/daisyui/blob/main/CODE_OF_CONDUCT.md).
+
+1. Visit [the docs](https://daisyui.phlex.fun/) to see which components are still not implemented or not yet added to the docs.
+
+2. Implement it.
+
+3. After your PR is merged, [add it to the docs](https://github.com/mhenrixon/daisyui-docs).
+
+4. Celebrate!
+
+# License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+# Code of Conduct
+
+Everyone interacting in the DaisyUI project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/mhenrixon/daisyui/blob/main/CODE_OF_CONDUCT.md).

data/app/javascript/daisy_ui/controllers/daisy_dropdown_controller.js

@@ -0,0 +1,170 @@
+import { Controller } from "@hotwired/stimulus"
+
+// daisy-dropdown — OPT-IN enhancement for the :popover Dropdown variant.
+//
+// The native Popover API already handles open/toggle, light-dismiss (outside
+// click), Escape, and focus return — so this controller deliberately does NOT
+// re-implement any of that. Its only jobs are:
+//
+//   1. A positioning fallback for browsers WITHOUT CSS anchor positioning
+//      (Safari < 26, Firefox < 147). On modern browsers it does nothing and
+//      fetches no extra JavaScript. The fallback lazily imports @floating-ui/dom,
+//      which the HOST app must pin (see README) — if it is missing the menu still
+//      opens (native popover), just unpositioned, and a console warning is logged.
+//   2. Optional roving keyboard navigation over the menu's focusable items
+//      (enable with data-daisy-dropdown-keyboard-value="true").
+//
+// State is driven entirely by the popover's native `toggle` event; there is no
+// internal open flag, no document-level listeners, and no display toggling.
+const OFFSET = 4
+
+// Focusable, interactive menu items. Prefers explicit role="menuitem", but falls
+// back to the links/buttons DaisyUI menus actually render (<li><a>…</a></li>), so
+// keyboard nav works on stock markup without forcing roles onto caller content.
+const ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"]), a[href]:not([aria-disabled="true"]), button:not([disabled])'
+
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+  static values = { keyboard: { type: Boolean, default: false } }
+
+  connect() {
+    this.menuEl = this.hasMenuTarget ? this.menuTarget : this.element.querySelector("[popover]")
+    this.triggerEl = this.hasTriggerTarget ? this.triggerTarget : this.element.querySelector("[popovertarget]")
+    if (!this.menuEl) return
+
+    this.needsJsPositioning = !this.#supportsAnchorPositioning()
+    this.onToggle = (event) => this.#handleToggle(event)
+    this.menuEl.addEventListener("toggle", this.onToggle)
+  }
+
+  disconnect() {
+    this.menuEl?.removeEventListener("toggle", this.onToggle)
+    this.#teardownOpen()
+  }
+
+  #handleToggle(event) {
+    if (event.newState === "open") this.#onOpen()
+    else this.#onClose()
+  }
+
+  async #onOpen() {
+    // The native Popover API does not mirror open state onto the invoker, so
+    // sync aria-expanded ourselves for assistive tech.
+    this.triggerEl?.setAttribute("aria-expanded", "true")
+    if (this.needsJsPositioning) await this.#position()
+    if (this.keyboardValue) this.#bindKeyboard()
+  }
+
+  #onClose() {
+    this.triggerEl?.setAttribute("aria-expanded", "false")
+    this.#teardownOpen()
+    // Do NOT restore focus — the native popover already returns focus to the trigger.
+  }
+
+  #isOpen() {
+    return this.menuEl?.matches(":popover-open") ?? false
+  }
+
+  #teardownOpen() {
+    this.stopAutoUpdate?.()
+    this.stopAutoUpdate = null
+    if (this.keyHandler) {
+      this.menuEl?.removeEventListener("keydown", this.keyHandler)
+      this.keyHandler = null
+    }
+  }
+
+  // --- positioning fallback (only when CSS anchor positioning is unavailable) ---
+
+  async #position() {
+    if (!this.triggerEl) return
+
+    // Lazy + feature-gated, so modern browsers never fetch the positioning lib.
+    // The host app is responsible for pinning @floating-ui/dom; if it is absent
+    // we degrade gracefully (native popover still opens, just unpositioned).
+    let floatingUi
+    try {
+      floatingUi = await import("@floating-ui/dom")
+    } catch (error) {
+      console.warn(
+        "[daisy-dropdown] @floating-ui/dom is not available; the popover will open unpositioned. " +
+          "Pin it in your import map to enable the legacy-browser positioning fallback.",
+        error,
+      )
+      return
+    }
+
+    // A fast open→close during the dynamic import may have already closed us;
+    // bail rather than position (and leak an autoUpdate on) a closed menu.
+    if (!this.#isOpen()) return
+
+    const { computePosition, autoUpdate, flip, shift, offset } = floatingUi
+
+    this.menuEl.style.position = "fixed"
+    this.menuEl.style.margin = "0"
+
+    this.stopAutoUpdate = autoUpdate(this.triggerEl, this.menuEl, () => {
+      computePosition(this.triggerEl, this.menuEl, {
+        placement: this.#placement(),
+        middleware: [offset(OFFSET), flip(), shift({ padding: 8 })],
+      }).then(({ x, y }) => {
+        Object.assign(this.menuEl.style, { left: `${x}px`, top: `${y}px` })
+      })
+    })
+  }
+
+  // Derive Floating UI placement from DaisyUI's dropdown-* classes on the menu.
+  #placement() {
+    const cl = this.menuEl.classList
+    const side = cl.contains("dropdown-top")
+      ? "top"
+      : cl.contains("dropdown-left")
+        ? "left"
+        : cl.contains("dropdown-right")
+          ? "right"
+          : "bottom"
+    const align = cl.contains("dropdown-end") ? "-end" : cl.contains("dropdown-center") ? "" : "-start"
+    return (side === "left" || side === "right") ? side : `${side}${align}`
+  }
+
+  // --- optional roving keyboard navigation ---
+
+  #bindKeyboard() {
+    this.keyHandler = (event) => this.#onKeydown(event)
+    this.menuEl.addEventListener("keydown", this.keyHandler)
+    this.#items()[0]?.focus()
+  }
+
+  #onKeydown(event) {
+    const items = this.#items()
+    if (items.length === 0) return
+    const index = items.indexOf(document.activeElement)
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        items[(index + 1 + items.length) % items.length].focus()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        items[(index - 1 + items.length) % items.length].focus()
+        break
+      case "Home":
+        event.preventDefault()
+        items[0].focus()
+        break
+      case "End":
+        event.preventDefault()
+        items[items.length - 1].focus()
+        break
+    }
+  }
+
+  #items() {
+    return Array.from(this.menuEl.querySelectorAll(ITEM_SELECTOR))
+  }
+
+  #supportsAnchorPositioning() {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --x")
+  }
+}

data/config/importmap.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Auto-pins the gem's bundled Stimulus controllers for importmap-rails consumers.
+# Exposes `daisy_ui/controllers/daisy_dropdown_controller`. Register it in the
+# host app (lazily recommended):
+#
+#   // app/javascript/controllers/index.js
+#   import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+#   lazyLoadControllersFrom("daisy_ui/controllers", application)
+pin_all_from DaisyUI::Engine.root.join("app/javascript/daisy_ui/controllers"),
+  under: "daisy_ui/controllers",
+  to: "daisy_ui/controllers"

data/lib/daisy_ui/accordion.rb

@@ -14,8 +14,8 @@ module DaisyUI
     def view_template(&block)
       public_send(as, class: classes, **attributes) do
         input(type: :radio, name:, checked:)
-        div(class: build_title_classes, &title_block) if title_block
-        div(class: "collapse-content", &block) if block
+        div(class: component_classes("collapse-title", options: title_options || {}), &title_block) if title_block
+        div(class: component_classes("collapse-content", options: {}), &block) if block
       end
     end
 
@@ -28,28 +28,34 @@ module DaisyUI
 
     attr_reader :name, :checked, :title_block, :title_options
 
-    def build_title_classes
-      classes = ["collapse-title"]
-      classes << title_options.delete(:class) if title_options&.dig(:class)
-      classes.compact.join(" ")
-    end
-
     register_modifiers(
       # "sm:collapse-arrow"
+      # "@sm:collapse-arrow"
       # "md:collapse-arrow"
+      # "@md:collapse-arrow"
       # "lg:collapse-arrow"
+      # "@lg:collapse-arrow"
       arrow: "collapse-arrow",
       # "sm:collapse-plus"
+      # "@sm:collapse-plus"
       # "md:collapse-plus"
+      # "@md:collapse-plus"
       # "lg:collapse-plus"
+      # "@lg:collapse-plus"
       plus: "collapse-plus",
       # "sm:collapse-open"
+      # "@sm:collapse-open"
       # "md:collapse-open"
+      # "@md:collapse-open"
       # "lg:collapse-open"
+      # "@lg:collapse-open"
       open: "collapse-open",
       # "sm:collapse-close"
+      # "@sm:collapse-close"
       # "md:collapse-close"
+      # "@md:collapse-close"
       # "lg:collapse-close"
+      # "@lg:collapse-close"
       close: "collapse-close"
     )
   end