@mixtint/primer-view-components 0.72.0

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

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

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

@@ -0,0 +1,20 @@
+.ButtonGroup {
+  display: inline-flex;
+}
+.ButtonGroup .Button {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+  }
+:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):hover {
+      z-index: 1;
+    }
+.ButtonGroup > :first-child .Button {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+.ButtonGroup > :last-child .Button {
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }

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

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

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,58 @@
+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);
+    const clipboardCopyLiveRegion = target.parentNode?.querySelector('[data-clipboard-copy-feedback]');
+    const copiedAnnouncement = 'Copied!';
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        showCheck(target);
+        if (clipboardCopyLiveRegion) {
+            if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+                /* This is a hack due to the way the aria live API works.
+                A screen reader will not read a live region again
+                if the text is the same. Adding a space character tells
+                the browser that the live region has updated,
+                which will cause it to read again, but with no audible difference. */
+                clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`;
+            }
+            else {
+                clipboardCopyLiveRegion.textContent = copiedAnnouncement;
+            }
+        }
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
+});

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

@@ -0,0 +1,38 @@
+/* Counter */
+
+.Counter {
+  display: inline-block;
+  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */
+  padding: 0 var(--base-size-6);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
+  color: var(--fgColor-default);
+  text-align: center;
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+  border: var(--borderWidth-thin) solid var(--counter-borderColor);
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 2em;
+}
+
+.Counter:empty {
+    display: none;
+  }
+
+/* Is this selector used? could not find any use of it */
+
+.Counter .octicon {
+    vertical-align: text-top;
+    opacity: 0.8;
+  }
+
+.Counter--primary {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
+}
+
+.Counter--secondary {
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-neutral-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"
+  ]
+}

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

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

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

@@ -0,0 +1,65 @@
+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;
+};
+import { controller, target } from '@github/catalyst';
+/**
+ * A companion Catalyst element for the Details view component. This element
+ * ensures the <details> and <summary> elements markup is properly accessible by
+ * updating the aria-label and aria-expanded attributes on click.
+ *
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
+ *
+ * @example
+ * ```html
+ * <details-toggle>
+ *   <details open=true data-target="details-toggle.detailsTarget">
+ *     <summary
+ *       aria-expanded="true"
+ *       aria-label="Collapse me"
+ *       data-target="details-toggle.summaryTarget"
+ *       data-action="click:details-toggle#toggle"
+ *       data-aria-label-closed="Expand me"
+ *       data-aria-label-open="Collapse me"
+ *     >
+ *       Click me
+ *     </summary>
+ *     <div>Contents</div>
+ *   </details>
+ * </details-toggle>
+ * ```
+ */
+let DetailsToggleElement = class DetailsToggleElement extends HTMLElement {
+    toggle() {
+        const detailsIsOpen = this.detailsTarget.hasAttribute('open');
+        if (detailsIsOpen) {
+            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed');
+            if (ariaLabelClosed) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            }
+            this.summaryTarget.setAttribute('aria-expanded', 'false');
+        }
+        else {
+            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open');
+            if (ariaLabelOpen) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            }
+            this.summaryTarget.setAttribute('aria-expanded', 'true');
+        }
+    }
+};
+__decorate([
+    target
+], DetailsToggleElement.prototype, "detailsTarget", void 0);
+__decorate([
+    target
+], DetailsToggleElement.prototype, "summaryTarget", void 0);
+DetailsToggleElement = __decorate([
+    controller
+], DetailsToggleElement);
+window.DetailsToggleElement = DetailsToggleElement;

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

@@ -0,0 +1,152 @@
+/* stylelint-disable primer/spacing */
+
+/* flash */
+
+/* Default flash */
+
+.flash:not(.Banner) {
+  position: relative;
+  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
+
+  /* Default color */
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border-color: var(--borderColor-accent-muted);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
+}
+
+.flash:not(.Banner) .octicon {
+    margin-right: var(--base-size-12);
+    color: var(--fgColor-accent);
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.flash:not(.Banner) p:last-child {
+    margin-bottom: 0;
+  }
+
+/* Contain the flash messages */
+
+.flash-messages {
+  margin-bottom: var(--stack-gap-spacious);
+}
+
+/* Close button */
+
+.flash-close:not(.Banner-close) {
+  float: right;
+  margin-top: calc(var(--base-size-4) * -1);
+  text-align: center;
+  cursor: pointer;
+
+  /* Undo `<button>` styles */
+  background: none;
+  border: 0;
+  appearance: none;
+}
+
+.flash-close:not(.Banner-close):hover {
+    opacity: 0.7;
+  }
+
+.flash-close:not(.Banner-close):active {
+    opacity: 0.5;
+  }
+
+.flash-close:not(.Banner-close) .octicon {
+    margin-right: 0;
+  }
+
+/* Action button */
+
+.flash-action:not(.Banner-actions) {
+  float: right;
+  margin-top: -3px;
+  margin-left: var(--stack-gap-spacious);
+  background-clip: padding-box;
+}
+
+.flash-action.btn:not(.Banner-actions) .octicon {
+    margin-right: var(--control-small-gap);
+    color: var(--fgColor-muted);
+  }
+
+.flash-action.btn-primary:not(.Banner-actions) {
+    background-clip: border-box;
+  }
+
+.flash-action.btn-primary:not(.Banner-actions) .octicon {
+      color: inherit;
+    }
+
+/* Color variations */
+
+.flash-warn:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+  border-color: var(--borderColor-attention-muted);
+}
+
+.flash-warn:not(.Banner) .octicon {
+    color: var(--fgColor-attention);
+  }
+
+.flash-error:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+  border-color: var(--borderColor-danger-muted);
+}
+
+.flash-error:not(.Banner) .octicon {
+    color: var(--fgColor-danger);
+  }
+
+.flash-success:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+  border-color: var(--borderColor-success-muted);
+}
+
+.flash-success:not(.Banner) .octicon {
+    color: var(--fgColor-success);
+  }
+
+/* Layout variations */
+
+.flash-full:not(.Banner) {
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  border-width: var(--borderWidth-thin) 0;
+  border-radius: 0;
+}
+
+/* A banner rendered at the top of the page. */
+
+.flash-banner {
+  position: fixed;
+  top: 0;
+  z-index: 90;
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+/* Makes sure the background is opaque to cover any content underneath */
+
+.flash-full,
+.flash-banner {
+  background-color: var(--bgColor-default);
+}
+
+/* FIXME deprecate this */
+
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: var(--base-text-weight-semibold);
+  background-color: var(--bgColor-attention-muted);
+}

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

@@ -0,0 +1,27 @@
+{
+  "name": "beta/flash",
+  "selectors": [
+    ".flash:not(.Banner)",
+    ".flash:not(.Banner) .octicon",
+    ".flash:not(.Banner) p:last-child",
+    ".flash-messages",
+    ".flash-close:not(.Banner-close)",
+    ".flash-close:not(.Banner-close):hover",
+    ".flash-close:not(.Banner-close):active",
+    ".flash-close:not(.Banner-close) .octicon",
+    ".flash-action:not(.Banner-actions)",
+    ".flash-action.btn:not(.Banner-actions) .octicon",
+    ".flash-action.btn-primary:not(.Banner-actions)",
+    ".flash-action.btn-primary:not(.Banner-actions) .octicon",
+    ".flash-warn:not(.Banner)",
+    ".flash-warn:not(.Banner) .octicon",
+    ".flash-error:not(.Banner)",
+    ".flash-error:not(.Banner) .octicon",
+    ".flash-success:not(.Banner)",
+    ".flash-success:not(.Banner) .octicon",
+    ".flash-full:not(.Banner)",
+    ".flash-banner",
+    ".flash-full",
+    ".warning"
+  ]
+}

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

@@ -0,0 +1,109 @@
+/* Labels */
+
+/* Provide a wrapper to ensure labels stick together */
+
+.labels {
+  position: relative;
+}
+
+/* Default 20px */
+
+.label, /* TODO: Deprecate */
+.Label {
+  display: inline-block;
+  padding: 0 var(--base-size-6);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 18px;
+  white-space: nowrap;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-full);
+}
+
+:is(.label,.Label):hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+
+/* Large 24px */
+
+.Label--large {
+  padding: 0 var(--base-size-8);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 22px;
+}
+
+/* Inline */
+
+/* Doesn't increase height of parent element
+** Can be used with different font-sizes */
+
+.Label--inline {
+  display: inline;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.12em 0.5em;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 85%;
+}
+
+/* Contrast */
+
+.Label--primary {
+  color: var(--fgColor-default);
+  border-color: var(--borderColor-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--fgColor-muted);
+  border-color: var(--borderColor-default);
+}
+
+/* Colors */
+
+.Label--info, /* TODO: deprecate */
+.Label--accent {
+  color: var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--fgColor-success);
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.Label--warning, /* TODO: deprecate */
+.Label--attention {
+  color: var(--fgColor-attention);
+  border-color: var(--borderColor-attention-emphasis);
+}
+
+.Label--severe {
+  color: var(--fgColor-severe);
+  border-color: var(--borderColor-severe-emphasis);
+}
+
+.Label--danger {
+  color: var(--fgColor-danger);
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.Label--open {
+  color: var(--fgColor-open);
+  border-color: var(--borderColor-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--fgColor-closed);
+  border-color: var(--borderColor-closed-emphasis);
+}
+
+.Label--done {
+  color: var(--fgColor-done);
+  border-color: var(--borderColor-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--fgColor-sponsors);
+  border-color: var(--borderColor-sponsors-emphasis);
+}

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

@@ -0,0 +1,24 @@
+{
+  "name": "beta/label",
+  "selectors": [
+    ".labels",
+    ".label",
+    ".Label",
+    ":is(.label,.Label):hover",
+    ".Label--large",
+    ".Label--inline",
+    ".Label--primary",
+    ".Label--secondary",
+    ".Label--info",
+    ".Label--accent",
+    ".Label--success",
+    ".Label--warning",
+    ".Label--attention",
+    ".Label--severe",
+    ".Label--danger",
+    ".Label--open",
+    ".Label--closed",
+    ".Label--done",
+    ".Label--sponsors"
+  ]
+}