yattho_view_components 0.0.1

data/app/components/yattho/alpha/dropdown/menu.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    class Dropdown
+      # This component is part of `Dropdown` and should not be
+      # used as a standalone component.
+      class Menu < Yattho::Component
+        status :alpha
+
+        AS_DEFAULT = :default
+        AS_OPTIONS = [AS_DEFAULT, :list].freeze
+
+        SCHEME_DEFAULT = :default
+        SCHEME_MAPPINGS = {
+          SCHEME_DEFAULT => "",
+          :dark => "dropdown-menu-dark"
+        }.freeze
+
+        DIRECTION_DEFAULT = :se
+        DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
+
+        # @param tag [Symbol] <%= one_of(Yattho::Alpha::Dropdown::Menu::Item::TAG_OPTIONS) %>.
+        # @param divider [Boolean] Whether the item is a divider without any function.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_many :items, lambda { |divider: false, **system_arguments|
+          Yattho::Alpha::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
+        }
+
+        # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+        # @param direction [Symbol] <%= one_of(Yattho::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>.
+        # @param header [String] Header to be displayed above the menu.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil,
+                       **system_arguments)
+          @header = header
+          @direction = direction
+          @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = "details-menu"
+          @system_arguments[:role] = "menu"
+
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "dropdown-menu",
+            "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+            SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+          )
+        end
+
+        private
+
+        def list?
+          @as == :list
+        end
+
+        # Items to be rendered in the `Dropdown` menu.
+        class Item < Yattho::Component
+          status :alpha
+
+          TAG_DEFAULT = :a
+          BUTTON_TAGS = [:button, :summary].freeze
+          TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
+
+          def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
+            @divider = divider
+            @as = as
+
+            @system_arguments = system_arguments
+            @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+            @system_arguments[:tag] = :li if list? && divider?
+            @system_arguments[:role] ||= :menuitem
+            @system_arguments[:role] = :separator if divider
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "dropdown-item" => !divider,
+              "dropdown-divider" => divider
+            )
+          end
+
+          def call
+            component = if BUTTON_TAGS.include?(@system_arguments[:tag])
+                          # rubocop:disable Yattho/ComponentNameMigration
+                          Yattho::ButtonComponent.new(scheme: :link, **@system_arguments)
+                          # rubocop:enable Yattho/ComponentNameMigration
+                        else
+                          Yattho::BaseComponent.new(**@system_arguments)
+                        end
+
+            # divider has no content
+            render(component) if divider?
+
+            render(component) { content }
+          end
+
+          def divider?
+            @divider
+          end
+
+          def list?
+            @as == :list
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/dropdown/menu.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element'

data/app/components/yattho/alpha/dropdown.css

@@ -0,0 +1,264 @@
+/* dropdown */
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: solid;
+  border-width: var(--yattho-borderWidth-thicker, 4px) var(--yattho-borderWidth-thicker, 4px) 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+** way the menu should render from the element triggering it. */
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: var(--yattho-control-small-paddingBlock, 4px);
+  padding-bottom: var(--yattho-control-small-paddingBlock, 4px);
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-canvas-overlay);
+  background-clip: padding-box;
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-large);
+}
+
+.dropdown-menu::before,
+  .dropdown-menu::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+/* caret border */
+
+.dropdown-menu::before {
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+/* caret background (should match dropdown background) */
+
+.dropdown-menu::after {
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+.dropdown-menu > ul {
+    list-style: none;
+  }
+
+.dropdown-menu-no-overflow {
+  width: auto;
+}
+
+.dropdown-menu-no-overflow .dropdown-item {
+    padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+    overflow: visible;
+    text-overflow: inherit;
+  }
+
+/* Dropdown items (can be links or buttons) */
+
+.dropdown-item {
+  display: block;
+  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-item:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+  }
+
+.dropdown-item:hover > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+.dropdown-item:hover [class*='color-fg-'] {
+      color: inherit !important;
+    }
+
+.dropdown-item:hover > .Label {
+      color: inherit !important;
+    }
+
+.dropdown-item:hover > .Label {
+      border-color: currentcolor;
+    }
+
+.dropdown-item.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: var(--yattho-stack-gap-condensed, 8px) 0;
+  border-top: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.dropdown-header {
+  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--yattho-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+/* Directional classes
+**
+** Move the menu and the caret attached to it. Requires at least one of these on
+** the `.dropdown-menu` element. */
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: 8px;
+}
+
+.dropdown-menu-w::before {
+    top: 10px;
+    right: -16px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-border-default);
+  }
+
+.dropdown-menu-w::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-canvas-overlay);
+  }
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: 8px;
+}
+
+.dropdown-menu-e::before {
+    top: 10px;
+    left: -16px;
+    border-color: transparent;
+    border-right-color: var(--color-border-default);
+  }
+
+.dropdown-menu-e::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--color-canvas-overlay);
+  }
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 3px;
+}
+
+.dropdown-menu-ne::before,
+  .dropdown-menu-ne::after {
+    top: auto;
+    right: auto;
+  }
+
+.dropdown-menu-ne::before {
+    bottom: -8px;
+    left: 9px;
+    border-top: 8px solid var(--color-border-default);
+    border-right: 8px solid transparent;
+    border-bottom: 0;
+    border-left: 8px solid transparent;
+  }
+
+.dropdown-menu-ne::after {
+    bottom: -7px;
+    left: 10px;
+    border-top: 7px solid var(--color-canvas-overlay);
+    border-right: 7px solid transparent;
+    border-bottom: 0;
+    border-left: 7px solid transparent;
+  }
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+}
+
+.dropdown-menu-s::before {
+    top: -16px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+.dropdown-menu-s::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+}
+
+.dropdown-menu-sw::before {
+    top: -16px;
+    right: 9px;
+    left: auto;
+  }
+
+.dropdown-menu-sw::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+
+.dropdown-menu-se::before {
+    top: -16px;
+    left: 9px;
+  }
+
+.dropdown-menu-se::after {
+    top: -14px;
+    left: 10px;
+  }

data/app/components/yattho/alpha/dropdown.css.json

@@ -0,0 +1 @@
+{"name":"alpha/dropdown","selectors":[".dropdown",".dropdown-caret",".dropdown-menu",".dropdown-menu::before","\n  .dropdown-menu::after",".dropdown-menu::after",".dropdown-menu > ul",".dropdown-menu-no-overflow",".dropdown-menu-no-overflow .dropdown-item",".dropdown-item",".dropdown-item:hover",".dropdown-item:hover > .octicon",".dropdown-item:hover [class*='color-fg-']",".dropdown-item:hover > .Label",".dropdown-item.btn-link",".dropdown-signout",".dropdown-divider",".dropdown-header",".dropdown-item[aria-checked='false'] .octicon-check",".dropdown-menu-w",".dropdown-menu-w::before",".dropdown-menu-w::after",".dropdown-menu-e",".dropdown-menu-e::before",".dropdown-menu-e::after",".dropdown-menu-ne",".dropdown-menu-ne::before","\n  .dropdown-menu-ne::after",".dropdown-menu-ne::after",".dropdown-menu-s",".dropdown-menu-s::before",".dropdown-menu-s::after",".dropdown-menu-sw",".dropdown-menu-sw::before",".dropdown-menu-sw::after",".dropdown-menu-se::before",".dropdown-menu-se::after"]}

data/app/components/yattho/alpha/dropdown.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"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","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thicker, 4px) var(--yattho-borderWidth-thicker, 4px) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  padding-top: var(--yattho-control-small-paddingBlock, 4px);\n  padding-bottom: var(--yattho-control-small-paddingBlock, 4px);\n  margin-top: 2px;\n  list-style: none;\n  background-color: var(--color-canvas-overlay);\n  background-clip: padding-box;\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-large);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    border: 8px solid transparent;\n    border-bottom-color: var(--color-border-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\n  }\n\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  overflow: hidden;\n  color: var(--color-fg-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--color-fg-on-emphasis);\n    text-decoration: none;\n    background-color: var(--color-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  margin: var(--yattho-stack-gap-condensed, 8px) 0;\n  border-top: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.dropdown-header {\n  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--yattho-text-body-size-small, 12px);\n  color: var(--color-fg-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: 8px;\n\n  &::before {\n    top: 10px;\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: 11px;\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--color-canvas-overlay);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: 8px;\n\n  &::before {\n    top: 10px;\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: 11px;\n    left: -14px;\n    border-color: transparent;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 3px;\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    bottom: -8px;\n    left: 9px;\n    border-top: 8px solid var(--color-border-default);\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    bottom: -7px;\n    left: 10px;\n    border-top: 7px solid var(--color-canvas-overlay);\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    top: -16px;\n    right: 9px;\n    left: auto;\n  }\n\n  &::after {\n    top: -14px;\n    right: 10px;\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    top: -16px;\n    left: 9px;\n  }\n\n  &::after {\n    top: -14px;\n    left: 10px;\n  }\n}"]}

data/app/components/yattho/alpha/dropdown.d.ts

@@ -0,0 +1 @@
+import './dropdown/menu';

data/app/components/yattho/alpha/dropdown.html.erb

@@ -0,0 +1,8 @@
+<%= render(Yattho::Beta::Details.new(**@system_arguments)) do |component| %>
+  <% component.with_summary(**@button_arguments) do %>
+    <%= button %>
+  <% end %>
+  <% component.with_body do %>
+    <%= menu %>
+  <% end %>
+<% end %>

data/app/components/yattho/alpha/dropdown.js

@@ -0,0 +1 @@
+import './dropdown/menu';

data/app/components/yattho/alpha/dropdown.pcss

@@ -0,0 +1,260 @@
+/* dropdown */
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: solid;
+  border-width: var(--yattho-borderWidth-thicker, 4px) var(--yattho-borderWidth-thicker, 4px) 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+** way the menu should render from the element triggering it. */
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: var(--yattho-control-small-paddingBlock, 4px);
+  padding-bottom: var(--yattho-control-small-paddingBlock, 4px);
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-canvas-overlay);
+  background-clip: padding-box;
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  /* caret border */
+  &::before {
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  /* caret background (should match dropdown background) */
+  &::after {
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+  & > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  & .dropdown-item {
+    padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+/* Dropdown items (can be links or buttons) */
+.dropdown-item {
+  display: block;
+  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    & > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+    & [class*='color-fg-'] {
+      color: inherit !important;
+    }
+
+    & > .Label {
+      color: inherit !important;
+      border-color: currentcolor;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: var(--yattho-stack-gap-condensed, 8px) 0;
+  border-top: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.dropdown-header {
+  padding: var(--yattho-control-small-paddingBlock, 4px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--yattho-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+/* Directional classes
+**
+** Move the menu and the caret attached to it. Requires at least one of these on
+** the `.dropdown-menu` element. */
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: 8px;
+
+  &::before {
+    top: 10px;
+    right: -16px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: 8px;
+
+  &::before {
+    top: 10px;
+    left: -16px;
+    border-color: transparent;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -8px;
+    left: 9px;
+    border-top: 8px solid var(--color-border-default);
+    border-right: 8px solid transparent;
+    border-bottom: 0;
+    border-left: 8px solid transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    border-top: 7px solid var(--color-canvas-overlay);
+    border-right: 7px solid transparent;
+    border-bottom: 0;
+    border-left: 7px solid transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -16px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -16px;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -16px;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}