velvetkit 0.1.0.beta

data/lib/velvetkit/reference.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Velvetkit
+  # What it takes to use one component: what it is, how to add it, its
+  # arguments and slots, its notes and working examples.
+  #
+  # Read from the registry, so it can't drift from what `add` copies, and
+  # written in the app's namespace, so an AI agent reading it writes
+  # `Kit::Button` in an app that has Kit::Button. The docs site renders it as
+  # HTML; `velvetkit:ai` and llms.txt hand it to agents as Markdown.
+  class Reference
+    Example = Data.define(:key, :title, :source)
+
+    attr_reader :name, :namespace
+
+    def initialize(name, namespace: Namespace.new(Namespace::CANONICAL), registry: Velvetkit.registry)
+      @name = name
+      @namespace = namespace
+      @registry = registry
+    end
+
+    def title = name.humanize
+    def description = registry.description(name)
+    def add_command = "bin/rails generate velvetkit:add #{name}"
+
+    def class_name
+      constant = "#{namespace.name}::#{name.camelize}"
+      File.exist?(source_path) ? constant : "#{constant}::*"
+    end
+
+    # Other components `add` brings along.
+    def dependencies
+      registry.resolve([ name ]) - [ "base", name ]
+    end
+
+    def stimulus_controllers
+      registry.stimulus_controllers(name).map do |file|
+        "#{namespace.dom}--#{File.basename(file, "_controller.ts").dasherize}"
+      end
+    end
+
+    def packages = registry.packages(name) - [ "@hotwired/stimulus" ]
+    def gems = registry.gems(name).keys
+
+    # The comment above the class, where a component explains itself.
+    def notes
+      return unless File.exist?(source_path)
+
+      lines = File.readlines(source_path).drop_while { |line| !line.start_with?("#") || line.include?("frozen_string_literal") }
+      comment = lines.take_while { |line| line.start_with?("#") }.map { |line| line.delete_prefix("#").delete_prefix(" ") }
+      namespace.rewrite(comment.join).strip.presence
+    end
+
+    def signature
+      return unless File.exist?(source_path)
+
+      args = File.read(source_path)[/^  def initialize\((.*?)\)\n/m, 1]&.squish
+      args && "#{class_name}.new(#{args})"
+    end
+
+    def slots
+      files = Dir[File.join(registry.root, Registry::COMPONENTS, "#{name}{.rb,/**/*.rb}")]
+      files.flat_map do |file|
+        source = File.read(file)
+        declared = source.scan(/^\s*renders_(one|many) :(\w+)/).map { |kind, slot| "with_#{kind == "many" ? slot.singularize : slot}" }
+        declared + source.scan(/^\s*(?:alias_method :|def )(with_\w+)/).flatten
+      end.uniq
+    end
+
+    # Preview templates, in the order the preview class lists them.
+    # Playgrounds take Lookbook params, so they only work inside Lookbook.
+    def examples
+      labels = preview_labels
+      Dir[File.join(previews_root, "#{name}_preview", "[^_]*.html.erb")]
+        .map { |file| File.basename(file, ".html.erb") }
+        .reject { |key| key == "playground" }
+        .sort_by { |key| labels.keys.index(key) || labels.size }
+        .map { |key| Example.new(key, labels.fetch(key, key.humanize), namespace.rewrite(File.read(File.join(previews_root, "#{name}_preview", "#{key}.html.erb")))) }
+    end
+
+    def to_markdown
+      parts = [ "## #{title} (`#{class_name}`)", description ]
+      parts << "Add it: `#{add_command}`"
+      parts << "Also adds: #{dependencies.map { |d| "`#{d}`" }.join(", ")}" if dependencies.any?
+      parts << "Stimulus: #{stimulus_controllers.map { |c| "`#{c}`" }.join(", ")}" if stimulus_controllers.any?
+      parts << "Installs: #{(packages + gems).map { |p| "`#{p}`" }.join(", ")}" if (packages + gems).any?
+      parts << "### Arguments\n\n```ruby\n#{signature}\n```" if signature
+      parts << "Slots: #{slots.map { |s| "`#{s}`" }.join(", ")}" if slots.any?
+      parts << "### Notes\n\n#{notes}" if notes
+      examples.each { |example| parts << "### Example: #{example.title}\n\n```erb\n#{example.source.strip}\n```" }
+      parts.join("\n\n") + "\n"
+    end
+
+    private
+
+    attr_reader :registry
+
+    def source_path = File.join(registry.root, Registry::COMPONENTS, "#{name}.rb")
+    def previews_root = File.join(registry.root, Registry::PREVIEWS)
+
+    def preview_labels
+      preview = File.join(previews_root, "#{name}_preview.rb")
+      return {} unless File.exist?(preview)
+
+      File.read(preview).scan(/# @label (.+)\n(?:\s*#.*\n)*\s*def (\w+)/).to_h { |label, method| [ method, label.strip ] }
+    end
+  end
+end

data/lib/velvetkit/registry.rb

@@ -0,0 +1,162 @@
+# frozen_string_literal: true
+
+require "yaml"
+require "active_support/core_ext/string/inflections"
+
+module Velvetkit
+  # The components the gem can copy into an app, and everything each one needs.
+  #
+  # Paths are relative to the registry root and written against the canonical
+  # `UI` namespace; Velvetkit::Namespace rewrites them on the way out.
+  class Registry
+    COMPONENTS = "app/components/ui"
+    CONTROLLERS = "app/javascript/controllers/ui"
+    TESTS = "test/components/ui"
+    PREVIEWS = "test/components/previews/ui"
+
+    # Installed by `velvetkit:install` rather than `velvetkit:add`.
+    FOUNDATION = %w[
+      config/locales/velvetkit.en.yml
+      app/assets/tailwind/velvetkit.css
+      app/javascript/velvetkit_icons.ts
+    ].freeze
+    FOUNDATION_PACKAGES = %w[@hotwired/stimulus lucide tw-animate-css].freeze
+
+    attr_reader :root
+
+    def initialize(root)
+      @root = root
+      @catalog = YAML.load_file(File.join(root, "components.yml"))
+    end
+
+    def names
+      @catalog.fetch("components").keys
+    end
+
+    def description(name)
+      fetch(name).fetch("description")
+    end
+
+    def package_version(package)
+      @catalog.fetch("packages").fetch(package) do
+        raise Error, "#{package} is imported but has no version in components.yml"
+      end
+    end
+
+    # The requested components plus every component they render, base first.
+    def resolve(requested)
+      requested.each { |name| fetch(name) }
+
+      resolved = []
+      visiting = Set.new
+      visit = lambda do |name|
+        # A component already placed, or one whose dependencies are being
+        # walked right now: two components may render each other.
+        next if resolved.include?(name) || !visiting.add?(name)
+
+        dependencies(name).each(&visit)
+        resolved << name
+      end
+      ([ "base" ] + requested).each(&visit)
+      resolved
+    end
+
+    def dependencies(name)
+      sources = component_files(name) + test_files(name)
+      (references(sources) - [ name ]).sort
+    end
+
+    # Ruby, templates and any extra files listed in the catalog.
+    def component_files(name)
+      files = glob("#{COMPONENTS}/#{name}.*", "#{COMPONENTS}/#{name}/**/*")
+      files + fetch(name).fetch("files", [])
+    end
+
+    def test_files(name)
+      glob("#{TESTS}/#{name}_test.rb", "#{TESTS}/#{name}/**/*")
+    end
+
+    def preview_files(name)
+      glob("#{PREVIEWS}/#{name}_preview.rb", "#{PREVIEWS}/#{name}_preview/**/*")
+    end
+
+    # Components a preview renders that are not in `installed`. A preview with
+    # any is skipped rather than shipped broken.
+    def preview_requires(name, installed)
+      references(preview_files(name)) - installed - [ name ]
+    end
+
+    # Stimulus controllers, their shared helpers and lazily-loaded entry points.
+    def javascript_files(name)
+      sources = component_files(name)
+      controllers = scan(sources, /\bui--([a-z]+(?:-[a-z]+)*)/).filter_map { |id| controller_for(id) }
+      entry_points = scan(sources, /asset_path\(["']([a-z_]+)\.js["']\)/).map { |entry| "app/javascript/#{entry}.ts" }
+      js = (controllers + entry_points).uniq
+      internals = scan(js, %r{from ['"]\./_internal/([a-z_]+)\.js['"]}).map { |f| "#{CONTROLLERS}/_internal/#{f}.ts" }
+      js + internals.uniq
+    end
+
+    def stimulus_controllers(name)
+      javascript_files(name).select { |f| f.start_with?(CONTROLLERS) && f.end_with?("_controller.ts") }
+    end
+
+    def packages(name)
+      scan(javascript_files(name), /(?:from|import)\s+['"]([^.'"][^'"]*)['"]/)
+        .map { |spec| spec.start_with?("@") ? spec.split("/").first(2).join("/") : spec.split("/").first }
+        .uniq.sort
+    end
+
+    # Gems the component needs, with the version to add to the Gemfile.
+    def gems(name)
+      fetch(name).fetch("gems", []).to_h { |gem| [ gem, @catalog.fetch("gems").fetch(gem) ] }
+    end
+
+    def read(file)
+      File.read(File.join(root, file))
+    end
+
+    private
+
+    def fetch(name)
+      @catalog.fetch("components").fetch(name.to_s) do
+        raise Error, "Unknown component #{name.inspect}. Available: #{names.join(', ')}"
+      end
+    end
+
+    # Components the files render. Comments don't count: a component's notes
+    # may point at another without needing it.
+    def references(files)
+      files.flat_map { |file| code(file).scan(/\bUI::([A-Z][A-Za-z0-9]*)/).flatten }
+           .map(&:underscore).select { |n| names.include?(n) }.uniq
+    end
+
+    def code(file)
+      read(file).gsub(/^\s*#.*$/, "").gsub(/<%#.*?%>/m, "")
+    end
+
+    # `ui--data-grid-url-value` names the data-grid controller; drop trailing
+    # words until what is left matches a controller file.
+    def controller_for(attribute)
+      words = attribute.split("-")
+      words.size.downto(1) do |n|
+        file = "#{CONTROLLERS}/#{words.first(n).join('_')}_controller.ts"
+        return file if exist?(file)
+      end
+      nil
+    end
+
+    def scan(files, pattern)
+      files.flat_map { |file| read(file).scan(pattern).flatten }.uniq
+    end
+
+    def glob(*patterns)
+      patterns.flat_map { |pattern| Dir.glob(pattern, base: root) }
+              .select { |f| File.file?(File.join(root, f)) }
+              .sort
+    end
+
+    def exist?(file)
+      File.exist?(File.join(root, file))
+    end
+  end
+end

data/lib/velvetkit/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Velvetkit
+  VERSION = "0.1.0.beta"
+end

data/lib/velvetkit.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require "velvetkit/version"
+require "velvetkit/namespace"
+require "velvetkit/registry"
+require "velvetkit/reference"
+
+# VelvetKit copies ViewComponent UI components into a Rails app, one at a time
+# and under the namespace the app chooses. Nothing runs from the gem at
+# runtime: once copied, the components are the app's own code.
+module Velvetkit
+  class Error < StandardError; end
+
+  CONFIG_FILE = "config/velvetkit.yml"
+
+  def self.registry
+    @registry ||= Registry.new(File.expand_path("../registry", __dir__))
+  end
+
+  # Everything an AI agent needs to build UI in an app: the rules, then a
+  # reference for each component, all in the app's namespace.
+  def self.agent_guide(components, namespace: Namespace.new(Namespace::CANONICAL))
+    guide = File.read(File.join(registry.root, "docs/agents.md"))
+                .sub("{{available}}", (registry.names - [ "base" ]).join(", "))
+    references = (components - [ "base" ]).map { |name| Reference.new(name, namespace: namespace).to_markdown }
+    ([ namespace.rewrite(guide) ] + references).join("\n")
+  end
+end

data/registry/app/assets/tailwind/velvetkit.css

@@ -0,0 +1,342 @@
+/* VelvetKit design tokens.
+ *
+ * Import this once from your Tailwind entry point, after Tailwind itself:
+ *
+ *   @import "tailwindcss";
+ *   @import "./velvetkit.css";
+ *
+ * Every component styles itself from these variables, so retheming the kit
+ * means changing the values below — never the components.
+ */
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.357 0.158 301.6); /* #4D1A7F, velvet */
+  --primary-bolder: oklch(0.42 0.17 301.6);
+  --primary-hovered: oklch(0.42 0.17 301.6);
+  --primary-foreground: oklch(0.985 0.008 301.6);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.53 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --accent-orange-subtle: oklch(0.8178 0.1249 59.29);
+  --accent-green-subtle: oklch(0.8968 0.1735 157.95);
+  --accent-yellow-subtle: oklch(0.9453 0.1627 104.19);
+  --accent-purple-subtle: oklch(0.634 0.1797 274.43);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: var(--primary);
+  --chart-pie-active: oklch(0.9137 0.1511 150.96);
+  --chart-pie-inactive: oklch(0.3533 0.0096 164.42);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 286.32);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  /* Accent for the active nav item; lighter in dark so it clears AA against
+     the dark panel, where --primary itself would only reach 3.08:1. */
+  --sidebar-primary: oklch(0.357 0.158 301.6);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.97 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.922 0.004 286.32);
+  --sidebar-ring: var(--primary);
+}
+
+.dark {
+  /* Native scrollbars, date pickers and other UA widgets follow the theme. */
+  color-scheme: dark;
+
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  /* Velvet (hue 301.6), lifted from the light theme's #4D1A7F, which would
+     sit at 1.7:1 against this page. Here white text clears WCAG AA (5.2:1)
+     and the button still separates from the page (3.8:1). */
+  --primary: oklch(0.55 0.17 301.6);
+  --primary-foreground: oklch(0.985 0.008 301.6);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--primary);
+  --chart-pie-active: oklch(0.696 0.17 162.48);
+  --chart-pie-inactive: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.7 0.15 301.6);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: var(--primary);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --chart-pie-active: oklch(0.696 0.17 162.48);
+  --chart-pie-inactive: oklch(0.556 0 0);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    /* A ring with an offset paints the gap in this colour. Tailwind's default
+       is white, which showed as a white line inside rings in dark mode. */
+    --tw-ring-offset-color: var(--background);
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+/* Chrome paints autofilled fields with its own pale-blue background and
+   ignores `background-color`, which also left InputGroup two-tone: the fill
+   covered the input but not the addon. Clipping the UA background to the text
+   hides it without touching `box-shadow`, so Tailwind's focus ring (which is
+   a box-shadow) still works. The long transition defers the fill Chrome
+   re-applies on interaction. */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--foreground);
+  caret-color: var(--foreground);
+  transition: background-color 100000s ease-in-out 0s;
+}
+
+/* The date picker calendar.
+ *
+ * Cally renders in a shadow root, so it is reachable only through the custom
+ * properties and ::part() names it publishes. All of them are pointed at the
+ * kit's tokens, which is what makes the calendar follow dark mode with no
+ * JavaScript.
+ *
+ * Layout: ‹ [May ▾] [2012 ▾] › in one header row. The selects sit in Cally's
+ * heading slot (see date_picker.html.erb), so its own heading and the month's
+ * heading would only repeat them.
+ */
+calendar-date,
+calendar-range {
+  --color-accent: var(--primary);
+  --color-text-on-accent: var(--primary-foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  color: var(--popover-foreground);
+}
+
+calendar-date::part(header),
+calendar-range::part(header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+/* The arrows: ghost icon buttons. */
+calendar-date::part(button),
+calendar-range::part(button) {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+
+calendar-date::part(button):hover,
+calendar-range::part(button):hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+calendar-date::part(button):focus-visible,
+calendar-range::part(button):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+calendar-date::part(disabled),
+calendar-range::part(disabled) {
+  opacity: 0.35;
+  cursor: default;
+}
+
+calendar-month::part(heading) {
+  display: none;
+}
+
+calendar-month::part(th) {
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+/* Days. */
+calendar-month::part(button) {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--popover-foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+calendar-month::part(button):hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+calendar-month::part(button):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+calendar-month::part(outside) {
+  color: var(--muted-foreground);
+  opacity: 0.6;
+}
+
+/* Today: a quiet tint rather than a hard box. */
+calendar-month::part(today) {
+  outline: none;
+  background: var(--accent);
+  color: var(--primary);
+  font-weight: 600;
+}
+
+/* The chosen day, after today so it wins when they're the same. */
+calendar-month::part(selected) {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 600;
+}
+
+/* Month and year: the reason this library was chosen, since reaching a birth
+   year is one click rather than a hundred and seventy. Styled like the kit's
+   fields; the open list is the platform's own. */
+calendar-select-month::part(select),
+calendar-select-year::part(select) {
+  appearance: none;
+  height: 2rem;
+  padding: 0 1.75rem 0 0.625rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md);
+  background: var(--background)
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+    no-repeat right 0.5rem center / 0.875rem;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+calendar-select-month::part(select):hover,
+calendar-select-year::part(select):hover {
+  background-color: var(--accent);
+}
+
+calendar-select-month::part(select):focus-visible,
+calendar-select-year::part(select):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+/* The "Month" and "Year" labels stay for screen readers only. */
+calendar-select-month::part(label),
+calendar-select-year::part(label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

data/registry/app/components/ui/accordion/content.html.erb

@@ -0,0 +1,5 @@
+<%= tag.div(**html_options) do %>
+  <div class="overflow-hidden min-h-0">
+    <div class="pl-8 pb-4 text-sm"><%= content %></div>
+  </div>
+<% end %>

data/registry/app/components/ui/accordion/content.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class UI::Accordion::Content < UI::Base
+  def initialize(trigger_id: nil, class: nil, **html_attrs)
+    @trigger_id = trigger_id
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def wrapper_classes
+    cn(
+      "grid grid-rows-[0fr] transition-[grid-template-rows] duration-200",
+      "data-[state=open]:grid-rows-[1fr]",
+      @user_class
+    )
+  end
+
+  def content_id
+    @html_attrs[:id] || "ui-accordion-content-#{SecureRandom.hex(4)}"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id]    = content_id
+    opts[:role]  = "region"
+    opts[:class] = wrapper_classes
+    opts[:"aria-labelledby"] = @trigger_id if @trigger_id
+    opts[:data]  = {
+      "ui--accordion-target": "content",
+      state: "closed"
+    }.merge(opts[:data] || {})
+    opts
+  end
+end

data/registry/app/components/ui/accordion/item.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**html_options) do %><%= trigger if trigger? %><%= accordion_content if accordion_content? %><% end %>