primer_view_components 0.1.6 → 0.1.7

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

@@ -82,6 +82,7 @@ module Primer
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::ActionList::SCHEME_OPTIONS) %> `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges.
       # @param show_dividers [Boolean] Display a divider above each item in the list when it does not follow a header or divider.
       # @param select_variant [Symbol] How items may be selected in the list. <%= one_of(Primer::Alpha::ActionList::SELECT_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] Allows an `ActionList` 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. *NOTE*: Consider using an <%= link_to_component(Primer::Alpha::ActionMenu) %> instead of using this feature directly.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         id: self.class.generate_id,
@@ -90,6 +91,7 @@ module Primer
         scheme: DEFAULT_SCHEME,
         show_dividers: false,
         select_variant: DEFAULT_SELECT_VARIANT,
+        form_arguments: {},
         **system_arguments
       )
         @system_arguments = system_arguments
@@ -111,6 +113,13 @@ module Primer
         @system_arguments[:role] = @role
 
         @list_wrapper_arguments = {}
+
+        @form_builder = form_arguments[:builder]
+        @input_name = form_arguments[:name]
+
+        return unless required_form_arguments_given? && !allows_selection?
+
+        raise ArgumentError, "lists/menus that act as form inputs must also allow item selection (please pass the `select_variant:` option)"
       end
 
       # @private
@@ -158,6 +167,14 @@ module Primer
         @system_arguments[:role] == :menu
       end
 
+      def required_form_arguments_given?
+        @form_builder && @input_name
+      end
+
+      def acts_as_form_input?
+        required_form_arguments_given? && allows_selection?
+      end
+
       # @private
       def will_add_item(_item); end
     end

data/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -1,5 +1,10 @@
 import '@github/include-fragment-element';
-declare type SelectVariant = 'single' | 'multiple' | null;
+declare type SelectVariant = 'none' | 'single' | 'multiple' | null;
+declare type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
 export declare class ActionMenuElement extends HTMLElement {
     #private;
     get selectVariant(): SelectVariant;
@@ -11,6 +16,7 @@ export declare class ActionMenuElement extends HTMLElement {
     get popoverElement(): HTMLElement | null;
     get invokerElement(): HTMLElement | null;
     get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
 import '@github/include-fragment-element';
 const popoverSelector = (() => {
     try {
@@ -27,6 +27,7 @@ export class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_instances.add(this);
         _ActionMenuElement_abortController.set(this, void 0);
         _ActionMenuElement_originalLabel.set(this, '');
+        _ActionMenuElement_inputName.set(this, '');
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -73,6 +74,19 @@ export class ActionMenuElement extends HTMLElement {
             return null;
         return this.invokerElement.querySelector('.Button-label');
     }
+    get selectedItems() {
+        const selectedItems = this.querySelectorAll('[aria-checked=true]');
+        const results = [];
+        for (const selectedItem of selectedItems) {
+            const labelEl = selectedItem.querySelector('.ActionListItem-label');
+            results.push({
+                label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
+                value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
+                element: selectedItem
+            });
+        }
+        return results;
+    }
     connectedCallback() {
         const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
         this.addEventListener('keydown', this, { signal });
@@ -80,6 +94,7 @@ export class ActionMenuElement extends HTMLElement {
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -116,6 +131,7 @@ export class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
             if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
                 // prevent buttons from being clicked twice
                 event.preventDefault();
@@ -132,15 +148,15 @@ export class ActionMenuElement extends HTMLElement {
         }
     }
 }
-_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
     if (!invokerLabel)
         return;
+    __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
     const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
     if (itemLabel && this.dynamicLabel) {
-        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
@@ -151,6 +167,42 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     else {
         invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
     }
+}, _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
+    if (this.selectVariant === 'single') {
+        const input = this.querySelector(`[data-list-inputs=true] input`);
+        if (!input)
+            return;
+        const selectedItem = this.selectedItems[0];
+        if (selectedItem) {
+            input.value = (selectedItem.value || selectedItem.label || '').trim();
+            input.removeAttribute('disabled');
+        }
+        else {
+            input.setAttribute('disabled', 'disabled');
+        }
+    }
+    else if (this.selectVariant !== 'none') {
+        // multiple select variant
+        const inputList = this.querySelector('[data-list-inputs=true]');
+        if (!inputList)
+            return;
+        const inputs = inputList.querySelectorAll('input');
+        if (inputs.length > 0) {
+            __classPrivateFieldSet(this, _ActionMenuElement_inputName, __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f") || inputs[0].name, "f");
+        }
+        for (const selectedItem of this.selectedItems) {
+            const newInput = document.createElement('input');
+            newInput.setAttribute('data-list-input', 'true');
+            newInput.type = 'hidden';
+            newInput.autocomplete = 'off';
+            newInput.name = __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f");
+            newInput.value = (selectedItem.value || selectedItem.label || '').trim();
+            inputList.append(newInput);
+        }
+        for (const input of inputs) {
+            input.remove();
+        }
+    }
 }, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -9,13 +9,19 @@ const popoverSelector = (() => {
   }
 })()
 
-type SelectVariant = 'single' | 'multiple' | null
+type SelectVariant = 'none' | 'single' | 'multiple' | null
+type SelectedItem = {
+  label: string | null | undefined
+  value: string | null | undefined
+  element: Element
+}
 
 const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 
 export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
   #originalLabel = ''
+  #inputName = ''
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -65,6 +71,23 @@ export class ActionMenuElement extends HTMLElement {
     return this.invokerElement.querySelector('.Button-label')
   }
 
+  get selectedItems(): SelectedItem[] {
+    const selectedItems = this.querySelectorAll('[aria-checked=true]')
+    const results: SelectedItem[] = []
+
+    for (const selectedItem of selectedItems) {
+      const labelEl = selectedItem.querySelector('.ActionListItem-label')
+
+      results.push({
+        label: labelEl?.textContent,
+        value: selectedItem?.getAttribute('data-value'),
+        element: selectedItem
+      })
+    }
+
+    return results
+  }
+
   connectedCallback() {
     const {signal} = (this.#abortController = new AbortController())
     this.addEventListener('keydown', this, {signal})
@@ -72,6 +95,7 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.#setDynamicLabel()
+    this.#updateInput()
   }
 
   disconnectedCallback() {
@@ -108,6 +132,9 @@ export class ActionMenuElement extends HTMLElement {
         }
         this.#setDynamicLabel()
       }
+
+      this.#updateInput()
+
       if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
         // prevent buttons from being clicked twice
         event.preventDefault()
@@ -128,9 +155,9 @@ export class ActionMenuElement extends HTMLElement {
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
+    this.#originalLabel ||= invokerLabel.textContent || ''
     const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
     if (itemLabel && this.dynamicLabel) {
-      this.#originalLabel ||= invokerLabel.textContent || ''
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')
       const contentSpan = document.createElement('span')
@@ -142,6 +169,47 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
+  #updateInput() {
+    if (this.selectVariant === 'single') {
+      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement | null
+      if (!input) return
+
+      const selectedItem = this.selectedItems[0]
+
+      if (selectedItem) {
+        input.value = (selectedItem.value || selectedItem.label || '').trim()
+        input.removeAttribute('disabled')
+      } else {
+        input.setAttribute('disabled', 'disabled')
+      }
+    } else if (this.selectVariant !== 'none') {
+      // multiple select variant
+      const inputList = this.querySelector('[data-list-inputs=true]')
+      if (!inputList) return
+
+      const inputs = inputList.querySelectorAll('input')
+
+      if (inputs.length > 0) {
+        this.#inputName ||= (inputs[0] as HTMLInputElement).name
+      }
+
+      for (const selectedItem of this.selectedItems) {
+        const newInput = document.createElement('input')
+        newInput.setAttribute('data-list-input', 'true')
+        newInput.type = 'hidden'
+        newInput.autocomplete = 'off'
+        newInput.name = this.#inputName
+        newInput.value = (selectedItem.value || selectedItem.label || '').trim()
+
+        inputList.append(newInput)
+      }
+
+      for (const input of inputs) {
+        input.remove()
+      }
+    }
+  }
+
   #isEnterKeydown(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&

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

@@ -12,18 +12,16 @@ module Primer
 
         # Adds a new item to the list.
         #
+        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
         # @param system_arguments [Hash] The same arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-        def with_item(**system_arguments, &block)
+        def with_item(data: {}, **system_arguments, &block)
           content_arguments = system_arguments.delete(:content_arguments) || {}
 
-          content_arguments[:tag] =
-            if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
-              system_arguments[:tag]
-            elsif system_arguments[:href] && !system_arguments[:disabled]
-              :a
-            else
-              DEFAULT_ITEM_TAG
-            end
+          # rubocop:disable Style/IfUnlessModifier
+          if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
+            content_arguments[:tag] = system_arguments[:tag]
+          end
+          # rubocop:enable Style/IfUnlessModifier
 
           # disallow setting item's tag
           system_arguments.delete(:tag)
@@ -51,7 +49,7 @@ module Primer
             content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
-          super(**system_arguments, content_arguments: content_arguments) do |item|
+          super(data: data, **system_arguments, content_arguments: content_arguments) do |item|
             # Prevent double renders by using the capture method on the component
             # that originally received the block.
             #
@@ -70,7 +68,7 @@ module Primer
         end
 
         # @param menu_id [String] ID of the parent menu.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
         def initialize(menu_id:, **system_arguments, &block)
           @menu_id = menu_id
 

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;