@primer/view-components 0.45.2 → 0.46.0-rc.4285adec

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

@@ -2,8 +2,8 @@
   "name": "beta/breadcrumbs",
   "selectors": [
     ".breadcrumb-item",
-    ".breadcrumb-item::after",
-    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after",
+    ".breadcrumb-item:after",
+    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after",
     ".breadcrumb-item-selected a"
   ]
 }

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

@@ -1,359 +1 @@
-/* stylelint-disable selector-no-qualifying-type */
-/* stylelint-disable selector-max-type */
-/* stylelint-disable primer/spacing */
-/* CSS for Button  */
-/* temporary, pre primitives release */
-:root {
-  --duration-fast: 80ms;
-  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
-}
-/* base button */
-.Button {
-  position: relative;
-  display: inline-flex;
-  min-width: max-content;
-  height: var(--control-medium-size);
-  padding: 0 var(--control-medium-paddingInline-normal);
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-medium);
-  color: var(--button-default-fgColor-rest);
-  text-align: center;
-  cursor: pointer;
-  flex-direction: row;
-  -webkit-user-select: none;
-          user-select: none;
-  background-color: transparent;
-  border: var(--borderWidth-thin) solid;
-  border-color: transparent;
-  border-radius: var(--borderRadius-medium);
-  transition: var(--duration-fast) var(--easing-easeInOut);
-  transition-property: color, fill, background-color, border-color;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--base-size-4);
-
-  /* mobile friendly sizing */
-}
-@media (pointer: coarse) {
-      :is(.Button::before) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    min-height: 48px;
-    content: "";
-    transform: translateX(-50%) translateY(-50%);
-    min-width: 48px;
-  }
-  }
-/* base states */
-.Button:hover {
-    transition-duration: var(--duration-fast);
-  }
-.Button:active {
-    transition: none;
-  }
-.Button:disabled,.Button[aria-disabled='true'] {
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-.Button.Button--iconOnly {
-    color: var(--fgColor-muted);
-  }
-:is(a.Button,summary.Button):hover {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-  }
-/* wrap grid content to allow trailingAction to lock-right */
-.Button-content {
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: 'leadingVisual text trailingVisual';
-  grid-template-columns: min-content minmax(0, auto) min-content;
-  align-items: center;
-  place-content: center;
-
-  /* padding-bottom: 1px; optical alignment for firefox */
-}
-.Button-content > :not(:last-child) {
-    margin-right: var(--control-medium-gap);
-  }
-/* center child elements for fullWidth */
-.Button-content--alignStart {
-  justify-content: start;
-}
-/* button child elements */
-/* align svg */
-.Button-visual {
-  display: flex;
-  pointer-events: none; /* allow click handler to work, avoiding visuals */
-}
-.Button-visual .Counter {
-    color: inherit;
-    background-color: var(--buttonCounter-default-bgColor-rest);
-  }
-.Button-label {
-  line-height: var(--text-body-lineHeight-medium);
-  white-space: nowrap;
-  grid-area: text;
-}
-.Button-leadingVisual {
-  grid-area: leadingVisual;
-}
-.Button-leadingVisual svg {
-  fill: currentcolor;
-}
-.Button-trailingVisual {
-  grid-area: trailingVisual;
-}
-.Button-trailingAction {
-  margin-right: calc(var(--base-size-4) * -1);
-}
-/* sizes */
-.Button--small {
-  min-width: var(--control-small-size);
-  height: var(--control-small-size);
-  padding: 0 var(--control-small-paddingInline-condensed);
-  font-size: var(--text-body-size-small);
-  gap: var(--control-small-gap);
-}
-.Button--small .Button-label {
-    line-height: var(--text-body-lineHeight-small);
-  }
-:is(.Button--small .Button-content) > :not(:last-child) {
-      margin-right: var(--control-small-gap);
-    }
-.Button--large {
-  height: var(--control-large-size);
-  padding: 0 var(--control-large-paddingInline-spacious);
-  gap: var(--control-large-gap);
-}
-.Button--large .Button-label {
-    line-height: var(--text-body-lineHeight-large);
-  }
-:is(.Button--large .Button-content) > :not(:last-child) {
-      margin-right: var(--control-large-gap);
-    }
-.Button--fullWidth {
-  width: 100%;
-}
-/* allow button label text to wrap */
-.Button--labelWrap {
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size);
-}
-.Button--labelWrap .Button-content {
-    flex: 1 1 auto;
-    align-self: stretch;
-    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));
-  }
-.Button--labelWrap .Button-label {
-    white-space: unset;
-  }
-.Button--labelWrap.Button--small {
-    height: unset;
-    min-height: var(--control-small-size);
-  }
-.Button--labelWrap.Button--small .Button-content {
-      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));
-    }
-.Button--labelWrap.Button--large {
-    height: unset;
-    min-height: var(--control-large-size);
-    padding-inline: var(--control-large-paddingInline-spacious);
-  }
-.Button--labelWrap.Button--large .Button-content {
-      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));
-    }
-/* variants */
-/* primary */
-.Button--primary {
-  color: var(--button-primary-fgColor-rest);
-  fill: var(--button-primary-iconColor-rest);
-  background-color: var(--button-primary-bgColor-rest);
-  border-color: var(--button-primary-borderColor-rest);
-  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
-}
-.Button--primary.Button--iconOnly {
-    color: var(--button-primary-iconColor-rest);
-  }
-.Button--primary:hover:not(:disabled,.Button--inactive) {
-    background-color: var(--button-primary-bgColor-hover);
-    border-color: var(--button-primary-borderColor-hover);
-  }
-/* fallback :focus state */
-.Button--primary:focus {
-    outline: 2px solid var(--focus-outlineColor);
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-.Button--primary:focus:not(:focus-visible) {
-      outline: solid 1px transparent;
-      box-shadow: none;
-    }
-/* default focus state */
-.Button--primary:focus-visible {
-    outline: 2px solid var(--focus-outlineColor);
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
-  }
-.Button--primary:active:not(:disabled),.Button--primary[aria-pressed='true'] {
-    background-color: var(--button-primary-bgColor-active);
-    box-shadow: var(--button-primary-shadow-selected);
-  }
-.Button--primary:disabled,.Button--primary[aria-disabled='true'] {
-    color: var(--button-primary-fgColor-disabled);
-    fill: var(--button-primary-fgColor-disabled);
-    background-color: var(--button-primary-bgColor-disabled);
-    border-color: var(--button-primary-borderColor-disabled);
-  }
-.Button--primary .Counter {
-    color: inherit;
-    background-color: var(--buttonCounter-primary-bgColor-rest);
-  }
-/* default (secondary) */
-.Button--secondary {
-  color: var(--button-default-fgColor-rest);
-  fill: var(--fgColor-muted); /* help this */
-  background-color: var(--button-default-bgColor-rest);
-  border-color: var(--button-default-borderColor-rest);
-  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
-}
-.Button--secondary:hover:not(:disabled,.Button--inactive) {
-    background-color: var(--button-default-bgColor-hover);
-    border-color: var(--button-default-borderColor-hover);
-  }
-.Button--secondary:active:not(:disabled) {
-    background-color: var(--button-default-bgColor-active);
-    border-color: var(--button-default-borderColor-active);
-  }
-.Button--secondary[aria-pressed='true'] {
-    background-color: var(--button-default-bgColor-selected);
-    box-shadow: var(--shadow-inset);
-  }
-.Button--secondary:disabled,.Button--secondary[aria-disabled='true'] {
-    color: var(--control-fgColor-disabled);
-    fill: var(--control-fgColor-disabled);
-    background-color: var(--button-default-bgColor-disabled);
-    border-color: var(--button-default-borderColor-disabled);
-  }
-.Button--invisible {
-  color: var(--button-invisible-fgColor-rest);
-}
-.Button--invisible.Button--iconOnly {
-    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
-  }
-.Button--invisible:hover:not(:disabled,.Button--inactive) {
-    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
-  }
-.Button--invisible[aria-pressed='true'],.Button--invisible:active:not(:disabled) {
-    background-color: var(--button-invisible-bgColor-active);
-  }
-.Button--invisible:disabled,.Button--invisible[aria-disabled='true'] {
-    color: var(--button-invisible-fgColor-disabled);
-    fill: var(--button-invisible-fgColor-disabled);
-    background-color: var(--button-invisible-bgColor-disabled);
-    border-color: var(--button-invisible-borderColor-disabled);
-  }
-/* if button has no visuals, use link blue for text */
-.Button--invisible.Button--invisible-noVisuals .Button-label {
-    color: var(--button-invisible-fgColor-rest);
-  }
-.Button--invisible .Button-visual {
-    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
-  }
-:is(.Button--invisible .Button-visual) .Counter {
-      color: var(--fgColor-default);
-    }
-.Button--link {
-  display: inline-block;
-  min-width: fit-content;
-  height: unset;
-  padding: 0;
-  font-size: inherit;
-  color: var(--fgColor-link);
-  fill: var(--fgColor-link);
-  border: none;
-}
-.Button--link:hover:not(:disabled,.Button--inactive) {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-  }
-.Button--link:focus-visible,.Button--link:focus {
-    outline-offset: 2px;
-  }
-.Button--link:disabled,.Button--link[aria-disabled='true'] {
-    color: var(--control-fgColor-disabled);
-    fill: var(--control-fgColor-disabled);
-    background-color: transparent;
-    border-color: transparent;
-  }
-.Button--link .Button-label {
-      white-space: unset;
-  }
-/* danger */
-.Button--danger {
-  color: var(--button-danger-fgColor-rest);
-  fill: var(--button-danger-iconColor-rest);
-  background-color: var(--button-danger-bgColor-rest);
-  border-color: var(--button-danger-borderColor-rest);
-  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
-}
-.Button--danger.Button--iconOnly {
-    color: var(--button-danger-iconColor-rest);
-  }
-.Button--danger:hover:not(:disabled,.Button--inactive) {
-    color: var(--button-danger-fgColor-hover);
-    fill: var(--button-danger-fgColor-hover);
-    background-color: var(--button-danger-bgColor-hover);
-    border-color: var(--button-danger-borderColor-hover);
-    box-shadow: var(--shadow-resting-small);
-  }
-.Button--danger:hover:not(:disabled,.Button--inactive) .Counter {
-      color: var(--buttonCounter-danger-fgColor-hover);
-      background-color: var(--buttonCounter-danger-bgColor-hover);
-    }
-.Button--danger:active:not(:disabled),.Button--danger[aria-pressed='true'] {
-    color: var(--button-danger-fgColor-active);
-    fill: var(--button-danger-fgColor-active);
-    background-color: var(--button-danger-bgColor-active);
-    border-color: var(--button-danger-borderColor-active);
-    box-shadow: var(--button-danger-shadow-selected);
-  }
-.Button--danger:disabled,.Button--danger[aria-disabled='true'] {
-    color: var(--button-danger-fgColor-disabled);
-    fill: var(--button-danger-fgColor-disabled);
-    background-color: var(--button-danger-bgColor-disabled);
-    border-color: var(--button-default-borderColor-disabled);
-  }
-:is(.Button--danger:disabled,.Button--danger[aria-disabled='true']) .Counter {
-      color: var(--buttonCounter-danger-fgColor-disabled);
-      background-color: var(--buttonCounter-danger-bgColor-disabled);
-    }
-.Button--danger .Counter {
-    color: var(--buttonCounter-danger-fgColor-rest);
-    background-color: var(--buttonCounter-danger-bgColor-rest);
-  }
-.Button--iconOnly {
-  display: inline-grid;
-  width: var(--control-medium-size);
-  padding: unset;
-  place-content: center;
-}
-.Button--iconOnly.Button--small {
-    width: var(--control-small-size);
-  }
-.Button--iconOnly.Button--large {
-    width: var(--control-large-size);
-  }
-/* `disabled` takes precedence over `inactive` */
-.Button--inactive:not([aria-disabled='true'], :disabled) {
-  color: var(--button-inactive-fgColor);
-  cursor: default;
-  background-color: var(--button-inactive-bgColor);
-  border: 0;
-}
+: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) solid;border-color:#0000;border-radius:var(--borderRadius-medium);color:var(--button-default-fgColor-rest);cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);gap:var(--base-size-4);height:var(--control-medium-size);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal);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){:is(.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,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted)}:is(a.Button,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)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest);color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium);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)*-1)}.Button--small{font-size:var(--text-body-size-small);gap:var(--control-small-gap);height:var(--control-small-size);min-width:var(--control-small-size);padding:0 var(--control-small-paddingInline-condensed)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small)}:is(.Button--small .Button-content)>:not(:last-child){margin-right:var(--control-small-gap)}.Button--large{gap:var(--control-large-gap);height:var(--control-large-size);padding:0 var(--control-large-paddingInline-spacious)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large)}:is(.Button--large .Button-content)>:not(:last-child){margin-right:var(--control-large-gap)}.Button--fullWidth{width:100%}.Button--labelWrap{height:unset;min-height:var(--control-medium-size);min-width:fit-content}.Button--labelWrap .Button-content{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock) - var(--base-size-2))}.Button--labelWrap .Button-label{white-space:unset}.Button--labelWrap.Button--small{height:unset;min-height:var(--control-small-size)}.Button--labelWrap.Button--small .Button-content{padding-block:calc(var(--control-small-paddingBlock) - var(--base-size-2))}.Button--labelWrap.Button--large{height:unset;min-height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-spacious)}.Button--labelWrap.Button--large .Button-content{padding-block:calc(var(--control-large-paddingBlock) - var(--base-size-2))}.Button--primary{color:var(--button-primary-fgColor-rest);fill:var(--button-primary-iconColor-rest);background-color:var(--button-primary-bgColor-rest);border-color:var(--button-primary-borderColor-rest);box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest)}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover);border-color:var(--button-primary-borderColor-hover)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);outline:2px solid var(--focus-outlineColor);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);outline:2px solid var(--focus-outlineColor);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active);box-shadow:var(--button-primary-shadow-selected)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{color:var(--button-primary-fgColor-disabled);fill:var(--button-primary-fgColor-disabled);background-color:var(--button-primary-bgColor-disabled);border-color:var(--button-primary-borderColor-disabled)}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest);color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest);fill:var(--fgColor-muted);background-color:var(--button-default-bgColor-rest);border-color:var(--button-default-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover);border-color:var(--button-default-borderColor-hover)}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active);border-color:var(--button-default-borderColor-active)}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected);box-shadow:var(--shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}.Button--invisible{color:var(--button-invisible-fgColor-rest)}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{color:var(--button-invisible-fgColor-disabled);fill:var(--button-invisible-fgColor-disabled);background-color:var(--button-invisible-bgColor-disabled);border-color:var(--button-invisible-borderColor-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest)}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}:is(.Button--invisible .Button-visual) .Counter{color:var(--fgColor-default)}.Button--link{color:var(--fgColor-link);display:inline-block;font-size:inherit;height:unset;min-width:fit-content;padding:0;fill:var(--fgColor-link);border:none}.Button--link:hover:not(:disabled,.Button--inactive){-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]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:initial;border-color:#0000}.Button--link .Button-label{white-space:unset}.Button--danger{color:var(--button-danger-fgColor-rest);fill:var(--button-danger-iconColor-rest);background-color:var(--button-danger-bgColor-rest);border-color:var(--button-danger-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest)}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover);fill:var(--button-danger-fgColor-hover);background-color:var(--button-danger-bgColor-hover);border-color:var(--button-danger-borderColor-hover);box-shadow:var(--shadow-resting-small)}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover);color:var(--buttonCounter-danger-fgColor-hover)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active);fill:var(--button-danger-fgColor-active);background-color:var(--button-danger-bgColor-active);border-color:var(--button-danger-borderColor-active);box-shadow:var(--button-danger-shadow-selected)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled);fill:var(--button-danger-fgColor-disabled);background-color:var(--button-danger-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}:is(.Button--danger:disabled,.Button--danger[aria-disabled=true]) .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled);color:var(--buttonCounter-danger-fgColor-disabled)}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest);color:var(--buttonCounter-danger-fgColor-rest)}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size)}.Button--iconOnly.Button--small{width:var(--control-small-size)}.Button--iconOnly.Button--large{width:var(--control-large-size)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}

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

@@ -3,15 +3,15 @@
   "selectors": [
     ":root",
     ".Button",
-    ":is(.Button::before)",
+    ":is(.Button:before)",
     ".Button:hover",
     ".Button:active",
     ".Button:disabled",
-    ".Button[aria-disabled='true']",
+    ".Button[aria-disabled=true]",
     ".Button.Button--iconOnly",
     ":is(a.Button,summary.Button):hover",
     ".Button-content",
-    ".Button-content > :not(:last-child)",
+    ".Button-content>:not(:last-child)",
     ".Button-content--alignStart",
     ".Button-visual",
     ".Button-visual .Counter",
@@ -22,10 +22,10 @@
     ".Button-trailingAction",
     ".Button--small",
     ".Button--small .Button-label",
-    ":is(.Button--small .Button-content) > :not(:last-child)",
+    ":is(.Button--small .Button-content)>:not(:last-child)",
     ".Button--large",
     ".Button--large .Button-label",
-    ":is(.Button--large .Button-content) > :not(:last-child)",
+    ":is(.Button--large .Button-content)>:not(:last-child)",
     ".Button--fullWidth",
     ".Button--labelWrap",
     ".Button--labelWrap .Button-content",
@@ -41,46 +41,46 @@
     ".Button--primary:focus:not(:focus-visible)",
     ".Button--primary:focus-visible",
     ".Button--primary:active:not(:disabled)",
-    ".Button--primary[aria-pressed='true']",
+    ".Button--primary[aria-pressed=true]",
     ".Button--primary:disabled",
-    ".Button--primary[aria-disabled='true']",
+    ".Button--primary[aria-disabled=true]",
     ".Button--primary .Counter",
     ".Button--secondary",
     ".Button--secondary:hover:not(:disabled,.Button--inactive)",
     ".Button--secondary:active:not(:disabled)",
-    ".Button--secondary[aria-pressed='true']",
+    ".Button--secondary[aria-pressed=true]",
     ".Button--secondary:disabled",
-    ".Button--secondary[aria-disabled='true']",
+    ".Button--secondary[aria-disabled=true]",
     ".Button--invisible",
     ".Button--invisible.Button--iconOnly",
     ".Button--invisible:hover:not(:disabled,.Button--inactive)",
-    ".Button--invisible[aria-pressed='true']",
     ".Button--invisible:active:not(:disabled)",
+    ".Button--invisible[aria-pressed=true]",
     ".Button--invisible:disabled",
-    ".Button--invisible[aria-disabled='true']",
+    ".Button--invisible[aria-disabled=true]",
     ".Button--invisible.Button--invisible-noVisuals .Button-label",
     ".Button--invisible .Button-visual",
     ":is(.Button--invisible .Button-visual) .Counter",
     ".Button--link",
     ".Button--link:hover:not(:disabled,.Button--inactive)",
-    ".Button--link:focus-visible",
     ".Button--link:focus",
+    ".Button--link:focus-visible",
     ".Button--link:disabled",
-    ".Button--link[aria-disabled='true']",
+    ".Button--link[aria-disabled=true]",
     ".Button--link .Button-label",
     ".Button--danger",
     ".Button--danger.Button--iconOnly",
     ".Button--danger:hover:not(:disabled,.Button--inactive)",
     ".Button--danger:hover:not(:disabled,.Button--inactive) .Counter",
     ".Button--danger:active:not(:disabled)",
-    ".Button--danger[aria-pressed='true']",
+    ".Button--danger[aria-pressed=true]",
     ".Button--danger:disabled",
-    ".Button--danger[aria-disabled='true']",
-    ":is(.Button--danger:disabled,.Button--danger[aria-disabled='true']) .Counter",
+    ".Button--danger[aria-disabled=true]",
+    ":is(.Button--danger:disabled,.Button--danger[aria-disabled=true]) .Counter",
     ".Button--danger .Counter",
     ".Button--iconOnly",
     ".Button--iconOnly.Button--small",
     ".Button--iconOnly.Button--large",
-    ".Button--inactive:not([aria-disabled='true'], :disabled)"
+    ".Button--inactive:not([aria-disabled=true],:disabled)"
   ]
 }

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

@@ -1,20 +1 @@
-.ButtonGroup {
-  display: inline-flex;
-}
-.ButtonGroup .Button {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-inline-end: -1px;
-    position: relative;
-    border-radius: 0;
-  }
-:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):hover {
-      z-index: 1;
-    }
-.ButtonGroup > :first-child .Button {
-    border-top-left-radius: var(--borderRadius-medium);
-    border-bottom-left-radius: var(--borderRadius-medium);
-  }
-.ButtonGroup > :last-child .Button {
-    border-top-right-radius: var(--borderRadius-medium);
-    border-bottom-right-radius: var(--borderRadius-medium);
-  }
+.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):hover{z-index:1}.ButtonGroup>:first-child .Button{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.ButtonGroup>:last-child .Button{border-bottom-right-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}

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

@@ -3,10 +3,10 @@
   "selectors": [
     ".ButtonGroup",
     ".ButtonGroup .Button",
-    ":is(.ButtonGroup .Button):focus",
     ":is(.ButtonGroup .Button):active",
+    ":is(.ButtonGroup .Button):focus",
     ":is(.ButtonGroup .Button):hover",
-    ".ButtonGroup > :first-child .Button",
-    ".ButtonGroup > :last-child .Button"
+    ".ButtonGroup>:first-child .Button",
+    ".ButtonGroup>:last-child .Button"
   ]
 }

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

@@ -1,38 +1 @@
-/* Counter */
-
-.Counter {
-  display: inline-block;
-  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */
-  padding: 0 var(--base-size-6);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
-  color: var(--fgColor-default);
-  text-align: center;
-  background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
-  border: var(--borderWidth-thin) solid var(--counter-borderColor);
-  /* stylelint-disable-next-line primer/borders */
-  border-radius: 2em;
-}
-
-.Counter:empty {
-    display: none;
-  }
-
-/* Is this selector used? could not find any use of it */
-
-.Counter .octicon {
-    vertical-align: text-top;
-    opacity: 0.8;
-  }
-
-.Counter--primary {
-  color: var(--fgColor-onEmphasis);
-  background-color: var(--bgColor-neutral-emphasis);
-}
-
-.Counter--secondary {
-  color: var(--fgColor-muted);
-  background-color: var(--bgColor-neutral-muted);
-}
+.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin) solid var(--counter-borderColor);border-radius:2em;color:var(--fgColor-default);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - var(--borderWidth-thin)*2);min-width:var(--base-size-20);padding:0 var(--base-size-6);text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.Counter--secondary{background-color:var(--bgColor-neutral-muted);color:var(--fgColor-muted)}