@primer/view-components 0.0.0-pre.2715c38

package/app/assets/styles/primer_view_components.css

@@ -0,0 +1 @@
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 12px;padding:0 var(--primer-control-small-paddingInline-normal,12px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 12px;padding:0 var(--primer-control-large-paddingInline-normal,12px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-fg-default);border:none;color:var(--color-fg-default)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{.Button-label:not(:only-child){color:var(--color-btn-text)}.Button-content:not(:only-child){.Button-label{color:var(--color-btn-text)}}}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}@media (pointer:coarse){.Button--iconOnly{position:relative}.Button--iconOnly:before{content:"";height:44px;height:var(--primer-control-minTarget-coarse,44px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:44px;width:var(--primer-control-minTarget-coarse,44px)}}.ActionBar{align-items:center;display:flex;justify-content:end;position:relative}.ActionBar-divider{border-left:var(--primer-borderWidth-thin,1px) solid var(--color-border-subtle);height:16px;height:calc(var(--primer-control-medium-size, 32px)/2);margin:0 8px;margin:0 var(--primer-control-medium-gap,8px)}@media (pointer:coarse){.ActionBar{gap:12px;gap:var(--primer-controlStack-medium-gap-spacious,12px)}.ActionBar--small{gap:16px;gap:var(--primer-controlStack-small-gap-spacious,16px)}.ActionBar--large{gap:4px;gap:var(--base-size-4,4px)}}

package/app/assets/styles/primer_view_components.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss","../../components/primer/experimental/action_bar.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button  */\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active,\n  &.Button--active {\n    transition: none;\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* &:focus {\n    @mixin focusOutline;\n  } */\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-normal, 12px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-normal, 12px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover  {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active,\n  &.Button--active {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* link color without svg */\n.Button--invisible {\n  color: var(--color-fg-default);\n  fill: var(--color-fg-default);\n  border: none;\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n    /* box-shadow: var(--color-primer-shadow-inset); */\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if visual is present, muted label color */\n  .Button-label:not(:only-child) {\n    color: var(--color-btn-text);\n  }\n\n  /* if trailingAction is present, muted label color */\n  .Button-content:not(:only-child) {\n    .Button-label {\n      color: var(--color-btn-text);\n    }\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n\n  /* Increase touch target */\n  @media (pointer: coarse) {\n    position: relative;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: var(--primer-control-minTarget-coarse, 44px);\n      width: var(--primer-control-minTarget-coarse, 44px);\n      content: '';\n      transform: translateX(-50%) translateY(-50%);\n    }\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n","/* CSS for ActionBar  */\n\n.ActionBar {\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  position: relative;\n}\n\n/* Divider */\n\n.ActionBar-divider {\n  margin: 0 var(--primer-control-medium-gap, 8px);\n  height: calc(var(--primer-control-medium-size, 32px) / 2);\n  border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-border-subtle);\n}\n\n/* Increase spacing so touch targets don't overlap */\n\n@media (pointer: coarse) {\n  .ActionBar {\n    gap: var(--primer-controlStack-medium-gap-spacious, 12px);\n  }\n\n  .ActionBar--small {\n    gap: var(--primer-controlStack-small-gap-spacious, 16px);\n  }\n\n  .ActionBar--large {\n    gap: var(--base-size-4, 4px);\n  }\n}\n"]}

package/app/components/primer/alpha/modal-dialog-element.d.ts

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

package/app/components/primer/alpha/modal-dialog-element.js

@@ -0,0 +1,142 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_shouldTryLoadingFragment, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        //TODO: Do we remove the abortController from focusTrap?
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+        _ModalDialogElement_abortController.set(this, null);
+        _ModalDialogElement_openButton.set(this, void 0);
+        _ModalDialogElement_shouldTryLoadingFragment.set(this, true);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b, _c, _d;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+            // element since it is expected for the menu to close on click
+            const menu = ((_c = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
+            }
+            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
+        }
+    }
+    get showButtons() {
+        // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+        return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const { signal } = (__classPrivateFieldSet(this, _ModalDialogElement_abortController, new AbortController(), "f"));
+        this.ownerDocument.addEventListener('click', event => {
+            const target = event.target;
+            const clickOutsideDialog = target.closest(this.tagName) !== this;
+            const button = target === null || target === void 0 ? void 0 : target.closest('button');
+            // go over this logic:
+            if (!button) {
+                if (clickOutsideDialog) {
+                    // This click is outside the dialog
+                    this.close();
+                }
+                return;
+            }
+            let dialogId = button.getAttribute('data-close-dialog-id');
+            if (dialogId === this.id) {
+                this.close();
+            }
+            dialogId = button.getAttribute('data-submit-dialog-id');
+            if (dialogId === this.id) {
+                this.close(true);
+            }
+            dialogId = button.getAttribute('data-show-dialog-id');
+            if (dialogId === this.id) {
+                event.stopPropagation();
+                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
+                this.show();
+            }
+        }, { signal });
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    show() {
+        this.open = true;
+    }
+    close(closedNotCancelled = false) {
+        if (this.open === false)
+            return;
+        const eventType = closedNotCancelled ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_shouldTryLoadingFragment = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (event.isComposing)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

package/app/components/primer/alpha/toggle-switch-element.d.ts

@@ -0,0 +1,28 @@
+export declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): void;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private check;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}

package/app/components/primer/alpha/toggle-switch-element.js

@@ -0,0 +1,137 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+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';
+import { debounce } from '@github/mini-throttle/decorators';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    get src() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return null;
+        const link = this.ownerDocument.createElement('a');
+        link.href = src;
+        return link.href;
+    }
+    get csrf() {
+        const csrfElement = this.querySelector('[data-csrf]');
+        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+    }
+    get csrfField() {
+        // the authenticity token is passed into the element and is not generated in js land
+        return this.getAttribute('csrf-field') || 'authenticity_token';
+    }
+    isRemote() {
+        return this.src != null;
+    }
+    toggle() {
+        if (this.isRemote()) {
+            this.setLoadingState();
+            this.check();
+        }
+        else {
+            this.performToggle();
+        }
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-checked') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('aria-disabled') === 'true';
+    }
+    disable() {
+        this.switch.setAttribute('aria-disabled', 'true');
+    }
+    enable() {
+        this.switch.setAttribute('aria-disabled', 'false');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.disable();
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+    }
+    setSuccessState() {
+        this.setFinishedState(false);
+    }
+    setErrorState() {
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+        this.enable();
+    }
+    async check() {
+        const body = new FormData();
+        if (this.csrf) {
+            body.append(this.csrfField, this.csrf);
+        }
+        body.append('value', this.isOn() ? '1' : '0');
+        try {
+            if (!this.src)
+                throw new Error('invalid src');
+            const response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                body
+            });
+            if (response.ok) {
+                this.setSuccessState();
+                this.performToggle();
+            }
+            else {
+                this.setErrorState();
+            }
+        }
+        catch (error) {
+            this.setErrorState();
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    debounce(300)
+], ToggleSwitchElement.prototype, "check", null);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+export { ToggleSwitchElement };

package/app/components/primer/alpha/tool-tip-element.d.ts

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