primer_view_components 0.1.9 → 0.2.0

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

@@ -1,3 +1,9 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
@@ -9,19 +15,10 @@ 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_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
-import '@github/include-fragment-element';
-const popoverSelector = (() => {
-    try {
-        document.querySelector(':open');
-        return ':open';
-    }
-    catch (_a) {
-        return '.\\:open';
-    }
-})();
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isActivationKeydown, _ActionMenuElement_firstItem_get;
+import { controller, target } from '@github/catalyst';
 const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
-export class ActionMenuElement extends HTMLElement {
+let ActionMenuElement = class ActionMenuElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _ActionMenuElement_instances.add(this);
@@ -95,13 +92,16 @@ export class ActionMenuElement extends HTMLElement {
         this.addEventListener('focusout', this, { signal });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+        if (this.includeFragment) {
+            this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b, _c, _d;
-        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
+        var _a, _b;
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event)) {
             if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
                 event.preventDefault();
                 (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
@@ -109,22 +109,34 @@ export class ActionMenuElement extends HTMLElement {
                 return;
             }
         }
-        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(':popover-open')))
             return;
-        if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
-            (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
+        if (event.type === 'include-fragment-replaced') {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
         }
-        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
-            const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            // Hide popover after current event loop to prevent changes in focus from
+            // altering the target of the event. Not doing this specifically affects
+            // <a> tags. It causes the event to be sent to the currently focused element
+            // instead of the anchor, which effectively prevents navigation, i.e. it
+            // appears as if hitting enter does nothing. Curiously, clicking instead
+            // works fine.
+            if (this.selectVariant !== 'multiple') {
+                setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
+            }
+            // The rest of the code below deals with single/multiple selection behavior, and should not
+            // interfere with events fired by menu items whose behavior is specified outside the library.
+            if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
+                return;
+            const item = event.target.closest(menuItemSelectors.join(','));
             if (!item)
                 return;
             const ariaChecked = item.getAttribute('aria-checked');
             const checked = ariaChecked !== 'true';
             item.setAttribute('aria-checked', `${checked}`);
             if (this.selectVariant === 'single') {
-                const selector = menuItemSelectors.map(s => `li[aria-checked] ${s}`).join(',');
-                for (const checkedItemContent of this.querySelectorAll(selector)) {
-                    const checkedItem = checkedItemContent.closest('li');
+                for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
                     if (checkedItem !== item) {
                         checkedItem.setAttribute('aria-checked', 'false');
                     }
@@ -136,18 +148,9 @@ export class ActionMenuElement extends HTMLElement {
                 // prevent buttons from being clicked twice
                 event.preventDefault();
             }
-            // Hide popover after current event loop to prevent changes in focus from
-            // altering the target of the event. Not doing this specifically affects
-            // <a> tags. It causes the event to be sent to the currently focused element
-            // instead of the anchor, which effectively prevents navigation, i.e. it
-            // appears as if hitting enter does nothing. Curiously, clicking instead
-            // works fine.
-            if (this.selectVariant !== 'multiple') {
-                setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
-            }
         }
     }
-}
+};
 _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;
@@ -203,14 +206,21 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
             input.remove();
         }
     }
-}, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
+}, _ActionMenuElement_isActivationKeydown = function _ActionMenuElement_isActivationKeydown(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        event.key === 'Enter');
+        (event.key === 'Enter' || event.key === ' '));
 }, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
     return this.querySelector(menuItemSelectors.join(','));
 };
+__decorate([
+    target
+], ActionMenuElement.prototype, "includeFragment", void 0);
+ActionMenuElement = __decorate([
+    controller
+], ActionMenuElement);
+export { ActionMenuElement };
 if (!window.customElements.get('action-menu')) {
     window.ActionMenuElement = ActionMenuElement;
     window.customElements.define('action-menu', ActionMenuElement);

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

@@ -1,13 +1,5 @@
-import '@github/include-fragment-element'
-
-const popoverSelector = (() => {
-  try {
-    document.querySelector(':open')
-    return ':open'
-  } catch {
-    return '.\\:open'
-  }
-})()
+import {controller, target} from '@github/catalyst'
+import IncludeFragmentElement from '@github/include-fragment-element'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
 type SelectedItem = {
@@ -18,7 +10,10 @@ type SelectedItem = {
 
 const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 
+@controller
 export class ActionMenuElement extends HTMLElement {
+  @target includeFragment: IncludeFragmentElement
+
   #abortController: AbortController
   #originalLabel = ''
   #inputName = ''
@@ -96,6 +91,10 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('focusout', this, {signal})
     this.#setDynamicLabel()
     this.#updateInput()
+
+    if (this.includeFragment) {
+      this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
+    }
   }
 
   disconnectedCallback() {
@@ -103,7 +102,7 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   handleEvent(event: Event) {
-    if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
+    if (event.target === this.invokerElement && this.#isActivationKeydown(event)) {
       if (this.#firstItem) {
         event.preventDefault()
         this.popoverElement?.showPopover()
@@ -112,20 +111,32 @@ export class ActionMenuElement extends HTMLElement {
       }
     }
 
-    if (!this.popoverElement?.matches(popoverSelector)) return
+    if (!this.popoverElement?.matches(':popover-open')) return
 
-    if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
-      this.popoverElement?.hidePopover()
-    } else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
-      const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
+    if (event.type === 'include-fragment-replaced') {
+      if (this.#firstItem) this.#firstItem.focus()
+    } else if (this.#isActivationKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
+      // Hide popover after current event loop to prevent changes in focus from
+      // altering the target of the event. Not doing this specifically affects
+      // <a> tags. It causes the event to be sent to the currently focused element
+      // instead of the anchor, which effectively prevents navigation, i.e. it
+      // appears as if hitting enter does nothing. Curiously, clicking instead
+      // works fine.
+      if (this.selectVariant !== 'multiple') {
+        setTimeout(() => this.popoverElement?.hidePopover())
+      }
+
+      // The rest of the code below deals with single/multiple selection behavior, and should not
+      // interfere with events fired by menu items whose behavior is specified outside the library.
+      if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
+
+      const item = (event.target as Element).closest(menuItemSelectors.join(','))
       if (!item) return
       const ariaChecked = item.getAttribute('aria-checked')
       const checked = ariaChecked !== 'true'
       item.setAttribute('aria-checked', `${checked}`)
       if (this.selectVariant === 'single') {
-        const selector = menuItemSelectors.map(s => `li[aria-checked] ${s}`).join(',')
-        for (const checkedItemContent of this.querySelectorAll(selector)) {
-          const checkedItem = checkedItemContent.closest('li')!
+        for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
           if (checkedItem !== item) {
             checkedItem.setAttribute('aria-checked', 'false')
           }
@@ -139,15 +150,6 @@ export class ActionMenuElement extends HTMLElement {
         // prevent buttons from being clicked twice
         event.preventDefault()
       }
-      // Hide popover after current event loop to prevent changes in focus from
-      // altering the target of the event. Not doing this specifically affects
-      // <a> tags. It causes the event to be sent to the currently focused element
-      // instead of the anchor, which effectively prevents navigation, i.e. it
-      // appears as if hitting enter does nothing. Curiously, clicking instead
-      // works fine.
-      if (this.selectVariant !== 'multiple') {
-        setTimeout(() => this.popoverElement?.hidePopover())
-      }
     }
   }
 
@@ -210,12 +212,12 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
-  #isEnterKeydown(event: Event): boolean {
+  #isActivationKeydown(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&
       event.type === 'keydown' &&
       !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      event.key === 'Enter'
+      (event.key === 'Enter' || event.key === ' ')
     )
   }
 

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

@@ -8,7 +8,7 @@ module Primer
       # used as a standalone component.
       class List < Primer::Alpha::ActionList
         DEFAULT_ITEM_TAG = :button
-        ITEM_TAG_OPTIONS = [:a, :button, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
+        ITEM_TAG_OPTIONS = [:a, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
 
         # Adds a new item to the list.
         #
@@ -35,6 +35,11 @@ module Primer
           content_arguments[:tabindex] = -1
           system_arguments[:autofocus] = "" if system_arguments[:autofocus]
 
+          content_arguments[:data] = merge_data(
+            content_arguments,
+            { data: { value: data.delete(:value) || system_arguments.delete(:"data-value") } }
+          )
+
           if system_arguments[:disabled]
             content_arguments[:aria] = merge_aria(
               content_arguments,

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(--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}
+.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,max(1px,.0625rem)) 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,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"]}
+{"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,kFAAiE,CACjE,4CAAyC,CACzC,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,gDAA6C,CAD7C,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) solid var(--color-border-default);\n  border-radius: var(--borderRadius-medium);\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);\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(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
   box-shadow: var(--color-shadow-medium);
 }
 
@@ -82,7 +82,7 @@
   width: 100%;
   padding: 4px 8px;
   overflow: hidden;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;

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

@@ -1 +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)}}
+.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,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--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,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"]}
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,gFAA+D,CAC/D,4CAAyC,CAHzC,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,gCAA2B,CAF3B,iBA0HF,CA7GE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACE,4DACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,wCAWF,CAPE,gCACE,8CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,wCAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,0DACF,CAEA,gCACE,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,8DAIF,CAEA,4BACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,8DAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--borderWidth-thin) solid var(--color-accent-muted);\n  border-radius: var(--borderRadius-medium);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n      margin: var(--base-size-8) 0 0 var(--base-size-8);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: 0.375rem var(--base-size-8);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: 0.375rem var(--base-size-8);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--controlStack-medium-gap-condensed);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--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) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--borderWidth-thin) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}\n"]}

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

@@ -3,11 +3,11 @@
 .Banner {
   position: relative;
   display: grid;
-  padding: var(--base-size-8, 8px);
+  padding: var(--base-size-8);
   color: var(--color-fg-default);
   background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-accent-muted);
+  border-radius: var(--borderRadius-medium);
   grid-auto-flow: column;
   grid-template-areas: 'visual message actions close';
   grid-template-columns: min-content 1fr minmax(0, auto) min-content;
@@ -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) 0 0 var(--base-size-8);
     }
   }
 
@@ -30,12 +30,12 @@
 
   & .Banner-visual {
     display: grid;
-    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    padding: 0.375rem var(--base-size-8);
     grid-area: visual;
     align-self: start;
 
     & > .octicon {
-      margin-block: calc(var(--base-size-4, 4px) / 2);
+      margin-block: calc(var(--base-size-4) / 2);
     }
 
     & > * {
@@ -44,7 +44,7 @@
   }
 
   & .Banner-message {
-    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    padding: 0.375rem var(--base-size-8);
     grid-area: message;
     align-self: center;
 
@@ -54,7 +54,7 @@
 
     & .Banner-title:not(:only-child) {
       margin-bottom: 0;
-      font-weight: var(--base-text-weight-semibold, 600);
+      font-weight: var(--base-text-weight-semibold);
     }
   }
 
@@ -69,7 +69,7 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    margin-left: var(--controlStack-medium-gap-condensed, 8px);
+    margin-left: var(--controlStack-medium-gap-condensed);
   }
 
   & .Banner-visual .octicon {
@@ -109,7 +109,7 @@
   /* Full-width */
 
   &.Banner--full {
-    margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    margin-top: calc(var(--borderWidth-thin) * -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(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      margin-top: calc(var(--borderWidth-thin) * -1);
       border-right: 0;
       border-left: 0;
       border-radius: 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UAyBE,iCAA2B,CAA3B,yBAA2B,CAR3B,4FAEqC,CACrC,QAAS,CAGT,qBAAuB,CAXvB,iCAAkC,CATlC,oBAAqB,CAMrB,cAAe,CACf,gDAAkD,CAClD,aAAc,CALd,2BAA6B,CAL7B,iBAAkB,CAYlB,iBAAkB,CAWlB,0CAA8C,CAR9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAZnB,SAoFF,CA3DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAEE,uDAAyD,CADzD,oBAEF,CAME,oGACE,SACF,CAIF,gBCxDA,eAAgB,CAFhB,wCAAgC,CAChC,kBDiEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBCnEA,eAAgB,CAFhB,wCAAgC,CAChC,kBDsEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAC3B,+CAAgD,CAFhD,uCAuBF,CAnBE,uBACE,YACF,CAEA,sBACE,6DACF,CAEA,uBAGE,4DACF,CAEA,yBAGE,2DACF,CAGF,iBAGE,yBAA2B,CAF3B,uCAWF,CAPE,yCAHA,yBAKA,CAEA,uBACE,6DACF,CAGF,iBAME,wEAAuH,CAHvH,UA0BF,CArBE,wBAGE,gEACF,CAGA,uBC5IA,eAAgB,CAFhB,wCAAgC,CAChC,kBDqJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BCvJA,eAAgB,CAFhB,wCAAgC,CAChC,kBD0JA,CAKF,gBAGE,6BACF,CAEA,gBAME,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold, 600);\n  line-height: 1;\n  color: var(--color-canvas-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background:\n    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n\n  /* stylelint-disable-next-line primer/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}
+{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UAwBE,iCAA2B,CAA3B,yBAA2B,CAP3B,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CAVvB,iCAAkC,CATlC,oBAAqB,CAMrB,cAAe,CACf,gDAA6C,CAC7C,aAAc,CALd,2BAA6B,CAL7B,iBAAkB,CAYlB,iBAAkB,CAUlB,0CAA8C,CAP9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAZnB,SAmFF,CA3DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAEE,uDAAyD,CADzD,oBAEF,CAME,oGACE,SACF,CAIF,gBCvDA,eAAgB,CAFhB,wCAAgC,CAChC,kBDgEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBClEA,eAAgB,CAFhB,wCAAgC,CAChC,kBDqEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAC3B,+CAAgD,CAFhD,uCAqBF,CAjBE,uBACE,YACF,CAEA,sBACE,6DACF,CAEA,uBAEE,4DACF,CAEA,yBAEE,2DACF,CAGF,iBAGE,yBAA2B,CAF3B,uCAWF,CAPE,yCAHA,yBAKA,CAEA,uBACE,6DACF,CAGF,iBAKE,wEAAuH,CAHvH,UAyBF,CApBE,wBAEE,gEACF,CAGA,uBCvIA,eAAgB,CAFhB,wCAAgC,CAChC,kBDgJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BClJA,eAAgB,CAFhB,wCAAgC,CAChC,kBDqJA,CAKF,gBAEE,6BACF,CAEA,gBAKE,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold);\n  line-height: 1;\n  color: var(--color-canvas-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n  /* stylelint-disable-next-line primer/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line primer/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n    /* stylelint-disable-next-line primer/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line primer/typography */\n  font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

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

@@ -8,15 +8,14 @@
 
   /* stylelint-disable-next-line primer/typography */
   font-size: 1rem;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   line-height: 1;
   color: var(--color-canvas-default);
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+  background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -69,7 +68,7 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
   }
 
   &:active {
@@ -100,13 +99,11 @@
   }
 
   &:active {
-
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
   }
 
   &:disabled {
-
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
   }
@@ -127,7 +124,6 @@
 }
 
 .btn-signup-mktg {
-
   /* stylelint-disable-next-line primer/colors */
   color: #fff;
 
@@ -135,14 +131,13 @@
   background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
 
   &::before {
-
     /* stylelint-disable-next-line primer/colors */
     background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
   }
 
   /* fallback :focus state */
   &:focus {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
 
     /* remove fallback :focus if :focus-visible is supported */
     &:not(:focus-visible) {
@@ -153,20 +148,18 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
   }
 }
 
 /* Size modifiers */
 
 .btn-small-mktg {
-
   /* stylelint-disable-next-line primer/spacing */
   padding: 0.625rem 1rem 0.8125rem;
 }
 
 .btn-large-mktg {
-
   /* stylelint-disable-next-line primer/spacing */
   padding: 16px 30px 20px !important;
 

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

@@ -42,12 +42,14 @@ module Primer
       # @param variant [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::VARIANT_OPTIONS) %>
       # @param tag [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::TAG_OPTIONS) %>
       # @param type [Symbol] <%= one_of(Primer::Alpha::ButtonMarketing::TYPE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         scheme: DEFAULT_SCHEME,
         variant: DEFAULT_VARIANT,
         tag: DEFAULT_TAG,
         type: DEFAULT_TYPE,
+        disabled: false,
         **system_arguments
       )
         @system_arguments = system_arguments
@@ -60,6 +62,7 @@ module Primer
           VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
           system_arguments[:classes]
         )
+        @system_arguments[:disabled] = disabled
       end
 
       def call