@primer/view-components 0.14.0-rc.849c6a4c → 0.14.0-rc.86e4016f

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

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,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(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,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,.375rem);color:var(--fgColor-default,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(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,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(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,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(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,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(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,.375rem);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(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,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(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,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,.375rem);color:var(--fgColor-default,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(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;-webkit-text-decoration:none;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(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));-webkit-text-decoration:none;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(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,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(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,.375rem);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(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

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

@@ -34,7 +34,8 @@ let XBannerElement = class XBannerElement extends HTMLElement {
         this.style.setProperty('display', 'none');
     }
 };
-_XBannerElement_instances = new WeakSet(), _XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
+_XBannerElement_instances = new WeakSet();
+_XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
     return this.getAttribute('data-dismiss-scheme');
 };
 __decorate([

package/app/components/primer/anchored_position.js

@@ -44,7 +44,7 @@ const updateWhenVisible = (() => {
         intersectionObserver.observe(el);
     };
 })();
-export default class AnchoredPositionElement extends HTMLElement {
+class AnchoredPositionElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _AnchoredPositionElement_anchorElement.set(this, null);
@@ -150,6 +150,7 @@ export default class AnchoredPositionElement extends HTMLElement {
 }
 _AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
 AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+export default AnchoredPositionElement;
 if (!customElements.get('anchored-position')) {
     window.AnchoredPositionElement = AnchoredPositionElement;
     customElements.define('anchored-position', AnchoredPositionElement);

package/app/components/primer/beta/blankslate.css

@@ -1 +1 @@
-.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}
+.blankslate-container{container-type:inline-size}.blankslate{--blankslate-outer-padding-block:var(--base-size-32,2rem);--blankslate-outer-padding-inline:var(--base-size-32,2rem);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-large,1rem)}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--text-title-weight-medium,600);margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80,5rem);--blankslate-outer-padding-inline:var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-heading{font-size:var(--text-title-size-small,1rem)}.blankslate p{font-size:var(--text-body-size-medium,.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed,.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed,.5rem)/2)}}

package/app/components/primer/beta/blankslate.css.json

@@ -1,6 +1,7 @@
 {
   "name": "beta/blankslate",
   "selectors": [
+    ".blankslate-container",
     ".blankslate",
     ".blankslate p",
     ".blankslate code",

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

@@ -1 +1 @@
-.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-emphasis))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,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(--bgColor-muted,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(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}
+.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-emphasis))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,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(--bgColor-muted,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(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default))}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg))}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}

package/app/components/primer/beta/button.css

@@ -1 +1 @@
-:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
+:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}

package/app/components/primer/beta/label.css

@@ -1 +1 @@
-.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}

package/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{-webkit-text-decoration:none;text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

package/app/components/primer/beta/nav_list.js

@@ -171,12 +171,14 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
     }
 };
-_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+_NavListElement_instances = new WeakSet();
+_NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
     const template = document.createElement('template');
     // eslint-disable-next-line github/no-inner-html
     template.innerHTML = html;
     return document.importNode(template.content, true);
-}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+};
+_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
@@ -189,16 +191,19 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         }
     }
     return null;
-}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+};
+_NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
     // If we didn't find a match, we compare the selected link to the href of each nav item
     const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
     if (selectedNavItem) {
         return selectedNavItem.closest('.ActionListItem');
     }
     return null;
-}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+};
+_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
     return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
-}, _NavListElement_select = function _NavListElement_select(navItem) {
+};
+_NavListElement_select = function _NavListElement_select(navItem) {
     const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
     if (currentlySelectedItem)
         __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
@@ -211,7 +216,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.expandItem(parentMenu);
         parentMenu.classList.add('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+};
+_NavListElement_deselect = function _NavListElement_deselect(navItem) {
     navItem.classList.remove('ActionListItem--navActive');
     if (navItem.children.length > 0) {
         navItem.children[0].removeAttribute('aria-current');
@@ -221,7 +227,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.collapseItem(parentMenu);
         parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+};
+_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
     var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;

package/app/components/primer/focus_group.js

@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
-export default class FocusGroupElement extends HTMLElement {
+class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
 _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
+export default FocusGroupElement;
 if (!customElements.get('focus-group')) {
     window.FocusGroupElement = FocusGroupElement;
     customElements.define('focus-group', FocusGroupElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.14.0-rc.849c6a4c",
+  "version": "0.14.0-rc.86e4016f",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -84,7 +84,7 @@
     "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^14.1.0",
     "postcss-mixins": "^9.0.3",
-    "postcss-preset-env": "^7.8.0",
+    "postcss-preset-env": "^9.3.0",
     "prettier": "2.7.1",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -92,7 +92,7 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^28.0.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.2.2"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/arguments.json

@@ -923,7 +923,7 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
       },
       {
         "name": "show_divider",

package/static/info_arch.json

@@ -3165,7 +3165,7 @@
             "name": "subtitle",
             "type": "String",
             "default": "`nil`",
-            "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute."
+            "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
           },
           {
             "name": "show_divider",
@@ -4932,7 +4932,7 @@
   },
   {
     "fully_qualified_name": "Primer::Alpha::NavList",
-    "description": "",
+    "description": ":nodoc:",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
@@ -4982,7 +4982,7 @@
     "subcomponents": [
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Item",
-        "description": "",
+        "description": ":nodoc:",
         "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
@@ -5102,7 +5102,7 @@
       },
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Heading",
-        "description": "",
+        "description": ":nodoc:",
         "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
@@ -5154,7 +5154,7 @@
       },
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Divider",
-        "description": "",
+        "description": ":nodoc:",
         "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
@@ -5194,7 +5194,7 @@
       },
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Group",
-        "description": "",
+        "description": ":nodoc:",
         "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
@@ -5438,7 +5438,32 @@
 
     ],
     "previews": [
-
+      {
+        "preview_path": "primer/alpha/octicon_symbols/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/octicon_symbols/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
     ],
     "subcomponents": [
 

package/static/previews.json

@@ -4471,6 +4471,40 @@
       }
     ]
   },
+  {
+    "name": "octicon_symbols",
+    "component": "OcticonSymbols",
+    "status": "alpha",
+    "lookup_path": "primer/alpha/octicon_symbols",
+    "examples": [
+      {
+        "preview_path": "primer/alpha/octicon_symbols/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/octicon_symbols/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "overlay",
     "component": "Overlay",