@mixtint/primer-view-components 0.72.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 GitHub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+<h1 align="center">OpenProject's Primer ViewComponents</h1>
+
+<p align="center">Fork of ViewComponents for the Primer Design System used for OpenProject.</p>
+
+_Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
+
+## Contribution
+
+Please have a look at our [Contribution docs](./docs/contributors/README.md) to learn about any ways to contribute as for example
+
+* [Getting started](./docs/contributors/setup.md)
+* [Adding a component](./docs/contributors/adding-components.md)
+* [Releasing](./docs/contributors/releasing.md)
+* [Updating the fork](./docs/contributors/updating-fork.md)
+* ...
+
+## CI & Automation
+
+Primer already provides us with a lot of automation and an advanced test setup. In our guide we explain how that works, and what we adapted to our need after the fork.
+
+* [CI](./docs/contributors/ci.md)
+* [Testing](./docs/contributors/playwright-testing.md)
+
+## Documentation
+
+Visit [https://primer.style/view_components/](https://primer.style/design/components/) to view the documentation of the Primer ViewComponents.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

package/app/assets/images/loading_indicator.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g><rect x="-16" y="-16" width="32" height="32" fill="none" stroke="#a3eea8" stroke-width="4" rx="10" transform="translate(32 32)"><animate attributeName="stroke-width" attributeType="XML" dur="4s" repeatCount="indefinite" values="0;4;0;0" keyTimes="0;0.35;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/><animateTransform attributeName="transform" additive="sum" attributeType="XML" type="scale" dur="4s" repeatCount="indefinite" values="0.5;0.5;1.6;0.5" keyTimes="0;0.35;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></rect><rect x="-16" y="-16" width="32" height="32" fill="#35c53f" rx="5" transform="translate(32 32)"><animateTransform attributeName="transform" additive="sum" attributeType="XML" type="scale" dur="4s" repeatCount="indefinite" values="1;1.3;1.1;1" keyTimes="0;0.5;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></rect><animateTransform attributeName="transform" attributeType="XML" additive="sum" type="rotate" dur="4s" repeatCount="indefinite" values="45 32 32;1080 32 32;945 32 32" keyTimes="0;0.6;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" calcMode="spline"/></g></svg>

package/app/assets/javascripts/components/primer/alpha/action_bar_element.d.ts

@@ -0,0 +1,17 @@
+import { ActionMenuElement } from './action_menu/action_menu_element';
+declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    itemContainer: HTMLElement;
+    moreMenu: ActionMenuElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    menuItemClick(event: Event): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/action_list.d.ts

@@ -0,0 +1,16 @@
+export declare class ActionListTruncationObserver {
+    resizeObserver: ResizeObserver;
+    constructor(el: HTMLElement);
+    unobserve(el: HTMLElement): void;
+    update(el: HTMLElement): void;
+}
+export declare class ActionListElement extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionListElement: typeof ActionListElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -0,0 +1,49 @@
+import '@oddbird/popover-polyfill';
+import type { IncludeFragmentElement } from '@github/include-fragment-element';
+import AnchoredPositionElement from '../../anchored_position';
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    includeFragment: IncludeFragmentElement;
+    overlay: AnchoredPositionElement;
+    list: HTMLElement;
+    static validItemRoles: string[];
+    static validSelectors: string[];
+    static menuItemSelectors: string[];
+    get selectVariant(): SelectVariant;
+    set selectVariant(variant: SelectVariant);
+    get dynamicLabelPrefix(): string;
+    set dynamicLabelPrefix(value: string);
+    get dynamicLabel(): boolean;
+    set dynamicLabel(value: boolean);
+    get popoverElement(): HTMLElement | null;
+    get childPopoverElements(): HTMLElement[];
+    get invokerElement(): HTMLButtonElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get items(): HTMLElement[];
+    getItemById(itemId: string): HTMLElement | null;
+    isItemDisabled(item: Element | null): boolean;
+    disableItem(item: Element | null): void;
+    enableItem(item: Element | null): void;
+    isItemHidden(item: Element | null): boolean;
+    hideItem(item: Element | null): void;
+    showItem(item: Element | null): void;
+    isItemChecked(item: Element | null): boolean;
+    checkItem(item: Element | null): void;
+    uncheckItem(item: Element | null): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts

@@ -0,0 +1,17 @@
+import AnchoredPositionElement from '../../anchored_position';
+type StackEntry = {
+    element: AnchoredPositionElement;
+    abortController?: AbortController;
+};
+export declare class ActionMenuFocusZoneStack {
+    #private;
+    constructor();
+    get current(): StackEntry | undefined;
+    push(next: AnchoredPositionElement, options?: {
+        trapFocus: boolean;
+    }): void;
+    pop(target?: AnchoredPositionElement): void;
+    elementIsMenuItem(element: HTMLElement): boolean;
+    get isEmpty(): boolean;
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/dropdown/menu.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

package/app/assets/javascripts/components/primer/alpha/dropdown.d.ts

@@ -0,0 +1 @@
+import './dropdown/menu';

package/app/assets/javascripts/components/primer/alpha/modal_dialog.d.ts

@@ -0,0 +1,18 @@
+export declare class ModalDialogElement extends HTMLElement {
+    #private;
+    openButton: HTMLButtonElement | null;
+    get open(): boolean;
+    set open(value: boolean);
+    get showButtons(): NodeList;
+    connectedCallback(): void;
+    show(): void;
+    close(closedNotCancelled?: boolean): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/segmented_control.d.ts

@@ -0,0 +1,12 @@
+export declare class SegmentedControlElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    connectedCallback(): void;
+    select(event: Event): void;
+    get current(): HTMLElement | null;
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts

@@ -0,0 +1,65 @@
+import { IncludeFragmentElement } from '@github/include-fragment-element';
+import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
+import type { LiveRegionElement } from '@primer/live-region-element';
+import '@primer/live-region-element';
+import '@oddbird/popover-polyfill';
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    inputName: string | null | undefined;
+};
+export type SelectPanelItem = HTMLLIElement;
+export type FilterFn = (item: SelectPanelItem, query: string) => boolean;
+export declare class SelectPanelElement extends HTMLElement {
+    #private;
+    includeFragment: IncludeFragmentElement;
+    dialog: HTMLDialogElement;
+    filterInputTextField: HTMLInputElement;
+    remoteInput: HTMLElement;
+    list: HTMLElement;
+    noResults: HTMLElement;
+    fragmentErrorElement: HTMLElement;
+    bannerErrorElement: HTMLElement;
+    bodySpinner: HTMLElement;
+    liveRegion: LiveRegionElement;
+    filterFn?: FilterFn;
+    get open(): boolean;
+    get selectVariant(): SelectVariant;
+    get ariaSelectionType(): string;
+    set selectVariant(variant: SelectVariant);
+    get dynamicLabelPrefix(): string;
+    get dynamicAriaLabelPrefix(): string;
+    set dynamicLabelPrefix(value: string);
+    get dynamicLabel(): boolean;
+    set dynamicLabel(value: boolean);
+    get invokerElement(): HTMLButtonElement | null;
+    get closeButton(): HTMLButtonElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
+    get align(): AnchorAlignment;
+    get side(): AnchorSide;
+    updateAnchorPosition(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    show(): void;
+    hide(): void;
+    get visibleItems(): SelectPanelItem[];
+    get items(): SelectPanelItem[];
+    get focusableItem(): HTMLElement | undefined;
+    getItemById(itemId: string): SelectPanelItem | null;
+    isItemDisabled(item: SelectPanelItem | null): boolean;
+    disableItem(item: SelectPanelItem | null): void;
+    enableItem(item: SelectPanelItem | null): void;
+    isItemHidden(item: SelectPanelItem | null): boolean;
+    isItemChecked(item: SelectPanelItem | null): boolean;
+    checkItem(item: SelectPanelItem | null): void;
+    uncheckItem(item: SelectPanelItem | null): void;
+}
+declare global {
+    interface Window {
+        SelectPanelElement: typeof SelectPanelElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/tab_container.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

package/app/assets/javascripts/components/primer/alpha/toggle_switch.d.ts

@@ -0,0 +1,34 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    turbo: boolean;
+    private toggling;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): Promise<void>;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private submitForm;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+        Turbo: {
+            renderStreamMessage: (message: string) => void;
+        };
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/tool_tip.d.ts

@@ -0,0 +1,27 @@
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get showReason(): "focus" | "mouse";
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get type(): 'description' | 'label';
+    set type(value: 'description' | 'label');
+    get direction(): Direction;
+    set direction(value: Direction);
+    get control(): HTMLElement | null;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): Promise<void>;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/tree_view/tree_view.d.ts

@@ -0,0 +1,42 @@
+import { SelectStrategy, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
+export declare class TreeViewElement extends HTMLElement {
+    #private;
+    formInputContainer: HTMLElement;
+    formInputPrototype: HTMLInputElement;
+    connectedCallback(): void;
+    rootLeafNodes(): NodeListOf<HTMLElement>;
+    rootSubTreeNodes(): NodeListOf<TreeViewSubTreeNodeElement>;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    getFormInputValueForNode(node: Element): string | null;
+    getNodePath(node: Element): string[];
+    getNodeType(node: Element): TreeViewNodeType | null;
+    markCurrentAtPath(path: string[]): void;
+    get currentNode(): HTMLLIElement | null;
+    expandAtPath(path: string[]): void;
+    collapseAtPath(path: string[]): void;
+    toggleAtPath(path: string[]): void;
+    checkAtPath(path: string[]): void;
+    uncheckAtPath(path: string[]): void;
+    toggleCheckedAtPath(path: string[]): void;
+    checkedValueAtPath(path: string[]): TreeViewCheckedValue;
+    disabledValueAtPath(path: string[]): boolean;
+    nodeAtPath(path: string[], selector?: string): Element | null;
+    subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
+    leafAtPath(path: string[]): HTMLLIElement | null;
+    setNodeCheckedValue(node: Element, value: TreeViewCheckedValue): void;
+    getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    getNodeDisabledValue(node: Element): boolean;
+    setNodeDisabledValue(node: Element, disabled: boolean): void;
+    nodeHasCheckBox(node: Element): boolean;
+    nodeHasNativeAction(node: Element): boolean;
+    expandAncestorsForNode(node: HTMLElement): void;
+    changeSelectStrategy(newStrategy: SelectStrategy): void;
+    infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
+}
+declare global {
+    interface Window {
+        TreeViewElement: typeof TreeViewElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts

@@ -0,0 +1,15 @@
+export declare class TreeViewIconPairElement extends HTMLElement {
+    #private;
+    expandedIcon: HTMLElement;
+    collapsedIcon: HTMLElement;
+    expanded: boolean;
+    connectedCallback(): void;
+    showExpanded(): void;
+    showCollapsed(): void;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        TreeViewIconPairElement: typeof TreeViewIconPairElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts

@@ -0,0 +1,9 @@
+import { IncludeFragmentElement } from '@github/include-fragment-element';
+export declare class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
+    request(): Request;
+}
+declare global {
+    interface Window {
+        TreeViewIncludeFragmentElement: typeof TreeViewIncludeFragmentElement;
+    }
+}

package/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewElement } from './tree_view';
+export declare function useRovingTabIndex(containerEl: TreeViewElement): void;
+export declare function getElementState(element: HTMLElement): 'open' | 'closed' | 'end';

package/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts

@@ -0,0 +1,45 @@
+import { TreeViewIconPairElement } from './tree_view_icon_pair_element';
+import { TreeViewIncludeFragmentElement } from './tree_view_include_fragment_element';
+import { TreeViewElement } from './tree_view';
+type LoadingState = 'loading' | 'error' | 'success';
+export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants';
+export declare class TreeViewSubTreeNodeElement extends HTMLElement {
+    #private;
+    node: HTMLElement;
+    subTree: HTMLElement;
+    iconPair: TreeViewIconPairElement;
+    toggleButton: HTMLElement;
+    expandedToggleIcon: HTMLElement;
+    collapsedToggleIcon: HTMLElement;
+    includeFragment: TreeViewIncludeFragmentElement;
+    loadingIndicator: HTMLElement;
+    loadingFailureMessage: HTMLElement;
+    retryButton: HTMLButtonElement;
+    connectedCallback(): void;
+    get expanded(): boolean;
+    set expanded(newValue: boolean);
+    get loadingState(): LoadingState;
+    set loadingState(newState: LoadingState);
+    get selectStrategy(): SelectStrategy;
+    get level(): number;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    expand(): void;
+    collapse(): void;
+    toggle(): void;
+    get nodes(): NodeListOf<Element>;
+    eachDirectDescendantNode(): Generator<Element>;
+    eachDirectDescendantSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
+    eachDescendantNode(): Generator<Element>;
+    eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
+    get isEmpty(): boolean;
+    get treeView(): TreeViewElement | null;
+    toggleChecked(): void;
+    changeSelectStrategy(newStrategy: SelectStrategy): void;
+}
+declare global {
+    interface Window {
+        TreeViewSubTreeNodeElement: typeof TreeViewSubTreeNodeElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/alpha/x_banner.d.ts

@@ -0,0 +1,18 @@
+declare global {
+    interface HTMLElementEventMap {
+        'banner:dismiss': CustomEvent<void>;
+    }
+}
+declare class XBannerElement extends HTMLElement {
+    #private;
+    titleText: HTMLElement;
+    dismiss(): void;
+    show(): void;
+    hide(): void;
+}
+declare global {
+    interface Window {
+        XBannerElement: typeof XBannerElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/anchored_position.d.ts

@@ -0,0 +1,27 @@
+import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+    #private;
+    get align(): AnchorAlignment;
+    set align(value: AnchorAlignment);
+    get side(): AnchorSide;
+    set side(value: AnchorSide);
+    get anchorOffset(): number;
+    set anchorOffset(value: number | 'normal' | 'spacious');
+    get anchor(): string;
+    set anchor(value: string);
+    get anchorElement(): HTMLElement | null;
+    set anchorElement(value: HTMLElement | null);
+    get alignmentOffset(): number;
+    set alignmentOffset(value: number);
+    get allowOutOfBounds(): boolean;
+    set allowOutOfBounds(value: boolean);
+    connectedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        AnchoredPositionElement: typeof AnchoredPositionElement;
+    }
+}

package/app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

package/app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts

@@ -0,0 +1 @@
+import '@github/clipboard-copy-element';

package/app/assets/javascripts/components/primer/beta/details_toggle_element.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+declare class DetailsToggleElement extends HTMLElement {
+    detailsTarget: HTMLDetailsElement;
+    summaryTarget: HTMLElement;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        DetailsToggleElement: typeof DetailsToggleElement;
+    }
+}
+export {};

package/app/assets/javascripts/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/assets/javascripts/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/assets/javascripts/components/primer/beta/relative_time.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

package/app/assets/javascripts/components/primer/dialog_helper.d.ts

@@ -0,0 +1,15 @@
+export declare class DialogHelperElement extends HTMLElement {
+    #private;
+    get dialog(): HTMLDialogElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: MouseEvent): void;
+}
+declare global {
+    interface Window {
+        DialogHelperElement: typeof DialogHelperElement;
+    }
+    interface HTMLElementTagNameMap {
+        'dialog-helper': DialogHelperElement;
+    }
+}

package/app/assets/javascripts/components/primer/focus_group.d.ts

@@ -0,0 +1,19 @@
+import '@oddbird/popover-polyfill';
+export default class FocusGroupElement extends HTMLElement {
+    #private;
+    get nowrap(): boolean;
+    set nowrap(value: boolean);
+    get direction(): 'horizontal' | 'vertical' | 'both';
+    set direction(value: 'horizontal' | 'vertical' | 'both');
+    get retain(): boolean;
+    set retain(value: boolean);
+    get mnemonics(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        FocusGroupElement: typeof FocusGroupElement;
+    }
+}

package/app/assets/javascripts/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -0,0 +1,11 @@
+import { CollapsibleElement } from '../collapsible';
+declare class CollapsibleHeaderElement extends CollapsibleElement {
+    connectedCallback(): void;
+    get baseClass(): string;
+}
+declare global {
+    interface Window {
+        CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
+    }
+}
+export {};

package/app/assets/javascripts/components/primer/open_project/collapsible.d.ts

@@ -0,0 +1,13 @@
+export declare abstract class CollapsibleElement extends HTMLElement {
+    arrowDown: Element;
+    arrowUp: Element;
+    triggerElement: HTMLElement;
+    collapsibleElements: HTMLElement[];
+    collapsed: boolean;
+    toggleViaKeyboard(event: KeyboardEvent): void;
+    toggle(): void;
+    attributeChangedCallback(name: string): void;
+    hideAll(): void;
+    expandAll(): void;
+    abstract get baseClass(): string;
+}