yattho_view_components 0.0.1

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Yattho
+  module Beta
+    # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
+    # `Octicon` can also be rendered with the `yattho_octicon` helper, which accepts the same arguments.
+    class Octicon < Yattho::Component
+      status :beta
+
+      SIZE_XSMALL = :xsmall
+      SIZE_DEFAULT = :small
+      SIZE_MEDIUM = :medium
+
+      SIZE_MAPPINGS = {
+        SIZE_XSMALL => 12,
+        SIZE_DEFAULT => 16,
+        SIZE_MEDIUM => 24
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      # @example Default
+      #   <%= render(Yattho::Beta::Octicon.new(:check)) %>
+      #   <%= render(Yattho::Beta::Octicon.new(icon: :check)) %>
+      #
+      # @example Medium
+      #   <%= render(Yattho::Beta::Octicon.new(:people, size: :medium)) %>
+      #
+      # @example Helper
+      #   <%= yattho_octicon(:check) %>
+      #
+      # @param icon_name [Symbol, String] Name of <%= link_to_octicons %> to use.
+      # @param icon [Symbol, String] Name of <%= link_to_octicons %> to use.
+      # @param size [Symbol] <%= one_of(Yattho::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
+      # @param use_symbol [Boolean] EXPERIMENTAL (May change or be removed) - Set to true when using with <%= link_to_component(Yattho::Alpha::OcticonSymbols) %>.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, use_symbol: false, **system_arguments)
+        icon_key = icon_name || icon
+
+        # Don't allow sizes under 16px
+        if (system_arguments[:height].present? && system_arguments[:height].to_i < 16) || (system_arguments[:width].present? && system_arguments[:width].to_i < 16)
+          system_arguments.delete(:height)
+          system_arguments.delete(:width)
+        end
+
+        cache_key = Yattho::Octicon::Cache.get_key(
+          symbol: icon_key,
+          size: size,
+          height: system_arguments[:height],
+          width: system_arguments[:width]
+        )
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :svg
+        @system_arguments[:aria] ||= {}
+        @use_symbol = use_symbol
+
+        if @system_arguments[:aria][:label] || @system_arguments[:'aria-label']
+          @system_arguments[:role] = "img"
+        else
+          @system_arguments[:aria][:hidden] = true
+        end
+
+        if (cache_icon = Yattho::Octicon::Cache.read(cache_key))
+          @icon = cache_icon
+        else
+          # Filter out classify options to prevent them from becoming invalid html attributes.
+          # Note height and width are both classify options and valid html attributes.
+          octicon_options = {
+            height: @system_arguments[:height] || SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+            width: @system_arguments[:width]
+          }
+          octicon_options.compact!
+
+          @icon = Octicons::Octicon.new(icon_key, octicon_options)
+          Yattho::Octicon::Cache.set(cache_key, @icon)
+        end
+
+        @system_arguments[:classes] = class_names(
+          @icon.options[:class],
+          @system_arguments[:classes]
+        )
+        @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,235 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+
+  /* Carets */
+}
+
+.Popover-message::before,
+  .Popover-message::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+.Popover-message::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+.Popover-message::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+/* No caret */
+
+.Popover-message--no-caret::before,
+  .Popover-message--no-caret::after {
+    display: none;
+  }
+
+/* Bottom-oriented carets */
+
+.Popover-message--bottom::before,
+  .Popover-message--bottom-right::before,
+  .Popover-message--bottom-left::before,
+  .Popover-message--bottom::after,
+  .Popover-message--bottom-right::after,
+  .Popover-message--bottom-left::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+.Popover-message--bottom::before, .Popover-message--bottom-right::before, .Popover-message--bottom-left::before {
+    bottom: -16px;
+    border-top-color: var(--color-border-default);
+  }
+
+.Popover-message--bottom::after, .Popover-message--bottom-right::after, .Popover-message--bottom-left::after {
+    bottom: -14px;
+    border-top-color: var(--color-canvas-overlay);
+  }
+
+/* Top and Bottom: Right-oriented carets */
+
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+}
+
+.Popover-message--top-right::before,
+  .Popover-message--bottom-right::before,
+  .Popover-message--top-right::after,
+  .Popover-message--bottom-right::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+.Popover-message--top-right::before, .Popover-message--bottom-right::before {
+    right: 20px;
+  }
+
+.Popover-message--top-right::after, .Popover-message--bottom-right::after {
+    right: 21px;
+  }
+
+/* Top and Bottom: Left-oriented carets */
+
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+}
+
+.Popover-message--top-left::before,
+  .Popover-message--bottom-left::before,
+  .Popover-message--top-left::after,
+  .Popover-message--bottom-left::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+.Popover-message--top-left::after, .Popover-message--bottom-left::after {
+    left: 25px;
+  }
+
+/* Right- and Left-oriented carets */
+
+.Popover-message--right::before,
+  .Popover-message--right-top::before,
+  .Popover-message--right-bottom::before,
+  .Popover-message--left::before,
+  .Popover-message--left-top::before,
+  .Popover-message--left-bottom::before,
+  .Popover-message--right::after,
+  .Popover-message--right-top::after,
+  .Popover-message--right-bottom::after,
+  .Popover-message--left::after,
+  .Popover-message--left-top::after,
+  .Popover-message--left-bottom::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+.Popover-message--right::before, .Popover-message--right-top::before, .Popover-message--right-bottom::before, .Popover-message--left::before, .Popover-message--left-top::before, .Popover-message--left-bottom::before {
+    margin-top: -9px;
+  }
+
+.Popover-message--right::after, .Popover-message--right-top::after, .Popover-message--right-bottom::after, .Popover-message--left::after, .Popover-message--left-top::after, .Popover-message--left-bottom::after {
+    margin-top: -8px;
+  }
+
+/* Right-oriented carets */
+
+.Popover-message--right::before, .Popover-message--right-top::before, .Popover-message--right-bottom::before {
+    right: -16px;
+    border-left-color: var(--color-border-default);
+  }
+
+.Popover-message--right::after, .Popover-message--right-top::after, .Popover-message--right-bottom::after {
+    right: -14px;
+    border-left-color: var(--color-canvas-overlay);
+  }
+
+/* Left-oriented carets */
+
+.Popover-message--left::before, .Popover-message--left-top::before, .Popover-message--left-bottom::before {
+    left: -16px;
+    border-right-color: var(--color-border-default);
+  }
+
+.Popover-message--left::after, .Popover-message--left-top::after, .Popover-message--left-bottom::after {
+    left: -14px;
+    border-right-color: var(--color-canvas-overlay);
+  }
+
+/* Right and Left: Top-oriented carets */
+
+.Popover-message--right-top::before,
+  .Popover-message--left-top::before,
+  .Popover-message--right-top::after,
+  .Popover-message--left-top::after {
+    top: 24px;
+  }
+
+/* Right and Left: Bottom-oriented carets */
+
+.Popover-message--right-bottom::before,
+  .Popover-message--left-bottom::before,
+  .Popover-message--right-bottom::after,
+  .Popover-message--left-bottom::after {
+    top: auto;
+  }
+
+.Popover-message--right-bottom::before, .Popover-message--left-bottom::before {
+    bottom: 16px;
+  }
+
+.Popover-message--right-bottom::after, .Popover-message--left-bottom::after {
+    bottom: 17px;
+  }
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+  .Popover {
+    position: fixed;
+  }
+
+  .Popover-message {
+    width: auto !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    margin: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--yattho-control-medium-paddingInline-normal, 12px) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

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

@@ -0,0 +1 @@
+{"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message::before","\n  .Popover-message::after",".Popover-message::after",".Popover-message--no-caret::before","\n  .Popover-message--no-caret::after",".Popover-message--bottom::before","\n  .Popover-message--bottom-right::before","\n  .Popover-message--bottom-left::before","\n  .Popover-message--bottom::after","\n  .Popover-message--bottom-right::after","\n  .Popover-message--bottom-left::after"," .Popover-message--bottom-right::before"," .Popover-message--bottom-left::before",".Popover-message--bottom::after"," .Popover-message--bottom-right::after"," .Popover-message--bottom-left::after",".Popover-message--top-right","\n.Popover-message--bottom-right",".Popover-message--top-right::before","\n  .Popover-message--top-right::after",".Popover-message--top-right::after",".Popover-message--top-left","\n.Popover-message--bottom-left",".Popover-message--top-left::before","\n  .Popover-message--top-left::after",".Popover-message--top-left::after",".Popover-message--right::before","\n  .Popover-message--right-top::before","\n  .Popover-message--right-bottom::before","\n  .Popover-message--left::before","\n  .Popover-message--left-top::before","\n  .Popover-message--left-bottom::before","\n  .Popover-message--right::after","\n  .Popover-message--right-top::after","\n  .Popover-message--right-bottom::after","\n  .Popover-message--left::after","\n  .Popover-message--left-top::after","\n  .Popover-message--left-bottom::after"," .Popover-message--right-top::before"," .Popover-message--right-bottom::before"," .Popover-message--left::before"," .Popover-message--left-top::before"," .Popover-message--left-bottom::before",".Popover-message--right::after"," .Popover-message--right-top::after"," .Popover-message--right-bottom::after"," .Popover-message--left::after"," .Popover-message--left-top::after"," .Popover-message--left-bottom::after",".Popover-message--left::before",".Popover-message--left::after",".Popover-message--right-top::before",".Popover-message--right-bottom::before",".Popover-message--right-bottom::after",".Popover-message--large",".Popover-message > .btn-octicon","\n  .Popover-message::before"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAAA,YAAY;;AAEZ;EACE,kBAAkB;EAClB,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,YAAY;EACZ,kBAAkB;EAClB,iBAAiB;EACjB,6CAA6C;EAC7C,6EAA6E;EAC7E,qDAAqD;;EAErD,WAAW;AAsBb;;AArBE;;IAEE,kBAAkB;IAClB,SAAS;IACT,qBAAqB;IACrB,WAAW;EACb;;AAEA;IACE,UAAU;IACV,iBAAiB;IACjB,6BAA6B;IAC7B,gDAAgD;EAClD;;AAEA;IACE,UAAU;IACV,iBAAiB;IACjB,6BAA6B;IAC7B,gDAAgD;EAClD;;AAGF,aAAa;;AAEX;;IAEE,aAAa;EACf;;AAGF,2BAA2B;;AAIzB;;;;;;IAEE,SAAS;IACT,gCAAgC;EAClC;;AAEA;IACE,aAAa;IACb,6CAA6C;EAC/C;;AAEA;IACE,aAAa;IACb,6CAA6C;EAC/C;;AAGF,0CAA0C;;AAC1C;;EAEE,WAAW;EACX,eAAe;AAejB;;AAbE;;;;IAEE,UAAU;IACV,cAAc;EAChB;;AAEA;IACE,WAAW;EACb;;AAEA;IACE,WAAW;EACb;;AAGF,yCAAyC;;AACzC;;EAEE,UAAU;EACV,cAAc;AAWhB;;AATE;;;;IAEE,UAAU;IACV,cAAc;EAChB;;AAEA;IACE,UAAU;EACZ;;AAGF,oCAAoC;;AAOlC;;;;;;;;;;;;IAEE,QAAQ;IACR,UAAU;IACV,cAAc;IACd,gCAAgC;EAClC;;AAEA;IACE,gBAAgB;EAClB;;AAEA;IACE,gBAAgB;EAClB;;AAGF,0BAA0B;;AAIxB;IACE,YAAY;IACZ,8CAA8C;EAChD;;AAEA;IACE,YAAY;IACZ,8CAA8C;EAChD;;AAGF,yBAAyB;;AAIvB;IACE,WAAW;IACX,+CAA+C;EACjD;;AAEA;IACE,WAAW;IACX,+CAA+C;EACjD;;AAGF,wCAAwC;;AAGtC;;;;IAEE,SAAS;EACX;;AAGF,2CAA2C;;AAGzC;;;;IAEE,SAAS;EACX;;AAEA;IACE,YAAY;EACd;;AAEA;IACE,YAAY;EACd;;AAGF;EACE;IACE,gBAAgB;EAClB;AACF;;AAEA;4DAC4D;;AAE5D;EACE;IAEE,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,kBAAkB;EACpB;EANA;IACE,eAAe;EAKjB;;EAEA;IAKE,sBAAsB;EAExB;;EAPA;IACE,SAAS;IACT,WAAW;IACX,YAAY;IACZ,UAAU;IAEV,8CAA8C;EAChD;;EAEA,sCAAsC;EACtC;IACE,2EAA2E;EAC7E;;EAEA,iBAAiB;EACjB;;IAEE,aAAa;EACf;AACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--color-canvas-overlay);\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--color-border-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--color-border-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--color-border-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--yattho-stack-gap-condensed, 8px);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--yattho-control-medium-paddingInline-normal, 12px) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}"]}

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

@@ -0,0 +1,6 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= render(body_component) do %>
+    <%= heading %>
+    <%= body %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,225 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+}
+
+/* No caret */
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+/* Bottom-oriented carets */
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -16px;
+    border-top-color: var(--color-border-default);
+  }
+
+  &::after {
+    bottom: -14px;
+    border-top-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Top and Bottom: Right-oriented carets */
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+/* Top and Bottom: Left-oriented carets */
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: 25px;
+  }
+}
+
+/* Right- and Left-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    margin-top: -9px;
+  }
+
+  &::after {
+    margin-top: -8px;
+  }
+}
+
+/* Right-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -16px;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    right: -14px;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Left-oriented carets */
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -16px;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    left: -14px;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Right and Left: Top-oriented carets */
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: 24px;
+  }
+}
+
+/* Right and Left: Bottom-oriented carets */
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: 16px;
+  }
+
+  &::after {
+    bottom: 17px;
+  }
+}
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--yattho-control-medium-paddingInline-normal, 12px) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

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

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+    #
+    # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
+    class Popover < Yattho::Component
+      status :beta
+
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--right",
+        :right_bottom => "Popover-message--right-bottom",
+        :right_top => "Popover-message--right-top",
+        :top_left => "Popover-message--top-left",
+        :top_right => "Popover-message--top-right"
+      }.freeze
+
+      DEFAULT_HEADING_TAG = :h4
+
+      # The heading
+      #
+      # @param tag [Symbol] (Yattho::Beta::Popover::DEFAULT_HEADING_TAG) <%= one_of(Yattho::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+        system_arguments[:tag] = tag
+        system_arguments[:mb] ||= 2
+
+        Yattho::Beta::Heading.new(**system_arguments)
+      }
+
+      # The body
+      #
+      # @param caret [Symbol] <%= one_of(Yattho::Beta::Popover::CARET_MAPPINGS.keys) %>
+      # @param large [Boolean] Whether to use the large version of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+        @body_arguments = system_arguments
+        @body_arguments[:classes] = class_names(
+          @body_arguments[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @body_arguments[:p] ||= 4
+        @body_arguments[:mt] ||= 2
+        @body_arguments[:mx] ||= :auto
+        @body_arguments[:text_align] ||= :left
+        @body_arguments[:box_shadow] ||= :large
+
+        Yattho::Content.new
+      }
+
+      # @example Default
+      #   <%= render Yattho::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render Yattho::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(large: true) do %>
+      #       This is the large Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Caret position
+      #   <%= render Yattho::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With multiple elements in the body
+      #   <%= render Yattho::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       <p>This is the Popover body.</p>
+      #       <%= render Yattho::ButtonComponent.new(type: :submit) do %>
+      #         Got it!
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Popover"
+        )
+        @system_arguments[:position] ||= :relative
+        @system_arguments[:right] = false unless @system_arguments.delete(:right)
+        @system_arguments[:left] = false unless @system_arguments.delete(:left)
+      end
+
+      def render?
+        body.present?
+      end
+
+      def body_component
+        Yattho::Box.new(**@body_arguments)
+      end
+    end
+  end
+end