openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/text_field.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    TextField = Primer::FormComponents.from_input(Primer::Forms::Dsl::TextFieldInput)
+
+    # Text fields are single-line text inputs rendered as `<input type="text">` in HTML.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.text_field(attributes)
+    #     end
+    #   end
+    class TextField < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @example Default
+      #   <%= render(Primer::Alpha::TextField.new(name: :first_name, label: "First name")) %>
+      #
+      # @example With a clear button
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       show_clear_button: true
+      #     )
+      #   ) %>
+      #
+      # @example Full width
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       full_width: true
+      #     )
+      #   ) %>
+      #
+      # @example Disabled
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       disabled: true
+      #     )
+      #   ) %>
+      #
+      # @example Invalid
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       invalid: true
+      #     )
+      #   ) %>
+      #
+      # @example With a leading visual
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       leading_visual: {
+      #         icon: :person
+      #       }
+      #     )
+      #   ) %>
+      #
+      # @example With a caption
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       caption: "What your friends call you"
+      #     )
+      #   ) %>
+      #
+      # @example With a validation message
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       validation_message: "Hmm, that doesn't look right"
+      #     )
+      #   ) %>
+      #
+      # @macro form_size_arguments
+      # @macro form_full_width_arguments
+      # @macro form_input_arguments
+      #
+      # @param placeholder [String] Placeholder text.
+      # @param inset [Boolean] If `true`, renders the input in a visually inset state.
+      # @param monospace [Boolean] If `true`, uses a monospace font for the input field.
+      # @param auto_check_src [String] When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message.
+      # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's <%= link_to_component(Primer::Beta::Octicon) %> component.
+      # @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
+      # @param clear_button_id [String] The HTML id attribute of the clear button.
+    end
+  end
+end

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

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

data/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",
+    ".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-circleIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
+    ".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"
+  ]
+}

data/app/components/primer/alpha/toggle_switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,kDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,8EAAkD,CAClD,4HAA0E,CAC1E,4CAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,sCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,qFACF,CAEA,2BACE,uFACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,2FAAsD,CAEtD,kBAAyB,CADzB,2FAEF,CAEA,uCACE,yFAAqD,CACrD,iDAyBF,CAtBI,6DACE,gGACF,CAEA,8DACE,kGACF,CAGF,0DACE,uFAAoD,CACpD,2FAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,2FAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,mEAAwC,CACxC,eACF,CAMA,4GACE,gFACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,8EAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,mEAAuC,CAGvC,uBAEF,CAEA,mBAME,4EAAiD,CACjD,0HAAyE,CACzE,4CAAyC,CALzC,QAAS,CAMT,mIAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,oDAA6B,CAF7B,8CAAuC,CACvC,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,4CACF,CAEA,yCAEE,wCAAkC,CADlC,8BAEF,CAIA,6CACE,gDACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64);\n  height: var(--control-medium-size);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 1px;\n  }\n\n  &:hover {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n  background-color: var(--controlTrack-bgColor-disabled);\n  color: var(--control-checked-fgColor-disabled);\n  border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n  background-color: var(--control-checked-bgColor-rest);\n  border-color: var(--borderColor-transparent);\n\n  &:not([disabled]) {\n    &:hover {\n      background-color: var(--control-checked-bgColor-hover);\n    }\n\n    &:active {\n      background-color: var(--control-checked-bgColor-active);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--controlKnob-bgColor-checked);\n    border-color: var(--controlKnob-borderColor-checked);\n    transform: translateX(100%);\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[disabled] {\n  cursor: not-allowed;\n  background-color: var(--controlTrack-bgColor-disabled);\n  border-color: transparent;\n  transition-property: none;\n\n  & .ToggleSwitch-knob {\n    border-color: var(--borderColor-default);\n    box-shadow: none;\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--controlTrack-fgColor-disabled);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  line-height: 0;\n  color: var(--control-checked-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  line-height: 0;\n  color: var(--controlTrack-fgColor-rest);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--controlKnob-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  line-height: 1.5;\n  color: var(--fgColor-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  width: var(--base-size-16);\n  display: flex;\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--text-body-size-small);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48);\n    height: var(--control-xsmall-size);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--fgColor-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}\n",null]}

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

@@ -0,0 +1,30 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    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;
+    }
+}
+export {};

data/app/components/primer/alpha/toggle_switch.html.erb

@@ -0,0 +1,46 @@
+<%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
+  <span class="ToggleSwitch-statusIcon">
+    <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :"alert-fill", hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+    <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  </span>
+  <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
+  <% end %>
+
+  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@aria_arguments)) do %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
+      <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
+        <%= render(Primer::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
+        <% end %>
+      <% end %>
+
+      <%= render(Primer::Box.new(classes: "ToggleSwitch-circleIcon")) do %>
+        <%= render(Primer::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-knob")) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,165 @@
+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';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        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('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;
+        try {
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
+                body
+            });
+        }
+        catch (error) {
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+if (!window.customElements.get('toggle-switch')) {
+    window.ToggleSwitchElement = ToggleSwitchElement;
+    window.customElements.define('toggle-switch', ToggleSwitchElement);
+}

data/app/components/primer/alpha/toggle_switch.pcss

@@ -0,0 +1,220 @@
+/* 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-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;
+  text-decoration: none;
+  cursor: pointer;
+  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;
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 1px;
+  }
+
+  &:hover {
+    background-color: var(--controlTrack-bgColor-hover);
+  }
+
+  &:active {
+    background-color: var(--controlTrack-bgColor-active);
+  }
+
+  @media (pointer: coarse) {
+    &::before {
+      @mixin minTouchTarget 44px;
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+
+    & * {
+      transition: none;
+    }
+  }
+}
+
+.ToggleSwitch-track[aria-pressed='true'][disabled] {
+  background-color: var(--controlTrack-bgColor-disabled);
+  color: var(--control-checked-fgColor-disabled);
+  border-color: transparent;
+}
+
+.ToggleSwitch-track[aria-pressed='true'] {
+  background-color: var(--control-checked-bgColor-rest);
+  border-color: var(--borderColor-transparent);
+
+  &:not([disabled]) {
+    &:hover {
+      background-color: var(--control-checked-bgColor-hover);
+    }
+
+    &:active {
+      background-color: var(--control-checked-bgColor-active);
+    }
+  }
+
+  & .ToggleSwitch-knob {
+    background-color: var(--controlKnob-bgColor-checked);
+    border-color: var(--controlKnob-borderColor-checked);
+    transform: translateX(100%);
+  }
+
+  & .ToggleSwitch-lineIcon {
+    transform: translateX(0%);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    transform: translateX(100%);
+  }
+}
+
+.ToggleSwitch-track[disabled] {
+  cursor: not-allowed;
+  background-color: var(--controlTrack-bgColor-disabled);
+  border-color: transparent;
+  transition-property: none;
+
+  & .ToggleSwitch-knob {
+    border-color: var(--borderColor-default);
+    box-shadow: none;
+  }
+
+  & .ToggleSwitch-lineIcon {
+    color: var(--controlTrack-fgColor-disabled);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    color: var(--controlTrack-fgColor-disabled);
+  }
+}
+
+.ToggleSwitch-icons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ToggleSwitch-lineIcon {
+  line-height: 0;
+  color: var(--control-checked-fgColor-rest);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-100%);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-circleIcon {
+  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) {
+    transition: none;
+  }
+}
+
+.ToggleSwitch-status {
+  position: relative;
+  font-size: var(--text-body-size-medium);
+  line-height: 1.5;
+  color: var(--fgColor-default);
+  text-align: right;
+}
+
+.ToggleSwitch-statusIcon {
+  width: var(--base-size-16);
+  display: flex;
+  margin-top: 0.063rem;
+}
+
+.ToggleSwitch--small {
+  & .ToggleSwitch-status {
+    font-size: var(--text-body-size-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-status {
+    text-align: left;
+  }
+}