@primer/view-components 0.15.0-rc.c7c9d814 → 0.15.0-rc.d9ea70e9

package/app/components/primer/alpha/tool_tip.js

@@ -43,7 +43,7 @@ const DIRECTION_CLASSES = [
     'tooltip-ne',
     'tooltip-se',
     'tooltip-nw',
-    'tooltip-sw'
+    'tooltip-sw',
 ];
 function closeOpenTooltips(except) {
     for (const tooltip of openTooltips) {
@@ -270,11 +270,11 @@ class ToolTipElement extends HTMLElement {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore popoverTargetElement is not in the type definition
         (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
-            signal
+            signal,
         });
         this.ownerDocument.addEventListener('focusout', focusOutListener);
         this.ownerDocument.addEventListener('focusin', focusInListener);
-        this.ownerDocument.addEventListener('keydown', this, { signal });
+        this.ownerDocument.addEventListener('keydown', this, { signal, captures: true });
     }
     disconnectedCallback() {
         var _a;
@@ -296,6 +296,10 @@ class ToolTipElement extends HTMLElement {
         const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
+        if (showing && isEscapeKeydown) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
         await Promise.resolve();
         if (!showing && shouldShow && !isPopoverOpen(this)) {
             __classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
@@ -409,7 +413,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
         align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
-        anchorOffset: TOOLTIP_OFFSET
+        anchorOffset: TOOLTIP_OFFSET,
     });
     const anchorSide = position.anchorSide;
     const align = position.anchorAlign;

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

@@ -1 +1 @@
-.blankslate-container{container-type:inline-size}.blankslate{--blankslate-outer-padding-block:var(--base-size-32,2rem);--blankslate-outer-padding-inline:var(--base-size-32,2rem);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-large,1rem)}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--text-title-weight-medium,600);margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80,5rem);--blankslate-outer-padding-inline:var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-heading{font-size:var(--text-title-size-small,1rem)}.blankslate p{font-size:var(--text-body-size-medium,.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed,.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed,.5rem)/2)}}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32,2rem);--blankslate-outer-padding-inline:var(--base-size-32,2rem);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-large,1rem)}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--text-title-weight-medium,600);margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80,5rem);--blankslate-outer-padding-inline:var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-heading{font-size:var(--text-title-size-small,1rem)}.blankslate p{font-size:var(--text-body-size-medium,.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed,.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed,.5rem)/2)}}

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

@@ -1,15 +1,6 @@
 export declare class NavListElement extends HTMLElement {
     #private;
     items: HTMLElement[];
-    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;
     selectItemById(itemId: string | null): boolean;
     selectItemByHref(href: string | null): boolean;
     selectItemByCurrentLocation(): boolean;
@@ -18,8 +9,6 @@ export declare class NavListElement extends HTMLElement {
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     handleItemWithSubItemKeydown(e: KeyboardEvent): void;
-    private showMore;
-    private setShowMoreItemState;
 }
 declare global {
     interface Window {

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

@@ -9,41 +9,14 @@ 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 _NavListElement_instances, _NavListElement_parseHTML, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
+var _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
-import { controller, target, targets } from '@github/catalyst';
+import { controller, targets } from '@github/catalyst';
 let NavListElement = class NavListElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListElement_instances.add(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') || '';
-    }
     selectItemById(itemId) {
         if (!itemId)
             return false;
@@ -126,58 +99,8 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
         e.stopPropagation();
     }
-    async showMore(e) {
-        var _a, _b;
-        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;
-            }
-        }
-        catch (err) {
-            // Ignore network errors
-            this.showMoreDisabled = false;
-            this.currentPage--;
-            return;
-        }
-        const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
-        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
-        const listId = e.target.closest('button').getAttribute('data-list-id');
-        const list = document.getElementById(listId);
-        list.append(fragment);
-        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
-        this.showMoreDisabled = false;
-    }
-    setShowMoreItemState() {
-        if (!this.showMoreItem) {
-            return;
-        }
-        if (this.currentPage < this.totalPages) {
-            this.showMoreItem.hidden = false;
-        }
-        else {
-            this.showMoreItem.hidden = true;
-        }
-    }
 };
 _NavListElement_instances = new WeakSet();
-_NavListElement_parseHTML = function _NavListElement_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);
-};
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
@@ -243,12 +166,6 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
 __decorate([
     targets
 ], NavListElement.prototype, "items", void 0);
-__decorate([
-    target
-], NavListElement.prototype, "showMoreItem", void 0);
-__decorate([
-    targets
-], NavListElement.prototype, "focusMarkers", void 0);
 NavListElement = __decorate([
     controller
 ], 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,108 @@
+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;
+import { controller, target, targets } from '@github/catalyst';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_instances.add(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) {
+        var _a, _b;
+        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;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
+        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _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);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_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/primer.d.ts

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

package/app/components/primer/primer.js

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.15.0-rc.c7c9d814",
+  "version": "0.15.0-rc.d9ea70e9",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -51,7 +51,7 @@
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
-    "@oddbird/popover-polyfill": "^0.3.2",
+    "@oddbird/popover-polyfill": "^0.3.6",
     "@primer/behaviors": "^1.3.4"
   },
   "devDependencies": {
@@ -59,7 +59,7 @@
     "@changesets/cli": "^2.24.1",
     "@github/axe-github": "^0.6.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.2.2",
+    "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
     "@primer/css": "21.0.10",

package/static/info_arch.json

@@ -10236,6 +10236,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/blankslate/inside_flex_container",
+        "name": "inside_flex_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -1740,6 +1740,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/blankslate/inside_flex_container",
+        "name": "inside_flex_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },