primer_view_components 0.0.111 → 0.0.113

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

@@ -27,9 +27,12 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         return this.src != null;
     }
     toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
         if (this.isRemote()) {
             this.setLoadingState();
-            this.check();
+            this.submitForm();
         }
         else {
             this.performToggle();
@@ -90,12 +93,12 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         this.loadingSpinner.setAttribute('hidden', 'hidden');
         this.enable();
     }
-    async check() {
+    async submitForm() {
         const body = new FormData();
         if (this.csrf) {
             body.append(this.csrfField, this.csrf);
         }
-        body.append('value', this.isOn() ? '1' : '0');
+        body.append('value', this.isOn() ? '0' : '1');
         try {
             if (!this.src)
                 throw new Error('invalid src');
@@ -131,7 +134,7 @@ __decorate([
 ], ToggleSwitchElement.prototype, "errorIcon", void 0);
 __decorate([
     debounce(300)
-], ToggleSwitchElement.prototype, "check", null);
+], ToggleSwitchElement.prototype, "submitForm", null);
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);

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

@@ -32,9 +32,13 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   toggle() {
+    if (this.isDisabled()) {
+      return
+    }
+
     if (this.isRemote()) {
       this.setLoadingState()
-      this.check()
+      this.submitForm()
     } else {
       this.performToggle()
     }
@@ -110,14 +114,14 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   @debounce(300)
-  private async check() {
+  private async submitForm() {
     const body = new FormData()
 
     if (this.csrf) {
       body.append(this.csrfField, this.csrf)
     }
 
-    body.append('value', this.isOn() ? '1' : '0')
+    body.append('value', this.isOn() ? '0' : '1')
 
     try {
       if (!this.src) throw new Error('invalid src')

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

@@ -0,0 +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(--primer-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(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-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)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.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(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -0,0 +1 @@
+{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",":is(.UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])):after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}

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

@@ -0,0 +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,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,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,gDAgBF,CAXE,mJAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,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(--primer-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(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-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(--primer-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      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(--primer-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(--primer-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]}

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

@@ -0,0 +1,133 @@
+/* UnderlineNav */
+
+.UnderlineNav {
+  display: flex;
+  min-height: var(--base-size-48, 48px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: auto;
+  justify-content: space-between;
+
+  & .Counter {
+    margin-left: var(--primer-control-medium-gap, 8px);
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+  }
+
+  & .Counter--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
+}
+
+.UnderlineNav-body {
+  display: flex;
+  align-items: center;
+  gap: var(--primer-control-medium-gap, 8px);
+  list-style: none;
+}
+
+.UnderlineNav-item {
+  position: relative;
+  display: flex;
+  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
+  font-size: var(--primer-text-body-size-medium, 14px);
+  line-height: 30px;
+  color: var(--color-fg-default);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  align-items: center;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline-offset: -2px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+  /* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
+  & [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* increase touch target area */
+  &::before {
+    @mixin minTouchTarget 48px;
+  }
+
+  /* hover state was "sticking" on mobile after click */
+  @media (pointer: fine) {
+    &:hover {
+      color: var(--color-fg-default);
+      text-decoration: none;
+      background: var(--color-action-list-item-default-hover-bg);
+      transition: background 0.12s ease-out;
+    }
+  }
+
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: var(--base-text-weight-semibold, 600);
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
+
+    /* current/selected underline */
+    &::after {
+      position: absolute;
+      right: 50%;
+      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--color-primer-border-active);
+      border-radius: var(--primer-borderRadius-medium, 6px);
+      transform: translate(50%, -50%);
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  & .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+
+  /* required for underline to align with additional wrapper element */
+  & .UnderlineNav-body {
+    min-height: var(--base-size-48, 48px);
+  }
+}
+
+.UnderlineNav-octicon {
+  display: inline !important;
+  margin-right: var(--primer-control-medium-gap, 8px);
+  color: var(--color-fg-muted);
+  fill: var(--color-fg-muted);
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -0,0 +1 @@
+.Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);border-style:solid;border-width:var(--primer-borderWidth-thin,1px)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--primer-controlStack-medium-gap-condensed, 8px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.Box--condensed .Box-row{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--spacious .Box-header{line-height:1.25;padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-title{font-size:var(--primer-text-title-size-medium,20px)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--primer-stack-gap-spacious, 24px)*-1) calc(var(--primer-stack-gap-spacious, 24px)*-1)}.Box--spacious .Box-row{padding:var(--primer-stack-padding-spacious,24px)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px);border-width:var(--primer-borderWidth-thin,1px);margin:calc(var(--primer-borderWidth-thin, 1px)*-1) calc(var(--primer-borderWidth-thin, 1px)*-1) 0;padding:var(--primer-stack-padding-normal,16px)}.Box-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);padding:var(--primer-stack-padding-normal,16px)}.Box-body:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px);margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1)}.Box-row{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box-row:first-of-type{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px);border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-spacious,16px) var(--primer-control-medium-paddingInline-spacious,16px)}

data/app/components/primer/beta/border_box.css.json

@@ -0,0 +1 @@
+{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-header",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-footer",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-footer",".Box--blue .Box-row",".Box--danger",".Box--danger .Box-body:last-of-type",".Box--danger .Box-row:first-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,yFACF,CAGE,6CAGE,gBAAiB,CADjB,iIAAsI,CADtI,yHAGF,CAGF,yBACE,yFACF,CAIA,2BAEE,gBAAiB,CADjB,iDAEF,CAEA,0BACE,mDACF,CAWE,gGAJA,iDAOA,CAHA,4CAEE,sGACF,CAGF,wBACE,iDACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,4DAA8D,CAC9D,6DAA+D,CAF/D,+CAAiD,CAJjD,kGAAuG,CADvG,+CAQF,CAEA,WACE,kDAAoD,CACpD,gDACF,CAEA,UAEE,kFAAoF,CADpF,+CASF,CALE,uBAGE,+DAAiE,CADjE,gEAAkE,CADlE,0DAGF,CAIF,SAME,6EAAqD,CAHrD,oBAAqB,CADrB,uDAA0D,CAD1D,+CAqDF,CA9CE,uBACE,4DAA8D,CAC9D,6DACF,CAEA,sBAEE,+DAAiE,CADjE,gEAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,6FAAgG,CADhG,+EAAqD,CAHrD,uDAA0D,CAD1D,+CAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gIAAqI,CADrI,yHAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--primer-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--primer-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-stack-padding-spacious, 24px);\n      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n  border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--primer-stack-padding-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}

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

@@ -0,0 +1,284 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+
+  & .Box-header {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+      line-height: 1.25;
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+}
+
+.Box--spacious {
+  & .Box-header {
+    padding: var(--primer-stack-padding-spacious, 24px);
+    line-height: 1.25;
+  }
+
+  & .Box-title {
+    font-size: var(--primer-text-title-size-medium, 20px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-stack-padding-spacious, 24px);
+      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+}
+
+.Box-header {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.Box-title {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Box-body {
+  padding: var(--primer-stack-padding-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+  &:last-of-type {
+    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}
+
+/* Box rows */
+.Box-row {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--color-border-muted);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+
+  &:first-of-type {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  /* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+  &.Box-row--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-accent-fg);
+      text-decoration: none;
+    }
+  }
+}
+
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--color-border-default);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+}
+
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+
+  & .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-footer {
+    border-color: var(--color-accent-muted);
+  }
+}
+
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+.Box--danger {
+  border-color: var(--color-danger-emphasis);
+
+  & .Box-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  & .Box-body {
+    &:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+/* Box with btn-octicon */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }
+}

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

@@ -0,0 +1 @@
+.BtnGroup{display:inline-block;vertical-align:middle}.BtnGroup:after,.BtnGroup:before{content:"";display:table}.BtnGroup:after{clear:both}.BtnGroup+.BtnGroup,.BtnGroup+.btn{margin-left:var(--primer-control-small-gap,4px)}.BtnGroup-item.btn{border-radius:0;border-right-width:0;float:left;position:relative}.BtnGroup-item.btn:first-child{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-top-left-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-item.btn:last-child{border-bottom-right-radius:var(--primer-borderRadius-medium,6px);border-right-width:var(--primer-borderWidth-thin,1px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-item.btn.selected,.BtnGroup-item.btn:active,.BtnGroup-item.btn:focus,.BtnGroup-item.btn:hover,.BtnGroup-item.btn[aria-selected=true]{border-right-width:var(--primer-borderWidth-thin,1px)}.BtnGroup-item.btn.selected+.BtnGroup-item,.BtnGroup-item.btn.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:active+.BtnGroup-item,.BtnGroup-item.btn:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:focus+.BtnGroup-item,.BtnGroup-item.btn:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:hover+.BtnGroup-item,.BtnGroup-item.btn:hover+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn[aria-selected=true]+.BtnGroup-item,.BtnGroup-item.btn[aria-selected=true]+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-parent{float:left}.BtnGroup-parent:first-child .BtnGroup-item{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-top-left-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-parent:last-child .BtnGroup-item{border-bottom-right-radius:var(--primer-borderRadius-medium,6px);border-right-width:var(--primer-borderWidth-thin,1px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-parent .BtnGroup-item{border-radius:0;border-right-width:0}.BtnGroup-parent.selected .BtnGroup-item,.BtnGroup-parent:active .BtnGroup-item,.BtnGroup-parent:focus .BtnGroup-item,.BtnGroup-parent:hover .BtnGroup-item,.BtnGroup-parent[aria-selected=true] .BtnGroup-item{border-right-width:var(--primer-borderWidth-thin,1px)}.BtnGroup-parent.selected+.BtnGroup-item,.BtnGroup-parent.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-item:active,.BtnGroup-item:focus,.BtnGroup-parent:active,.BtnGroup-parent:focus{z-index:1}

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

@@ -0,0 +1 @@
+{"name":"beta/button_group","selectors":[".BtnGroup",".BtnGroup:after",".BtnGroup:before",".BtnGroup+.BtnGroup",".BtnGroup+.btn",".BtnGroup-item.btn",".BtnGroup-item.btn:first-child",".BtnGroup-item.btn:last-child",".BtnGroup-item.btn.selected",".BtnGroup-item.btn:active",".BtnGroup-item.btn:focus",".BtnGroup-item.btn:hover",".BtnGroup-item.btn[aria-selected=true]",".BtnGroup-item.btn.selected+.BtnGroup-item",".BtnGroup-item.btn.selected+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:active+.BtnGroup-item",".BtnGroup-item.btn:active+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:focus+.BtnGroup-item",".BtnGroup-item.btn:focus+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:hover+.BtnGroup-item",".BtnGroup-item.btn:hover+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn[aria-selected=true]+.BtnGroup-item",".BtnGroup-item.btn[aria-selected=true]+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent",".BtnGroup-parent:first-child .BtnGroup-item",".BtnGroup-parent:last-child .BtnGroup-item",".BtnGroup-parent .BtnGroup-item",".BtnGroup-parent.selected .BtnGroup-item",".BtnGroup-parent:active .BtnGroup-item",".BtnGroup-parent:focus .BtnGroup-item",".BtnGroup-parent:hover .BtnGroup-item",".BtnGroup-parent[aria-selected=true] .BtnGroup-item",".BtnGroup-parent.selected+.BtnGroup-item",".BtnGroup-parent.selected+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:active+.BtnGroup-item",".BtnGroup-parent:active+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:focus+.BtnGroup-item",".BtnGroup-parent:focus+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:hover+.BtnGroup-item",".BtnGroup-parent:hover+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent[aria-selected=true]+.BtnGroup-item",".BtnGroup-parent[aria-selected=true]+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item:active",".BtnGroup-item:focus",".BtnGroup-parent:active",".BtnGroup-parent:focus"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["button_group.pcss","../../../../lib/postcss_mixins/clearfix.pcss"],"names":[],"mappings":"AAKA,UACE,oBAAqB,CACrB,qBASF,CCVE,iCAHE,UAAW,CADX,aAQF,CAJA,gBAEE,UAEF,CDEA,mCAEE,+CACF,CAGF,mBAIE,eAAgB,CADhB,oBAAqB,CADrB,UAAW,CADX,iBA4BF,CAvBE,+BAEE,+DAAiE,CADjE,4DAEF,CAEA,8BAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,+IAKE,qDAMF,CAJE,ygBAEE,mBACF,CAIJ,iBACE,UAgCF,CA9BE,4CAEE,+DAAiE,CADjE,4DAEF,CAEA,2CAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,gCAEE,eAAgB,CADhB,oBAEF,CAOE,gNACE,qDACF,CAEA,qfAEE,mBACF,CAOF,0FAEE,SACF","file":"button_group.css","sourcesContent":["/* BtnGroup */\n\n/* A button group is a series of buttons laid out next to each other, all part\n** of one visual button, but separated by rules to be separate. */\n\n.BtnGroup {\n  display: inline-block;\n  vertical-align: middle;\n\n  @mixin clearfix;\n\n  /* Proper spacing for multiple button groups (a la, gollum editor) */\n  & + .BtnGroup,\n  & + .btn {\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n}\n\n.BtnGroup-item.btn {\n  position: relative;\n  float: left;\n  border-right-width: 0;\n  border-radius: 0;\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &:focus,\n  &:active,\n  &:hover {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n\n    & + .BtnGroup-item,\n    & + .BtnGroup-parent .BtnGroup-item {\n      border-left-width: 0;\n    }\n  }\n}\n\n.BtnGroup-parent {\n  float: left;\n\n  &:first-child .BtnGroup-item {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child .BtnGroup-item {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  & .BtnGroup-item {\n    border-right-width: 0;\n    border-radius: 0;\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &:focus,\n  &:active,\n  &:hover {\n    & .BtnGroup-item {\n      border-right-width: var(--primer-borderWidth-thin, 1px);\n    }\n\n    & + .BtnGroup-item,\n    & + .BtnGroup-parent .BtnGroup-item {\n      border-left-width: 0;\n    }\n  }\n}\n\n/* ensure that the focus ring sits above the adjacent buttons */\n.BtnGroup-item,\n.BtnGroup-parent {\n  &:focus,\n  &:active {\n    z-index: 1;\n  }\n}\n","@define-mixin clearfix {\n  &::before {\n    display: table;\n    content: '';\n  }\n\n  &::after {\n    display: table;\n    clear: both;\n    content: '';\n  }\n}\n"]}

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

@@ -0,0 +1,92 @@
+/* BtnGroup */
+
+/* A button group is a series of buttons laid out next to each other, all part
+** of one visual button, but separated by rules to be separate. */
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+
+  @mixin clearfix;
+
+  /* Proper spacing for multiple button groups (a la, gollum editor) */
+  & + .BtnGroup,
+  & + .btn {
+    margin-left: var(--primer-control-small-gap, 4px);
+  }
+}
+
+.BtnGroup-item.btn {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-child {
+    border-right-width: var(--primer-borderWidth-thin, 1px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    border-right-width: var(--primer-borderWidth-thin, 1px);
+
+    & + .BtnGroup-item,
+    & + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-child .BtnGroup-item {
+    border-right-width: var(--primer-borderWidth-thin, 1px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  & .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    & .BtnGroup-item {
+      border-right-width: var(--primer-borderWidth-thin, 1px);
+    }
+
+    & + .BtnGroup-item,
+    & + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+/* ensure that the focus ring sits above the adjacent buttons */
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}