poetry-ui 0.0.2

data/app/components/poetry/ui/calendar/component.rb

@@ -0,0 +1,366 @@
+# frozen_string_literal: true
+
+require "date"
+
+module Poetry
+  module Ui
+    # Server-rendered month-grid date pickers.
+    module Calendar
+      # A month grid for picking a date, computed server-side with Ruby
+      # date math: the initial month renders correctly with no JS, and
+      # the controller adds navigation and selection on top. Selection is
+      # a real form value - name: posts the chosen date as an ISO string
+      # in a hidden input (range mode posts name[start] and name[end]).
+      # A bare Calendar is the always-visible grid; DatePicker wraps it
+      # in a popover behind a text field.
+      #
+      # @example A form-posting date pick
+      #   render Poetry::Ui::Calendar::Component.new(name: "event[date]", selected: "2026-07-04")
+      class Component < Poetry::Core::Component
+        # The date-valued keywords, parsed to Date (or nil) for the template.
+        # @api private
+        attr_reader :selected, :today, :min, :max, :range_start, :range_end
+
+        # The closed vocabulary for the mode axis.
+        MODES = %i[single range].freeze
+        # The closed vocabulary for the caption_layout axis.
+        CAPTION_LAYOUTS = %i[label dropdown].freeze
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "name: makes it a form control (the chosen date posts as an ISO string in a hidden input; " \
+          "range mode posts name[start] + name[end]).",
+          "month:/selected:/today accept a Date or an ISO string; min:/max: bound the selectable range.",
+          "mode: :range selects a span - selected: takes a Date..Date Range, [start, end], or " \
+          "{start:, end:}; the second click completes, click-before-start swaps, re-click clears.",
+          "The grid is server-rendered - it shows a valid month with no JS; the controller adds " \
+          "navigation + selection.",
+          "For a text-field + popover, use DatePicker (it composes this) - a bare Calendar is the " \
+          "always-visible grid.",
+          "caption_layout: :dropdown swaps the month label for month + year selects (jump " \
+          "navigation); the year list derives from min:/max: when both are set, else ten years " \
+          "around the initial month.",
+          "week_numbers: true adds the ISO week column (each row's Thursday decides the number)."
+        ].freeze
+
+        use_stimulus do
+          on :root do
+            controller :calendar do
+              register
+              value :month, from: :month_key
+              value :selected, from: :selected_iso
+              value :mode, "range", if: :range?
+              value :range_start, from: :range_start_iso, if: :range?
+              value :range_end, from: :range_end_iso, if: :range?
+              value :week_start
+              value :min, from: :min_iso
+              value :max, from: :max_iso
+              # Localized month names (I18n) so JS month navigation needs
+              # no locale API of its own - app-locale correct everywhere.
+              value :month_names, from: :month_names_list
+            end
+          end
+          on :day do
+            controller :calendar do
+              target :day
+              action :select, on: :click
+            end
+          end
+          on :nav_previous do
+            controller(:calendar) { action :previousMonth, on: :click }
+          end
+          on :nav_next do
+            controller(:calendar) { action :nextMonth, on: :click }
+          end
+          # Elements consumed by the template:
+          on :dropdown do
+            controller(:calendar) { action :jump, on: :change }
+          end
+          on :grid do
+            controller(:calendar) { action :keydown, on: :keydown }
+          end
+          on :caption do
+            controller(:calendar) { target :caption }
+          end
+          on :start_input do
+            controller(:calendar) { target :startInput }
+          end
+          on :end_input do
+            controller(:calendar) { target :endInput }
+          end
+          on :hidden_input do
+            controller(:calendar) { target :input }
+          end
+        end
+
+        option :name, :string,
+               doc: "Makes the calendar a form control: the pick posts as an ISO string in a hidden input; range " \
+                    "mode posts name[start] + name[end]."
+        option :mode, :symbol, default: :single,
+                               doc: "Picks one date (:single) or a span (:range). Range selection completes on the " \
+                                    "second click; a click before the start swaps, a re-click clears."
+        option :week_start, :integer, default: 0,
+                                      doc: "The first weekday column (0 = Sunday .. 6 = Saturday)."
+        option :caption_layout, :symbol, default: :label,
+                                         doc: ":label shows the month text; :dropdown swaps it for month + year " \
+                                              "selects (jump navigation)."
+        option :week_numbers, :boolean, default: false,
+                                        doc: "Adds the ISO week-number column (each row's Thursday decides the number)."
+
+        part "calendar", "Root wrapper - the calendar controller (navigation, selection, roving " \
+                         "arrow keys) rides here"
+        part "calendar-nav", "The header row - previous/next month Buttons around the caption"
+        part "calendar-caption", "The month label ('July 2026') - the controller rewrites it on " \
+                                 "navigation from the localized month names; under " \
+                                 "caption_layout: :dropdown it holds the month/year NativeSelect " \
+                                 "pair instead (the controller reflects navigation into them)"
+        part "calendar-week-number", "The ISO week column (week_numbers:) - a columnheader stub " \
+                                     "plus one muted rowheader number per week; non-interactive"
+        part "calendar-dropdown", "One caption dropdown unit (caption_layout: :dropdown) - the " \
+                                  "visible label with the real <select> stretched invisibly over " \
+                                  "it (the invisible-overlay pattern)",
+             states: {
+               "data-calendar-unit" => { condition: "always - which unit this select drives",
+                                         values: %w[month year] }
+             }
+        part "calendar-caption-label", "The visible text + chevron of a caption dropdown " \
+                                       "(aria-hidden - the overlaid select carries the value)"
+        part "calendar-dropdown-value", "The label's text span - the controller rewrites it on " \
+                                        "navigation (month name or year)"
+        part "calendar-grid", "The role=grid - the weekday header row plus six week rows " \
+                              "(42 cells, always full weeks)"
+        part "calendar-weekdays", "The role=row of weekday column headers"
+        part "calendar-weekday", "One role=columnheader two-letter day label"
+        part "calendar-week", "One role=row of seven day cells"
+        part "calendar-day-cell", "The role=gridcell wrapper - aria-selected lives HERE (the " \
+                                  "ARIA grid contract; it is not valid on the button)"
+        part "calendar-day", "One day <button> - the selection vocabulary and the roving tab " \
+                             "stop ride here",
+             states: {
+               "data-date" => "always - the day's ISO date (the controller's selection key)",
+               "data-selected" => "the day is the single-mode pick, or a start-only range pick " \
+                                  "(bare; a complete range wears the range-* trio instead)",
+               "data-range-start" => "the day starts a COMPLETE range",
+               "data-range-end" => "the day ends a COMPLETE range",
+               "data-range-middle" => "the day sits strictly inside a complete range",
+               "data-today" => "the day is today (aria-current=date rides along)",
+               "data-outside" => "the day belongs to a neighbouring month (leading/trailing fill)"
+             }
+        part "calendar-day-label", "The day-number span inside the button"
+
+        # Parses the date-valued keywords (month:, selected:, min:, max:, today:) -
+        # each accepts a Date or an ISO string; selected: in range mode also takes
+        # a Date..Date Range, an [start, end] pair, or a {start:, end:} hash.
+        # @api private
+        def initialize(month: nil, selected: nil, min: nil, max: nil, today: nil, **)
+          super(**)
+          raise ArgumentError, "unknown mode #{mode.inspect} (one of #{MODES.join(", ")})" unless MODES.include?(mode)
+          unless CAPTION_LAYOUTS.include?(caption_layout)
+            raise ArgumentError, "unknown caption_layout #{caption_layout.inspect} " \
+                                 "(one of #{CAPTION_LAYOUTS.join(", ")})"
+          end
+
+          if range?
+            @range_start, @range_end = parse_range(selected)
+          else
+            @selected = to_date(selected)
+          end
+          @today = to_date(today) || Date.today
+          @min = to_date(min)
+          @max = to_date(max)
+          @month = to_date(month) || @selected || @range_start || @today
+        end
+
+        # @api private
+        def range? = mode == :range
+        # @api private
+        def range_complete? = !!(@range_start && @range_end)
+
+        # Whether the date falls inside the current range selection.
+        # @api private
+        def in_span?(date)
+          return false unless range?
+          return date == @range_start unless range_complete?
+
+          date.between?(@range_start, @range_end)
+        end
+
+        # The 42 cells (6 weeks) for the visible month, leading/trailing
+        # days from the neighbours so every week is full.
+        # @api private
+        def cells
+          first = Date.new(@month.year, @month.month, 1)
+          lead = (first.wday - week_start) % 7
+          start = first - lead
+          (0...42).map { |offset| start + offset }
+        end
+
+        # @api private
+        # Two-letter column labels from the locale's abbreviated day
+        # names, rotated to week_start.
+        def weekday_labels
+          I18n.t("date.abbr_day_names").rotate(week_start).map { |name| name[0, 2] }
+        end
+
+        # @api private
+        def in_month?(date) = date.month == @month.month
+        # @api private
+        def selected?(date) = @selected && date == @selected
+        # @api private
+        def today?(date) = date == @today
+        # @api private
+        def disabled?(date) = (@min && date < @min) || (@max && date > @max)
+
+        # @api private
+        # Mirrors the controller's #captionText exactly (localized month
+        # name + year), so server render and client navigation agree in
+        # every locale.
+        def caption
+          "#{month_names_list[@month.month - 1]} #{@month.year}"
+        end
+
+        # @api private
+        def dropdown_caption? = caption_layout == :dropdown
+
+        # @api private
+        def month_options
+          month_names_list.each_with_index.map { |label, index| [label, index + 1] }
+        end
+
+        # min:/max: pin the year list when both are given; otherwise ten
+        # years either side of the initial month (the demo-friendly default;
+        # bound it deliberately via min:/max: in real pickers).
+        # @api private
+        def year_options
+          years = @min && @max ? (@min.year..@max.year) : ((@month.year - 10)..(@month.year + 10))
+          years.map { |year| [year.to_s, year] }
+        end
+
+        # The ISO week of a displayed row: its Thursday decides (ISO 8601),
+        # which stays correct under any week_start.
+        # @api private
+        def iso_week(week)
+          week.find { |date| date.cwday == 4 }.cweek
+        end
+
+        # Exactly one day is the tab stop: the selection (the range start
+        # in range mode), else today (in view), else the first enabled day.
+        # @api private
+        def tab_stop
+          anchor = range? ? @range_start : @selected
+          @tab_stop ||= (anchor if anchor && in_month?(anchor)) ||
+                        (@today if in_month?(@today)) ||
+                        cells.find { |date| in_month?(date) && !disabled?(date) }
+        end
+
+        # @api private
+        def root_attributes
+          html_attributes.merge_if_not_set(
+            { "data-slot" => "calendar", "class" => css }.merge(stimulus_attributes_for(:root))
+                                                          .merge(component_data_attributes)
+          )
+        end
+
+        # aria-selected lives on the role=gridcell (the ARIA grid contract -
+        # it is not a valid attribute on a plain button). Range mode marks
+        # the whole span.
+        # @api private
+        def cell_attributes(date)
+          selected = range? ? in_span?(date) : selected?(date)
+          {
+            "role" => "gridcell", "data-slot" => "calendar-day-cell",
+            "class" => css(:day_cell), "aria-selected" => selected.to_s
+          }
+        end
+
+        # @api private
+        def day_attributes(date)
+          iso = date.iso8601
+          attrs = {
+            "type" => "button", "data-slot" => "calendar-day",
+            "data-date" => iso, "class" => css(:day),
+            "aria-label" => date.strftime("%B %-d, %Y"),
+            "tabindex" => date == tab_stop ? "0" : "-1"
+          }.merge(stimulus_attributes_for(:day))
+          merge_selection_attributes(attrs, date)
+          attrs["data-today"] = "" if today?(date)
+          attrs["data-outside"] = "" unless in_month?(date)
+          attrs["aria-current"] = "date" if today?(date)
+          if disabled?(date)
+            attrs["disabled"] = true
+            attrs["aria-disabled"] = "true"
+          end
+          attrs
+        end
+
+        # @api private
+        def previous_options
+          nav_options("Previous month", :nav_previous)
+        end
+
+        # @api private
+        def next_options
+          nav_options("Next month", :nav_next)
+        end
+
+        private
+
+        def nav_options(label, element)
+          {
+            variant: :ghost, size: :icon, label: label, class: css(:nav_button)
+          }.merge(stimulus_attributes_for(element))
+        end
+
+        def to_date(value)
+          return if value.nil?
+          return value if value.is_a?(Date)
+
+          Date.parse(value.to_s)
+        end
+
+        # A preselected range: Date..Date, [start, end], or {start:, end:}.
+        def parse_range(value)
+          case value
+          when nil then [nil, nil]
+          when Range then [to_date(value.first), to_date(value.last)]
+          when Array then [to_date(value[0]), to_date(value[1])]
+          when Hash
+            pair = value.symbolize_keys
+            [to_date(pair[:start]), to_date(pair[:end])]
+          else
+            [to_date(value), nil] # a single value starts the range
+          end
+        end
+
+        # The selection vocabulary per day: a COMPLETE range wears
+        # range-start/middle/end; a start-only pick is a plain selected
+        # single day; single mode keeps data-selected.
+        def merge_selection_attributes(attrs, date)
+          if range?
+            if range_complete?
+              attrs["data-range-start"] = "" if date == @range_start
+              attrs["data-range-end"] = "" if date == @range_end
+              attrs["data-range-middle"] = "" if date > @range_start && date < @range_end
+            elsif @range_start && date == @range_start
+              attrs["data-selected"] = ""
+            end
+          elsif selected?(date)
+            attrs["data-selected"] = ""
+          end
+        end
+
+        def month_key = @month.strftime("%Y-%m")
+        def selected_iso = @selected&.iso8601 || ""
+        def range_start_iso = @range_start&.iso8601 || ""
+        def range_end_iso = @range_end&.iso8601 || ""
+        def min_iso = @min&.iso8601 || ""
+        def max_iso = @max&.iso8601 || ""
+        def month_names_list = I18n.t("date.month_names").drop(1)
+
+        private :range?, :range_complete?, :in_span?, :cells, :weekday_labels, :in_month?, :selected?, :today?
+        private :disabled?, :caption, :dropdown_caption?, :month_options, :year_options, :iso_week, :tab_stop
+        private :root_attributes, :cell_attributes, :day_attributes, :previous_options, :next_options
+      end
+    end
+  end
+end

data/app/components/poetry/ui/calendar/preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Calendar
+      # The Calendar preview: a fixed month (deterministic screenshots) with
+      # a selected day and today, and a range-bounded variant.
+      class Preview < Poetry::Core::Preview::Base
+        def default
+          render_component(month: "2026-06-01", selected: "2026-06-12", today: "2026-06-15",
+                           class: "rounded-md border")
+        end
+
+        def bounded
+          render_component(month: "2026-06-01", today: "2026-06-15",
+                           min: "2026-06-08", max: "2026-06-22", class: "rounded-md border")
+        end
+
+        def range
+          render_component(mode: :range, month: "2026-06-01", today: "2026-06-15",
+                           selected: Date.new(2026, 6, 9)..Date.new(2026, 6, 18),
+                           class: "rounded-md border")
+        end
+
+        # caption_layout: :dropdown - the month/year NativeSelect pair;
+        # min/max pin the year list (deterministic options).
+        def dropdown_caption
+          render_component(month: "2026-06-01", selected: "2026-06-12", today: "2026-06-15",
+                           caption_layout: :dropdown, min: "2024-01-01", max: "2028-12-31",
+                           class: "rounded-md border")
+        end
+
+        # week_numbers: the ISO week column (June 2026 = weeks 23-28).
+        def week_numbers
+          render_component(month: "2026-06-01", selected: "2026-06-12", today: "2026-06-15",
+                           week_numbers: true, class: "rounded-md border")
+        end
+
+        # name: makes the calendar a form participant - the hidden input
+        # the controller keeps in sync submits the ISO date.
+        def form_participant
+          render_component(name: "event[on]", month: "2026-06-01", selected: "2026-06-12",
+                           today: "2026-06-15", class: "rounded-md border")
+        end
+
+        # Range + name: submits <name>[start] / <name>[end] hidden inputs.
+        def form_participant_range
+          render_component(mode: :range, name: "stay", month: "2026-06-01", today: "2026-06-15",
+                           range_start: "2026-06-08", range_end: "2026-06-12",
+                           class: "rounded-md border")
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/calendar/style.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Calendar
+      # poetry's OWN calendar engine, re-expressed through the cn-*
+      # theme layer. The cell-size var + grid geometry stay inline
+      # (mechanism); the day-button's whole state chain (selected / today /
+      # outside / range tints) rides .cn-calendar-day-button TOGETHER
+      # (split-side rule - the tints override each other in-layer). The
+      # in-popover bg override stays inline per upstream's own root split.
+      class Style < Poetry::Core::Style
+        # group/calendar stays dropped (no consumer; the compiled-CSS gate
+        # flags markers nothing consumes). It returns with a consumer.
+        base "cn-calendar bg-background [--cell-size:--spacing(8)] w-fit " \
+             "in-data-[slot=popover-content]:bg-transparent group/calendar " \
+             "in-data-[slot=card-content]:bg-transparent"
+
+        element :nav, "flex items-center justify-between gap-1 pb-2"
+        element :nav_button, "size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+        element :caption, "cn-calendar-caption flex-1 text-center select-none"
+        # The dropdown caption (caption_layout: :dropdown), upstream's
+        # overlay pattern: the visible part is TEXT + a small chevron; the
+        # real <select> stretches invisibly over it. Most themes leave the
+        # root chromeless (maia/lyra add a border via
+        # .cn-calendar-dropdown-root); the focus ring here is poetry's
+        # structural a11y floor - an invisible select still needs a
+        # visible focus.
+        element :caption_dropdowns, "flex flex-1 items-center justify-center gap-1.5 text-sm font-medium"
+        # (No cn-calendar-dropdown-root/caption-label names: only maia/lyra
+        # theme this surface upstream - the breadcrumb doctrine, a cn name
+        # the other themes cannot compile does not ship; maia/lyra restyle
+        # via the data-slot hooks instead.)
+        element :dropdown_root, "relative rounded-md " \
+                                "has-[select:focus-visible]:ring-[3px] has-[select:focus-visible]:ring-ring/50"
+        element :dropdown_select, "absolute inset-0 opacity-0"
+        element :dropdown_label, "flex select-none items-center gap-1 text-sm " \
+                                 "font-medium [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+
+        element :grid, "w-full border-collapse"
+        element :weekdays, "flex"
+        element :weekday, "cn-calendar-weekday flex-1 select-none flex items-center justify-center " \
+                          "h-(--cell-size)"
+        element :week, "mt-2 flex w-full"
+        element :day_cell, "relative aspect-square h-full w-full flex-1 p-0 text-center select-none"
+
+        # The day button: ghost, with the selected/today/outside/range
+        # states - the whole treatment in the theme rule.
+        element :day, "cn-calendar-day-button relative isolate z-10 flex aspect-square size-auto " \
+                      "w-full min-w-(--cell-size) items-center justify-center border-0 outline-none " \
+                      "disabled:pointer-events-none"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/card/component.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div, **root_attributes.to_attributes) do %>
+  <% if header? %>
+    <div data-slot="card-header" class="<%= css(:header, class: header_class) %>">
+      <% if title? %><%= content_tag(title_tag, title, "data-slot" => "card-title", class: css(:title)) %><% end %>
+      <% if description? %><div data-slot="card-description" class="<%= css(:description) %>"><%= description %></div><% end %>
+      <% if action? %><div data-slot="card-action" class="<%= css(:action) %>"><%= action %></div><% end %>
+    </div>
+  <% end %>
+  <div data-slot="card-content" class="<%= css(:content, class: content_class) %>"><%= content %></div>
+  <% if footer? %><%= content_tag(:div, footer_attributes) do %><%= capture(&footer_block) if footer_block %><% end %><% end %>
+<% end %>

data/app/components/poetry/ui/card/component.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # Content surface cards.
+    module Card
+      # A content surface composed from slots: a header (title,
+      # description, and a trailing corner action), the body content
+      # block, and a footer row. The header grid gains its trailing
+      # column automatically when an action is present, and the title
+      # renders as a real heading (h3 by default - set title_tag: to fit
+      # the page outline).
+      #
+      # @example
+      #   render Poetry::Ui::Card::Component.new do |card|
+      #     card.with_title { "Team" }
+      #     card.with_description { "Invite and manage members." }
+      #     "Body content"
+      #   end
+      class Component < Poetry::Core::Component
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "Compose with the slots (title/description/action/footer) - never rebuild the header grid by hand.",
+          "The card body is the content block; use CardAction for the header-corner control.",
+          "The title renders as a real heading (h3 default) - set title_tag: to fit the page outline."
+        ].freeze
+
+        renders_one :title, doc: "The heading line, rendered as a real heading element (title_tag:)."
+        renders_one :description, doc: "Muted one-liner under the title."
+        renders_one :action, doc: "The header's trailing corner control (a button, menu, or link)."
+        renders_one :footer,
+                    doc: "The bottom row (actions/meta). class: merges into the footer div (a border-t divider is " \
+                         "the canonical use); every other option (id:, data:, ...) rides onto the footer div " \
+                         "verbatim.",
+                    renders: lambda { |**options, &block|
+                      @footer_options = options
+                      @footer_block = block
+                      nil
+                    }
+
+        option :title_tag, :symbol, default: :h3,
+                                    doc: "The heading element for the title - pick it to fit the page outline."
+
+        option :content_class, :string,
+               doc: "Extra classes merged into the body cell (caller classes win). A chat-in-a-card layout passes " \
+                    "min-h-0 flex-1 p-0 so the transcript can flex and scroll."
+
+        option :header_class, :string,
+               doc: "Extra classes merged into the header row - border-b rules the title off from the body."
+
+        validates :title_tag, inclusion: { in: %i[h1 h2 h3 h4 h5 h6] }
+
+        part "card", "Root container - the vertical flex stack"
+        part "card-header", "The title row grid - gains a trailing auto column when " \
+                            "card-action is present"
+        part "card-title", "The heading (title_tag, h3 by default)"
+        part "card-description", "Muted one-liner under the title"
+        part "card-action", "The header's trailing corner control"
+        part "card-content", "The body - the content block renders here"
+        part "card-footer", "The bottom row (actions/meta)"
+
+        # The caller's footer block, captured by with_footer.
+        # @api private
+        attr_reader :footer_block
+
+        # @api private
+        def footer_attributes
+          options = (@footer_options || {}).dup
+          { "data-slot" => "card-footer",
+            class: css(:footer, class: options.delete(:class)) }.merge(options)
+        end
+
+        # Whether any header slot is set.
+        # @api private
+        def header?
+          title? || description? || action?
+        end
+
+        # @api private
+        def root_attributes
+          html_attributes.merge_if_not_set(
+            { "data-slot" => "card" }.merge(component_data_attributes)
+          )
+        end
+
+        private :footer_attributes, :header?, :root_attributes
+      end
+    end
+  end
+end

data/app/components/poetry/ui/card/preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Card
+      # The Card preview: the title/description default and the full
+      # header-action + footer composition.
+      class Preview < Poetry::Core::Preview::Base
+        def default
+          render_component do |card|
+            card.with_title { "Revenue" }
+            card.with_description { "Last 30 days" }
+            "$12,345"
+          end
+        end
+
+        def with_action_and_footer
+          render_component do |card|
+            card.with_title { "Team" }
+            card.with_description { "Active members" }
+            card.with_action { embed(Poetry::Ui::Button::Component.new(size: :sm, variant: :outline).with_content("Invite")) }
+            card.with_footer { "Updated hourly" }
+            "24 members"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/card/style.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Card
+      # Re-expressed through the cn-* theme layer: grid machinery
+      # stays inline (upstream's split), the surface treatment + spacing
+      # ride themes/default.css.
+      class Style < Poetry::Core::Style
+        base "cn-card flex flex-col group/card"
+
+        element :header, "cn-card-header grid auto-rows-min items-start " \
+                         "has-data-[slot=card-action]:grid-cols-[1fr_auto] @container/card-header " \
+                         "group/card-header has-data-[slot=card-description]:grid-rows-[auto_auto]"
+        element :title, "cn-card-title"
+        element :description, "cn-card-description"
+        element :action, "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+        element :content, "cn-card-content"
+        element :footer, "cn-card-footer flex items-center"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/carousel/component.html.erb

@@ -0,0 +1,17 @@
+<%= content_tag(:div, **root_attributes.to_attributes) do %>
+  <%= content_tag(:div, viewport_attributes) do %>
+    <div class="<%= css(:track, class: [css(vertical? ? :track_vertical : :track_horizontal), track_classes].compact) %>">
+      <% slides.each do |slide| %>
+        <%= content_tag(:div, capture(&slide.block), item_attributes(slide)) %>
+      <% end %>
+    </div>
+  <% end %>
+  <% if show_controls %>
+    <%= render Poetry::Ui::Button::Component.new(**control_options(:previous)) do |button| %>
+      <% button.with_leading { render Poetry::Ui::Icon::Component.new(name: :"chevron-left") } %>
+    <% end %>
+    <%= render Poetry::Ui::Button::Component.new(**control_options(:next)) do |button| %>
+      <% button.with_leading { render Poetry::Ui::Icon::Component.new(name: :"chevron-right") } %>
+    <% end %>
+  <% end %>
+<% end %>