primer_view_components 0.1.8 → 0.2.0

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

@@ -26,46 +26,59 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     isRemote() {
         return this.src != null;
     }
-    toggle() {
+    async toggle() {
         if (this.isDisabled()) {
             return;
         }
-        if (this.isRemote()) {
-            this.setLoadingState();
-            this.submitForm();
-        }
-        else {
+        if (!this.isRemote()) {
             this.performToggle();
+            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;
         }
+        this.setSuccessState();
     }
     turnOn() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'true');
+        this.switch.setAttribute('aria-pressed', 'true');
         this.classList.add('ToggleSwitch--checked');
     }
     turnOff() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'false');
+        this.switch.setAttribute('aria-pressed', 'false');
         this.classList.remove('ToggleSwitch--checked');
     }
     isOn() {
-        return this.switch.getAttribute('aria-checked') === 'true';
+        return this.switch.getAttribute('aria-pressed') === 'true';
     }
     isOff() {
         return !this.isOn();
     }
     isDisabled() {
-        return this.switch.getAttribute('aria-disabled') === 'true';
+        return this.switch.getAttribute('disabled') != null;
     }
     disable() {
-        this.switch.setAttribute('aria-disabled', 'true');
+        this.switch.setAttribute('disabled', 'disabled');
     }
     enable() {
-        this.switch.setAttribute('aria-disabled', 'false');
+        this.switch.removeAttribute('disabled');
     }
     performToggle() {
         if (this.isOn()) {
@@ -76,9 +89,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         }
     }
     setLoadingState() {
-        this.disable();
         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 });
@@ -95,43 +109,31 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
             this.errorIcon.removeAttribute('hidden');
         }
         this.loadingSpinner.setAttribute('hidden', 'hidden');
-        this.enable();
     }
     async submitForm() {
         const body = new FormData();
         if (this.csrf) {
             body.append(this.csrfField, this.csrf);
         }
-        body.append('value', this.isOn() ? '0' : '1');
+        body.append('value', this.isOn() ? '1' : '0');
+        if (!this.src)
+            throw new Error('invalid src');
+        let response;
         try {
-            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) {
-                this.setSuccessState();
-                this.performToggle();
-            }
-            else {
-                throw new Error(await response.text());
-            }
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
+                body
+            });
         }
         catch (error) {
-            if (error instanceof Error) {
-                this.setErrorState(error.message || 'An error occurred, please try again.');
-            }
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
         }
     }
 };
@@ -146,7 +148,7 @@ __decorate([
 ], ToggleSwitchElement.prototype, "errorIcon", void 0);
 __decorate([
     debounce(300)
-], ToggleSwitchElement.prototype, "submitForm", null);
+], ToggleSwitchElement.prototype, "toggle", null);
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);

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

@@ -9,7 +9,7 @@
 .ToggleSwitch {
   align-items: center;
   display: inline-flex;
-  gap: var(--controlStack-medium-gap-condensed, 8px);
+  gap: var(--controlStack-medium-gap-condensed);
 }
 
 .ToggleSwitch--checked {
@@ -27,16 +27,16 @@
 .ToggleSwitch-track {
   position: relative;
   display: block;
-  width: var(--base-size-64, 64px);
-  height: var(--control-medium-size, 32px);
+  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(--color-switch-track-bg);
-  border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-switch-track-border);
+  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;
@@ -70,17 +70,17 @@
   }
 }
 
-.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
+.ToggleSwitch-track[aria-pressed='true'][disabled] {
   background-color: var(--color-switch-track-disabled-bg);
   color: var(--color-switch-track-checked-disabled-fg);
   border-color: transparent;
 }
 
-.ToggleSwitch-track[aria-checked='true'] {
+.ToggleSwitch-track[aria-pressed='true'] {
   background-color: var(--color-switch-track-checked-bg);
   border-color: var(--color-switch-track-checked-border);
 
-  &:not([aria-disabled='true']) {
+  &:not([disabled]) {
     &:hover {
       background-color: var(--color-switch-track-checked-hover-bg);
     }
@@ -105,7 +105,7 @@
   }
 }
 
-.ToggleSwitch-track[aria-disabled='true'] {
+.ToggleSwitch-track[disabled] {
   cursor: not-allowed;
   background-color: var(--color-switch-track-disabled-bg);
   border-color: transparent;
@@ -158,8 +158,8 @@
   z-index: 1;
   width: 50%;
   background-color: var(--color-switch-knob-bg);
-  border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-switch-knob-border);
+  border-radius: var(--borderRadius-medium);
   box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
@@ -172,26 +172,26 @@
 
 .ToggleSwitch-status {
   position: relative;
-  font-size: var(--text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium);
   line-height: 1.5;
   color: var(--color-fg-default);
   text-align: right;
 }
 
 .ToggleSwitch-statusIcon {
-  width: var(--base-size-16, 16px);
+  width: var(--base-size-16);
   display: flex;
   margin-top: 0.063rem;
 }
 
 .ToggleSwitch--small {
   & .ToggleSwitch-status {
-    font-size: var(--text-body-size-small, 12px);
+    font-size: var(--text-body-size-small);
   }
 
   & .ToggleSwitch-track {
-    width: var(--base-size-48, 48px);
-    height: var(--control-xsmall-size, 24px);
+    width: var(--base-size-48);
+    height: var(--control-xsmall-size);
   }
 }
 

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

@@ -66,6 +66,13 @@ module Primer
           SIZE_MAPPINGS[@size]
         )
 
+        @aria_arguments = {
+          aria: merge_aria(
+            @system_arguments,
+            aria: { pressed: on? }
+          )
+        }
+
         @system_arguments[:src] = @src if @src
 
         return unless @src && @csrf_token

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

@@ -31,17 +31,35 @@ class ToggleSwitchElement extends HTMLElement {
     return this.src != null
   }
 
-  toggle() {
+  @debounce(300)
+  async toggle() {
     if (this.isDisabled()) {
       return
     }
 
-    if (this.isRemote()) {
-      this.setLoadingState()
-      this.submitForm()
-    } else {
+    if (!this.isRemote()) {
       this.performToggle()
+      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
+    }
+
+    this.setSuccessState()
   }
 
   turnOn(): void {
@@ -49,7 +67,7 @@ class ToggleSwitchElement extends HTMLElement {
       return
     }
 
-    this.switch.setAttribute('aria-checked', 'true')
+    this.switch.setAttribute('aria-pressed', 'true')
     this.classList.add('ToggleSwitch--checked')
   }
 
@@ -58,12 +76,12 @@ class ToggleSwitchElement extends HTMLElement {
       return
     }
 
-    this.switch.setAttribute('aria-checked', 'false')
+    this.switch.setAttribute('aria-pressed', 'false')
     this.classList.remove('ToggleSwitch--checked')
   }
 
   isOn(): boolean {
-    return this.switch.getAttribute('aria-checked') === 'true'
+    return this.switch.getAttribute('aria-pressed') === 'true'
   }
 
   isOff(): boolean {
@@ -71,15 +89,15 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   isDisabled(): boolean {
-    return this.switch.getAttribute('aria-disabled') === 'true'
+    return this.switch.getAttribute('disabled') != null
   }
 
   disable(): void {
-    this.switch.setAttribute('aria-disabled', 'true')
+    this.switch.setAttribute('disabled', 'disabled')
   }
 
   enable(): void {
-    this.switch.setAttribute('aria-disabled', 'false')
+    this.switch.removeAttribute('disabled')
   }
 
   private performToggle(): void {
@@ -91,9 +109,11 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   private setLoadingState(): void {
-    this.disable()
     this.errorIcon.setAttribute('hidden', 'hidden')
     this.loadingSpinner.removeAttribute('hidden')
+
+    const event = new CustomEvent('toggleSwitchLoading', {bubbles: true})
+    this.dispatchEvent(event)
   }
 
   private setSuccessState(): void {
@@ -116,10 +136,8 @@ class ToggleSwitchElement extends HTMLElement {
     }
 
     this.loadingSpinner.setAttribute('hidden', 'hidden')
-    this.enable()
   }
 
-  @debounce(300)
   private async submitForm() {
     const body = new FormData()
 
@@ -127,36 +145,27 @@ class ToggleSwitchElement extends HTMLElement {
       body.append(this.csrfField, this.csrf)
     }
 
-    body.append('value', this.isOn() ? '0' : '1')
+    body.append('value', this.isOn() ? '1' : '0')
 
-    try {
-      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 (!this.src) throw new Error('invalid src')
 
-      if (response.ok) {
-        this.setSuccessState()
-        this.performToggle()
-      } else {
-        throw new Error(await response.text())
-      }
+    let response
+
+    try {
+      response = await fetch(this.src, {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers: {
+          'Requested-With': 'XMLHttpRequest'
+        },
+        body
+      })
     } catch (error) {
-      if (error instanceof Error) {
-        this.setErrorState(error.message || 'An error occurred, please try again.')
-      }
+      throw new Error('A network error occurred, please try again.')
+    }
+
+    if (!response.ok) {
+      throw new Error(await response.text())
     }
   }
 }

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

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,14px);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,yCAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,iCAAmC,CACnC,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAA8C,CAN9C,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,2CAA6C,CAC7C,gBAAiB,CAFjB,2DAA6D,CAF7D,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAA8C,CAL9C,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,0CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed, 8px);\n  font-size: var(--text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,2CAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

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

@@ -2,7 +2,7 @@
 
 .UnderlineNav {
   display: flex;
-  min-height: var(--base-size-48, 48px);
+  min-height: var(--base-size-48);
   overflow-x: auto;
   overflow-y: hidden;
   box-shadow: inset 0 -1px 0 var(--color-border-muted);
@@ -10,7 +10,7 @@
   justify-content: space-between;
 
   & .Counter {
-    margin-left: var(--control-medium-gap, 8px);
+    margin-left: var(--control-medium-gap);
     color: var(--color-fg-default);
     background-color: var(--color-neutral-muted);
   }
@@ -24,15 +24,15 @@
 .UnderlineNav-body {
   display: flex;
   align-items: center;
-  gap: var(--control-medium-gap, 8px);
+  gap: var(--control-medium-gap);
   list-style: none;
 }
 
 .UnderlineNav-item {
   position: relative;
   display: flex;
-  padding: 0 var(--control-medium-paddingInline-condensed, 8px);
-  font-size: var(--text-body-size-medium, 14px);
+  padding: 0 var(--control-medium-paddingInline-condensed);
+  font-size: var(--text-body-size-medium);
   line-height: 30px;
   color: var(--color-fg-default);
   text-align: center;
@@ -40,7 +40,7 @@
   cursor: pointer;
   background-color: transparent;
   border: 0;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   align-items: center;
 
   &:hover,
@@ -57,7 +57,7 @@
   & [data-content]::before {
     display: block;
     height: 0;
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     visibility: hidden;
     content: attr(data-content);
   }
@@ -80,7 +80,7 @@
   &.selected,
   &[role='tab'][aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     color: var(--color-fg-default);
     border-bottom-color: var(--color-primer-border-active);
 
@@ -94,7 +94,7 @@
       height: 2px;
       content: '';
       background: var(--color-primer-border-active);
-      border-radius: var(--borderRadius-medium, 6px);
+      border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);
     }
   }
@@ -117,13 +117,13 @@
 
   /* required for underline to align with additional wrapper element */
   & .UnderlineNav-body {
-    min-height: var(--base-size-48, 48px);
+    min-height: var(--base-size-48);
   }
 }
 
 .UnderlineNav-octicon {
   display: inline !important;
-  margin-right: var(--control-medium-gap, 8px);
+  margin-right: var(--control-medium-gap);
   color: var(--color-fg-muted);
   fill: var(--color-fg-muted);
 }

data/app/components/primer/beta/auto_complete.rb

@@ -41,7 +41,7 @@ module Primer
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "ActionListWrap",
+          "ActionListWrap ActionListWrap--inset",
           system_arguments[:classes]
         )
 

data/app/components/primer/beta/avatar.css

@@ -1 +1 @@
-.avatar{background-color:var(--color-avatar-bg);border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,4px)}.avatar-1{height:var(--base-size-16,16px);width:var(--base-size-16,16px)}.avatar-2{height:var(--base-size-20,20px);width:var(--base-size-20,20px)}.avatar-3{height:var(--base-size-24,24px);width:var(--base-size-24,24px)}.avatar-4{height:var(--base-size-28,28px);width:var(--base-size-28,28px)}.avatar-5{height:var(--base-size-32,32px);width:var(--base-size-32,32px)}.avatar-6{height:var(--base-size-40,40px);width:var(--base-size-40,40px)}.avatar-7{height:var(--base-size-48,48px);width:var(--base-size-48,48px)}.avatar-8{height:var(--base-size-64,64px);width:var(--base-size-64,64px)}
+.avatar{background-color:var(--color-avatar-bg);border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}

data/app/components/primer/beta/avatar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,4CAA8C,CAE9C,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium, 6px);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small, 4px);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16, 16px);\n  height: var(--base-size-16, 16px);\n}\n\n.avatar-2 {\n  width: var(--base-size-20, 20px);\n  height: var(--base-size-20, 20px);\n}\n\n.avatar-3 {\n  width: var(--base-size-24, 24px);\n  height: var(--base-size-24, 24px);\n}\n\n.avatar-4 {\n  width: var(--base-size-28, 28px);\n  height: var(--base-size-28, 28px);\n}\n\n.avatar-5 {\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n}\n\n.avatar-6 {\n  width: var(--base-size-40, 40px);\n  height: var(--base-size-40, 40px);\n}\n\n.avatar-7 {\n  width: var(--base-size-48, 48px);\n  height: var(--base-size-48, 48px);\n}\n\n.avatar-8 {\n  width: var(--base-size-64, 64px);\n  height: var(--base-size-64, 64px);\n}\n"]}
+{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,4CAAyC,CAEzC,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}

data/app/components/primer/beta/avatar.pcss

@@ -6,7 +6,7 @@
   line-height: 1;
   vertical-align: middle;
   background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   flex-shrink: 0;
   box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
@@ -27,47 +27,47 @@
 .avatar-1,
 .avatar-2,
 .avatar-small {
-  border-radius: var(--borderRadius-small, 4px);
+  border-radius: var(--borderRadius-small);
 }
 
 /* Sizes */
 
 .avatar-1 {
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
+  width: var(--base-size-16);
+  height: var(--base-size-16);
 }
 
 .avatar-2 {
-  width: var(--base-size-20, 20px);
-  height: var(--base-size-20, 20px);
+  width: var(--base-size-20);
+  height: var(--base-size-20);
 }
 
 .avatar-3 {
-  width: var(--base-size-24, 24px);
-  height: var(--base-size-24, 24px);
+  width: var(--base-size-24);
+  height: var(--base-size-24);
 }
 
 .avatar-4 {
-  width: var(--base-size-28, 28px);
-  height: var(--base-size-28, 28px);
+  width: var(--base-size-28);
+  height: var(--base-size-28);
 }
 
 .avatar-5 {
-  width: var(--base-size-32, 32px);
-  height: var(--base-size-32, 32px);
+  width: var(--base-size-32);
+  height: var(--base-size-32);
 }
 
 .avatar-6 {
-  width: var(--base-size-40, 40px);
-  height: var(--base-size-40, 40px);
+  width: var(--base-size-40);
+  height: var(--base-size-40);
 }
 
 .avatar-7 {
-  width: var(--base-size-48, 48px);
-  height: var(--base-size-48, 48px);
+  width: var(--base-size-48);
+  height: var(--base-size-48);
 }
 
 .avatar-8 {
-  width: var(--base-size-64, 64px);
-  height: var(--base-size-64, 64px);
+  width: var(--base-size-64);
+  height: var(--base-size-64);
 }