primer_view_components 0.1.6 → 0.1.8

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

@@ -3,9 +3,9 @@
 
 module Primer
   module Alpha
-    # The ActionMenu should be used when a user can select a single option triggering an action from a list of items. Primer will automatically nest an `Item` within a presentational `<li>` tag.
+    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.
     #
-    # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. If one isn't selected, a fallback `:span` will be used. To add functionality, use a `.js` class to create the functionality, or an `onclick` handler.
+    # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.
     #
     # @accessibility
     #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.
@@ -39,6 +39,9 @@ module Primer
       #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
       #      Copy Text
       #    <% end %>
+      #    <% c.with_item(href: "https://google.com", form_arguments: { name: "foo", value: "bar", method: :post }) do %>
+      #      Submit form
+      #    <% end %>
       #  <% end %>
       #
       # @example With caret
@@ -271,24 +274,50 @@ module Primer
       #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
       #  <% end %>
       #
+      # @example Using a single-select ActionMenu as a form input
+      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
+      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      #       <% menu.with_show_button { "Strategy" } %>
+      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Using a multi-select ActionMenu as a form input
+      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
+      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      #       <% menu.with_show_button { "Strategy" } %>
+      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
+      #     <% end %>
+      #   <% end %>
+      #
       # @param menu_id [String] Id of the menu.
       # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
       # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
+      # @param size [Symbol] <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
       # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
       # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
       # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
       # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
-      # @param select_variant [Symbol]. <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>.
+      # @param select_variant [Symbol] <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
       def initialize(
         menu_id: self.class.generate_id,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        size: Primer::Alpha::Overlay::DEFAULT_SIZE,
         src: nil,
         preload: DEFAULT_PRELOAD,
         dynamic_label: false,
         dynamic_label_prefix: nil,
         select_variant: DEFAULT_SELECT_VARIANT,
+        form_arguments: {},
         **system_arguments
       )
         @menu_id = menu_id
@@ -310,15 +339,23 @@ module Primer
           title: "Menu",
           visually_hide_title: true,
           anchor_align: anchor_align,
-          anchor_side: anchor_side
+          anchor_side: anchor_side,
+          size: size
         )
 
         @list = Primer::Alpha::ActionMenu::List.new(
           menu_id: @menu_id,
-          select_variant: select_variant
+          select_variant: select_variant,
+          form_arguments: form_arguments
         )
       end
 
+      # @!parse
+      #   # Button to activate the menu.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
+      #   renders_one(:show_button)
+
       # Button to activate the menu.
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
@@ -326,6 +363,12 @@ module Primer
         @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
       end
 
+      # @!parse
+      #   # Adds a new item to the list.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+      #   renders_many(:items)
+
       # Adds a new item to the list.
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
@@ -333,11 +376,6 @@ module Primer
         @list.with_item(**system_arguments, &block)
       end
 
-      # Retrieves the list of items.
-      def items
-        @list.items
-      end
-
       # Adds a divider to the list.
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `divider` slot.
@@ -350,11 +388,11 @@ module Primer
       def before_render
         content
 
-        raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && items.any?
+        raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && @list.items.any?
       end
 
       def render?
-        items.any? || @src.present?
+        @list.items.any? || @src.present?
       end
     end
   end

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

@@ -1 +1 @@
-.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-medium);font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--color-canvas-overlay);border:0;color:var(--color-fg-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}
+.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--color-canvas-overlay);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);box-shadow:var(--color-shadow-medium);font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--color-canvas-overlay);border:0;color:var(--color-fg-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}

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

@@ -1 +1 @@
-{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,mCAAoC,CAEpC,iDAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,sCAAuC,CACvC,2EAA6E,CAC7E,mDAAqD,CACrD,qCAAsC,CALtC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,4CAA6C,CAC7C,QAAS,CAPT,6BAA8B,CAK9B,cAAe,CAVf,aAAc,CAId,gDAAkD,CADlD,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--color-accent-fg);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--color-canvas-overlay);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--color-canvas-overlay);\n  border: 0;\n\n  &:hover {\n    color: var(--color-fg-on-emphasis);\n    text-decoration: none;\n    background-color: var(--color-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--color-fg-on-emphasis);\n    text-decoration: none;\n    background-color: var(--color-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n  border-color: var(--color-accent-fg);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
+{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,mCAAoC,CAEpC,iDAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,sCAAuC,CACvC,oEAAsE,CACtE,4CAA8C,CAC9C,qCAAsC,CALtC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,4CAA6C,CAC7C,QAAS,CAPT,6BAA8B,CAK9B,cAAe,CAVf,aAAc,CAId,gDAAkD,CADlD,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--color-accent-fg);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--color-canvas-overlay);\n  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--color-canvas-overlay);\n  border: 0;\n\n  &:hover {\n    color: var(--color-fg-on-emphasis);\n    text-decoration: none;\n    background-color: var(--color-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--color-fg-on-emphasis);\n    text-decoration: none;\n    background-color: var(--color-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n  border-color: var(--color-accent-fg);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}

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

@@ -69,8 +69,8 @@
   font-size: 13px;
   list-style: none;
   background: var(--color-canvas-overlay);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
   box-shadow: var(--color-shadow-medium);
 }
 

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

@@ -1 +1 @@
-.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color: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,8px);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,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.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(--primer-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-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(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}}
+.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--borderRadius-medium,6px);color: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,8px);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,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.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,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color: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,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACI,wDACJ,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,4CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,+DACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8, 8px);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n  border-radius: var(--primer-borderRadius-medium, 6px);\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, 8px) 0 0 var(--base-size-8, 8px);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4, 4px) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\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, 600);\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(--primer-controlStack-medium-gap-condensed, 8px);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--color-accent-fg);\n  }\n\n  &.Banner--warning {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n    border-color: var(--color-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-attention-fg);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n    border-color: var(--color-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-danger-fg);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n    border-color: var(--color-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-success-fg);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -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(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -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,uFAAyF,CACzF,gFAAoF,CACpF,4CAA8C,CAH9C,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,wDACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,4CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,wDACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,+DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,+DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8, 8px);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n  border-radius: var(--borderRadius-medium, 6px);\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, 8px) 0 0 var(--base-size-8, 8px);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4, 4px) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\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, 600);\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, 8px);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--color-accent-fg);\n  }\n\n  &.Banner--warning {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n    border-color: var(--color-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-attention-fg);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n    border-color: var(--color-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-danger-fg);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n    border-color: var(--color-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-success-fg);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -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, max(1px, 0.0625rem)) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

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

@@ -6,11 +6,11 @@
   padding: var(--base-size-8, 8px);
   color: var(--color-fg-default);
   background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
+  border-radius: var(--borderRadius-medium, 6px);
   grid-auto-flow: column;
   grid-template-areas: 'visual message actions close';
-  grid-template-columns: min-content 1fr minmax(0,auto) min-content;
+  grid-template-columns: min-content 1fr minmax(0, auto) min-content;
   grid-template-rows: min-content;
 
   /* `sm` breakpoint variantion */
@@ -22,7 +22,7 @@
     grid-template-rows: min-content min-content;
 
     & .Banner-actions {
-        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
+      margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
     }
   }
 
@@ -69,7 +69,7 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);
+    margin-left: var(--controlStack-medium-gap-condensed, 8px);
   }
 
   & .Banner-visual .octicon {
@@ -109,7 +109,7 @@
   /* Full-width */
 
   &.Banner--full {
-    margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
     border-right: 0;
     border-left: 0;
     border-radius: 0;
@@ -117,7 +117,7 @@
 
   @media (max-width: 767.98px) {
     &.Banner--full-whenNarrow {
-      margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
       border-right: 0;
       border-left: 0;
       border-radius: 0;

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(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow: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{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);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(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);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,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color: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(--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(--primer-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(--primer-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(--primer-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(--primer-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(--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(--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(--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(--primer-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(--primer-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(--primer-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(--primer-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(--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(--color-canvas-overlay);border-radius:var(--borderRadius-large,12px);box-shadow: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{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,8px);padding:var(--stack-gap-condensed,8px) var(--stack-gap-condensed,8px) 0 var(--stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,4px);padding:calc(var(--stack-gap-condensed, 8px)*.75) 0 calc(var(--stack-gap-condensed, 8px)*.75) var(--stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,14px);overflow-y:auto;padding:var(--stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,8px);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,16px) var(--stack-padding-normal,16px) var(--stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,1px) var(--color-border-default);padding-top:var(--stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,1px) solid #0000;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);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,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color: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(--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(--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(--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(--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(--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(--color-canvas-overlay);\n  border-radius: var(--primer-borderRadius-large, 12px);\n  box-shadow: var(--color-overlay-shadow);\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\n  &.Overlay-header--divided {\n    padding-bottom: var(--primer-stack-padding-condensed, 8px);\n    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n    & + .Overlay-body {\n      padding-top: var(--primer-stack-padding-normal, 16px);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--primer-stack-gap-condensed, 8px);\n\n        & .Overlay-title {\n          font-size: var(--primer-text-title-size-medium, 20px);\n        }\n\n        & .Overlay-description {\n          font-size: var(--primer-text-body-size-medium, 14px);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--primer-stack-gap-condensed, 8px);\n    padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--primer-stack-gap-condensed, 8px);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--primer-control-small-gap, 4px);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--primer-text-body-size-medium, 14px);\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--primer-text-body-size-small, 12px);\n        font-weight: var(--base-text-weight-normal, 400);\n        color: var(--color-fg-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--primer-stack-padding-normal, 16px);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--primer-stack-padding-condensed, 8px);\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(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--primer-stack-padding-normal, 16px);\n    box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--primer-stack-gap-condensed, 8px);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n  padding: 0;\n  color: var(--color-fg-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\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(--color-btn-hover-bg);\n    border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--primer-borderWidth-thin, 1px) 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(--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(--primer-borderRadius-large, 12px);\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(--primer-borderRadius-large, 12px);\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(--primer-borderRadius-large, 12px);\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(--primer-borderRadius-large, 12px);\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/* --primer-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":"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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(--color-canvas-overlay);\n  border-radius: var(--borderRadius-large, 12px);\n  box-shadow: var(--color-overlay-shadow);\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\n  &.Overlay-header--divided {\n    padding-bottom: var(--stack-padding-condensed, 8px);\n    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n    & + .Overlay-body {\n      padding-top: var(--stack-padding-normal, 16px);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--stack-gap-condensed, 8px);\n\n        & .Overlay-title {\n          font-size: var(--text-title-size-medium, 20px);\n        }\n\n        & .Overlay-description {\n          font-size: var(--text-body-size-medium, 14px);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed, 8px);\n    padding: var(--stack-gap-condensed, 8px) var(--stack-gap-condensed, 8px) 0 var(--stack-gap-condensed, 8px);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--stack-gap-condensed, 8px);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--stack-gap-condensed, 8px) * 0.75) 0 calc(var(--stack-gap-condensed, 8px) * 0.75)\n        var(--stack-gap-condensed, 8px);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--control-small-gap, 4px);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--text-body-size-medium, 14px);\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--text-body-size-small, 12px);\n        font-weight: var(--base-text-weight-normal, 400);\n        color: var(--color-fg-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--stack-padding-normal, 16px);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--text-body-size-medium, 14px);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--stack-padding-condensed, 8px);\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, 16px) var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--stack-padding-normal, 16px);\n    box-shadow: inset 0 var(--borderWidth-thin, 1px) var(--color-border-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--stack-gap-condensed, 8px);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n  padding: 0;\n  color: var(--color-fg-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin, 1px) solid transparent;\n  border-radius: var(--borderRadius-medium, 6px);\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(--color-btn-hover-bg);\n    border: var(--borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\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, 1px) 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(--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, 12px);\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, 12px);\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, 12px);\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, 12px);\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.pcss

@@ -19,7 +19,7 @@
   white-space: normal;
   flex-direction: column;
   background-color: var(--color-canvas-overlay);
-  border-radius: var(--primer-borderRadius-large, 12px);
+  border-radius: var(--borderRadius-large, 12px);
   box-shadow: var(--color-overlay-shadow);
   opacity: 1;
 
@@ -154,25 +154,25 @@
   flex-direction: column;
 
   &.Overlay-header--divided {
-    padding-bottom: var(--primer-stack-padding-condensed, 8px);
-    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);
+    padding-bottom: var(--stack-padding-condensed, 8px);
+    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px) * -1) var(--color-border-default);
 
     & + .Overlay-body {
-      padding-top: var(--primer-stack-padding-normal, 16px);
+      padding-top: var(--stack-padding-normal, 16px);
     }
   }
 
   &.Overlay-header--large {
     & .Overlay-headerContentWrap {
       & .Overlay-titleWrap {
-        gap: var(--primer-stack-gap-condensed, 8px);
+        gap: var(--stack-gap-condensed, 8px);
 
         & .Overlay-title {
-          font-size: var(--primer-text-title-size-medium, 20px);
+          font-size: var(--text-title-size-medium, 20px);
         }
 
         & .Overlay-description {
-          font-size: var(--primer-text-body-size-medium, 14px);
+          font-size: var(--text-body-size-medium, 14px);
         }
       }
     }
@@ -181,31 +181,32 @@
   & .Overlay-headerContentWrap {
     display: flex;
     align-items: flex-start;
-    gap: var(--primer-stack-gap-condensed, 8px);
-    padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
+    padding: var(--stack-gap-condensed, 8px) var(--stack-gap-condensed, 8px) 0 var(--stack-gap-condensed, 8px);
 
     & .Overlay-actionWrap {
       display: flex;
       flex-direction: row;
-      gap: var(--primer-stack-gap-condensed, 8px);
+      gap: var(--stack-gap-condensed, 8px);
     }
 
     & .Overlay-titleWrap {
       display: flex;
-      padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);
+      padding: calc(var(--stack-gap-condensed, 8px) * 0.75) 0 calc(var(--stack-gap-condensed, 8px) * 0.75)
+        var(--stack-gap-condensed, 8px);
       flex-direction: column;
       flex-grow: 1;
-      gap: var(--primer-control-small-gap, 4px);
+      gap: var(--control-small-gap, 4px);
 
       & .Overlay-title {
         margin: 0;
-        font-size: var(--primer-text-body-size-medium, 14px);
+        font-size: var(--text-body-size-medium, 14px);
         font-weight: var(--base-text-weight-semibold, 600);
       }
 
       & .Overlay-description {
         margin: 0;
-        font-size: var(--primer-text-body-size-small, 12px);
+        font-size: var(--text-body-size-small, 12px);
         font-weight: var(--base-text-weight-normal, 400);
         color: var(--color-fg-muted);
       }
@@ -215,15 +216,15 @@
 
 /* generic body content slot */
 .Overlay-body {
-  padding: var(--primer-stack-padding-normal, 16px);
+  padding: var(--stack-padding-normal, 16px);
   padding-top: 0;
   overflow-y: auto;
   scrollbar-width: thin;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   flex-grow: 1;
 
   &.Overlay-body--paddingCondensed {
-    padding: var(--primer-stack-padding-condensed, 8px);
+    padding: var(--stack-padding-condensed, 8px);
     padding-top: 0;
   }
 
@@ -236,29 +237,29 @@
 .Overlay-footer {
   z-index: 1;
   display: flex;
-  padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);
+  padding: 0 var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px);
   flex-direction: row;
   flex-shrink: 0;
   flex-wrap: wrap;
 
   &.Overlay-footer--divided {
-    padding-top: var(--primer-stack-padding-normal, 16px);
-    box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+    padding-top: var(--stack-padding-normal, 16px);
+    box-shadow: inset 0 var(--borderWidth-thin, 1px) var(--color-border-default);
   }
 
   &.Overlay-footer--alignStart {
     justify-content: flex-start;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 
   &.Overlay-footer--alignCenter {
     justify-content: center;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 
   &.Overlay-footer--alignEnd {
     justify-content: flex-end;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 }
 
@@ -273,8 +274,8 @@
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid transparent;
+  border-radius: var(--borderRadius-medium, 6px);
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
   place-content: center;
@@ -284,12 +285,12 @@
   &:hover,
   &:focus {
     background-color: var(--color-btn-hover-bg);
-    border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
+    border: var(--borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
   }
 
   /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
   &.close-button {
-    border: var(--primer-borderWidth-thin, 1px) solid transparent;
+    border: var(--borderWidth-thin, 1px) solid transparent;
   }
 }
 
@@ -342,7 +343,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -359,7 +360,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -377,7 +378,7 @@
       width: 100vw;
       height: auto;
       max-height: calc(100vh - 2rem);
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -392,7 +393,7 @@
     justify-content: center;
 
     & > .Overlay$(responsiveVariant) {
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
 
@@ -436,7 +437,7 @@
 
 /* responsive variants */
 
-/* --primer-viewportRange-narrowLandscape */
+/* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
   .Overlay-backdrop--center-whenNarrow {
     @mixin Overlay-backdrop--center;

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

@@ -50,6 +50,10 @@ module Primer
       }.freeze
       POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys
 
+      # The dialog's ID value.
+      #
+      attr_reader :id
+
       # Optional button to open the dialog.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>.