senren-ui 0.1.0

data/templates/components/team_member_list/team_member_list_component.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] shadow-sm")) do %>
+  <% if content? && members.empty? %>
+    <div class="p-4"><%= content %></div>
+  <% else %>
+    <ul class="divide-y divide-[hsl(var(--senren-border))]">
+      <% members.each do |member| %>
+        <li class="flex items-center justify-between gap-4 p-4">
+          <div class="flex min-w-0 items-center gap-3">
+            <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--senren-muted))] text-sm font-semibold text-[hsl(var(--senren-muted-foreground))]"><%= initials_for(member) %></span>
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= member_value(member, :name) %></p>
+              <p class="truncate text-xs text-[hsl(var(--senren-muted-foreground))]"><%= member_value(member, :role) || member_value(member, :email) %></p>
+            </div>
+          </div>
+          <% if member_value(member, :status).present? %>
+            <span class="rounded-full bg-[hsl(var(--senren-muted))] px-2 py-1 text-xs font-medium text-[hsl(var(--senren-muted-foreground))]"><%= member_value(member, :status) %></span>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/templates/components/team_member_list/team_member_list_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Senren
+  class TeamMemberListComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(members: [], class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @members = Array(members)
+    end
+
+    attr_reader :members
+
+    def member_value(member, key)
+      member.is_a?(Hash) ? (member[key] || member[key.to_s]) : nil
+    end
+
+    def initials_for(member)
+      explicit = member_value(member, :initials)
+      return explicit if explicit.present?
+
+      member_value(member, :name).to_s.split.map { |part| part[0] }.join.first(2).upcase
+    end
+  end
+end

data/templates/components/textarea/textarea_component.html.erb

@@ -0,0 +1 @@
+<%= tag.textarea(value, **root_attrs("flex w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", id: id, name: name, placeholder: placeholder, rows: rows, "aria-invalid": variant == :error)) %>

data/templates/components/textarea/textarea_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Senren
+  class TextareaComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-input))] focus-visible:ring-[hsl(var(--senren-ring))]',
+      error: 'border-[hsl(var(--senren-destructive))] focus-visible:ring-[hsl(var(--senren-destructive))]'
+    }.freeze
+
+    SIZES = { md: 'min-h-[80px] text-sm px-3 py-2' }.freeze
+
+    def initialize(name:, value: nil, placeholder: nil, id: nil, rows: 4, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @id = id || name.to_s.parameterize
+      @rows = rows
+    end
+
+    attr_reader :name, :value, :placeholder, :id, :rows
+  end
+end

data/templates/components/theme_toggle/theme_toggle_component.html.erb

@@ -0,0 +1,4 @@
+<button type="button" <%= tag.attributes(**root_attrs("inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))] px-3 text-sm font-medium text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]", data: { controller: "senren--theme-toggle", action: "click->senren--theme-toggle#toggle" }, aria: { label: label, pressed: "false" })) %>>
+  <span aria-hidden="true" data-senren--theme-toggle-target="icon">O</span>
+  <span data-senren--theme-toggle-target="label"><%= label %></span>
+</button>

data/templates/components/theme_toggle/theme_toggle_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Senren
+  class ThemeToggleComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(label: 'Toggle theme', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @label = label
+    end
+
+    attr_reader :label
+  end
+end

data/templates/components/tooltip/tooltip_component.html.erb

@@ -0,0 +1,9 @@
+<span data-controller="senren--tooltip" class="relative inline-block" data-senren-component="tooltip">
+  <span tabindex="0"
+        aria-describedby="<%= id %>"
+        data-action="mouseenter->senren--tooltip#show mouseleave->senren--tooltip#hide focus->senren--tooltip#show blur->senren--tooltip#hide">
+    <%= content %>
+  </span>
+  <span id="<%= id %>" role="tooltip" hidden data-senren--tooltip-target="bubble"
+        class="absolute z-50 mt-1 whitespace-nowrap rounded-md bg-[hsl(var(--senren-foreground))] text-[hsl(var(--senren-background))] px-2 py-1 text-xs shadow"><%= text %></span>
+</span>

data/templates/components/tooltip/tooltip_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Senren
+  class TooltipComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(text:, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @text = text
+      @id = "senren-tooltip-#{SecureRandom.hex(3)}"
+    end
+
+    attr_reader :text, :id
+  end
+end

data/templates/components/top_nav/top_nav_component.html.erb

@@ -0,0 +1,21 @@
+<header <%= tag.attributes(**root_attrs("sticky top-0 z-30 border-b border-[hsl(var(--senren-border))] backdrop-blur-md")) %>>
+  <div class="mx-auto flex h-14 w-full max-w-[1400px] items-center gap-6 px-4 lg:px-8">
+    <div class="min-w-0 flex-none font-display text-sm font-semibold text-[hsl(var(--senren-foreground))]">
+      <% if brand? %><%= brand %><% else %>Senren<% end %>
+    </div>
+
+    <% if items.any? %>
+      <nav aria-label="<%= label %>" class="hidden min-w-0 items-center gap-1 md:flex">
+        <% items.each do |item| %>
+          <%= link_to item[:label], item[:href], class: "rounded-(--senren-radius) px-3 py-2 text-sm font-medium transition-colors #{active_item?(item) ? 'bg-[hsl(var(--senren-accent))] text-[hsl(var(--senren-accent-foreground))]' : 'text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]'}" %>
+        <% end %>
+      </nav>
+    <% elsif content? %>
+      <div class="min-w-0 flex-1"><%= content %></div>
+    <% end %>
+
+    <% if actions? %>
+      <div class="ml-auto flex items-center gap-2"><%= actions %></div>
+    <% end %>
+  </div>
+</header>

data/templates/components/top_nav/top_nav_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Senren
+  class TopNavComponent < BaseComponent
+    renders_one :brand
+    renders_one :actions
+
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-background))/0.88]',
+      solid: 'bg-[hsl(var(--senren-card))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], current_path: nil, label: 'Global', variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = normalize_items(items)
+      @current_path = current_path
+      @label = label
+    end
+
+    attr_reader :items, :current_path, :label
+
+    def active_item?(item)
+      item[:active] || (current_path && item[:href] == current_path)
+    end
+
+    private
+
+    def normalize_items(items)
+      Array(items).map do |item|
+        if item.is_a?(Hash)
+          {
+            label: item[:label] || item['label'],
+            href: item[:href] || item['href'] || '#',
+            active: item[:active] || item['active']
+          }
+        else
+          label, href = item
+          { label: label, href: href || '#', active: false }
+        end
+      end
+    end
+  end
+end

data/templates/components/typography/typography_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag(html_tag, content, **root_attrs("")) %>

data/templates/components/typography/typography_component.rb

@@ -0,0 +1,24 @@
+module Senren
+  class TypographyComponent < BaseComponent
+    VARIANTS = {
+      h1: 'scroll-m-20 text-4xl font-bold tracking-tight',
+      h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
+      h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+      h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+      p: 'leading-7',
+      lead: 'text-xl text-[hsl(var(--senren-muted-foreground))]',
+      large: 'text-lg font-semibold',
+      small: 'text-sm font-medium leading-none',
+      muted: 'text-sm text-[hsl(var(--senren-muted-foreground))]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    TAG_FOR = {
+      h1: :h1, h2: :h2, h3: :h3, h4: :h4,
+      p: :p, lead: :p, large: :p, small: :small, muted: :p
+    }.freeze
+
+    def html_tag = TAG_FOR[variant]
+  end
+end

data/templates/controllers/accordion_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--accordion
+// Local UI: expand/collapse one or multiple panels.
+export default class extends Controller {
+  static targets = ["trigger", "panel"]
+  static values = { multiple: Boolean }
+
+  toggle(event) {
+    const trigger = event.currentTarget
+    const panel = this._panelFor(trigger.dataset.panelId)
+    const nextOpen = trigger.getAttribute("aria-expanded") !== "true"
+
+    if (!this.multipleValue) this._closeAll()
+    trigger.setAttribute("aria-expanded", nextOpen ? "true" : "false")
+    if (panel) panel.hidden = !nextOpen
+  }
+
+  _closeAll() {
+    this.triggerTargets.forEach((trigger) => trigger.setAttribute("aria-expanded", "false"))
+    this.panelTargets.forEach((panel) => { panel.hidden = true })
+  }
+
+  _panelFor(id) {
+    return this.panelTargets.find((panel) => panel.dataset.panelId === id)
+  }
+}

data/templates/controllers/alert_dialog_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--alert-dialog
+// Same shape as dialog, but role=alertdialog. Triggered by external buttons that include
+// data-action="click->senren--alert-dialog#open" pointing at the controller scope.
+export default class extends Controller {
+  static targets = ["overlay", "panel", "trigger"]
+
+  connect() {
+    this._onKey = this._onKey.bind(this)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this._onKey)
+    document.body.style.overflow = ""
+  }
+
+  open(event) {
+    event?.preventDefault()
+    this.overlayTarget.hidden = false
+    this.panelTarget.hidden = false
+    document.addEventListener("keydown", this._onKey)
+    document.body.style.overflow = "hidden"
+    queueMicrotask(() => this.panelTarget?.focus())
+  }
+
+  close(event) {
+    event?.preventDefault()
+    this.overlayTarget.hidden = true
+    this.panelTarget.hidden = true
+    document.removeEventListener("keydown", this._onKey)
+    document.body.style.overflow = ""
+  }
+
+  _onKey(event) {
+    if (event.key === "Escape") this.close()
+  }
+}

data/templates/controllers/api_key_field_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--api-key-field
+export default class extends Controller {
+  static targets = ["input", "revealButton", "status"]
+  static values = {
+    revealLabel: String,
+    hideLabel: String,
+    copyLabel: String
+  }
+
+  connect() {
+    this.hidden = true
+  }
+
+  toggle() {
+    this.hidden = !this.hidden
+    this.inputTarget.type = this.hidden ? "password" : "text"
+    this.revealButtonTarget.textContent = this.hidden ? this.revealLabelValue : this.hideLabelValue
+  }
+
+  async copy() {
+    const value = this.inputTarget.value
+    if (!value) return
+
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(value)
+    } else {
+      this.inputTarget.select()
+      try { document.execCommand("copy") } catch (_) {}
+      this.inputTarget.setSelectionRange(0, 0)
+    }
+
+    if (this.hasStatusTarget) this.statusTarget.textContent = `${this.copyLabelValue} complete`
+  }
+}

data/templates/controllers/calendar_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--calendar
+// Local UI: select a visible day and update the optional hidden field.
+export default class extends Controller {
+  static targets = ["day", "value"]
+
+  select(event) {
+    const day = event.currentTarget
+    this.dayTargets.forEach((target) => {
+      target.classList.remove("bg-[hsl(var(--senren-primary))]", "text-[hsl(var(--senren-primary-foreground))]")
+    })
+    day.classList.add("bg-[hsl(var(--senren-primary))]", "text-[hsl(var(--senren-primary-foreground))]")
+    if (this.hasValueTarget) this.valueTarget.value = day.dataset.date
+  }
+}

data/templates/controllers/carousel_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--carousel
+// Local UI: previous/next controls, dots, and arrow-key navigation.
+export default class extends Controller {
+  static targets = ["slide", "dot", "status"]
+
+  connect() {
+    this.index = 0
+    this.show(0)
+  }
+
+  previous() {
+    this.show(this.index - 1)
+  }
+
+  next() {
+    this.show(this.index + 1)
+  }
+
+  goTo(event) {
+    this.show(Number(event.currentTarget.dataset.index || 0))
+  }
+
+  onKey(event) {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      this.previous()
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault()
+      this.next()
+    }
+  }
+
+  show(index) {
+    const count = this.slideTargets.length
+    if (count === 0) return
+
+    this.index = (index + count) % count
+    this.slideTargets.forEach((slide, slideIndex) => {
+      slide.hidden = slideIndex !== this.index
+      slide.classList.toggle("hidden", slideIndex !== this.index)
+    })
+    this.dotTargets.forEach((dot, dotIndex) => {
+      dot.setAttribute("aria-current", dotIndex === this.index ? "true" : "false")
+    })
+    if (this.hasStatusTarget) this.statusTarget.textContent = `Slide ${this.index + 1} of ${count}`
+  }
+}

data/templates/controllers/clipboard_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--clipboard
+// Local UI: copy text to the clipboard and announce success.
+export default class extends Controller {
+  static targets = ["source", "button", "status"]
+  static values = { copiedLabel: String }
+
+  async copy() {
+    const value = this.sourceTarget.value || this.sourceTarget.textContent
+    await navigator.clipboard.writeText(value)
+    const original = this.buttonTarget.textContent
+    this.buttonTarget.textContent = this.copiedLabelValue || "Copied"
+    if (this.hasStatusTarget) this.statusTarget.textContent = "Copied to clipboard"
+    window.setTimeout(() => { this.buttonTarget.textContent = original }, 1200)
+  }
+}

data/templates/controllers/collapsible_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--collapsible
+// Local UI: toggle one content panel.
+export default class extends Controller {
+  static targets = ["trigger", "panel"]
+
+  toggle() {
+    const nextOpen = this.triggerTarget.getAttribute("aria-expanded") !== "true"
+    this.triggerTarget.setAttribute("aria-expanded", nextOpen ? "true" : "false")
+    this.panelTarget.hidden = !nextOpen
+  }
+}

data/templates/controllers/combobox_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--combobox
+// Local UI: open, filter options, and write the selected value to a hidden input.
+export default class extends Controller {
+  static targets = ["button", "panel", "search", "option", "value", "label", "chevron"]
+
+  connect() {
+    this._onDocClick = this._onDocClick.bind(this)
+    this.setOpenState(false)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._onDocClick)
+  }
+
+  toggle() {
+    this.panelTarget.hidden ? this.open() : this.close()
+  }
+
+  open() {
+    this.setOpenState(true)
+    document.addEventListener("click", this._onDocClick)
+    queueMicrotask(() => this.searchTarget.focus())
+  }
+
+  close() {
+    this.setOpenState(false)
+    document.removeEventListener("click", this._onDocClick)
+  }
+
+  filter() {
+    const query = this.searchTarget.value.toLowerCase()
+    this.optionTargets.forEach((option) => {
+      option.hidden = !option.dataset.label.toLowerCase().includes(query)
+    })
+  }
+
+  choose(event) {
+    const option = event.currentTarget
+    this.valueTarget.value = option.dataset.value
+    this.labelTarget.textContent = option.dataset.label
+    this.close()
+    this.buttonTarget.focus()
+  }
+
+  onKey(event) {
+    if (event.key === "Escape") {
+      this.close()
+      this.buttonTarget.focus()
+    }
+  }
+
+  setOpenState(open) {
+    this.panelTarget.hidden = !open
+    this.buttonTarget.setAttribute("aria-expanded", open ? "true" : "false")
+    this.buttonTarget.dataset.state = open ? "open" : "closed"
+    if (this.hasChevronTarget) this.chevronTarget.dataset.state = open ? "open" : "closed"
+  }
+
+  _onDocClick(event) {
+    if (!this.element.contains(event.target)) this.close()
+  }
+}

data/templates/controllers/command_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--command
+// Local UI: filter command options and support keyboard navigation.
+export default class extends Controller {
+  static targets = ["input", "list", "option", "empty"]
+
+  connect() {
+    this.activeIndex = 0
+    this.filter()
+  }
+
+  filter() {
+    const query = this.normalize(this.inputTarget.value)
+    this.optionTargets.forEach((option) => {
+      const label = this.normalize(option.dataset.label || option.textContent)
+      option.hidden = query.length > 0 && !query.split(/\s+/).every((part) => label.includes(part))
+    })
+    this.activeIndex = 0
+    this.updateActive()
+  }
+
+  onKey(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.move(1)
+      return
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.move(-1)
+      return
+    }
+
+    if (event.key === "Enter") {
+      const option = this.visibleOptions[this.activeIndex]
+      if (option) {
+        event.preventDefault()
+        option.click()
+      }
+    }
+  }
+
+  choose(event) {
+    this.element.dispatchEvent(new CustomEvent("senren:command-select", {
+      bubbles: true,
+      detail: { label: event.currentTarget.textContent.trim(), href: event.currentTarget.getAttribute("href") }
+    }))
+  }
+
+  move(delta) {
+    const options = this.visibleOptions
+    if (options.length === 0) return
+    this.activeIndex = (this.activeIndex + delta + options.length) % options.length
+    this.updateActive()
+  }
+
+  updateActive() {
+    const options = this.visibleOptions
+    this.emptyTarget.hidden = options.length > 0
+    this.optionTargets.forEach((option) => option.setAttribute("aria-selected", "false"))
+    const active = options[this.activeIndex]
+    if (!active) {
+      this.inputTarget.removeAttribute("aria-activedescendant")
+      return
+    }
+    active.setAttribute("aria-selected", "true")
+    this.inputTarget.setAttribute("aria-activedescendant", active.id)
+    active.scrollIntoView({ block: "nearest" })
+  }
+
+  normalize(value) {
+    return String(value || "").toLowerCase().replace(/[_-]+/g, " ").trim()
+  }
+
+  get visibleOptions() {
+    return this.optionTargets.filter((option) => !option.hidden)
+  }
+}

data/templates/controllers/context_menu_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--context-menu
+// Opens on right-click within the trigger; closes on outside click or Escape.
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  connect() {
+    this._onDocClick = this._onDocClick.bind(this)
+    this._onKey = this._onKey.bind(this)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._onDocClick)
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  open(event) {
+    event.preventDefault()
+    const rect = this.element.getBoundingClientRect()
+    this.menuTarget.style.top = (event.clientY - rect.top) + "px"
+    this.menuTarget.style.left = (event.clientX - rect.left) + "px"
+    this.menuTarget.hidden = false
+    document.addEventListener("click", this._onDocClick)
+    document.addEventListener("keydown", this._onKey)
+  }
+
+  close() {
+    this.menuTarget.hidden = true
+    document.removeEventListener("click", this._onDocClick)
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  _onDocClick(event) { if (!this.menuTarget.contains(event.target)) this.close() }
+  _onKey(event)      { if (event.key === "Escape") this.close() }
+}

data/templates/controllers/data_table_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--data-table
+export default class extends Controller {
+  static targets = ["body", "row"]
+
+  connect() {
+    this.directions = {}
+  }
+
+  sort(event) {
+    const key = event.currentTarget.dataset.sortKey
+    if (!key || !this.hasBodyTarget) return
+
+    const direction = this.directions[key] === "asc" ? "desc" : "asc"
+    this.directions[key] = direction
+
+    const rows = [...this.rowTargets]
+    rows.sort((a, b) => this.compare(this.valueFor(a, key), this.valueFor(b, key), direction))
+    rows.forEach((row) => this.bodyTarget.appendChild(row))
+  }
+
+  valueFor(row, key) {
+    const cell = row.querySelector(`[data-sort-key="${CSS.escape(key)}"]`)
+    return (cell?.dataset.sortValue || cell?.textContent || "").trim().toLowerCase()
+  }
+
+  compare(a, b, direction) {
+    const left = Number(a)
+    const right = Number(b)
+    const result = Number.isNaN(left) || Number.isNaN(right) ? a.localeCompare(b) : left - right
+    return direction === "asc" ? result : -result
+  }
+}

data/templates/controllers/date_picker_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--date-picker
+// Local UI: small helpers around native date input.
+export default class extends Controller {
+  static targets = ["input"]
+
+  today() {
+    this.inputTarget.value = new Date().toISOString().slice(0, 10)
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  clear() {
+    this.inputTarget.value = ""
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+}