daisyui 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5ead48d09f8c0ebcf05fedf37984540e379230cc2fad544c021867d76f0c111
-  data.tar.gz: 1ae9c6477704ded3ce4d51276f8c842873f3890e19674536dc5fa46e6cb9183b
+  metadata.gz: d82c1b4f52e8a5b62fb723e83557c1def70805b24c855aced7381c8c2f80dc0e
+  data.tar.gz: 831d1acb486a33fb1b779643d273a58925a921a456d20be7374cf4a5ed6c3cf4
 SHA512:
-  metadata.gz: 47b1925d05bbf36c2b02290e80db281689ae94080a4c93392ba9ed764a1d84beb7804cd2dd2536e06da3ed71aebfe255bed64bf6feef2a6aa78bbbddc239f342
-  data.tar.gz: ffaf573ed0338c6c92ea6f57c44490081a218920e457ac7658f785d0c933958de950acfbbcb16ad87e179725da4c16fa60deec56660d6fd92424849a3c60f2f9
+  metadata.gz: 061d1ff9eb34a488db5ab1aff21491e9c4f8b39912c7749637e3941d9738edd5cbef993b5d52bd6e55620f4b6f4207f9ad7285df0f672507c3552f16be775d1a
+  data.tar.gz: 598db62e9eefc346e30b1d42d449bc49c54c6a80c5d917c21360fb1511ea0ed17380a2c9b2be8b4f1edd647d4281b5b134e18995be66ff1d884de17428a9d127

data/CHANGELOG.md

@@ -1,5 +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/README.md

@@ -152,6 +152,102 @@ plugins: [
 ],
 ```
 
+## 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.

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

data/lib/daisy_ui/aura.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Aura < Base
+    self.component_class = :aura
+
+    def view_template(&)
+      public_send(as, class: classes, **attributes, &)
+    end
+
+    register_modifiers(
+      # Styles
+      # "sm:aura-dual"
+      # "@sm:aura-dual"
+      # "md:aura-dual"
+      # "@md:aura-dual"
+      # "lg:aura-dual"
+      # "@lg:aura-dual"
+      dual: "aura-dual",
+      # "sm:aura-rainbow"
+      # "@sm:aura-rainbow"
+      # "md:aura-rainbow"
+      # "@md:aura-rainbow"
+      # "lg:aura-rainbow"
+      # "@lg:aura-rainbow"
+      rainbow: "aura-rainbow",
+      # "sm:aura-holo"
+      # "@sm:aura-holo"
+      # "md:aura-holo"
+      # "@md:aura-holo"
+      # "lg:aura-holo"
+      # "@lg:aura-holo"
+      holo: "aura-holo",
+      # "sm:aura-gold"
+      # "@sm:aura-gold"
+      # "md:aura-gold"
+      # "@md:aura-gold"
+      # "lg:aura-gold"
+      # "@lg:aura-gold"
+      gold: "aura-gold",
+      # "sm:aura-silver"
+      # "@sm:aura-silver"
+      # "md:aura-silver"
+      # "@md:aura-silver"
+      # "lg:aura-silver"
+      # "@lg:aura-silver"
+      silver: "aura-silver",
+      # "sm:aura-glow"
+      # "@sm:aura-glow"
+      # "md:aura-glow"
+      # "@md:aura-glow"
+      # "lg:aura-glow"
+      # "@lg:aura-glow"
+      glow: "aura-glow",
+      # Sizes
+      # "sm:aura-xs"
+      # "@sm:aura-xs"
+      # "md:aura-xs"
+      # "@md:aura-xs"
+      # "lg:aura-xs"
+      # "@lg:aura-xs"
+      xs: "aura-xs",
+      # "sm:aura-sm"
+      # "@sm:aura-sm"
+      # "md:aura-sm"
+      # "@md:aura-sm"
+      # "lg:aura-sm"
+      # "@lg:aura-sm"
+      sm: "aura-sm",
+      # "sm:aura-md"
+      # "@sm:aura-md"
+      # "md:aura-md"
+      # "@md:aura-md"
+      # "lg:aura-md"
+      # "@lg:aura-md"
+      md: "aura-md",
+      # "sm:aura-lg"
+      # "@sm:aura-lg"
+      # "md:aura-lg"
+      # "@md:aura-lg"
+      # "lg:aura-lg"
+      # "@lg:aura-lg"
+      lg: "aura-lg",
+      # "sm:aura-xl"
+      # "@sm:aura-xl"
+      # "md:aura-xl"
+      # "@md:aura-xl"
+      # "lg:aura-xl"
+      # "@lg:aura-xl"
+      xl: "aura-xl"
+    )
+  end
+end

data/lib/daisy_ui/base.rb

@@ -224,7 +224,7 @@ module DaisyUI
             base_class_value = self.class.component_class
             next unless base_class_value
 
-            "#{breakpoint}:#{apply_prefix(base_class_value)}"
+            "#{breakpoint}:#{apply_prefix(base_class_value.to_s)}"
           else
             # Get the modifier classes (may be multiple like "bg-primary text-primary-content")
             modifier_classes = modifier_map[mod]

data/lib/daisy_ui/breadcrumbs.rb

@@ -11,7 +11,7 @@ module DaisyUI
     end
 
     def crumb(href: nil, **options, &block)
-      li(class: component_classes(options: options), **options) do
+      li(class: component_classes(options:), **options) do
         if href
           a(href: href, &block)
         else

data/lib/daisy_ui/button.rb

@@ -31,7 +31,12 @@ module DaisyUI
 
     register_modifiers(
       # Styles
-      # "sm:btn-ghost" "md:btn-ghost" "lg:btn-ghost"
+      # "sm:btn-ghost"
+      # "@sm:btn-ghost"
+      # "md:btn-ghost"
+      # "@md:btn-ghost"
+      # "lg:btn-ghost"
+      # "@lg:btn-ghost"
       ghost: "btn-ghost",
       # "sm:btn-link"
       # "@sm:btn-link"

data/lib/daisy_ui/carousel.rb

@@ -28,12 +28,12 @@ module DaisyUI
       # "lg:carousel-center"
       # "@lg:carousel-center"
       center: "carousel-center",
-        # "sm:carousel-end"
-        # "@sm:carousel-end"
-        # "md:carousel-end"
-        # "@md:carousel-end"
-        # "lg:carousel-end"
-        # "@lg:carousel-end"
+      # "sm:carousel-end"
+      # "@sm:carousel-end"
+      # "md:carousel-end"
+      # "@md:carousel-end"
+      # "lg:carousel-end"
+      # "@lg:carousel-end"
       end: "carousel-end",
       # "sm:carousel-vertical"
       # "@sm:carousel-vertical"

data/lib/daisy_ui/chat.rb

@@ -107,12 +107,8 @@ module DaisyUI
     private
 
     def build_bubble_classes(modifiers, options)
-      classes = ["chat-bubble"]
-      modifiers.each do |mod|
-        classes << BUBBLE_MODIFIERS[mod] if BUBBLE_MODIFIERS.key?(mod)
-      end
-      classes << options.delete(:class) if options[:class]
-      classes.compact.join(" ")
+      modifier_classes = modifiers.filter_map { |mod| apply_prefix(BUBBLE_MODIFIERS[mod]) }
+      merge_classes(apply_prefix("chat-bubble"), *modifier_classes, options.delete(:class))
     end
   end
 end

data/lib/daisy_ui/collapsible_sub_menu.rb

@@ -7,7 +7,7 @@ module DaisyUI
 
     def initialize(*, **)
       super
-      @items ||= []
+      @items = []
     end
 
     def view_template(&block)