primer_view_components 0.6.0 → 0.7.0

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

@@ -62,53 +62,6 @@ module Primer
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Default
-      #   @description
-      #     Labels are stacked by default.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
-      #
-      # @example With inline label
-      #   @description
-      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
-      #
-      # @example With non-visible label
-      #   @description
-      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
-      #
-      # @example With icon
-      #   @description
-      #     To display a search icon, set `with_icon` to `true`.
-      #   @code
-      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
-      #
-      # @example With icon and non-visible label
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
-      #
-      # @example With clear button
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
-      #
-      # @example With custom classes for the input
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
-      #     <% component.with_input(classes: "custom-class") %>
-      #   <% end %>
-      #
-      # @example With custom classes for the results
-      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
-      #     <% component.with_results(classes: "custom-class") do %>
-      #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
-      #         Apple
-      #       <% end %>
-      #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
-      #         Orange
-      #       <% end %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param label_text [String] The label of the input.
       # @param src [String] The route to query.
       # @param input_id [String] Id of the input element.

data/app/components/primer/alpha/banner.css

@@ -1 +1 @@
-.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}
+.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}

data/app/components/primer/alpha/banner.css.map

@@ -1 +1 @@
-{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,+IAA2F,CAC3F,gHAAqE,CACrE,4CAAyC,CAHzC,oDAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,kDACF,CAEA,wBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,gDACE,wDACF,CAGF,sBAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,8CACE,kDACF,CAGF,wBAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,gDACE,oDACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,+IAA2F,CAC3F,gHAAqE,CACrE,gDAAyC,CAHzC,oDAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,kDACF,CAEA,wBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,gDACE,wDACF,CAGF,sBAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,8CACE,kDACF,CAGF,wBAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,gDACE,oDACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--fgColor-accent);\n  }\n\n  &.Banner--warning {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n    border-color: var(--borderColor-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-attention);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n    border-color: var(--borderColor-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-danger);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--fgColor-default);\n    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n    border-color: var(--borderColor-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--fgColor-success);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

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

@@ -55,37 +55,6 @@ module Primer
         :hide
       ].freeze
 
-      # @example Schemes
-      #   <div style="display: grid; row-gap: 15px">
-      #     <%= render(Primer::Alpha::Banner.new) { "This is a banner message!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
-      #     <%= render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
-      #   </div>
-      #
-      # @example Full width
-      #   <%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
-      #
-      # @example Dismissible
-      #   <%= render(Primer::Alpha::Banner.new(dismissible: :remove)) { "This is a dismissible banner!" } %>
-      #
-      # @example Custom icon
-      #   <%= render(Primer::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
-      #
-      # @example With action button
-      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
-      #     This is a banner with an action button!
-      #     <% component.with_action_button(size: :small) { "Take action" } %>
-      #   <% end %>
-      #
-      # @example With custom action
-      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
-      #     Comment saved!
-      #     <% component.with_action_content do %>
-      #       <%= render(Primer::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param full [Boolean] Whether the component should take up the full width of the screen.
       # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
       # @param dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %>

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

@@ -26,18 +26,6 @@ module Primer
       DEFAULT_TYPE = :button
       TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
 
-      # @example Schemes
-      #   <%= render(Primer::Alpha::ButtonMarketing.new(mr: 2)) { "Default" } %>
-      #   <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :primary, mr: 2)) { "Primary" } %>
-      #   <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" } %>
-      #   <div class="color-bg-emphasis">
-      #     <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" } %>
-      #   </div>
-      #
-      # @example Sizes
-      #   <%= render(Primer::Alpha::ButtonMarketing.new(mr: 2)) { "Default" } %>
-      #   <%= render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" } %>
-      #
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::SCHEME_OPTIONS) %>
       # @param variant [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::VARIANT_OPTIONS) %>
       # @param tag [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::TAG_OPTIONS) %>

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

@@ -1 +1 @@
-.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,12px);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side-whenNarrow{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
+.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--borderRadius-large,.75rem);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--borderRadius-large,.75rem);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--borderRadius-large,.75rem);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--borderRadius-large,.75rem);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side-whenNarrow{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,.75rem);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,.75rem);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,.75rem);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--borderRadius-large,.75rem);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted));bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}

data/app/components/primer/alpha/dialog.css.map

@@ -1 +1 @@
-{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.Overlay {\n  display: flex;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n\n  &.Overlay--motion-scaleFade {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--fgColor-default);\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--stack-padding-condensed);\n    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n    & + .Overlay-body {\n      padding-top: var(--stack-padding-normal);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--stack-gap-condensed);\n\n        & .Overlay-title {\n          font-size: var(--text-title-size-medium);\n        }\n\n        & .Overlay-description {\n          font-size: var(--text-body-size-medium);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed);\n    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--stack-gap-condensed);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n        var(--stack-gap-condensed);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--control-small-gap);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--text-body-size-medium);\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--text-body-size-small);\n        font-weight: var(--base-text-weight-normal);\n        color: var(--fgColor-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--stack-padding-normal);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--text-body-size-medium);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--stack-padding-condensed);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--stack-padding-normal);\n    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--stack-gap-condensed);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: 0;\n  color: var(--fgColor-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--button-default-bgColor-hover);\n    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--borderWidth-thin) solid transparent;\n  }\n}\n\n@define-mixin Overlay-backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 999;\n  display: flex;\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n@define-mixin Overlay-backdrop--transparent {\n  position: absolute;\n  z-index: 999;\n  background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n  @mixin Overlay-backdrop;\n\n  align-items: center;\n  justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--transparent;\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n  @mixin Overlay-backdrop;\n\n  /* default left */\n  align-items: center;\n  justify-content: left;\n\n  &.Overlay-backdrop--placement-left$(responsiveVariant) {\n    align-items: center;\n    justify-content: left;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--borderRadius-large);\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-right$(responsiveVariant) {\n    align-items: center;\n    justify-content: right;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--borderRadius-large);\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n    align-items: end;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      width: 100vw;\n      height: auto;\n      max-height: calc(100vh - 2rem);\n      border-radius: var(--borderRadius-large);\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-top$(responsiveVariant) {\n    align-items: start;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      border-radius: var(--borderRadius-large);\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n      }\n    }\n  }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n  @mixin Overlay-backdrop;\n\n  & .Overlay {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n  @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n  @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n  @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay-backdrop--center-whenNarrow {\n    @mixin Overlay-backdrop--center;\n  }\n\n  .Overlay-backdrop--anchor-whenNarrow {\n    @mixin Overlay-backdrop--anchor;\n  }\n\n  .Overlay-backdrop--side-whenNarrow {\n    @mixin Overlay-backdrop--side -whenNarrow;\n  }\n\n  .Overlay-backdrop--full-whenNarrow {\n    @mixin Overlay-backdrop--full;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n"]}
+{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"AAEA,iBACE,sBACF,CAEA,2BACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAChB,iBAEF,CAEA,SAOE,mEAAwC,CACxC,8CAAwC,CACxC,mEAAwC,CARxC,YAAa,CAKb,qBAAsB,CAFtB,wDAA0D,CAD1D,eAAgB,CAOhB,SAAU,CALV,kBAAmB,CAHnB,4CAiHF,CAvGE,4BAGE,6BAA8B,CAD9B,4BAA6B,CAD7B,eAGF,CAEA,4BAEE,YAAa,CADb,WAEF,CAEA,8BACE,qBAAsB,CAEtB,6BACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,sCACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,uCACE,sBAAuB,CACvB,qBACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,WACF,CAGA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,6BACE,UACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,gCACE,6BACF,CAKE,yDADF,mCAEI,0FAEJ,CADE,CAIJ,qCACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAGA,cAIE,WAAY,CAFZ,aAGF,CAEA,8BANE,YAAa,CAEb,qBAqEF,CAjEA,gBAIE,oDAA6B,CAH7B,SAgEF,CA3DE,wCAEE,6HAAiF,CADjF,mDAMF,CAHE,sDACE,4CACF,CAKE,oFACE,oCASF,CAPE,mGACE,+CACF,CAEA,yGACE,8CACF,CAKN,2CAEE,sBAAuB,CADvB,YAAa,CAEb,oCAA+B,CAC/B,4GA6BF,CA3BE,+DACE,YAAa,CACb,kBAAmB,CACnB,oCACF,CAEA,8DACE,YAAa,CAGb,qBAAsB,CACtB,WAAY,CACZ,mCAA6B,CAJ7B,gIAkBF,CAZE,6EAEE,8CAAuC,CACvC,gDAA6C,CAF7C,QAGF,CAEA,mFAIE,gDAA2B,CAF3B,4CAAsC,CACtC,8CAA2C,CAF3C,QAIF,CAMN,cAME,WAAY,CADZ,8CAAuC,CAFvC,eAAgB,CAFhB,wCAAoC,CACpC,aAAc,CAEd,oBAYF,CARE,6CACE,4CAAuC,CACvC,aACF,CAEA,wCACE,SACF,CAIF,gBAEE,YAAa,CAEb,kBAAmB,CACnB,aAAc,CACd,cAAe,CAHf,4GAA8F,CAF9F,SA0BF,CAnBE,wCAEE,mHAAsE,CADtE,4CAEF,CAEA,2CAEE,oCAA+B,CAD/B,0BAEF,CAEA,4CAEE,oCAA+B,CAD/B,sBAEF,CAEA,yCAEE,oCAA+B,CAD/B,wBAEF,CAIF,qBAeE,qBAAsB,CANtB,wBAA6B,CAC7B,4DAAiD,CACjD,gDAAyC,CALzC,gDAA2B,CAC3B,cAAe,CALf,YAAa,CAcb,aAAc,CAZd,+BAA2B,CAC3B,SAAU,CASV,oBAAqB,CAbrB,iBAAkB,CAWlB,sCAA6C,CAC7C,uDAA0D,CAL1D,wBAAiB,CAAjB,gBAAiB,CALjB,8BAyBF,CAVE,sDAEE,8EAAqD,CACrD,6GACF,CAGA,kCACE,4DACF,CAgIF,0BApGE,kBAAmB,CAjBnB,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAmBb,sBAAuB,CArBvB,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAyHF,CAEA,0BAnHE,wBAA6B,CAF7B,iBAAkB,CAClB,WAsHF,CAEA,wBA7HE,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAiIF,CA7FE,iFAHA,kBAAmB,CACnB,oBAiBA,CAXE,kEAGE,8CAAwC,CAExC,2BAA4B,CAD5B,wBAAyB,CAHzB,YAAa,CACb,gBAQF,CAHE,yDAPF,kEAQI,8FAEJ,CADE,CAIJ,0DACE,kBAAmB,CACnB,qBAaF,CAXE,mEAGE,8CAAwC,CAExC,4BAA6B,CAD7B,yBAA0B,CAH1B,YAAa,CACb,gBAQF,CAHE,yDAPF,mEAQI,6FAEJ,CADE,CAIJ,2DACE,eAAgB,CAChB,sBAcF,CAZE,oEAIE,8CAAwC,CAExC,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,6BAA8B,CAF9B,WAUF,CAHE,yDARF,oEASI,yFAEJ,CADE,CAIJ,wDACE,iBAAkB,CAClB,sBAWF,CATE,iEACE,8CAAwC,CACxC,wBAAyB,CACzB,yBAKF,CAHE,yDALF,iEAMI,2FAEJ,CADE,CAgCN,wBAjIE,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAqIF,CAzBE,iCAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAuBF,yBACE,qCAxHA,kBAAmB,CAjBnB,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAmBb,sBAAuB,CArBvB,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WA6IA,CAEA,qCAvIA,wBAA6B,CAF7B,iBAAkB,CAClB,WA0IA,CAEA,mCAjJA,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAqJA,CAjHA,kHAHA,kBAAmB,CACnB,oBAiBA,CAXE,mGAGE,8CAAwC,CAExC,2BAA4B,CAD5B,wBAAyB,CAHzB,YAAa,CACb,gBAQF,CAHE,yDAPF,mGAQI,8FAEJ,CADE,CAIJ,gFACE,kBAAmB,CACnB,qBAaF,CAXE,oGAGE,8CAAwC,CAExC,4BAA6B,CAD7B,yBAA0B,CAH1B,YAAa,CACb,gBAQF,CAHE,yDAPF,oGAQI,6FAEJ,CADE,CAIJ,iFACE,eAAgB,CAChB,sBAcF,CAZE,qGAIE,8CAAwC,CAExC,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,6BAA8B,CAF9B,WAUF,CAHE,yDARF,qGASI,yFAEJ,CADE,CAIJ,8EACE,iBAAkB,CAClB,sBAWF,CATE,kGACE,8CAAwC,CACxC,wBAAyB,CACzB,yBAKF,CAHE,yDALF,kGAMI,2FAEJ,CADE,CAoDJ,mCArJA,2EAA6E,CAJ7E,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAyJA,CA7CA,4CAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAuCF,CAEA,qCACE,GACE,2BACF,CACF,CAEA,mCACE,GACE,0BACF,CACF,CAEA,wCACE,GACE,2BACF,CACF,CAEA,uCACE,GACE,0BACF,CACF","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.Overlay {\n  display: flex;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n\n  &.Overlay--motion-scaleFade {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--fgColor-default);\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--stack-padding-condensed);\n    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n    & + .Overlay-body {\n      padding-top: var(--stack-padding-normal);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--stack-gap-condensed);\n\n        & .Overlay-title {\n          font-size: var(--text-title-size-medium);\n        }\n\n        & .Overlay-description {\n          font-size: var(--text-body-size-medium);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed);\n    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--stack-gap-condensed);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n        var(--stack-gap-condensed);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--control-small-gap);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--text-body-size-medium);\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--text-body-size-small);\n        font-weight: var(--base-text-weight-normal);\n        color: var(--fgColor-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--stack-padding-normal);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--text-body-size-medium);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--stack-padding-condensed);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--stack-padding-normal);\n    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--stack-gap-condensed);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: 0;\n  color: var(--fgColor-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--button-default-bgColor-hover);\n    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--borderWidth-thin) solid transparent;\n  }\n}\n\n@define-mixin Overlay-backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 999;\n  display: flex;\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n@define-mixin Overlay-backdrop--transparent {\n  position: absolute;\n  z-index: 999;\n  background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n  @mixin Overlay-backdrop;\n\n  align-items: center;\n  justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--transparent;\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n  @mixin Overlay-backdrop;\n\n  /* default left */\n  align-items: center;\n  justify-content: left;\n\n  &.Overlay-backdrop--placement-left$(responsiveVariant) {\n    align-items: center;\n    justify-content: left;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--borderRadius-large);\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-right$(responsiveVariant) {\n    align-items: center;\n    justify-content: right;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--borderRadius-large);\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n    align-items: end;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      width: 100vw;\n      height: auto;\n      max-height: calc(100vh - 2rem);\n      border-radius: var(--borderRadius-large);\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-top$(responsiveVariant) {\n    align-items: start;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      border-radius: var(--borderRadius-large);\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n      }\n    }\n  }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n  @mixin Overlay-backdrop;\n\n  & .Overlay {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n  @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n  @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n  @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay-backdrop--center-whenNarrow {\n    @mixin Overlay-backdrop--center;\n  }\n\n  .Overlay-backdrop--anchor-whenNarrow {\n    @mixin Overlay-backdrop--anchor;\n  }\n\n  .Overlay-backdrop--side-whenNarrow {\n    @mixin Overlay-backdrop--side -whenNarrow;\n  }\n\n  .Overlay-backdrop--full-whenNarrow {\n    @mixin Overlay-backdrop--full;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n"]}

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

@@ -97,23 +97,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :footer, "Footer"
 
-      # @example Dialog with Cancel and Submit buttons
-      #   @description
-      #     An ID is provided which enables wiring of the open and close buttons to the dialog.
-      #   @code
-      #     <%= render(Primer::Alpha::Dialog.new(
-      #       title: "Dialog Example",
-      #       id: "my-dialog",
-      #     )) do |d| %>
-      #       <% d.with_show_button { "Show Dialog" } %>
-      #       <% d.with_body do %>
-      #         <p>Some content</p>
-      #       <% end %>
-      #       <% d.with_footer do %>
-      #         <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
-      #         <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
-      #       <% end %>
-      #     <% end %>
       # @param id [String] The id of the dialog.
       # @param title [String] Describes the content of the dialog.
       # @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.
@@ -150,7 +133,8 @@ module Primer
           @system_arguments, {
             aria: {
               disabled: true,
-              describedby: "#{@id}-title #{@id}-description"
+              labelledby: "#{@id}-title",
+              describedby: "#{@id}-description"
             }
           }
         )

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

@@ -1 +1 @@
-.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);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(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,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(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,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(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.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(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,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(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,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(--borderColor-default,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(--overlay-bgColor,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}
+.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);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(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,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(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,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(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.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(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,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(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,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(--borderColor-default,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(--overlay-bgColor,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.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,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,4CAAyC,CACzC,iEAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,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,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,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(--borderWidth-thicker) var(--borderWidth-thicker) 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(--control-small-paddingBlock);\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: 2px;\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-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(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\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(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\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(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-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(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-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(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--overlay-bgColor);\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(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    left: -14px;\n    border-color: transparent;\n    border-right-color: var(--overlay-bgColor);\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(--borderColor-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(--overlay-bgColor);\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,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,gDAAyC,CACzC,iEAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,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,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,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(--borderWidth-thicker) var(--borderWidth-thicker) 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(--control-small-paddingBlock);\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: 2px;\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-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(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\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(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\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(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-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(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-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(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--overlay-bgColor);\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(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    left: -14px;\n    border-color: transparent;\n    border-right-color: var(--overlay-bgColor);\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(--borderColor-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(--overlay-bgColor);\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/alpha/dropdown.rb

@@ -26,111 +26,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :menu, "Primer::Alpha::Dropdown::Menu"
 
-      # @example Default
-      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
-      #     <% component.with_button do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(header: "Options") do |menu|
-      #       menu.with_item { "Item 1" }
-      #       menu.with_item { "Item 2" }
-      #       menu.with_item { "Item 3" }
-      #     end %>
-      #   <% end %>
-      #
-      # @example With dividers
-      #
-      #   @description
-      #     Dividers can be used to separate a group of items. They don't have any content.
-      #   @code
-      #     <%= render(Primer::Alpha::Dropdown.new) do |component| %>
-      #       <% component.with_button do %>
-      #         Dropdown
-      #       <% end %>
-      #
-      #       <% component.with_menu(header: "Options") do |menu|
-      #         menu.with_item { "Item 1" }
-      #         menu.with_item { "Item 2" }
-      #         menu.with_item(divider: true)
-      #         menu.with_item { "Item 3" }
-      #         menu.with_item { "Item 4" }
-      #         menu.with_item(divider: true)
-      #         menu.with_item { "Item 5" }
-      #         menu.with_item { "Item 6" }
-      #       end %>
-      #     <% end %>
-      #
-      # @example With direction
-      #   <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
-      #     <% component.with_button do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(header: "Options", direction: :s) do |menu|
-      #       menu.with_item { "Item 1" }
-      #       menu.with_item { "Item 2" }
-      #       menu.with_item { "Item 3" }
-      #       menu.with_item { "Item 4" }
-      #     end %>
-      #   <% end %>
-      #
-      # @example With caret
-      #   <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component| %>
-      #     <% component.with_button do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(header: "Options") do |menu|
-      #       menu.with_item { "Item 1" }
-      #       menu.with_item { "Item 2" }
-      #       menu.with_item { "Item 3" }
-      #       menu.with_item { "Item 4" }
-      #     end %>
-      #   <% end %>
-      #
-      # @example Customizing the button
-      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
-      #     <% component.with_button(scheme: :primary, size: :small) do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(header: "Options") do |menu|
-      #       menu.with_item { "Item 1" }
-      #       menu.with_item { "Item 2" }
-      #       menu.with_item { "Item 3" }
-      #       menu.with_item { "Item 4" }
-      #     end %>
-      #   <% end %>
-      #
-      # @example Menu as list
-      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
-      #     <% component.with_button do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(as: :list, header: "Options") do |menu|
-      #       menu.with_item { "Item 1" }
-      #       menu.with_item { "Item 2" }
-      #       menu.with_item(divider: true)
-      #       menu.with_item { "Item 3" }
-      #       menu.with_item { "Item 4" }
-      #     end %>
-      #   <% end %>
-      #
-      # @example Customizing menu items
-      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
-      #     <% component.with_button do %>
-      #       Dropdown
-      #     <% end %>
-      #
-      #     <% component.with_menu(header: "Options") do |menu|
-      #       menu.with_item(tag: :button) { "Item 1" }
-      #       menu.with_item(classes: "custom-class") { "Item 2" }
-      #       menu.with_item { "Item 3" }
-      #     end %>
-      #   <% end %>
-      #
       # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
       # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -10,17 +10,6 @@ module Primer
       # Note that this slot takes precedence over the `caption:` argument in the constructor.
       renders_one :caption
 
-      # @example Default
-      #   <%= render(Primer::Alpha::FormControl.new(label: "Best character")) do |component| %>
-      #     <% component.with_input do |input_arguments| %>
-      #       <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
-      #         <% seg.with_item(label: "Han Solo") %>
-      #         <% seg.with_item(label: "Luke Skywalker") %>
-      #         <% seg.with_item(label: "Leia Organa") %>
-      #       <% end %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param label [String] Label text displayed above the input.
       # @param caption [String] Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided.
       # @param validation_message [String] A string displayed in red between the caption and the input indicating the input's contents are invalid.

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

@@ -9,15 +9,6 @@ module Primer
     #   * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
     #   * Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new("aria-label": "Expand next part")`
     class HellipButton < Primer::Component
-      # @example Default
-      #   <%= render(Primer::Alpha::HellipButton.new("aria-label": "No effect")) %>
-      #
-      # @example Inline
-      #   <%= render(Primer::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %>
-      #
-      # @example Styling the button
-      #   <%= render(Primer::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>
-      #
       # @param inline [Boolean] Whether or not the button is inline.
       # @param disabled [Boolean] Whether or not the button is disabled.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -12,15 +12,6 @@ module Primer
     class HiddenTextExpander < Primer::Component
       status :alpha
 
-      # @example Default
-      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
-      #
-      # @example Inline
-      #   <%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
-      #
-      # @example Styling the button
-      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
-      #
       # @param inline [Boolean] Whether or not the expander is inline.
       # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -9,22 +9,6 @@ module Primer
     class Image < Primer::Component
       status :alpha
 
-      # @example Default
-      #
-      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
-      #
-      # @example Helper
-      #
-      #   <%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>
-      #
-      # @example Lazy loading
-      #
-      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
-      #
-      # @example Custom size
-      #
-      #   <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
-      #
       # @param src [String] The source url of the image.
       # @param alt [String] Specifies an alternate text for the image.
       # @param lazy [Boolean] Whether or not to lazily load the image.

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

@@ -14,17 +14,6 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # @example Simple cropper
-      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
-      #
-      # @example Square cropper
-      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
-      #
-      # @example Cropper with a custom loader
-      #   <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
-      #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
-      #   <% end %>
-      #
       # @param src [String] The path of the image to crop.
       # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>