yattho_view_components 0.0.1

data/app/components/yattho/beta/progress_bar.css

@@ -0,0 +1,26 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}

data/app/components/yattho/beta/progress_bar.css.json

@@ -0,0 +1 @@
+{"name":"beta/progress_bar","selectors":[".Progress",".Progress--large",".Progress--small",".Progress-item",".Progress-item + .Progress-item"]}

data/app/components/yattho/beta/progress_bar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAAA,aAAa;;AAEb;EACE,aAAa;EACb,WAAW;EACX,gBAAgB;EAChB,4CAA4C;EAC5C,kBAAkB;EAClB,8BAA8B,EAAE,kCAAkC;AACpE;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,8BAA8B,EAAE,kCAAkC;AACpE;;AAEA;EACE,gBAAgB;AAClB","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--color-neutral-muted);\n  border-radius: 6px;\n  outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: 2px;\n}"]}

data/app/components/yattho/beta/progress_bar.html.erb

@@ -0,0 +1,5 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/yattho/beta/progress_bar.pcss

@@ -0,0 +1,26 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}

data/app/components/yattho/beta/progress_bar.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `ProgressBar` to visualize task completion.
+    class ProgressBar < Yattho::Component
+      status :beta
+
+      # Use the Item slot to add an item to the progress bar
+      #
+      # @param percentage [Integer] The percent complete
+      # @param bg [Symbol] The background color
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :span
+        system_arguments[:bg] = bg
+        system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
+        system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      SIZE_DEFAULT = :default
+
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "Progress--small",
+        :large => "Progress--large"
+      }.freeze
+
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # @example Default
+      #   <%= render(Yattho::Beta::ProgressBar.new) do |component| %>
+      #     <% component.with_item(percentage: 25) %>
+      #   <% end %>
+      #
+      # @example Small
+      #   <%= render(Yattho::Beta::ProgressBar.new(size: :small)) do |component| %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 50) %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render(Yattho::Beta::ProgressBar.new(size: :large)) do |component| %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 75) %>
+      #   <% end %>
+      #
+      # @example Multiple items
+      #   <%= render(Yattho::Beta::ProgressBar.new) do |component| %>
+      #     <% component.with_item(percentage: 10) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 20) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 30) %>
+      #   <% end %>
+      #
+      # @param size [Symbol] <%= one_of(Yattho::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: SIZE_DEFAULT, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Progress",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+        @system_arguments[:tag] = :span
+      end
+
+      def render?
+        items?
+      end
+    end
+  end
+end

data/app/components/yattho/beta/relative_time.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
+    class RelativeTime < Yattho::Component
+      status :beta
+
+      TENSE_DEFAULT = :auto
+      TENSE_OPTIONS = [TENSE_DEFAULT, :past, :future].freeze
+
+      FORMAT_DEFAULT = :auto
+      FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
+
+      FORMAT_STYLE_DEFAULT = nil
+      FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze
+
+      SECOND_DEFAULT = nil
+      SECOND_MAPPINGS = {
+        SECOND_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      SECOND_OPTIONS = SECOND_MAPPINGS.keys
+
+      MINUTE_DEFAULT = nil
+      MINUTE_MAPPINGS = {
+        MINUTE_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      MINUTE_OPTIONS = MINUTE_MAPPINGS.keys
+
+      HOUR_DEFAULT = nil
+      HOUR_MAPPINGS = {
+        HOUR_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      HOUR_OPTIONS = HOUR_MAPPINGS.keys
+
+      WEEKDAY_DEFAULT = nil
+      WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
+
+      DAY_DEFAULT = nil
+      DAY_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      DAY_OPTIONS = DAY_MAPPINGS.keys
+
+      MONTH_DEFAULT = nil
+      MONTH_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit",
+        :short => "short",
+        :long => "long",
+        :narrow => "narrow"
+      }.freeze
+      MONTH_OPTIONS = MONTH_MAPPINGS.keys
+
+      YEAR_DEFAULT = nil
+      YEAR_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      YEAR_OPTIONS = YEAR_MAPPINGS.keys
+
+      TIMEZONENAME_DEFAULT = nil
+      TIMEZONE_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :long => "long",
+        :short => "short",
+        :short_offset => "shortOffset",
+        :long_offset => "longOffset",
+        :short_generic => "shortGeneric",
+        :long_generic => "longGeneric"
+      }.freeze
+      TIMEZONENAME_OPTIONS = TIMEZONE_MAPPINGS.keys
+
+      PRECISION_DEFAULT = nil
+      PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
+
+      # @example Default
+      #   <%= render(Yattho::Beta::RelativeTime.new(datetime: Time.at(628232400))) %>
+      #
+      # @example Past Time
+      #   <%= render(Yattho::Beta::RelativeTime.new(datetime: Time.at(628232400), tense: :past)) %>
+      #
+      # @example Elapsed Time
+      #   <%= render(Yattho::Beta::RelativeTime.new(datetime: Time.at(628232400), format: :elapsed)) %>
+      #
+      # @param datetime [Time] The time to be formatted.
+      # @param tense [Symbol] Which tense to use. <%= one_of(Yattho::Beta::RelativeTime::TENSE_OPTIONS) %>
+      # @param prefix [sring] What to prefix the relative ime display with.
+      # @param second [Symbol] What format seconds should take. <%= one_of(Yattho::Beta::RelativeTime::SECOND_OPTIONS) %>
+      # @param minute [Symbol] What format minues should take. <%= one_of(Yattho::Beta::RelativeTime::MINUTE_OPTIONS) %>
+      # @param hour [Symbol] What format hours should take. <%= one_of(Yattho::Beta::RelativeTime::HOUR_OPTIONS) %>
+      # @param weekday [Symbol] What format weekdays should take. <%= one_of(Yattho::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
+      # @param day [Symbol] What format days should take. <%= one_of(Yattho::Beta::RelativeTime::DAY_OPTIONS) %>
+      # @param month [Symbol] What format months should take. <%= one_of(Yattho::Beta::RelativeTime::MONTH_OPTIONS) %>
+      # @param year [Symbol] What format years should take. <%= one_of(Yattho::Beta::RelativeTime::YEAR_OPTIONS) %>
+      # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Yattho::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
+      # @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
+      # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Yattho::Beta::RelativeTime::PRECISION_OPTIONS) %>
+      # @param format [Symbol] The format the display should take. <%= one_of(Yattho::Beta::RelativeTime::FORMAT_OPTIONS) %>
+      # @param format_style [Symbol] The format the display should take. <%= one_of(Yattho::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
+      # @param lang [string] The language to use.
+      # @param title [string] Provide a custom title to the element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        datetime:,
+        tense: TENSE_DEFAULT,
+        prefix: nil,
+        second: SECOND_DEFAULT,
+        minute: MINUTE_DEFAULT,
+        hour: HOUR_DEFAULT,
+        weekday: WEEKDAY_DEFAULT,
+        day: DAY_DEFAULT,
+        month: MONTH_DEFAULT,
+        year: YEAR_DEFAULT,
+        time_zone_name: TIMEZONENAME_DEFAULT,
+        threshold: nil,
+        precision: PRECISION_DEFAULT,
+        format: nil,
+        format_style: nil,
+        lang: nil,
+        title: nil,
+        **system_arguments
+      )
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "relative-time"
+        @system_arguments[:tense] = tense if tense.present?
+        @system_arguments[:prefix] = prefix if prefix.present?
+        @system_arguments[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
+        @system_arguments[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
+        @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
+        @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
+        @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
+        @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
+        @system_arguments[:threshold] = threshold if threshold.present?
+        @system_arguments[:precision] = precision if precision.present?
+        @system_arguments[:title] = title if title.present?
+        @system_arguments[:lang] = lang if lang.present?
+        @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
+        @system_arguments[:"format-style"] = format_style if format_style.present?
+        if datetime.present? && datetime.respond_to?(:iso8601)
+          @datetime = datetime
+          @system_arguments[:datetime] = datetime.iso8601
+        elsif datetime.present?
+          @datetime = Time.iso8601 datetime
+          @system_arguments[:datetime] = @datetime
+        end
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments).with_content(@datetime.strftime("%B %-d, %Y %H:%M")))
+      end
+    end
+  end
+end

data/app/components/yattho/beta/spinner.html.erb

@@ -0,0 +1,4 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
+<% end %>

data/app/components/yattho/beta/spinner.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Spinner` to let users know that content is being loaded.
+    class Spinner < Yattho::Component
+      status :beta
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => 16,
+        DEFAULT_SIZE => 32,
+        :large => 64
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # Setting `box-sizing: content-box` allows consumers to add padding
+      # to the spinner without shrinking the icon
+      DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
+
+      #
+      # @example Default
+      #   <%= render(Yattho::Beta::Spinner.new) %>
+      #
+      # @example Small
+      #   <%= render(Yattho::Beta::Spinner.new(size: :small)) %>
+      #
+      # @example Large
+      #   <%= render(Yattho::Beta::Spinner.new(size: :large)) %>
+      #
+      # @param size [Symbol] <%= one_of(Yattho::Beta::Spinner::SIZE_MAPPINGS) %>
+      # @param style [String] Custom element styles.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :svg
+        @system_arguments[:style] ||= style
+        @system_arguments[:animation] = :rotate
+        @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:viewBox] = "0 0 16 16"
+        @system_arguments[:fill] = :none
+      end
+    end
+  end
+end

data/app/components/yattho/beta/state.css

@@ -0,0 +1,50 @@
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  padding: 5px var(--yattho-control-medium-paddingInline-normal, 12px);
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: var(--yattho-control-medium-lineBoxHeight, 20px);
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+}
+
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-open-emphasis);
+}
+
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
+}
+
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-closed-emphasis);
+}
+
+/* Small 24px */
+
+.State--small {
+  padding: 0 10px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  line-height: var(--base-size-24, 24px);
+}
+
+.State--small .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }

data/app/components/yattho/beta/state.css.json

@@ -0,0 +1 @@
+{"name":"beta/state","selectors":[".state"," \n.State","\n.State--draft",".State--open",".State--merged",".State--closed",".State--small",".State--small .octicon"]}

data/app/components/yattho/beta/state.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAAA,UAAU;;AAEV,iBAAiB;;AAEjB;;EAEE,qBAAqB;EACrB,oEAAoE;EACpE,oDAAoD;EACpD,gDAAgD;EAChD,6DAA6D;EAC7D,kBAAkB;EAClB,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;;;EAGE,kCAAkC;EAClC,+CAA+C;EAC/C,6DAA6D;AAC/D;;AAEA;EACE,kCAAkC;EAClC,4CAA4C;AAC9C;;AAEA;EACE,kCAAkC;EAClC,4CAA4C;AAC9C;;AAEA;EACE,kCAAkC;EAClC,8CAA8C;AAChD;;AAEA,eAAe;;AAEf;EACE,eAAe;EACf,mDAAmD;EACnD,sCAAsC;AAKxC;;AAHE;IACE,UAAU,EAAE,+DAA+D;EAC7E","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--yattho-control-medium-paddingInline-normal, 12px);\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: var(--yattho-control-medium-lineBoxHeight, 20px);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n  border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n}\n\n.State--open {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-open-emphasis);\n}\n\n.State--merged {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-done-emphasis);\n}\n\n.State--closed {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--yattho-text-body-size-small, 12px);\n  line-height: var(--base-size-24, 24px);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}"]}

data/app/components/yattho/beta/state.pcss

@@ -0,0 +1,50 @@
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  padding: 5px var(--yattho-control-medium-paddingInline-normal, 12px);
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: var(--yattho-control-medium-lineBoxHeight, 20px);
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+}
+
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-open-emphasis);
+}
+
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
+}
+
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-closed-emphasis);
+}
+
+/* Small 24px */
+
+.State--small {
+  padding: 0 10px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  line-height: var(--base-size-24, 24px);
+
+  & .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }
+}

data/app/components/yattho/beta/state.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `State` for rendering the status of an item.
+    class State < Yattho::Component
+      status :beta
+
+      SCHEME_DEFAULT = :default
+      NEW_SCHEME_MAPPINGS = {
+        open: "State--open",
+        closed: "State--closed",
+        merged: "State--merged"
+      }.freeze
+
+      DEPRECATED_SCHEME_MAPPINGS = {
+        SCHEME_DEFAULT => "",
+        :green => "State--open",
+        :red => "State--closed",
+        :purple => "State--merged"
+      }.freeze
+      SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      SIZE_DEFAULT = :default
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "State--small"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      TAG_DEFAULT = :span
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # @example Default
+      #   <%= render(Yattho::Beta::State.new(title: "title")) { "State" } %>
+      #
+      # @example Schemes
+      #   <%= render(Yattho::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Yattho::Beta::State.new(title: "title", scheme: :open)) { "Open" } %>
+      #   <%= render(Yattho::Beta::State.new(title: "title", scheme: :closed)) { "Closed" } %>
+      #   <%= render(Yattho::Beta::State.new(title: "title", scheme: :merged)) { "Merged" } %>
+      #
+      # @example Sizes
+      #   <%= render(Yattho::Beta::State.new(title: "title")) { "Default" } %>
+      #   <%= render(Yattho::Beta::State.new(title: "title", size: :small)) { "Small" } %>
+      #
+      # @param title [String] `title` HTML attribute.
+      # @param scheme [Symbol] Background color. <%= one_of(Yattho::Beta::State::SCHEME_OPTIONS) %>
+      # @param tag [Symbol] HTML tag for element. <%= one_of(Yattho::Beta::State::TAG_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Yattho::Beta::State::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        scheme: SCHEME_DEFAULT,
+        tag: TAG_DEFAULT,
+        size: SIZE_DEFAULT,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:title] = title
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "State",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/yattho/beta/subhead.css

@@ -0,0 +1,54 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--yattho-stack-padding-condensed, 8px);
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+
+.Subhead--spacious {
+  margin-top: var(--base-size-40, 40px);
+}
+
+/* <h2> sized heading with normal font weight */
+
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal, 400);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* Make the text bold and red for dangerous content */
+
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+}
+
+/* One-liner of supporting text */
+
+.Subhead-description {
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  color: var(--color-fg-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+
+.Subhead-actions {
+  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+}
+
+.Subhead-actions + .Subhead-description {
+    margin-top: var(--base-size-4, 4px);
+  }

data/app/components/yattho/beta/subhead.css.json

@@ -0,0 +1 @@
+{"name":"beta/subhead","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions + .Subhead-description"]}

data/app/components/yattho/beta/subhead.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAAA,YAAY;;AAEZ;EACE,aAAa;EACb,0DAA0D;EAC1D,mDAAmD;EACnD,kFAAkF;EAClF,mBAAmB;EACnB,yBAAyB,EAAE,gCAAgC;AAC7D;;AAEA,gFAAgF;;AAChF;EACE,qCAAqC;AACvC;;AAEA,+CAA+C;;AAC/C;EACE,eAAe;EACf,gDAAgD;EAChD,cAAc;EACd,QAAQ;AACV;;AAEA,qDAAqD;;AACrD;EACE,kDAAkD;EAClD,6BAA6B;AAC/B;;AAEA,iCAAiC;;AACjC;EACE,oDAAoD;EACpD,4BAA4B;EAC5B,YAAY;EACZ,QAAQ;AACV;;AAEA,mDAAmD;;AACnD;EACE,iFAAiF;EACjF,kBAAkB;EAClB,yBAAyB;EACzB,QAAQ;AAKV;;AAHE;IACE,mCAAmC;EACrC","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--yattho-stack-padding-condensed, 8px);\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal, 400);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  color: var(--color-fg-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4, 4px);\n  }\n}"]}

data/app/components/yattho/beta/subhead.html.erb

@@ -0,0 +1,5 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= heading %>
+  <%= description %>
+  <%= actions %>
+<% end %>

data/app/components/yattho/beta/subhead.pcss

@@ -0,0 +1,49 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--yattho-stack-padding-condensed, 8px);
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+.Subhead--spacious {
+  margin-top: var(--base-size-40, 40px);
+}
+
+/* <h2> sized heading with normal font weight */
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal, 400);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* Make the text bold and red for dangerous content */
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+}
+
+/* One-liner of supporting text */
+.Subhead-description {
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  color: var(--color-fg-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+.Subhead-actions {
+  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+
+  & + .Subhead-description {
+    margin-top: var(--base-size-4, 4px);
+  }
+}