@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,27 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--progressBar-track-bgColor);
+  border-radius: var(--borderRadius-medium);
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: var(--base-size-2);
+}

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

@@ -0,0 +1,10 @@
+{
+  "name": "beta/progress_bar",
+  "selectors": [
+    ".Progress",
+    ".Progress--large",
+    ".Progress--small",
+    ".Progress-item",
+    ".Progress-item + .Progress-item"
+  ]
+}

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

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

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

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

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

@@ -0,0 +1,59 @@
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--control-medium-lineBoxHeight);
+  text-align: center;
+  white-space: nowrap;
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
+  border: var(--borderWidth-thin) solid transparent;
+  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);
+}
+
+.State--open {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);
+}
+
+.State--merged {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);
+}
+
+.State--closed {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);
+}
+
+/* Small 24px */
+
+.State--small {
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0 10px;
+  font-size: var(--text-body-size-small);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--base-size-24);
+}
+
+.State--small .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }

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

@@ -0,0 +1,13 @@
+{
+  "name": "beta/state",
+  "selectors": [
+    ".state",
+    ".State",
+    ".State--draft",
+    ".State--open",
+    ".State--merged",
+    ".State--closed",
+    ".State--small",
+    ".State--small .octicon"
+  ]
+}

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

@@ -0,0 +1,64 @@
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  padding-bottom: var(--stack-padding-condensed);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+
+.Subhead--spacious {
+  margin-top: var(--base-size-40);
+}
+
+/* <h2> sized heading with normal font weight */
+
+.Subhead-heading {
+  font-weight: var(--base-text-weight-normal);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+.Subhead-heading--large {
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-24);
+}
+
+.Subhead-heading--medium {
+  font-size: var(--text-title-size-medium);
+}
+
+/* Make the text bold and red for dangerous content */
+
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-danger);
+}
+
+/* One-liner of supporting text */
+
+.Subhead-description {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+
+.Subhead-actions {
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+}
+
+.Subhead-actions + .Subhead-description {
+    margin-top: var(--base-size-4);
+  }

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

@@ -0,0 +1,14 @@
+{
+  "name": "beta/subhead",
+  "selectors": [
+    ".Subhead",
+    ".Subhead--spacious",
+    ".Subhead-heading",
+    ".Subhead-heading--large",
+    ".Subhead-heading--medium",
+    ".Subhead-heading--danger",
+    ".Subhead-description",
+    ".Subhead-actions",
+    ".Subhead-actions + .Subhead-description"
+  ]
+}

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

@@ -0,0 +1,106 @@
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--stack-padding-normal) 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: var(--stack-gap-normal);
+
+  /* The Timeline */
+}
+
+.TimelineItem::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--borderWidth-thick);
+    content: '';
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--borderColor-muted);
+  }
+
+.TimelineItem:target .TimelineItem-badge {
+    border-color: var(--borderColor-accent-emphasis);
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
+  }
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--control-medium-size);
+  height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-right: var(--controlStack-medium-gap-condensed);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: calc(var(--control-medium-size) / -2 + 1px);
+  color: var(--fgColor-muted);
+  align-items: center;
+  background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
+  border: var(--borderWidth-thick) solid var(--bgColor-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-success-emphasis);
+  border: var(--borderWidth-thin) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4);
+  color: var(--fgColor-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  /* stylelint-disable-next-line primer/spacing */
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--stack-gap-spacious);
+  margin: 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: calc(var(--stack-gap-normal) * -1);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: -56px;
+  background-color: var(--bgColor-default);
+  border: 0;
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+}
+
+.TimelineItem--condensed:last-child {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: var(--stack-gap-normal);
+  }
+
+.TimelineItem--condensed .TimelineItem-badge {
+    height: var(--base-size-16);
+    margin-top: var(--base-size-8);
+    margin-bottom: var(--base-size-8);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-default);
+    border: 0;
+  }

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

@@ -0,0 +1,16 @@
+{
+  "name": "beta/timeline_item",
+  "selectors": [
+    ".TimelineItem",
+    ".TimelineItem::before",
+    ".TimelineItem:target .TimelineItem-badge",
+    ".TimelineItem-badge",
+    ".TimelineItem-badge--success",
+    ".TimelineItem-body",
+    ".TimelineItem-avatar",
+    ".TimelineItem-break",
+    ".TimelineItem--condensed",
+    ".TimelineItem--condensed:last-child",
+    ".TimelineItem--condensed .TimelineItem-badge"
+  ]
+}

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

@@ -0,0 +1,30 @@
+/* Truncate */
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.Truncate > .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+:is(.Truncate > .Truncate-text) + .Truncate-text {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--control-small-gap);
+    }
+
+.Truncate-text--primary:is(.Truncate > .Truncate-text) {
+      flex-basis: 200%;
+    }
+
+.Truncate-text--expandable:is(.Truncate > .Truncate-text):hover,.Truncate-text--expandable:is(.Truncate > .Truncate-text):focus,.Truncate-text--expandable:is(.Truncate > .Truncate-text):active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }

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

@@ -0,0 +1,12 @@
+{
+  "name": "beta/truncate",
+  "selectors": [
+    ".Truncate",
+    ".Truncate > .Truncate-text",
+    ":is(.Truncate > .Truncate-text) + .Truncate-text",
+    ".Truncate-text--primary:is(.Truncate > .Truncate-text)",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):hover",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):focus",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):active"
+  ]
+}

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

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

package/app/components/primer/dialog_helper.js

@@ -0,0 +1,132 @@
+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 __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 _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
+function dialogInvokerButtonHandler(event) {
+    const target = event.target;
+    const button = target?.closest('button');
+    if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
+        return;
+    // If the user is clicking a valid dialog trigger
+    let dialogId = button?.getAttribute('data-show-dialog-id');
+    if (dialogId) {
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof HTMLDialogElement) {
+            dialog.showModal();
+            // A buttons default behaviour in some browsers it to send a pointer event
+            // If the behaviour is allowed through the dialog will be shown but then
+            // quickly hidden- as if it were never shown. This prevents that.
+            event.preventDefault();
+            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+            // any popover that is currently open, regardless of whether or not another top layer element,
+            // such as a <dialog> is nested inside.
+            // See https://github.com/whatwg/html/issues/9998.
+            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
+            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            let node = button;
+            let fixed = false;
+            while (node) {
+                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                if (node && node.popover === 'auto') {
+                    node.classList.add('dialog-inside-popover-fix');
+                    node.popover = 'manual';
+                    node.showPopover();
+                    fixed = true;
+                }
+            }
+            if (fixed) {
+                // We need to re-open the dialog as modal, and also ensure no close event listeners
+                // are trying to act on the close
+                /* eslint-disable-next-line no-restricted-syntax */
+                dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+                dialog.close();
+                dialog.showModal();
+                dialog.addEventListener('close', () => {
+                    for (const el of dialog.ownerDocument.querySelectorAll('.dialog-inside-popover-fix')) {
+                        if (el.contains(dialog)) {
+                            el.classList.remove('dialog-inside-popover-fix');
+                            el.popover = 'auto';
+                            el.showPopover();
+                        }
+                    }
+                }, { once: true });
+            }
+        }
+    }
+    dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
+    if (dialogId) {
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof HTMLDialogElement && dialog.open) {
+            dialog.close();
+        }
+    }
+}
+export class DialogHelperElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _DialogHelperElement_instances.add(this);
+        _DialogHelperElement_abortController.set(this, null);
+    }
+    get dialog() {
+        return this.querySelector('dialog');
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
+        document.addEventListener('click', dialogInvokerButtonHandler, true);
+        document.addEventListener('click', this, { signal });
+        this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
+        new MutationObserver(records => {
+            for (const record of records) {
+                if (record.target === this.dialog) {
+                    __classPrivateFieldGet(this, _DialogHelperElement_instances, "m", _DialogHelperElement_handleDialogOpenAttribute).call(this);
+                }
+            }
+        }).observe(this, { subtree: true, attributeFilter: ['open'] });
+        __classPrivateFieldGet(this, _DialogHelperElement_instances, "m", _DialogHelperElement_handleDialogOpenAttribute).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")?.abort();
+    }
+    handleEvent(event) {
+        const target = event.target;
+        const dialog = this.dialog;
+        // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+        if (target !== dialog || !dialog?.open)
+            return;
+        // If the dialog contains a form, do not close the dialog when clicking outside of the dialog
+        if (dialog.querySelector('form'))
+            return;
+        const rect = dialog.getBoundingClientRect();
+        const clickWasInsideDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
+        if (!clickWasInsideDialog) {
+            dialog.close();
+        }
+    }
+}
+_DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
+    if (!this.dialog)
+        return;
+    // We don't want to show the Dialog component as non-modal
+    if (this.dialog.matches('[open]:not(:modal)')) {
+        // eslint-disable-next-line no-restricted-syntax
+        this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+        this.dialog.close();
+        this.dialog.showModal();
+    }
+};
+if (!window.customElements.get('dialog-helper')) {
+    window.DialogHelperElement = DialogHelperElement;
+    window.customElements.define('dialog-helper', DialogHelperElement);
+}

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

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