@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,134 @@
+{
+  "name": "alpha/text_field",
+  "selectors": [
+    ".FormControl",
+    ".FormControl--fullWidth",
+    ".FormControl-label",
+    ".FormControl-caption",
+    ".FormControl-caption a",
+    ".FormControl-inlineValidation",
+    ".FormControl-inlineValidation p",
+    ".FormControl-inlineValidation--success",
+    ".FormControl-inlineValidation--visual",
+    ".FormControl-spacingWrapper",
+    ".FormControl-horizontalGroup",
+    ".FormControl-input",
+    ".FormControl-select",
+    ".FormControl-textarea",
+    "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    "[invalid='true']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
+    "[invalid='false']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus-visible",
+    "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
+    "[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ":is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
+    ".FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible",
+    ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus",
+    ".FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
+    ".FormControl-toggleSwitchInput",
+    ".FormControl-input-wrap",
+    ".FormControl-input-wrap.FormControl-input-width--auto",
+    ".FormControl-input-wrap.FormControl-input-width--xsmall",
+    ".FormControl-input-wrap.FormControl-input-width--small",
+    ".FormControl-input-wrap.FormControl-input-width--medium",
+    ".FormControl-input-wrap.FormControl-input-width--large",
+    ".FormControl-input-wrap.FormControl-input-width--xlarge",
+    ".FormControl-input-wrap.FormControl-input-width--xxlarge",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
+    ":is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual",
+    ".FormControl-input-wrap .FormControl-input-trailingVisualWrap",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel",
+    ".FormControl-input-wrap .FormControl-input-trailingAction",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingAction) svg",
+    "[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingAction):hover",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingAction):active",
+    ".FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before",
+    ":is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after)",
+    ":is(.FormControl-input-wrap .FormControl-input-trailingAction)::after",
+    ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .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-trailingVisualWrap",
+    ".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",
+    ":is(.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-trailingVisualWrap",
+    ".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--trailingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .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",
+    ":is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before",
+    ".FormControl-select-wrap",
+    ".FormControl-select-wrap.FormControl-input-width--auto",
+    ".FormControl-select-wrap.FormControl-input-width--xsmall",
+    ".FormControl-select-wrap.FormControl-input-width--small",
+    ".FormControl-select-wrap.FormControl-input-width--medium",
+    ".FormControl-select-wrap.FormControl-input-width--large",
+    ".FormControl-select-wrap.FormControl-input-width--xlarge",
+    ".FormControl-select-wrap.FormControl-input-width--xxlarge",
+    ".FormControl-select-wrap::after",
+    ".FormControl-select-wrap .FormControl-select",
+    ".FormControl-select-wrap[data-multiple]::after",
+    ".FormControl-select-wrap[data-multiple] .FormControl-select",
+    ".FormControl-checkbox-wrap",
+    ".FormControl-radio-wrap",
+    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap",
+    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap",
+    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
+    ".FormControl-radio-group-wrap fieldset",
+    ".FormControl-check-group-wrap fieldset",
+    ".FormControl-checkbox",
+    ".FormControl-checkbox[disabled]",
+    ".FormControl-checkbox[invalid='true']:not(:focus)",
+    ".FormControl-checkbox[invalid='false']:not(:focus)",
+    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus",
+    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
+    ".FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible",
+    ".FormControl-checkbox::before",
+    ":is(.FormControl-checkbox::after)",
+    ":is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label",
+    ".FormControl-checkbox:checked",
+    ".FormControl-checkbox:checked::before",
+    ".FormControl-checkbox:checked:disabled",
+    ".FormControl-checkbox:checked:disabled::before",
+    ".FormControl-checkbox:focus-visible",
+    ".FormControl-checkbox:indeterminate::before",
+    ".FormControl-radio",
+    ".FormControl-radio[disabled]",
+    ".FormControl-radio[invalid='true']:not(:focus)",
+    ".FormControl-radio[invalid='false']:not(:focus)",
+    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus",
+    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus:not(:focus-visible)",
+    ".FormControl-radio:not([type='checkbox'],[type='radio']):focus-visible",
+    ":is(.FormControl-radio::after)",
+    ":is(.FormControl-radio[disabled] ~ .FormControl-radio-labelWrap) .FormControl-label",
+    ".FormControl-radio:checked",
+    ".FormControl-radio[disabled]:checked",
+    ".FormControl-radio:checked:disabled",
+    ":is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled) ~ .FormControl-radio-labelWrap) .FormControl-label",
+    ".FormControl-radio:focus-visible"
+  ]
+}

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

@@ -0,0 +1,230 @@
+/* ToggleSwitch */
+
+/* Catalyst in dotcom applies a display: block to all web component elements. This
+** rule overrides it so the status label and toggle switch are laid out correctly. */
+
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
+.ToggleSwitch {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--controlStack-medium-gap-condensed);
+}
+
+.ToggleSwitch--checked .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+.ToggleSwitch--checked .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+
+.ToggleSwitch-track {
+  position: relative;
+  display: block;
+  width: var(--base-size-64);
+  height: var(--control-medium-size);
+  padding: 0;
+  overflow: hidden;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: var(--controlTrack-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: background-color, border-color;
+  appearance: none;
+}
+
+.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible {
+    outline-offset: 1px;
+  }
+
+.ToggleSwitch-track:hover {
+    background-color: var(--controlTrack-bgColor-hover);
+  }
+
+.ToggleSwitch-track:active {
+    background-color: var(--controlTrack-bgColor-active);
+  }
+
+@media (pointer: coarse) {
+      :is(.ToggleSwitch-track::before) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-height: 44px;
+    content: "";
+    transform: translateX(-50%) translateY(-50%);
+  }
+  }
+
+@media (prefers-reduced-motion) {
+
+.ToggleSwitch-track {
+    transition: none;
+}
+
+    .ToggleSwitch-track * {
+      transition: none;
+    }
+  }
+
+.ToggleSwitch-track[aria-pressed='true'][disabled] {
+  color: var(--control-checked-fgColor-disabled);
+  background-color: var(--controlTrack-bgColor-disabled);
+  border-color: transparent;
+}
+
+.ToggleSwitch-track[aria-pressed='true'] {
+  background-color: var(--control-checked-bgColor-rest);
+  border-color: var(--borderColor-transparent);
+}
+
+.ToggleSwitch-track[aria-pressed='true']:not([disabled]):hover {
+      background-color: var(--control-checked-bgColor-hover);
+    }
+
+.ToggleSwitch-track[aria-pressed='true']:not([disabled]):active {
+      background-color: var(--control-checked-bgColor-active);
+    }
+
+.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
+    background-color: var(--controlKnob-bgColor-checked);
+    border-color: var(--controlKnob-borderColor-checked);
+    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] {
+  cursor: not-allowed;
+  background-color: var(--controlTrack-bgColor-disabled);
+  border-color: transparent;
+  transition-property: none;
+}
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-knob {
+    border-color: var(--borderColor-default);
+    box-shadow: none;
+  }
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
+    color: var(--controlTrack-fgColor-disabled);
+  }
+
+.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon {
+    color: var(--controlTrack-fgColor-disabled);
+  }
+
+.ToggleSwitch-icons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ToggleSwitch-lineIcon {
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 0;
+  color: var(--control-checked-fgColor-rest);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-100%);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-circleIcon {
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 0;
+  color: var(--controlTrack-fgColor-rest);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(0);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-knob {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 50%;
+  background-color: var(--controlKnob-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
+  border-radius: var(--borderRadius-medium);
+  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: transform;
+}
+
+@media (prefers-reduced-motion) {
+
+.ToggleSwitch-knob {
+    transition: none;
+}
+  }
+
+.ToggleSwitch-status {
+  position: relative;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--text-title-lineHeight-large);
+  color: var(--fgColor-default);
+  text-align: right;
+}
+
+.ToggleSwitch-statusIcon {
+  display: flex;
+  width: var(--base-size-16);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: 0.063rem;
+}
+
+.ToggleSwitch--small .ToggleSwitch-status {
+    font-size: var(--text-body-size-small);
+  }
+
+.ToggleSwitch--small .ToggleSwitch-track {
+    width: var(--base-size-48);
+    height: var(--control-xsmall-size);
+  }
+
+.ToggleSwitch--disabled .ToggleSwitch-status {
+    color: var(--fgColor-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;
+  }

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

@@ -0,0 +1,40 @@
+{
+  "name": "alpha/toggle_switch",
+  "selectors": [
+    ".ToggleSwitch.ToggleSwitch",
+    ".ToggleSwitch",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOn",
+    ".ToggleSwitch--checked .ToggleSwitch-statusOff",
+    ".ToggleSwitch-track",
+    ".ToggleSwitch-track:focus",
+    ".ToggleSwitch-track:focus-visible",
+    ".ToggleSwitch-track:hover",
+    ".ToggleSwitch-track:active",
+    ":is(.ToggleSwitch-track::before)",
+    ".ToggleSwitch-track *",
+    ".ToggleSwitch-track[aria-pressed='true'][disabled]",
+    ".ToggleSwitch-track[aria-pressed='true']",
+    ".ToggleSwitch-track[aria-pressed='true']:not([disabled]):hover",
+    ".ToggleSwitch-track[aria-pressed='true']:not([disabled]):active",
+    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled]",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-icons",
+    ".ToggleSwitch-lineIcon",
+    ".ToggleSwitch-circleIcon",
+    ".ToggleSwitch-knob",
+    ".ToggleSwitch-status",
+    ".ToggleSwitch-statusIcon",
+    ".ToggleSwitch--small .ToggleSwitch-status",
+    ".ToggleSwitch--small .ToggleSwitch-track",
+    ".ToggleSwitch--disabled .ToggleSwitch-status",
+    ".ToggleSwitch-statusOn",
+    ".ToggleSwitch-statusOff",
+    ".ToggleSwitch--statusAtEnd",
+    ".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
+  ]
+}

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

@@ -0,0 +1,34 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    turbo: boolean;
+    private toggling;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): Promise<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 submitForm;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+        Turbo: {
+            renderStreamMessage: (message: string) => void;
+        };
+    }
+}
+export {};

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

@@ -0,0 +1,179 @@
+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, attr } from '@github/catalyst';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.turbo = false;
+        this.toggling = false;
+    }
+    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('data-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;
+    }
+    async toggle() {
+        if (this.toggling)
+            return;
+        this.toggling = true;
+        if (this.isDisabled()) {
+            return;
+        }
+        if (!this.isRemote()) {
+            this.performToggle();
+            this.toggling = false;
+            return;
+        }
+        // toggle immediately to tell screen readers the switch was clicked
+        this.performToggle();
+        this.setLoadingState();
+        try {
+            await this.submitForm();
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                // because we toggle immediately when the switch is clicked, toggle back to the
+                // old state on failure
+                this.setErrorState(error.message || 'An error occurred, please try again.');
+                this.performToggle();
+            }
+            return;
+        }
+        finally {
+            this.toggling = false;
+        }
+        this.setSuccessState();
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-pressed', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-pressed', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-pressed') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('disabled') != null;
+    }
+    disable() {
+        this.switch.setAttribute('disabled', 'disabled');
+    }
+    enable() {
+        this.switch.removeAttribute('disabled');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+        const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
+        this.dispatchEvent(event);
+    }
+    setSuccessState() {
+        const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
+        this.dispatchEvent(event);
+        this.setFinishedState(false);
+    }
+    setErrorState(message) {
+        const event = new CustomEvent('toggleSwitchError', { bubbles: true, detail: message });
+        this.dispatchEvent(event);
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+    }
+    async submitForm() {
+        const body = new FormData();
+        if (this.csrf) {
+            body.append(this.csrfField, this.csrf);
+        }
+        body.append('value', this.isOn() ? '1' : '0');
+        if (!this.src)
+            throw new Error('invalid src');
+        let response;
+        const requestHeaders = {
+            'Requested-With': 'XMLHttpRequest',
+            'X-Requested-With': 'XMLHttpRequest',
+        };
+        if (this.turbo) {
+            requestHeaders['Accept'] = 'text/vnd.turbo-stream.html';
+        }
+        try {
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: requestHeaders,
+                body,
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        }
+        catch (error) {
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+        const contentType = response.headers.get('Content-Type');
+        if (window.Turbo && this.turbo && contentType?.startsWith('text/vnd.turbo-stream.html')) {
+            window.Turbo.renderStreamMessage(await response.text());
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    attr
+], ToggleSwitchElement.prototype, "turbo", void 0);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+if (!window.customElements.get('toggle-switch')) {
+    window.ToggleSwitchElement = ToggleSwitchElement;
+    window.customElements.define('toggle-switch', ToggleSwitchElement);
+}

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

@@ -0,0 +1,27 @@
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get showReason(): "focus" | "mouse";
+    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): Promise<void>;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};