@openproject/primer-view-components 0.0.0-20230808124600

package/app/components/primer/alpha/underline_nav.css

@@ -0,0 +1 @@
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

package/app/components/primer/alpha/underline_nav.css.json

@@ -0,0 +1,28 @@
+{
+  "name": "alpha/underline_nav",
+  "selectors": [
+    ".UnderlineNav",
+    ".UnderlineNav .Counter",
+    ".UnderlineNav .Counter--primary",
+    ".UnderlineNav-body",
+    ".UnderlineNav-item",
+    ".UnderlineNav-item:focus",
+    ".UnderlineNav-item:focus-visible",
+    ".UnderlineNav-item:hover",
+    ".UnderlineNav-item [data-content]:before",
+    ".UnderlineNav-item:before",
+    ".UnderlineNav-item.selected",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false])",
+    ".UnderlineNav-item[role=tab][aria-selected=true]",
+    ".UnderlineNav-item.selected:after",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
+    ".UnderlineNav-item[role=tab][aria-selected=true]:after",
+    ".UnderlineNav--right",
+    ".UnderlineNav--right .UnderlineNav-actions",
+    ".UnderlineNav-actions",
+    ".UnderlineNav--full",
+    ".UnderlineNav--full .UnderlineNav-body",
+    ".UnderlineNav-octicon",
+    ".UnderlineNav-container"
+  ]
+}

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

@@ -0,0 +1,13 @@
+declare class XBannerElement extends HTMLElement {
+    #private;
+    titleText: HTMLElement;
+    dismiss(): void;
+    show(): void;
+    hide(): void;
+}
+declare global {
+    interface Window {
+        XBannerElement: typeof XBannerElement;
+    }
+}
+export {};

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

@@ -0,0 +1,49 @@
+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 _XBannerElement_instances, _XBannerElement_dismissScheme_get;
+import { controller, target } from '@github/catalyst';
+let XBannerElement = class XBannerElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _XBannerElement_instances.add(this);
+    }
+    dismiss() {
+        const parentElement = this.parentElement;
+        if (!parentElement)
+            return;
+        if (__classPrivateFieldGet(this, _XBannerElement_instances, "a", _XBannerElement_dismissScheme_get) === 'remove') {
+            parentElement.removeChild(this);
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        this.style.setProperty('display', 'initial');
+    }
+    hide() {
+        this.style.setProperty('display', 'none');
+    }
+};
+_XBannerElement_instances = new WeakSet(), _XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
+    return this.getAttribute('data-dismiss-scheme');
+};
+__decorate([
+    target
+], XBannerElement.prototype, "titleText", void 0);
+XBannerElement = __decorate([
+    controller
+], XBannerElement);
+if (!window.customElements.get('x-banner')) {
+    window.XBannerElement = XBannerElement;
+    window.customElements.define('x-banner', XBannerElement);
+}

package/app/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/components/primer/anchored_position.js

@@ -0,0 +1,147 @@
+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 __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 _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+export default class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const { left, top } = getAnchoredPosition(this, anchor, this);
+            this.style.top = `${top}px`;
+            this.style.left = `${left}px`;
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}

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

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

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

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

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

@@ -0,0 +1 @@
+.avatar{background-color:var(--avatar-bgColor,var(--color-avatar-bg));border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border));display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}

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

@@ -0,0 +1,17 @@
+{
+  "name": "beta/avatar",
+  "selectors": [
+    ".avatar",
+    ".avatar-link",
+    ".avatar-group-item",
+    ".avatar-1",
+    ".avatar-2",
+    ".avatar-small",
+    ".avatar-3",
+    ".avatar-4",
+    ".avatar-5",
+    ".avatar-6",
+    ".avatar-7",
+    ".avatar-8"
+  ]
+}

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

@@ -0,0 +1 @@
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted,var(--color-canvas-subtle));margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-subtle));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));border-right:0;margin-left:-11px;margin-right:0}

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

@@ -0,0 +1,28 @@
+{
+  "name": "beta/avatar_stack",
+  "selectors": [
+    ".AvatarStack",
+    ".AvatarStack .AvatarStack-body",
+    ".AvatarStack.AvatarStack--two",
+    ".AvatarStack.AvatarStack--three-plus",
+    ".AvatarStack-body",
+    ".AvatarStack-body .avatar",
+    ".AvatarStack-body .avatar:first-child",
+    ".AvatarStack-body .avatar:last-child",
+    ".AvatarStack-body .avatar img",
+    ".AvatarStack-body .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar",
+    ".AvatarStack-body:hover .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar-more",
+    ".avatar.avatar-more",
+    ".avatar.avatar-more:after",
+    ".avatar.avatar-more:before",
+    ".AvatarStack--right .AvatarStack-body",
+    ".AvatarStack--right .AvatarStack-body:hover .avatar",
+    ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
+    ".AvatarStack--right .avatar.avatar-more",
+    ".AvatarStack--right .avatar.avatar-more:before",
+    ".AvatarStack--right .avatar.avatar-more:after",
+    ".AvatarStack--right .avatar"
+  ]
+}

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

@@ -0,0 +1 @@
+.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.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,6px);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{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,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) 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}

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

@@ -0,0 +1,22 @@
+{
+  "name": "beta/blankslate",
+  "selectors": [
+    ".blankslate",
+    ".blankslate p",
+    ".blankslate code",
+    ".blankslate img",
+    ".blankslate-icon",
+    ".blankslate-image",
+    ".blankslate-heading",
+    ".blankslate-action",
+    ".blankslate-action:first-of-type",
+    ".blankslate-action:last-of-type",
+    ".blankslate-capped",
+    ".blankslate-spacious",
+    ".blankslate-narrow",
+    ".blankslate-large img",
+    ".blankslate-large h3",
+    ".blankslate-large p",
+    ".blankslate-clean-background"
+  ]
+}

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

@@ -0,0 +1 @@
+.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}

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

@@ -0,0 +1,54 @@
+{
+  "name": "beta/border_box",
+  "selectors": [
+    ".Box",
+    ".Box--condensed",
+    ".Box--condensed .Box-body",
+    ".Box--condensed .Box-footer",
+    ".Box--condensed .Box-header",
+    ".Box--condensed .Box-btn-octicon.btn-octicon",
+    ".Box--condensed .Box-row",
+    ".Box--spacious .Box-header",
+    ".Box--spacious .Box-title",
+    ".Box--spacious .Box-body",
+    ".Box--spacious .Box-btn-octicon.btn-octicon",
+    ".Box--spacious .Box-footer",
+    ".Box--spacious .Box-row",
+    ".Box-header",
+    ".Box-title",
+    ".Box-body",
+    ".Box-body:last-of-type",
+    ".Box-row",
+    ".Box-row:first-of-type",
+    ".Box-row:last-of-type",
+    ".Box-row.Box-row--unread",
+    ".Box-row.unread",
+    ".Box-row.navigation-focus .Box-row--drag-button",
+    ".Box-row.navigation-focus.is-dragging .Box-row--drag-button",
+    ".Box-row.navigation-focus.sortable-chosen",
+    ".Box-row.navigation-focus.sortable-ghost",
+    ".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",
+    ".Box-row--focus-gray.navigation-focus",
+    ".Box-row--focus-blue.navigation-focus",
+    ".Box-row--hover-gray:hover",
+    ".Box-row--hover-blue:hover",
+    ".Box-row-link",
+    ".Box-row-link:hover",
+    ".Box-row--drag-button",
+    ".Box-footer",
+    ".Box--scrollable",
+    ".Box--blue",
+    ".Box--blue .Box-header",
+    ".Box--blue .Box-body",
+    ".Box--blue .Box-footer",
+    ".Box--blue .Box-row",
+    ".Box--danger",
+    ".Box--danger .Box-body:last-of-type",
+    ".Box--danger .Box-row:first-of-type",
+    ".Box-header--blue",
+    ".Box-row--yellow",
+    ".Box-row--blue",
+    ".Box-row--gray",
+    ".Box-btn-octicon.btn-octicon"
+  ]
+}

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

@@ -0,0 +1 @@
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis,var(--color-fg-subtle));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default,var(--color-fg-default))}

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

@@ -0,0 +1,11 @@
+{
+  "name": "beta/breadcrumbs",
+  "selectors": [
+    ".breadcrumb-item",
+    ".breadcrumb-item:after",
+    ".breadcrumb-item:first-child",
+    ".breadcrumb-item-selected:after",
+    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
+    ".breadcrumb-item-selected a"
+  ]
+}

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

@@ -0,0 +1 @@
+:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,6px);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link-rest,var(--color-accent-fg));border:none;color:var(--fgColor-link-rest,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}

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

@@ -0,0 +1,75 @@
+{
+  "name": "beta/button",
+  "selectors": [
+    ":root",
+    ".Button",
+    ".Button:before",
+    ".Button:hover",
+    ".Button:active",
+    ".Button:disabled",
+    ".Button[aria-disabled=true]",
+    ".Button-withTooltip",
+    "a.Button:hover",
+    "summary.Button:hover",
+    ".Button-content",
+    ".Button-content>:not(:last-child)",
+    ".Button-content--alignStart",
+    ".Button-visual",
+    ".Button-visual .Counter",
+    ".Button-label",
+    ".Button-leadingVisual",
+    ".Button-trailingVisual",
+    ".Button-trailingAction",
+    ".Button--small",
+    ".Button--small .Button-label",
+    ".Button--small .Button-content>:not(:last-child)",
+    ".Button--large",
+    ".Button--large .Button-label",
+    ".Button--large .Button-content>:not(:last-child)",
+    ".Button--fullWidth",
+    ".Button--primary",
+    ".Button--primary:hover:not(:disabled)",
+    ".Button--primary:focus",
+    ".Button--primary:focus:not(:focus-visible)",
+    ".Button--primary:focus-visible",
+    ".Button--primary:active:not(:disabled)",
+    ".Button--primary[aria-pressed=true]",
+    ".Button--primary:disabled",
+    ".Button--primary[aria-disabled=true]",
+    ".Button--primary .Counter",
+    ".Button--secondary",
+    ".Button--secondary:hover:not(:disabled)",
+    ".Button--secondary:active:not(:disabled)",
+    ".Button--secondary[aria-pressed=true]",
+    ".Button--secondary:disabled",
+    ".Button--secondary[aria-disabled=true]",
+    ".Button--invisible",
+    ".Button--invisible:hover:not(:disabled)",
+    ".Button--invisible:active:not(:disabled)",
+    ".Button--invisible[aria-pressed=true]",
+    ".Button--invisible:disabled",
+    ".Button--invisible[aria-disabled=true]",
+    ".Button--invisible.Button--invisible-noVisuals .Button-label",
+    ".Button--invisible .Button-visual",
+    ".Button--invisible .Button-visual .Counter",
+    ".Button--link",
+    ".Button--link:hover:not(:disabled)",
+    ".Button--link:focus",
+    ".Button--link:focus-visible",
+    ".Button--link:disabled",
+    ".Button--link[aria-disabled=true]",
+    ".Button--danger",
+    ".Button--danger:hover:not(:disabled)",
+    ".Button--danger:hover:not(:disabled) .Counter",
+    ".Button--danger:active:not(:disabled)",
+    ".Button--danger[aria-pressed=true]",
+    ".Button--danger:disabled",
+    ".Button--danger[aria-disabled=true]",
+    ".Button--danger:disabled .Counter",
+    ".Button--danger[aria-disabled=true] .Counter",
+    ".Button--danger .Counter",
+    ".Button--iconOnly",
+    ".Button--iconOnly.Button--small",
+    ".Button--iconOnly.Button--large"
+  ]
+}

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

@@ -0,0 +1 @@
+.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,6px);border-top-left-radius:var(--borderRadius-medium,6px)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}

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

@@ -0,0 +1,14 @@
+{
+  "name": "beta/button_group",
+  "selectors": [
+    ".ButtonGroup",
+    ".ButtonGroup .Button",
+    ".ButtonGroup .Button:active",
+    ".ButtonGroup .Button:focus",
+    ".ButtonGroup .Button:hover",
+    ".ButtonGroup>.Button-withTooltip:first-child .Button",
+    ".ButtonGroup>:first-child",
+    ".ButtonGroup>.Button-withTooltip:last-child .Button",
+    ".ButtonGroup>:last-child"
+  ]
+}

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

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

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

@@ -0,0 +1,43 @@
+import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
+function showSVG(svg) {
+    svg.style.display = 'inline-block';
+}
+function hideSVG(svg) {
+    svg.style.display = 'none';
+}
+// Toggle a copy button.
+function showCopy(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    showSVG(copyIcon);
+    hideSVG(checkIcon);
+}
+// Toggle a copy button.
+function showCheck(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    hideSVG(copyIcon);
+    showSVG(checkIcon);
+}
+const clipboardCopyElementTimers = new WeakMap();
+document.addEventListener('clipboard-copy', ({ target }) => {
+    if (!(target instanceof HTMLElement))
+        return;
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        showCheck(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
+});

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

@@ -0,0 +1 @@
+.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}

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

@@ -0,0 +1,10 @@
+{
+  "name": "beta/counter",
+  "selectors": [
+    ".Counter",
+    ".Counter:empty",
+    ".Counter .octicon",
+    ".Counter--primary",
+    ".Counter--secondary"
+  ]
+}