primer_view_components 0.0.111 → 0.0.113

data/app/components/primer/alpha/dialog.pcss

@@ -0,0 +1,484 @@
+/* Overlay */
+
+.Overlay--hidden {
+  display: none !important;
+}
+
+.Overlay--visibilityHidden {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.Overlay {
+  display: flex;
+  width: min(var(--overlay-width), 100vw - 2rem);
+  min-width: 192px;
+  max-height: min(calc(100vh - 2rem), var(--overlay-height));
+  white-space: normal;
+  flex-direction: column;
+  background-color: var(--color-canvas-overlay);
+  border-radius: var(--primer-borderRadius-large, 12px);
+  box-shadow: var(--color-overlay-shadow);
+  opacity: 1;
+
+  &.Overlay--size-auto {
+    min-width: 192px;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-full {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.Overlay--size-xsmall {
+    --overlay-width: 192px;
+
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-small {
+    --overlay-height: 256px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-small-portrait {
+    --overlay-height: 432px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-medium {
+    --overlay-height: 320px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-medium-portrait {
+    --overlay-height: 600px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-large {
+    --overlay-height: 432px;
+    --overlay-width: 640px;
+  }
+
+  &.Overlay--size-xlarge {
+    --overlay-height: 600px;
+    --overlay-width: 960px;
+  }
+
+  &.Overlay--height-auto {
+    height: auto;
+  }
+
+  /* start deprecate in favor of Alpha::Dialog */
+  &.Overlay--height-xsmall {
+    height: min(192px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-small {
+    height: min(256px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-medium {
+    height: min(320px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-large {
+    height: min(432px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-xlarge {
+    height: min(600px, 100vh - 2rem);
+  }
+
+  &.Overlay--width-auto {
+    width: auto;
+  }
+
+  &.Overlay--width-small {
+    width: min(256px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-medium {
+    width: min(320px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-large {
+    width: min(480px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-xlarge {
+    width: min(640px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-xxlarge {
+    width: min(960px, 100vw - 2rem);
+  }
+
+  /* end deprecate */
+
+  &.Overlay--motion-scaleFade {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+    }
+  }
+}
+
+@keyframes Overlay--motion-scaleFade {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* for <form> element that wraps entire contents of overlay */
+.Overlay-form {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.Overlay-header {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+
+  &.Overlay-header--divided {
+    padding-bottom: var(--primer-stack-padding-condensed, 8px);
+    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);
+
+    & + .Overlay-body {
+      padding-top: var(--primer-stack-padding-normal, 16px);
+    }
+  }
+
+  &.Overlay-header--large {
+    & .Overlay-headerContentWrap {
+      & .Overlay-titleWrap {
+        gap: var(--primer-stack-gap-condensed, 8px);
+
+        & .Overlay-title {
+          font-size: var(--primer-text-title-size-medium, 20px);
+        }
+
+        & .Overlay-description {
+          font-size: var(--primer-text-body-size-medium, 14px);
+        }
+      }
+    }
+  }
+
+  & .Overlay-headerContentWrap {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--primer-stack-gap-condensed, 8px);
+    padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);
+
+    & .Overlay-actionWrap {
+      display: flex;
+      flex-direction: row;
+      gap: var(--primer-stack-gap-condensed, 8px);
+    }
+
+    & .Overlay-titleWrap {
+      display: flex;
+      padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--primer-control-small-gap, 4px);
+
+      & .Overlay-title {
+        margin: 0;
+        font-size: var(--primer-text-body-size-medium, 14px);
+        font-weight: var(--base-text-weight-semibold, 600);
+      }
+
+      & .Overlay-description {
+        margin: 0;
+        font-size: var(--primer-text-body-size-small, 12px);
+        font-weight: var(--base-text-weight-normal, 400);
+        color: var(--color-fg-muted);
+      }
+    }
+  }
+}
+
+/* generic body content slot */
+.Overlay-body {
+  padding: var(--primer-stack-padding-normal, 16px);
+  padding-top: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  font-size: var(--primer-text-body-size-medium, 14px);
+  flex-grow: 1;
+
+  &.Overlay-body--paddingCondensed {
+    padding: var(--primer-stack-padding-condensed, 8px);
+    padding-top: 0;
+  }
+
+  &.Overlay-body--paddingNone {
+    padding: 0;
+  }
+}
+
+/* generic footer slot */
+.Overlay-footer {
+  z-index: 1;
+  display: flex;
+  padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+
+  &.Overlay-footer--divided {
+    padding-top: var(--primer-stack-padding-normal, 16px);
+    box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+  }
+
+  &.Overlay-footer--alignStart {
+    justify-content: flex-start;
+    gap: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  &.Overlay-footer--alignCenter {
+    justify-content: center;
+    gap: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  &.Overlay-footer--alignEnd {
+    justify-content: flex-end;
+    gap: var(--primer-stack-gap-condensed, 8px);
+  }
+}
+
+/* TODO: replace with refactored IconButton */
+.Overlay-closeButton {
+  position: relative;
+  display: grid;
+  width: var(--base-size-32, 32px);
+  height: var(--base-size-32, 32px);
+  padding: 0;
+  color: var(--color-fg-muted);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  place-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-btn-hover-bg);
+    border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
+  }
+
+  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
+  &.close-button {
+    border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  }
+}
+
+@define-mixin Overlay-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  background-color: var(--color-neutral-muted);
+}
+
+@define-mixin Overlay-backdrop--transparent {
+  position: absolute;
+  z-index: 999;
+  background-color: transparent;
+}
+
+/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
+
+/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
+
+/* center */
+@define-mixin Overlay-backdrop--center {
+  @mixin Overlay-backdrop;
+
+  align-items: center;
+  justify-content: center;
+}
+
+/* anchor */
+@define-mixin Overlay-backdrop--anchor {
+  @mixin Overlay-backdrop--transparent;
+
+  & .Overlay {
+    width: auto;
+  }
+}
+
+/* anchor side(s) */
+@define-mixin Overlay-backdrop--side $responsiveVariant {
+  @mixin Overlay-backdrop;
+
+  /* default left */
+  align-items: center;
+  justify-content: left;
+
+  &.Overlay-backdrop--placement-left$(responsiveVariant) {
+    align-items: center;
+    justify-content: left;
+
+    & > .Overlay$(responsiveVariant) {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--primer-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-right$(responsiveVariant) {
+    align-items: center;
+    justify-content: right;
+
+    & > .Overlay$(responsiveVariant) {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--primer-borderRadius-large, 12px);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {
+    align-items: end;
+    justify-content: center;
+
+    & > .Overlay$(responsiveVariant) {
+      width: 100vw;
+      height: auto;
+      max-height: calc(100vh - 2rem);
+      border-radius: var(--primer-borderRadius-large, 12px);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-top$(responsiveVariant) {
+    align-items: start;
+    justify-content: center;
+
+    & > .Overlay$(responsiveVariant) {
+      border-radius: var(--primer-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
+      }
+    }
+  }
+}
+
+/* full width */
+@define-mixin Overlay-backdrop--full {
+  @mixin Overlay-backdrop;
+
+  & .Overlay {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: unset !important;
+    flex-grow: 1;
+  }
+}
+
+/* Overlay variant classnames */
+.Overlay-backdrop--center {
+  @mixin Overlay-backdrop--center;
+}
+
+.Overlay-backdrop--anchor {
+  @mixin Overlay-backdrop--anchor;
+}
+
+.Overlay-backdrop--side {
+  @mixin Overlay-backdrop--side;
+}
+
+.Overlay-backdrop--full {
+  @mixin Overlay-backdrop--full;
+}
+
+/* responsive variants */
+
+/* --primer-viewportRange-narrowLandscape */
+@media (max-width: 767px) {
+  .Overlay-backdrop--center-whenNarrow {
+    @mixin Overlay-backdrop--center;
+  }
+
+  .Overlay-backdrop--anchor-whenNarrow {
+    @mixin Overlay-backdrop--anchor;
+  }
+
+  .Overlay-backdrop--side-whenNarrow {
+    @mixin Overlay-backdrop--side -whenNarrow;
+  }
+
+  .Overlay-backdrop--full-whenNarrow {
+    @mixin Overlay-backdrop--full;
+  }
+}
+
+@keyframes Overlay--motion-slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}

data/app/components/primer/alpha/dialog.rb

@@ -18,6 +18,9 @@ module Primer
     #   `aria-labelledby` relationship between the title and the unique id of
     #   the dialog.
     class Dialog < Primer::Component
+      status :alpha
+      audited_at "2022-10-10"
+
       DEFAULT_SIZE = :medium
       SIZE_MAPPINGS = {
         :small => "Overlay--size-small-portrait",

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

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Dropdown
+      # This component is part of `Dropdown` and should not be
+      # used as a standalone component.
+      class Menu < Primer::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(Primer::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|
+          Primer::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(Primer::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 < Primer::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])
+                          Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
+                        else
+                          Primer::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/primer/alpha/dropdown.css

@@ -0,0 +1 @@
+.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--primer-borderWidth-thicker,4px) var(--primer-borderWidth-thicker,4px) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-large);left:0;list-style:none;margin-top:2px;padding-bottom:var(--primer-control-small-paddingBlock,4px);padding-top:var(--primer-control-small-paddingBlock,4px);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:inherit}.dropdown-item{color:var(--color-fg-default);display:block;overflow:hidden;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);display:block;height:0;margin:var(--primer-stack-gap-condensed,8px) 0}.dropdown-header{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--color-border-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--color-canvas-overlay);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--color-border-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--color-canvas-overlay);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--color-border-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--color-canvas-overlay);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}

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

@@ -0,0 +1 @@
+{"name":"alpha/dropdown","selectors":[".dropdown",".dropdown-caret",".dropdown-menu",".dropdown-menu:after",".dropdown-menu:before",".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:after",".dropdown-menu-ne:before",".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/primer/{dropdown.css.map → alpha/dropdown.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,0FAA6F,CAF7F,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,4CAA6C,CAE7C,2EAA6E,CAC7E,mDAAqD,CACrD,oCAAqC,CAXrC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,2DAA6D,CAD7D,wDAA0D,CAL1D,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAAgD,CAAhD,mDACF,CAGA,qBAEE,sBAAgD,CAAhD,mDACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,6GAAgH,CAEhH,qBACF,CAIF,eAIE,6BAA8B,CAH9B,aAAc,CAEd,eAAgB,CADhB,mNAAwN,CAGxN,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,sEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,+EAAiF,CAHjF,aAAc,CACd,QAAS,CACT,8CAEF,CAEA,iBAGE,2BAA4B,CAD5B,iDAAmD,CADnD,6GAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","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(--primer-borderWidth-thicker, 4px) var(--primer-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(--primer-control-small-paddingBlock, 4px);\n  padding-bottom: var(--primer-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(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-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(--primer-control-small-paddingBlock, 4px) var(--primer-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(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-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-text-'] {\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(--primer-stack-gap-condensed, 8px) 0;\n  border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.dropdown-header {\n  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--primer-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}\n"]}
+{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,0FAA6F,CAF7F,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,4CAA6C,CAE7C,2EAA6E,CAC7E,mDAAqD,CACrD,oCAAqC,CAXrC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,2DAA6D,CAD7D,wDAA0D,CAL1D,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAAgD,CAAhD,mDACF,CAGA,qBAEE,sBAAgD,CAAhD,mDACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,6GAAgH,CAEhH,qBACF,CAIF,eAIE,6BAA8B,CAH9B,aAAc,CAEd,eAAgB,CADhB,mNAAwN,CAGxN,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,+EAAiF,CAHjF,aAAc,CACd,QAAS,CACT,8CAEF,CAEA,iBAGE,2BAA4B,CAD5B,iDAAmD,CADnD,6GAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","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(--primer-borderWidth-thicker, 4px) var(--primer-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(--primer-control-small-paddingBlock, 4px);\n  padding-bottom: var(--primer-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(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-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(--primer-control-small-paddingBlock, 4px) var(--primer-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(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-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(--primer-stack-gap-condensed, 8px) 0;\n  border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.dropdown-header {\n  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  font-size: var(--primer-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}\n"]}

data/app/components/primer/{dropdown.pcss → alpha/dropdown.pcss}

@@ -89,7 +89,7 @@
       opacity: 1;
     }
 
-    & [class*='color-text-'] {
+    & [class*='color-fg-'] {
       color: inherit !important;
     }