poetry-ui 0.0.2

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

@@ -0,0 +1,203 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # A click-opened panel anchored to its trigger.
+    module Popover
+      # The placement vocabularies - the popper-consumer kit owns them.
+      SIDES = Poetry::Ui::PopperConsumer::SIDES
+      # The closed vocabulary for the align axis.
+      ALIGNS = Poetry::Ui::PopperConsumer::ALIGNS
+
+      # A click-opened role=dialog panel anchored to its trigger, for
+      # interactive content: small forms, filters, pickers. Opening
+      # moves focus to the first tabbable element in the panel; Escape
+      # or outside interaction closes it and returns focus to the
+      # trigger. Non-modal by default - the rest of the page stays
+      # interactive while it is open.
+      #
+      # with_trigger composes a Button as the control. Name the panel
+      # via with_title (preferred) or label: - a dialog needs an
+      # accessible name. The focus and dismiss behavior activates only
+      # while open, so closed popovers cost nothing at page load.
+      #
+      # @example
+      #   render Poetry::Ui::Popover::Component.new do |popover|
+      #     popover.with_trigger(variant: :outline) { "Open popover" }
+      #     popover.with_title { "Dimensions" }
+      #     tag.p("Set the dimensions for the layer.")
+      #   end
+      class Component < Poetry::Core::Component
+        include Poetry::Ui::ComposableTrigger
+        include Poetry::Ui::PopperConsumer
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          ComposableTrigger::AGENT_RULE,
+          "Use poetry_popover - never hand-roll an anchored role=dialog panel with Tailwind.",
+          "Popover content is INTERACTIVE - for text-only hover hints use Tooltip; for pointer-only " \
+          "previews use HoverCard.",
+          "Give the panel a name: use with_title (preferred) or label: - a role=dialog without a name " \
+          "fails the audit.",
+          "Icon-only triggers MUST have an accessible name (the composed Button's label: rule).",
+          "Default is NON-modal (modal: false) - reach for modal: true only when stray outside " \
+          "interaction would corrupt the task; reach for Dialog when the task deserves full modality.",
+          "Critical-path panels must also be reachable without JS (full page or server-rendered " \
+          "open: true) - popovers are JS-required interaction.",
+          "Do not nest a Popover inside a Popover - restructure (the layer stack allows it; " \
+          "comprehension does not)."
+        ].freeze
+
+        # Slots the component cannot render without; static checks read this without rendering.
+        REQUIRED_SLOTS = { trigger: "the panel's control" }.freeze
+
+        # The class each slot's builder renders - with_trigger composes a
+        # Button, so callers get Button's full option contract.
+        SLOT_RENDERS = { trigger: Button::Component }.freeze
+
+        renders_one :trigger,
+                    doc: "The control that opens the panel - a composed Button. The slot owns the " \
+                         "aria-haspopup/expanded/controls wiring regardless of the composed content, so composition " \
+                         "cannot drop the aria; aria-controls renders even while closed (the stable id is the " \
+                         "wiring's resolution seam).",
+                    renders: lambda { |**options, &block|
+                      wiring = {
+                        "id" => trigger_id, "data-slot" => "popover-trigger",
+                        "aria-haspopup" => "dialog", "aria-expanded" => open.to_s, "aria-controls" => content_id
+                      }.merge(stimulus_attributes_for(:trigger))
+                      # Trigger open state: bare data-popup-open while open, NO
+                      # attribute while closed (absence IS the state).
+                      wiring["data-popup-open"] = "" if open
+                      composed_trigger(wiring, options, &block) ||
+                        Button::Component.new(**wiring, **options, &block)
+                    }
+
+        renders_one :anchor,
+                    doc: "Optional alternate anchor: when present, the panel positions against IT instead of the " \
+                         "trigger (targets beat selectors in the positioning fallback chain).",
+                    renders: lambda { |**options, &block|
+                      attrs = { "data-slot" => "popover-anchor" }
+                              .merge(stimulus_attributes_for(:anchor_part))
+                      content_tag(:div, attrs.merge(options)) { capture(&block) }
+                    }
+
+        renders_one :title, doc: "Panel heading - presence wires the content's aria-labelledby, so the title names " \
+                                 "the dialog."
+
+        renders_one :description, doc: "Supporting text - presence wires the content's aria-describedby."
+
+        use_stimulus do
+          on :root do
+            controller :popover do
+              register
+              value :open
+              value :modal
+            end
+            controller :popper do
+              register
+              # The trigger anchors by id selector; an anchor part
+              # overrides it with the anchor TARGET (render-time decision -
+              # slots may be set in any order, so the trigger itself
+              # carries no popper target).
+              value :anchor, from: :trigger_anchor_selector, unless: :anchor?
+              value :side
+              value :align
+              value :side_offset
+              value :align_offset
+              value :avoid_collisions
+            end
+          end
+          on :trigger do
+            controller(:popover) { action :toggle, on: :click }
+          end
+          on :anchor_part do
+            controller(:popper) { target :anchor }
+          end
+          on :content do
+            controller(:popper) { target :content }
+          end
+        end
+
+        option :open, :boolean, default: false, doc: "Server-renders the panel open."
+        option :modal, :boolean, default: false,
+                                 doc: "Reserves interaction for the panel while open; the default keeps the rest of " \
+                                      "the page interactive."
+        # The placement axes for the anchored panel (side, align, offsets).
+        popper_placement_options(side: :bottom, side_offset: 4)
+        option :label, :string, doc: "role=dialog fallback name when no title part is present."
+        option :content_class, :string,
+               doc: "Class merge seam for the panel itself (e.g. widen the default with content_class: \"w-80\") - " \
+                    "root-level class: styles the wrapper, not the panel."
+
+        part "popover", "Root wrapper around the trigger, the optional anchor, and the panel"
+        part "popover-anchor", "Optional alternate popper anchor - when " \
+                               "present the panel positions against it instead of the trigger"
+        part "popover-content", "The role=dialog panel - positioning, animation, and the open " \
+                                "state ride here",
+             states: {
+               "data-open" => "panel is open (the controller flips the pair at runtime)",
+               "data-closed" => "panel is closed (the server-rendered state; hidden rides along)",
+               "data-side" => { condition: "always - the side (initial placement, re-resolved " \
+                                           "live by popper after flip)",
+                                values: SIDES.map(&:to_s) },
+               "data-align" => { condition: "always - the alignment (re-resolved live by popper)",
+                                 values: ALIGNS.map(&:to_s) }
+             },
+             vars: Poetry::Ui::PopperConsumer.content_vars
+        part "popover-header", "Title block wrapping the title and description (renders only " \
+                               "when either is present)"
+        part "popover-title", "The heading - the panel's accessible name via aria-labelledby"
+        part "popover-description", "Muted copy under the title, wired to aria-describedby"
+
+        # Enforces the required trigger and warns on a nameless dialog.
+        # @api private
+        def before_render
+          raise ArgumentError, "Popover requires with_trigger (the panel's control)" unless trigger?
+
+          return if title? || label.present?
+
+          # Lint-level warning, not an error: a role=dialog SHOULD have an
+          # accessible name (with_title preferred, label: the fallback).
+          Rails.logger&.warn(
+            "poetry Popover: role=dialog panel has no accessible name - give it with_title or label:"
+          )
+        end
+
+        # @api private
+        def title_id
+          "#{instance_id}-title"
+        end
+
+        # @api private
+        def description_id
+          "#{instance_id}-description"
+        end
+
+        # @api private
+        def content_attributes
+          attrs = {
+            "id" => content_id, "role" => "dialog", "tabindex" => "-1",
+            "data-slot" => "popover-content", (open ? "data-open" : "data-closed") => "",
+            # Initial placement, re-resolved live by popper on open.
+            "data-side" => side, "data-align" => align,
+            "class" => css(:content, class: content_class)
+          }.merge(stimulus_attributes_for(:content))
+          if title?
+            attrs["aria-labelledby"] = title_id
+          elsif label.present?
+            attrs["aria-label"] = label
+          end
+          attrs["aria-describedby"] = description_id if description?
+          attrs["hidden"] = true unless open
+          attrs
+        end
+
+        private
+
+        def trigger_anchor_selector = "##{trigger_id}"
+
+        private :title_id, :description_id, :content_attributes
+      end
+    end
+  end
+end

data/app/components/poetry/ui/popover/preview.html.erb

@@ -0,0 +1,29 @@
+<%# Class-wide sidecar (it displaces poetry-core's generic preview.html.erb
+    fallback, so it must keep that contract): examples that pass their own
+    composition flow through unchanged; the template-owned examples
+    (default/modal) render the upstream popover-demo form - grid gap-2 rows,
+    each grid-cols-3 with the input spanning two columns at h-8 - the layout
+    the port originally dropped (bare label+input pairs had no spacing). %>
+<div class="<%= defined?(container_class) && container_class.presence || "p-4" %>">
+  <% if local_assigns[:content_block] %>
+    <%= render(component, &content_block) %>
+  <% else %>
+    <%= render component do |popover| %>
+      <% popover.with_trigger(variant: :outline) { "Open popover" } %>
+      <% popover.with_title { "Dimensions" } %>
+      <% popover.with_description { "Set the dimensions for the layer." } %>
+      <div class="grid gap-2">
+        <div class="grid grid-cols-3 items-center gap-4">
+          <%= render Poetry::Ui::Label::Component.new(for_id: "popover-demo-width").with_content("Width") %>
+          <%= render Poetry::Ui::Input::Component.new(name: "width", value: "100%",
+                                                      id: "popover-demo-width", class: "col-span-2 h-8") %>
+        </div>
+        <div class="grid grid-cols-3 items-center gap-4">
+          <%= render Poetry::Ui::Label::Component.new(for_id: "popover-demo-height").with_content("Height") %>
+          <%= render Poetry::Ui::Input::Component.new(name: "height", value: "25px",
+                                                      id: "popover-demo-height", class: "col-span-2 h-8") %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Popover
+      # The Popover preview matrix: the ported popover-demo composition
+      # (form-in-popover, w-80 override) plus both modality modes, the
+      # anchor part, the label: naming fallback, a placement sample, and
+      # the server-rendered open state.
+      class Preview < Poetry::Core::Preview::Base
+        # The popover-demo port: outline Button trigger, titled/described
+        # panel, the dimensions form in upstream's grid rows (the sidecar
+        # preview.html.erb - herb-scanned, so the layout classes reach the
+        # safelist), the demo's w-80 class override.
+        def default
+          render_with(component: Component.new(content_class: "w-80"))
+        end
+
+        # modal: true - focus-scope trapped + the dismissable scrim.
+        def modal
+          render_with(component: Component.new(content_class: "w-80", modal: true))
+        end
+
+        # The anchor part takes the popper anchor target: the panel
+        # positions against IT, not the trigger (the source's anchor part).
+        def with_anchor
+          render_component do |popover|
+            popover.with_trigger(variant: :outline) { "Open popover" }
+            popover.with_anchor { "The panel anchors to this text, not the button." }
+            popover.with_title { "Anchored" }
+            "Positioned against the anchor part."
+          end
+        end
+
+        # No title part: label: names the role=dialog via aria-label.
+        def named_by_label
+          render_component(label: "Quick settings") do |popover|
+            popover.with_trigger(variant: :outline) { "Settings" }
+            "A panel named by label: instead of a title part."
+          end
+        end
+
+        # Server-rendered open state (controllable-state: the attributes
+        # are the store; the controller reconciles on connect).
+        def open
+          render_component(open: true) do |popover|
+            popover.with_trigger(variant: :outline) { "Open popover" }
+            popover.with_title { "Server-opened" }
+            popover.with_description { "Rendered open - fully usable before (or without) JS." }
+            "Static content."
+          end
+        end
+
+        # Placement sample (side/align flow through to popper; data-side
+        # re-resolves live on collision).
+        def side_top
+          render_component(side: :top, align: :start) do |popover|
+            popover.with_trigger(variant: :outline) { "Open above" }
+            popover.with_title { "Placement" }
+            "side: :top, align: :start"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Popover
+      # Re-expressed through the cn-* theme layer. w-72 stays inline
+      # per upstream's split (the caller-overridable width default); the
+      # origin class binds through the tokens/aliases.css alias to popper's
+      # generic var and stays inline as mechanism.
+      class Style < Poetry::Core::Style
+        # The panel's DISPLAY + header/body gap are THEME-owned (every
+        # theme port ships its own flex-col gap-*; lyra/nova deliberately run
+        # tighter at 2.5) - closed panels stay hidden regardless because
+        # preflight's [hidden] rule is !important.
+        element :content, "cn-popover-content z-50 w-72 " \
+                          "origin-(--transform-origin) outline-hidden"
+
+        # Ported-source additions (plain divs there; poetry wires their
+        # ids to the dialog's aria-labelledby/describedby).
+        element :header, "cn-popover-header flex flex-col"
+        element :title, "cn-popover-title"
+        element :description, "cn-popover-description"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/popper_consumer.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # Gives a trigger-anchored popup component (Popover, HoverCard,
+    # Tooltip) the shared positioning surface: the placement vocabulary,
+    # the popper_placement_options macro, the content part's CSS-var
+    # contract, and the trigger/content id pair. Stimulus declarations
+    # stay per-family: each family's value set genuinely differs.
+    module PopperConsumer
+      extend ActiveSupport::Concern
+      include FamilyIdentity
+
+      # The closed vocabulary for the side placement axis.
+      SIDES = %i[top right bottom left].freeze
+      # The closed vocabulary for the align placement axis.
+      ALIGNS = %i[start center end].freeze
+
+      class_methods do
+        # Declares the five placement options (side, align, side_offset,
+        # align_offset, avoid_collisions) plus their vocabulary
+        # validations on the including component - each family passes its
+        # own defaults.
+        def popper_placement_options(side:, side_offset:, align: :center, align_offset: 0)
+          option :side, :symbol, default: side, doc: "Which side of the anchor the panel opens on."
+          option :align, :symbol, default: align, doc: "Panel alignment along the chosen side."
+          option :side_offset, :integer, default: side_offset,
+                                         doc: "Gap in pixels between the anchor and the panel."
+          option :align_offset, :integer, default: align_offset,
+                                          doc: "Shift in pixels along the alignment axis."
+          option :avoid_collisions, :boolean, default: true,
+                                              doc: "Flips and shifts the panel to stay inside the viewport."
+          validates :side, inclusion: { in: SIDES }
+          validates :align, inclusion: { in: ALIGNS }
+        end
+      end
+
+      # The CSS custom properties the positioning engine writes onto the
+      # content part - inlined into a family's part declaration as its
+      # vars:. noun names the family's surface in the prose ("panel",
+      # "bubble").
+      def self.content_vars(noun = "panel")
+        {
+          "--transform-origin" => "the anchor-facing origin popper writes for scale-in animation",
+          "--available-width" => "viewport space left for the #{noun} (popper, post-flip)",
+          "--available-height" => "viewport space left for the #{noun} (popper, post-flip)",
+          "--anchor-width" => "the anchor's measured width (popper)",
+          "--anchor-height" => "the anchor's measured height (popper)"
+        }
+      end
+
+      # The trigger element's server-stable id.
+      # @api private
+      def trigger_id
+        "#{instance_id}-trigger"
+      end
+
+      # The content element's server-stable id. The controller resolves
+      # content by the id pair ("-trigger" -> "-content"), portal-safe -
+      # no Stimulus target.
+      # @api private
+      def content_id
+        "#{instance_id}-content"
+      end
+
+      private :trigger_id, :content_id
+    end
+  end
+end

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # A determinate progress bar.
+    module Progress
+      # A determinate task's completion, server-rendered: a
+      # role=progressbar root carrying the value in aria, with a filled
+      # track sized to the percentage. label: is the accessible name and
+      # renders as the visible caption beside a percent readout. For an
+      # unknown duration use Spinner - this bar has no indeterminate
+      # state.
+      #
+      # @example
+      #   render Poetry::Ui::Progress::Component.new(value: 60, label: "Uploading")
+      class Component < Poetry::Core::Component
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "label: is REQUIRED - it is the progressbar's accessible name and the visible caption.",
+          "value: is the current progress (0..max:, default max 100); the component computes the width.",
+          "For an UNKNOWN duration use Spinner, not Progress - this bar is determinate."
+        ].freeze
+
+        option :value, :integer, required: true, doc: "The current progress, clamped into 0..max:."
+        option :max, :integer, default: 100, doc: "The completion value."
+        option :label, :string, required: true, doc: "The progressbar's accessible name and visible caption."
+        option :show_value, :boolean, default: true, doc: "Set false to hide the percent readout."
+
+        part "progress", "Root (role=progressbar, aria-value* and the accessible name) - " \
+                         "label, value readout, and track stack here"
+        part "progress-label", "The visible caption span (label:)"
+        part "progress-value", "The tabular percent readout - renders unless show_value: false"
+        part "progress-track", "The full-width rail the indicator fills"
+        part "progress-indicator", "The filled bar - sized by an inline width percentage " \
+                                   "computed from value:/max:"
+
+        # Enforces the required label and a positive max.
+        # @api private
+        def before_render
+          raise ArgumentError, "Progress requires label: (the progressbar's accessible name)" if label.blank?
+          raise ArgumentError, "Progress max: must be positive" unless max.positive?
+        end
+
+        # @api private
+        def call
+          content_tag(:div, root_attributes.to_attributes) do
+            safe_join([label_part, value_part, track].compact)
+          end
+        end
+
+        # @api private
+        def percent
+          (value.to_f / max * 100).clamp(0, 100)
+        end
+
+        # @api private
+        def percent_text
+          "#{percent.round}%"
+        end
+
+        # @api private
+        def root_attributes
+          html_attributes.merge_if_not_set(
+            {
+              "data-slot" => "progress", "role" => "progressbar",
+              "aria-valuemin" => 0, "aria-valuemax" => max, "aria-valuenow" => value.clamp(0, max),
+              "aria-label" => label
+            }.merge(component_data_attributes)
+          )
+        end
+
+        private
+
+        def label_part
+          content_tag(:span, label, "data-slot" => "progress-label", class: css(:label))
+        end
+
+        def value_part
+          return unless show_value
+
+          content_tag(:span, percent_text, "data-slot" => "progress-value", class: css(:value))
+        end
+
+        def track
+          content_tag(:div, "data-slot" => "progress-track", class: css(:track)) do
+            content_tag(:div, nil, "data-slot" => "progress-indicator", class: css(:indicator),
+                                   style: "width: #{percent.round(4)}%")
+          end
+        end
+
+        private :percent, :percent_text, :root_attributes
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Progress
+      # The Progress preview: mid-flight, complete, and a custom max.
+      class Preview < Poetry::Core::Preview::Base
+        def default
+          render_component(value: 60, label: "Uploading photos")
+        end
+
+        def complete
+          render_component(value: 100, label: "Backup")
+        end
+
+        def custom_max_without_value
+          render_component(value: 3, max: 8, label: "Steps completed", show_value: false)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Progress
+      # Re-expressed through the cn-* theme layer. The root keeps no
+      # cn name (its whole poetry surface is structural; upstream's
+      # cn-progress-root returns with content in a future theme).
+      class Style < Poetry::Core::Style
+        base "flex flex-wrap gap-3"
+
+        element :track, "cn-progress-track relative flex w-full items-center overflow-x-hidden"
+        element :indicator, "cn-progress-indicator h-full transition-all"
+        element :label, "cn-progress-label"
+        element :value, "cn-progress-value"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,80 @@
+<%= form_with(url: url, method: http_method, html: root_attributes.to_attributes) do %>
+  <% if progress? %>
+    <% custom_progress = progress.to_s %>
+    <div <%= tag.attributes({ "class" => css(:progress, class: progress_class), "data-slot" => "questionnaire-progress",
+                              "role" => "progressbar", "aria-label" => "Questionnaire progress",
+                              "aria-live" => "polite",
+                              "data-current" => active_index + 1,
+                              "data-total" => enabled_items.size,
+                              "aria-valuemin" => "1",
+                              "aria-valuemax" => enabled_items.size,
+                              "aria-valuenow" => active_index + 1,
+                              "aria-valuetext" => progress_label }
+                              .merge(custom_progress.present? ? { "data-custom" => "" } : {})
+                              .merge(stimulus_attributes_for(:progress))) %>>
+      <%= custom_progress.presence || progress_label %>
+    </div>
+  <% end %>
+  <% item_models.each do |item| %>
+    <%= content_tag(:fieldset, **item_attributes(item)) do %>
+      <legend data-slot="questionnaire-title" class="<%= css(:title) %>"><%= item.title %></legend>
+      <% if item.description %>
+        <p data-slot="questionnaire-description" id="<%= item_dom_id(item, "description") %>"
+           class="<%= css(:description) %>"><%= item.description %></p>
+      <% end %>
+      <div data-slot="questionnaire-choices" class="<%= css(:choices) %>">
+        <% item.choices.each_with_index do |choice, index| %>
+          <%= content_tag(:label, **choice_attributes(item, choice, index)) do %>
+            <input type="<%= input_type(item) %>" name="<%= field_name(item) %>"
+                   value="<%= choice.value %>" data-slot="questionnaire-choice-input"
+                   class="<%= css(:choice_input) %>"
+                   <% if choice.checked %>checked<% end %> <% if choice.disabled || item.disabled %>disabled<% end %>
+                   <%= tag.attributes({ (choice.checked ? "data-checked" : "data-unchecked") => "" }) %>>
+            <span aria-hidden="true" data-slot="questionnaire-choice-indicator" class="<%= css(:choice_indicator) %>">
+              <span data-slot="questionnaire-choice-indicator-dot" class="<%= css(:choice_indicator_dot) %>"></span>
+              <%= render Poetry::Ui::Icon::Component.new(name: :check, class: css(:choice_indicator_check),
+                                                          data: { slot: "questionnaire-choice-indicator-check" }) %>
+            </span>
+            <span data-slot="questionnaire-choice-label" class="<%= css(:choice_label) %>">
+              <span><%= choice.label %></span>
+              <% if choice.description %>
+                <span data-slot="questionnaire-choice-description" class="<%= css(:choice_description) %>"><%= choice.description %></span>
+              <% end %>
+            </span>
+            <% if (key = shortcut_for(item, index)) %>
+              <span aria-hidden="true" data-slot="questionnaire-choice-shortcut" class="<%= css(:choice_shortcut) %>"><%= key %></span>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% if item.input %>
+          <div data-slot="questionnaire-input-wrapper" class="<%= css(:input_wrapper) %>">
+            <input type="text" name="<%= field_name(item) %>" data-slot="questionnaire-input" autocomplete="off"
+                   class="<%= css(:input) %>" aria-label="<%= item.input.label %>"
+                   placeholder="<%= item.input.placeholder %>" value="<%= item.input.value %>"
+                   <%= tag.attributes({ (item.input.value.present? ? "data-filled" : "data-empty") => "" }) %>>
+          </div>
+        <% end %>
+      </div>
+      <p data-slot="questionnaire-error" id="<%= item_dom_id(item, "error") %>"
+         class="<%= css(:error) %>" hidden><%= item.error_message %></p>
+    <% end %>
+  <% end %>
+  <div data-slot="questionnaire-actions" class="<%= css(:actions) %>">
+    <%= render(Poetry::Ui::Button::Component.new(
+          variant: :outline, type: :button,
+          **nav_button_options(:previous, hidden: enabled_items.size <= 1 || first?)
+        )) { previous_label } %>
+    <%= render(Poetry::Ui::Button::Component.new(
+          variant: :outline, type: :button,
+          **nav_button_options(:skip, hidden: active_item.required)
+        )) { skip_label } %>
+    <%= render(Poetry::Ui::Button::Component.new(
+          type: :button,
+          **nav_button_options(:next, hidden: enabled_items.size <= 1 || last?)
+        )) { next_label } %>
+    <%= render(Poetry::Ui::Button::Component.new(
+          type: :submit,
+          **nav_button_options(:submit, hidden: !last?)
+        )) { submit_label } %>
+  </div>
+<% end %>