@openproject/primer-view-components 0.0.0-20230808124600

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

@@ -0,0 +1,28 @@
+export declare class NavListElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    selectItemById(itemId: string | null): boolean;
+    selectItemByHref(href: string | null): boolean;
+    selectItemByCurrentLocation(): boolean;
+    expandItem(item: HTMLElement): void;
+    collapseItem(item: HTMLElement): void;
+    itemIsExpanded(item: HTMLElement | null): boolean;
+    handleItemWithSubItemClick(e: Event): void;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListElement: typeof NavListElement;
+    }
+}

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

@@ -0,0 +1,248 @@
+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 _NavListElement_instances, _NavListElement_parseHTML, _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';
+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;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemById).call(this, itemId);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByHref(href) {
+        if (!href)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, href);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByCurrentLocation() {
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByCurrentLocation).call(this);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    // expand collapsible item onClick
+    expandItem(item) {
+        var _a;
+        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.setAttribute('aria-expanded', 'true');
+    }
+    collapseItem(item) {
+        var _a;
+        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
+        item.setAttribute('aria-expanded', 'false');
+        item.focus();
+    }
+    itemIsExpanded(item) {
+        if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
+            return true;
+        }
+        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+    }
+    // expand/collapse item
+    handleItemWithSubItemClick(e) {
+        const el = e.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        const button = el.closest('button');
+        if (!button)
+            return;
+        if (this.itemIsExpanded(button)) {
+            this.collapseItem(button);
+        }
+        else {
+            this.expandItem(button);
+        }
+        e.stopPropagation();
+    }
+    // collapse item
+    handleItemWithSubItemKeydown(e) {
+        const el = e.currentTarget;
+        if (!(el instanceof HTMLElement))
+            return;
+        let button = el.closest('button');
+        if (!button) {
+            const button_id = el.getAttribute('aria-labelledby');
+            if (button_id) {
+                button = document.getElementById(button_id);
+            }
+            else {
+                return;
+            }
+        }
+        if (this.itemIsExpanded(button) && e.key === 'Escape') {
+            this.collapseItem(button);
+        }
+        e.stopPropagation();
+    }
+    async showMore(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
+        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+    var _a;
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+        if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+            continue;
+        }
+        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        if (keys.includes(itemId)) {
+            return navItem;
+        }
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
+    if (selectedNavItem) {
+        return selectedNavItem.closest('.ActionListItem');
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+    return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
+}, _NavListElement_select = function _NavListElement_select(navItem) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
+    if (currentlySelectedItem)
+        __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
+    navItem.classList.add('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].setAttribute('aria-current', 'page');
+    }
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.expandItem(parentMenu);
+        parentMenu.classList.add('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+    navItem.classList.remove('ActionListItem--navActive');
+    if (navItem.children.length > 0) {
+        navItem.children[0].removeAttribute('aria-current');
+    }
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.collapseItem(parentMenu);
+        parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+    var _a;
+    if (!navItem.classList.contains('ActionListItem--subItem'))
+        return null;
+    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    if (parent) {
+        return parent;
+    }
+    else {
+        return null;
+    }
+};
+__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);
+export { NavListElement };

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

@@ -0,0 +1 @@
+anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}

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

@@ -0,0 +1,8 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    "anchored-position[popover]",
+    ".Overlay",
+    "anchored-position[popover]:not(.\\:popover-open)"
+  ]
+}

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

@@ -0,0 +1 @@
+.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--button-default-fgColor-rest,var(--color-btn-text));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}

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

@@ -0,0 +1,33 @@
+{
+  "name": "alpha/segmented_control",
+  "selectors": [
+    ".SegmentedControl",
+    ".SegmentedControl-item",
+    ".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
+    ".SegmentedControl-item .Button--invisible:active:not(:disabled)",
+    ".SegmentedControl-item.SegmentedControl-item--selected",
+    ".SegmentedControl-item.SegmentedControl-item--selected .Button",
+    ".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
+    ".SegmentedControl-item.SegmentedControl-item--selected:before",
+    ".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
+    ".SegmentedControl-item .Button-label[data-content]:before",
+    ".SegmentedControl-item:not(:first-child):before",
+    ".SegmentedControl-item .Button",
+    ".SegmentedControl-item .Button:focus-visible",
+    ".SegmentedControl-item .Button--small",
+    ".SegmentedControl-item .Button--small.Button--iconOnly",
+    ".SegmentedControl-item .Button--small.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--medium",
+    ".SegmentedControl-item .Button--medium.Button--iconOnly",
+    ".SegmentedControl-item .Button--medium.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--large",
+    ".SegmentedControl-item .Button--large.Button--iconOnly",
+    ".SegmentedControl-item .Button--large.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--iconOnly",
+    ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
+    ".SegmentedControl--fullWidth",
+    ".SegmentedControl--fullWidth .SegmentedControl-item",
+    ".SegmentedControl--fullWidth .Button--iconOnly",
+    ".SegmentedControl--fullWidth .Button-withTooltip"
+  ]
+}

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

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

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

@@ -0,0 +1,47 @@
+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 _SegmentedControlElement_instances, _SegmentedControlElement_updateButtonLabels;
+import { controller, targets } from '@github/catalyst';
+let SegmentedControlElement = class SegmentedControlElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _SegmentedControlElement_instances.add(this);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _SegmentedControlElement_instances, "m", _SegmentedControlElement_updateButtonLabels).call(this);
+    }
+    select(event) {
+        var _a, _b;
+        const button = event.currentTarget;
+        for (const item of this.items) {
+            item.classList.remove('SegmentedControl-item--selected');
+            (_a = item.querySelector('[aria-current]')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-current', 'false');
+        }
+        (_b = button.closest('li.SegmentedControl-item')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
+        button.setAttribute('aria-current', 'true');
+    }
+};
+_SegmentedControlElement_instances = new WeakSet(), _SegmentedControlElement_updateButtonLabels = function _SegmentedControlElement_updateButtonLabels() {
+    for (const label of this.querySelectorAll('.Button-label')) {
+        label.setAttribute('data-content', label.textContent || '');
+    }
+};
+__decorate([
+    targets
+], SegmentedControlElement.prototype, "items", void 0);
+SegmentedControlElement = __decorate([
+    controller
+], SegmentedControlElement);
+if (!window.customElements.get('segmented-control')) {
+    window.SegmentedControlElement = SegmentedControlElement;
+    window.customElements.define('segmented-control', SegmentedControlElement);
+}

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

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

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

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

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

@@ -0,0 +1 @@
+.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}

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

@@ -0,0 +1,24 @@
+{
+  "name": "alpha/tab_nav",
+  "selectors": [
+    ".tabnav",
+    ".tabnav-tabs",
+    ".tabnav-tab",
+    ".tabnav-tab.selected",
+    ".tabnav-tab[aria-current]:not([aria-current=false])",
+    ".tabnav-tab[aria-selected=true]",
+    ".tabnav-tab.selected .octicon",
+    ".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",
+    ".tabnav-tab[aria-selected=true] .octicon",
+    ".tabnav-tab:hover",
+    ".tabnav-tab:focus",
+    ".tabnav-tab:focus-visible",
+    ".tabnav-tab .octicon",
+    ".tabnav-tab:active",
+    ".tabnav-tab .Counter",
+    ".tabnav-extra",
+    ".tabnav-extra>.octicon",
+    "a.tabnav-extra:hover",
+    ".tabnav-btn"
+  ]
+}

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

@@ -0,0 +1 @@
+.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.33333)}.FormControl-inlineValidation{fill:var(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;color:var(--control-borderColor-danger,var(--color-danger-emphasis));display:flex;flex-direction:row;font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,var(--color-fg-subtle));opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--bgColor-default,var(--color-canvas-default))}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,var(--color-attention-emphasis))}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted,var(--color-fg-muted));display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,3px);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,var(--color-border-default));content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,9999px);cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4,.25rem)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}

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

@@ -0,0 +1,135 @@
+{
+  "name": "alpha/text_field",
+  "selectors": [
+    ".FormControl",
+    ".FormControl--fullWidth",
+    ".FormControl-label",
+    ".FormControl-caption",
+    ".FormControl-inlineValidation",
+    ".FormControl-inlineValidation p",
+    ".FormControl-inlineValidation--visual",
+    ".FormControl-spacingWrapper",
+    ".FormControl-horizontalGroup",
+    ".FormControl-input",
+    ".FormControl-select",
+    ".FormControl-textarea",
+    ".FormControl-input[disabled]",
+    ".FormControl-select[disabled]",
+    ".FormControl-textarea[disabled]",
+    ".FormControl-input[invalid]:not(:focus)",
+    ".FormControl-select[invalid]:not(:focus)",
+    ".FormControl-textarea[invalid]:not(:focus)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-input[disabled]::placeholder",
+    ".FormControl-select[disabled]::placeholder",
+    ".FormControl-textarea[disabled]::placeholder",
+    ".FormControl-input[readonly]",
+    ".FormControl-select[readonly]",
+    ".FormControl-textarea[readonly]",
+    ".FormControl-input::placeholder",
+    ".FormControl-select::placeholder",
+    ".FormControl-textarea::placeholder",
+    ".FormControl-input.FormControl-small",
+    ".FormControl-select.FormControl-small",
+    ".FormControl-textarea.FormControl-small",
+    ".FormControl-input.FormControl-medium",
+    ".FormControl-select.FormControl-medium",
+    ".FormControl-textarea.FormControl-medium",
+    ".FormControl-input.FormControl-large",
+    ".FormControl-select.FormControl-large",
+    ".FormControl-textarea.FormControl-large",
+    ".FormControl-input.FormControl-inset",
+    ".FormControl-select.FormControl-inset",
+    ".FormControl-textarea.FormControl-inset",
+    ".FormControl-input.FormControl-inset:focus",
+    ".FormControl-input.FormControl-inset:focus-visible",
+    ".FormControl-select.FormControl-inset:focus",
+    ".FormControl-select.FormControl-inset:focus-visible",
+    ".FormControl-textarea.FormControl-inset:focus",
+    ".FormControl-textarea.FormControl-inset:focus-visible",
+    ".FormControl-input.FormControl-monospace",
+    ".FormControl-select.FormControl-monospace",
+    ".FormControl-textarea.FormControl-monospace",
+    ".FormControl-input.FormControl-error",
+    ".FormControl-select.FormControl-error",
+    ".FormControl-textarea.FormControl-error",
+    ".FormControl-input.FormControl-success",
+    ".FormControl-select.FormControl-success",
+    ".FormControl-textarea.FormControl-success",
+    ".FormControl-input.FormControl-warning",
+    ".FormControl-select.FormControl-warning",
+    ".FormControl-textarea.FormControl-warning",
+    ".FormControl-toggleSwitchInput",
+    ".FormControl-input-wrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",
+    ".FormControl-input-wrap .FormControl-input-trailingAction",
+    ".FormControl-input-wrap .FormControl-input-trailingAction svg",
+    ".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:hover",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:active",
+    ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:after",
+    ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before",
+    ".FormControl-select-wrap",
+    ".FormControl-select-wrap:after",
+    ".FormControl-select-wrap .FormControl-select",
+    ".FormControl-checkbox-wrap",
+    ".FormControl-radio-wrap",
+    ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
+    ".FormControl-radio-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-radio-wrap .FormControl-radio-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-label",
+    ".FormControl-radio-wrap .FormControl-label",
+    ".FormControl-check-group-wrap fieldset",
+    ".FormControl-radio-group-wrap fieldset",
+    "input[type=checkbox].FormControl-checkbox",
+    "input.FormControl-checkbox[type=checkbox][disabled]",
+    "input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:before",
+    "input.FormControl-checkbox[type=checkbox]:after",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox]:checked",
+    "input.FormControl-checkbox[type=checkbox]:checked:before",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled:before",
+    "input.FormControl-checkbox[type=checkbox]:focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:indeterminate:before",
+    "input[type=radio].FormControl-radio",
+    "input.FormControl-radio[type=radio][disabled]",
+    "input.FormControl-radio[type=radio][invalid]:not(:focus)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-radio[type=radio]:after",
+    "input.FormControl-radio[type=radio]:checked",
+    "input.FormControl-radio[type=radio]:checked:disabled",
+    "input.FormControl-radio[type=radio]:focus-visible"
+  ]
+}

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

@@ -0,0 +1 @@
+.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,.5rem)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlTrack-borderColor-rest,var(--color-switch-track-border));border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,2rem);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,4rem)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg));border-color:#0000;color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg))}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-color:var(--borderColor-transparent,#0000)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg))}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked,var(--color-switch-knob-checked-bg));border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border));transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg));border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default,var(--color-border-default));box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg))}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest,var(--color-switch-track-fg));transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,1rem)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,.75rem)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,1.5rem);width:var(--base-size-48,3rem)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted,var(--color-fg-muted))}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}