primer_view_components 0.13.2 → 0.15.0

data/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,57 +99,9 @@ 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) {
+_NavListElement_instances = new WeakSet();
+_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
@@ -189,16 +114,19 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         }
     }
     return null;
-}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+};
+_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() {
+};
+_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
     return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
-}, _NavListElement_select = function _NavListElement_select(navItem) {
+};
+_NavListElement_select = function _NavListElement_select(navItem) {
     const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
     if (currentlySelectedItem)
         __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
@@ -211,7 +139,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.expandItem(parentMenu);
         parentMenu.classList.add('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+};
+_NavListElement_deselect = function _NavListElement_deselect(navItem) {
     navItem.classList.remove('ActionListItem--navActive');
     if (navItem.children.length > 0) {
         navItem.children[0].removeAttribute('aria-current');
@@ -221,7 +150,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.collapseItem(parentMenu);
         parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+};
+_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
     var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;
@@ -236,12 +166,6 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
 __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);

data/app/components/primer/beta/nav_list.ts

@@ -1,44 +1,9 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, target, targets} from '@github/catalyst'
+import {controller, targets} from '@github/catalyst'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
-  @target showMoreItem: HTMLElement
-  @targets focusMarkers: HTMLElement[]
-
-  connectedCallback(): void {
-    this.setShowMoreItemState()
-  }
-
-  get showMoreDisabled(): boolean {
-    return this.showMoreItem.hasAttribute('aria-disabled')
-  }
-
-  set showMoreDisabled(value: boolean) {
-    if (value) {
-      this.showMoreItem.setAttribute('aria-disabled', 'true')
-    } else {
-      this.showMoreItem.removeAttribute('aria-disabled')
-    }
-    this.showMoreItem.classList.toggle('disabled', value)
-  }
-
-  set currentPage(value: number) {
-    this.showMoreItem.setAttribute('data-current-page', value.toString())
-  }
-
-  get currentPage(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
-  }
-
-  get totalPages(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
-  }
-
-  get paginationSrc(): string {
-    return this.showMoreItem.getAttribute('src') || ''
-  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false
@@ -134,55 +99,6 @@ export class NavListElement extends HTMLElement {
     e.stopPropagation()
   }
 
-  private async showMore(e: Event) {
-    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 = this.#parseHTML(document, html)
-    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
-    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
-    const list = document.getElementById(listId)!
-    list.append(fragment)
-    this.focusMarkers.pop()?.focus()
-    this.showMoreDisabled = false
-  }
-
-  private setShowMoreItemState() {
-    if (!this.showMoreItem) {
-      return
-    }
-
-    if (this.currentPage < this.totalPages) {
-      this.showMoreItem.hidden = false
-    } else {
-      this.showMoreItem.hidden = true
-    }
-  }
-
-  #parseHTML(document: Document, html: string): DocumentFragment {
-    const template = document.createElement('template')
-    // eslint-disable-next-line github/no-inner-html
-    template.innerHTML = html
-    return document.importNode(template.content, true)
-  }
-
   #findSelectedNavItemById(itemId: string): HTMLElement | null {
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {

data/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;
+    }
+}

data/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;

data/app/components/primer/beta/nav_list_group_element.ts

@@ -0,0 +1,97 @@
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+export class NavListGroupElement extends HTMLElement {
+  @target showMoreItem: HTMLElement
+  @targets focusMarkers: HTMLElement[]
+
+  connectedCallback(): void {
+    this.setShowMoreItemState()
+  }
+
+  get showMoreDisabled(): boolean {
+    return this.showMoreItem.hasAttribute('aria-disabled')
+  }
+
+  set showMoreDisabled(value: boolean) {
+    if (value) {
+      this.showMoreItem.setAttribute('aria-disabled', 'true')
+    } else {
+      this.showMoreItem.removeAttribute('aria-disabled')
+    }
+    this.showMoreItem.classList.toggle('disabled', value)
+  }
+
+  set currentPage(value: number) {
+    this.showMoreItem.setAttribute('data-current-page', value.toString())
+  }
+
+  get currentPage(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
+  }
+
+  get totalPages(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
+  }
+
+  get paginationSrc(): string {
+    return this.showMoreItem.getAttribute('src') || ''
+  }
+
+  private async showMore(e: Event) {
+    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 = this.#parseHTML(document, html)
+    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers')
+    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
+    const list = document.getElementById(listId)!
+    list.append(fragment)
+    this.focusMarkers.pop()?.focus()
+    this.showMoreDisabled = false
+  }
+
+  private setShowMoreItemState() {
+    if (!this.showMoreItem) {
+      return
+    }
+
+    if (this.currentPage < this.totalPages) {
+      this.showMoreItem.hidden = false
+    } else {
+      this.showMoreItem.hidden = true
+    }
+  }
+
+  #parseHTML(document: Document, html: string): DocumentFragment {
+    const template = document.createElement('template')
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html
+    return document.importNode(template.content, true)
+  }
+}
+
+declare global {
+  interface Window {
+    NavListGroupElement: typeof NavListGroupElement
+  }
+}
+
+window.NavListGroupElement = NavListGroupElement

data/app/components/primer/beta/relative_time.rb

@@ -52,7 +52,7 @@ module Primer
 
       MONTH_DEFAULT = nil
       MONTH_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        MONTH_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit",
         :short => "short",
@@ -63,7 +63,7 @@ module Primer
 
       YEAR_DEFAULT = nil
       YEAR_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        YEAR_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit"
       }.freeze
@@ -71,7 +71,7 @@ module Primer
 
       TIMEZONENAME_DEFAULT = nil
       TIMEZONE_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        TIMEZONENAME_DEFAULT => nil,
         :long => "long",
         :short => "short",
         :short_offset => "shortOffset",
@@ -131,7 +131,7 @@ module Primer
         @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
         @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
         @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
-        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
         @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
         @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
         @system_arguments[:threshold] = threshold if threshold.present?

data/app/components/primer/beta/subhead.css

@@ -1 +1 @@
-.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
+.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--large{font-size:var(--base-size-24,1.5rem)}.Subhead-heading--medium{font-size:var(--text-title-size-medium,1.25rem)}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/beta/subhead.css.json

@@ -4,6 +4,8 @@
     ".Subhead",
     ".Subhead--spacious",
     ".Subhead-heading",
+    ".Subhead-heading--large",
+    ".Subhead-heading--medium",
     ".Subhead-heading--danger",
     ".Subhead-description",
     ".Subhead-actions",

data/app/components/primer/beta/subhead.css.map

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAEE,aAAc,CADd,8CAA2C,CAE3C,OACF,CAEA,wBACE,oCACF,CAEA,yBACE,+CACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/beta/subhead.pcss

@@ -16,12 +16,19 @@
 
 /* <h2> sized heading with normal font weight */
 .Subhead-heading {
-  font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
   order: 0;
 }
 
+.Subhead-heading--large {
+  font-size: var(--base-size-24);
+}
+
+.Subhead-heading--medium {
+  font-size: var(--text-title-size-medium);
+}
+
 /* Make the text bold and red for dangerous content */
 .Subhead-heading--danger {
   font-weight: var(--base-text-weight-semibold);

data/app/components/primer/beta/subhead.rb

@@ -17,16 +17,24 @@ module Primer
       DEFAULT_HEADING_TAG = :div
       HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
 
+      DEFAULT_HEADING_SIZE = :large
+      HEADING_SIZE_MAP = {
+        DEFAULT_HEADING_SIZE => "Subhead-heading--large",
+        :medium => "Subhead-heading--medium"
+      }.freeze
+      HEADING_SIZE_OPTIONS = HEADING_SIZE_MAP.keys.freeze
+
       # The heading
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
       # @param danger [Boolean] Whether to style the heading as dangerous.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, size: DEFAULT_HEADING_SIZE, **system_arguments|
         system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "Subhead-heading",
+          HEADING_SIZE_MAP[fetch_or_fallback(HEADING_SIZE_OPTIONS, size, DEFAULT_HEADING_SIZE)],
           "Subhead-heading--danger": danger
         )
 

data/app/components/primer/component.rb

@@ -16,6 +16,9 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include ExperimentalRenderHelpers
+    include ExperimentalSlotHelpers
+
     include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper

data/app/components/primer/focus_group.js

@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
-export default class FocusGroupElement extends HTMLElement {
+class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
 _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
+export default FocusGroupElement;
 if (!customElements.get('focus-group')) {
     window.FocusGroupElement = FocusGroupElement;
     customElements.define('focus-group', FocusGroupElement);

data/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';

data/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';

data/app/components/primer/primer.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'