@mixtint/primer-view-components 0.72.0

package/app/components/primer/beta/link.css

@@ -0,0 +1,79 @@
+/* Links */
+
+.Link {
+  color: var(--fgColor-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.Link:hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+.Link:focus {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+  }
+
+.Link:focus,.Link:focus-visible {
+    outline-offset: 0;
+  }
+
+.Link--underline {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.Link--primary {
+  color: var(--fgColor-default) !important;
+}
+
+.Link--primary:hover {
+    color: var(--fgColor-accent) !important;
+  }
+
+.Link--secondary {
+  color: var(--fgColor-muted) !important;
+}
+
+.Link--secondary:hover {
+    color: var(--fgColor-accent) !important;
+  }
+
+.Link--muted {
+  color: var(--fgColor-muted) !important;
+}
+
+.Link--muted:hover {
+    color: var(--fgColor-accent) !important;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+
+/* Set the link color only on hover
+   Useful when you want only part of a link to turn blue on hover */
+
+.Link--onHover:hover {
+    color: var(--fgColor-accent) !important;
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+/* When using a color utility class inside of a link class
+   color should change with link on hover. */
+
+:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg'] {
+    color: inherit !important;
+  }
+
+.Link-content {
+  display: inline-flex;
+  align-items: center;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: normal;
+  gap: var(--base-size-4);
+  text-decoration: inherit;
+}

package/app/components/primer/beta/link.css.json

@@ -0,0 +1,19 @@
+{
+  "name": "beta/link",
+  "selectors": [
+    ".Link",
+    ".Link:hover",
+    ".Link:focus",
+    ".Link:focus-visible",
+    ".Link--underline",
+    ".Link--primary",
+    ".Link--primary:hover",
+    ".Link--secondary",
+    ".Link--secondary:hover",
+    ".Link--muted",
+    ".Link--muted:hover",
+    ".Link--onHover:hover",
+    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg']",
+    ".Link-content"
+  ]
+}

package/app/components/primer/beta/nav_list.d.ts

@@ -0,0 +1,20 @@
+export declare class NavListElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    topLevelList: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    selectItemById(itemId: string | null): boolean;
+    selectItemByHref(href: string | null): boolean;
+    selectItemByCurrentLocation(): boolean;
+    expandItem(item: HTMLElement): void;
+    collapseItem(item: HTMLElement): void;
+    itemIsExpanded(item: HTMLElement | null): boolean;
+    handleItemWithSubItemClick(e: Event): void;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
+}
+declare global {
+    interface Window {
+        NavListElement: typeof NavListElement;
+    }
+}

package/app/components/primer/beta/nav_list.js

@@ -0,0 +1,192 @@
+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");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
+import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
+let NavListElement = class NavListElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListElement_instances.add(this);
+        _NavListElement_truncationObserver.set(this, void 0);
+    }
+    connectedCallback() {
+        // groups are wrapped in <action-list>, which handles resizing on its own
+        if (this.topLevelList) {
+            __classPrivateFieldSet(this, _NavListElement_truncationObserver, new ActionListTruncationObserver(this.topLevelList), "f");
+        }
+    }
+    disconnectedCallback() {
+        if (this.topLevelList) {
+            __classPrivateFieldGet(this, _NavListElement_truncationObserver, "f").unobserve(this.topLevelList);
+        }
+    }
+    selectItemById(itemId) {
+        if (!itemId)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemById).call(this, itemId);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByHref(href) {
+        if (!href)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, href);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByCurrentLocation() {
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByCurrentLocation).call(this);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    // expand collapsible item onClick
+    expandItem(item) {
+        item.nextElementSibling?.removeAttribute('data-hidden');
+        item.setAttribute('aria-expanded', 'true');
+    }
+    collapseItem(item) {
+        item.nextElementSibling?.setAttribute('data-hidden', '');
+        item.setAttribute('aria-expanded', 'false');
+        item.focus();
+    }
+    itemIsExpanded(item) {
+        if (item?.tagName === 'A') {
+            return true;
+        }
+        return item?.getAttribute('aria-expanded') === 'true';
+    }
+    // expand/collapse item
+    handleItemWithSubItemClick(e) {
+        const el = e.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        const button = el.closest('button');
+        if (!button)
+            return;
+        if (this.itemIsExpanded(button)) {
+            this.collapseItem(button);
+        }
+        else {
+            this.expandItem(button);
+        }
+        /* eslint-disable-next-line no-restricted-syntax */
+        e.stopPropagation();
+    }
+    // collapse item
+    handleItemWithSubItemKeydown(e) {
+        const el = e.currentTarget;
+        if (!(el instanceof HTMLElement))
+            return;
+        let button = el.closest('button');
+        if (!button) {
+            const button_id = el.getAttribute('aria-labelledby');
+            if (button_id) {
+                button = document.getElementById(button_id);
+            }
+            else {
+                return;
+            }
+        }
+        if (this.itemIsExpanded(button) && e.key === 'Escape') {
+            this.collapseItem(button);
+        }
+        /* eslint-disable-next-line no-restricted-syntax */
+        e.stopPropagation();
+    }
+};
+_NavListElement_truncationObserver = new WeakMap();
+_NavListElement_instances = new WeakSet();
+_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+        if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+            continue;
+        }
+        const keys = navItem.getAttribute('data-item-id')?.split(' ') || [];
+        if (keys.includes(itemId)) {
+            return navItem;
+        }
+    }
+    return null;
+};
+_NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
+    if (selectedNavItem) {
+        return selectedNavItem.closest('.ActionListItem');
+    }
+    return null;
+};
+_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+    return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
+};
+_NavListElement_select = function _NavListElement_select(navItem) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
+    if (currentlySelectedItem)
+        __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
+    navItem.classList.add('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].setAttribute('aria-current', 'page');
+    }
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.expandItem(parentMenu);
+        parentMenu.classList.add('ActionListContent--hasActiveSubItem');
+    }
+};
+_NavListElement_deselect = function _NavListElement_deselect(navItem) {
+    navItem.classList.remove('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].removeAttribute('aria-current');
+    }
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.collapseItem(parentMenu);
+        parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
+    }
+};
+_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+    if (!navItem.classList.contains('ActionListItem--subItem'))
+        return null;
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent');
+    if (parent) {
+        return parent;
+    }
+    else {
+        return null;
+    }
+};
+__decorate([
+    targets
+], NavListElement.prototype, "items", void 0);
+__decorate([
+    target
+], NavListElement.prototype, "topLevelList", void 0);
+NavListElement = __decorate([
+    controller
+], NavListElement);
+export { NavListElement };

package/app/components/primer/beta/nav_list_group_element.d.ts

@@ -0,0 +1,19 @@
+export declare class NavListGroupElement extends HTMLElement {
+    #private;
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListGroupElement: typeof NavListGroupElement;
+    }
+}

package/app/components/primer/beta/nav_list_group_element.js

@@ -0,0 +1,111 @@
+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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML, _NavListGroupElement_truncateObserver;
+import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_instances.add(this);
+        _NavListGroupElement_truncateObserver.set(this, new ActionListTruncationObserver(this));
+    }
+    connectedCallback() {
+        this.setShowMoreItemState();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    get paginationSrc() {
+        return this.showMoreItem.getAttribute('src') || '';
+    }
+    async showMore(e) {
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
+        fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        this.focusMarkers.pop()?.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_NavListGroupElement_truncateObserver = new WeakMap();
+_NavListGroupElement_instances = new WeakSet();
+_NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+};
+__decorate([
+    target
+], NavListGroupElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListGroupElement.prototype, "focusMarkers", void 0);
+NavListGroupElement = __decorate([
+    controller
+], NavListGroupElement);
+export { NavListGroupElement };
+window.NavListGroupElement = NavListGroupElement;

package/app/components/primer/beta/popover.css

@@ -0,0 +1,215 @@
+/* stylelint-disable primer/spacing */
+
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+
+  /* adding !important to override utility classes used in dotcom */
+  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
+
+  /* Carets */
+}
+
+.Popover-message::before,.Popover-message::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+.Popover-message::before {
+    top: -16px;
+    margin-left: -9px;
+    /* stylelint-disable-next-line primer/borders */
+    border: 8px solid transparent;
+    border-bottom-color: var(--borderColor-default);
+  }
+
+.Popover-message::after {
+    top: -14px;
+    margin-left: -8px;
+    /* stylelint-disable-next-line primer/borders */
+    border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
+    border-bottom-color: var(--overlay-bgColor);
+  }
+
+/* No caret */
+
+.Popover-message--no-caret::before,.Popover-message--no-caret::after {
+    display: none;
+  }
+
+/* Bottom-oriented carets */
+
+:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::before,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::before {
+    bottom: -16px;
+    border-top-color: var(--borderColor-default);
+  }
+
+:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::after {
+    bottom: -14px;
+    /* stylelint-disable-next-line primer/colors */
+    border-top-color: var(--overlay-bgColor);
+  }
+
+/* Top and Bottom: Right-oriented carets */
+
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+}
+
+:is(.Popover-message--top-right,.Popover-message--bottom-right)::before,:is(.Popover-message--top-right,.Popover-message--bottom-right)::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+:is(.Popover-message--top-right,.Popover-message--bottom-right)::before {
+    right: var(--base-size-20);
+  }
+
+:is(.Popover-message--top-right,.Popover-message--bottom-right)::after {
+    right: var(--base-size-20);
+    margin-right: 1px;
+  }
+
+/* Top and Bottom: Left-oriented carets */
+
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+}
+
+:is(.Popover-message--top-left,.Popover-message--bottom-left)::before,:is(.Popover-message--top-left,.Popover-message--bottom-left)::after {
+    left: var(--base-size-24);
+    margin-left: 0;
+  }
+
+:is(.Popover-message--top-left,.Popover-message--bottom-left)::after {
+    left: var(--base-size-24);
+    margin-left: 1px;
+  }
+
+/* Right- and Left-oriented carets */
+
+:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::before,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::before {
+    margin-top: -9px;
+  }
+
+:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after {
+    margin-top: -8px;
+  }
+
+/* Right-oriented carets */
+
+:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom)::before {
+    right: -16px;
+    border-left-color: var(--borderColor-default);
+  }
+
+:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom)::after {
+    right: -14px;
+    /* stylelint-disable-next-line primer/colors */
+    border-left-color: var(--overlay-bgColor);
+  }
+
+/* Left-oriented carets */
+
+:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::before {
+    left: -16px;
+    border-right-color: var(--borderColor-default);
+  }
+
+:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after {
+    left: -14px;
+    margin-bottom: 1px;
+    /* stylelint-disable-next-line primer/colors */
+    border-right-color: var(--overlay-bgColor);
+  }
+
+/* Right and Left: Top-oriented carets */
+
+:is(.Popover-message--right-top,.Popover-message--left-top)::before,:is(.Popover-message--right-top,.Popover-message--left-top)::after {
+    top: var(--base-size-24);
+  }
+
+/* Right and Left: Bottom-oriented carets */
+
+:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before,:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::after {
+    top: auto;
+  }
+
+:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before {
+    bottom: var(--base-size-16);
+  }
+
+:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::after {
+    bottom: var(--base-size-16);
+    margin-bottom: 1px;
+  }
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--stack-gap-condensed);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--control-medium-paddingInline-normal) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

package/app/components/primer/beta/popover.css.json

@@ -0,0 +1,33 @@
+{
+  "name": "beta/popover",
+  "selectors": [
+    ".Popover",
+    ".Popover-message",
+    ".Popover-message::before",
+    ".Popover-message::after",
+    ".Popover-message--no-caret::before",
+    ".Popover-message--no-caret::after",
+    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::before",
+    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::after",
+    ".Popover-message--top-right",
+    ".Popover-message--bottom-right",
+    ":is(.Popover-message--top-right,.Popover-message--bottom-right)::before",
+    ":is(.Popover-message--top-right,.Popover-message--bottom-right)::after",
+    ".Popover-message--top-left",
+    ".Popover-message--bottom-left",
+    ":is(.Popover-message--top-left,.Popover-message--bottom-left)::before",
+    ":is(.Popover-message--top-left,.Popover-message--bottom-left)::after",
+    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::before",
+    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after",
+    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom)::before",
+    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom)::after",
+    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::before",
+    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after",
+    ":is(.Popover-message--right-top,.Popover-message--left-top)::before",
+    ":is(.Popover-message--right-top,.Popover-message--left-top)::after",
+    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before",
+    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom)::after",
+    ".Popover-message--large",
+    ".Popover-message > .btn-octicon"
+  ]
+}