primer_view_components 0.0.121 → 0.0.123

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

@@ -10,18 +10,6 @@
   align-items: center;
   display: inline-flex;
   gap: var(--primer-controlStack-medium-gap-condensed, 8px);
-
-  &:hover {
-    & .ToggleSwitch-knob {
-      background-color: var(--color-btn-hover-bg);
-    }
-  }
-
-  &:active {
-    & .ToggleSwitch-knob {
-      background-color: var(--color-btn-active-bg);
-    }
-  }
 }
 
 .ToggleSwitch--checked {
@@ -56,7 +44,15 @@
 
   &:focus,
   &:focus-visible {
-    outline-offset: 0;
+    outline-offset: 1px;
+  }
+
+  &:hover {
+    background-color: var(--color-switch-track-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--color-switch-track-active-bg);
   }
 
   @media (pointer: coarse) {
@@ -75,42 +71,29 @@
 }
 
 .ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-subtle);
-
-  &:hover,
-  &:active {
-    background-color: var(--color-canvas-subtle);
-
-    /* This is the most straightforward way of setting the knob's styles when the
-    ** switch is both checked and disabled. */
-
-    & .ToggleSwitch-knob {
-      background-color: var(--color-switch-knob-checked-disabled-bg);
-    }
-  }
-
-  & .ToggleSwitch-knob {
-    background-color: var(--color-switch-knob-checked-disabled-bg);
-  }
+  background-color: var(--color-switch-track-disabled-bg);
+  color: var(--color-switch-track-checked-disabled-fg);
+  border-color: transparent;
 }
 
 .ToggleSwitch-track[aria-checked='true'] {
   background-color: var(--color-switch-track-checked-bg);
   border-color: var(--color-switch-track-checked-border);
 
-  &:hover {
-    background-color: var(--color-switch-track-checked-hover-bg);
-  }
+  &:not([aria-disabled='true']) {
+    &:hover {
+      background-color: var(--color-switch-track-checked-hover-bg);
+    }
 
-  &:active {
-    background-color: var(--color-switch-track-checked-active-bg);
+    &:active {
+      background-color: var(--color-switch-track-checked-active-bg);
+    }
   }
 
   & .ToggleSwitch-knob {
     background-color: var(--color-switch-knob-checked-bg);
-    border: 0;
-    transform: translateX(calc(100% + 1px));
+    border-color: var(--color-switch-knob-checked-border);
+    transform: translateX(100%);
   }
 
   & .ToggleSwitch-lineIcon {
@@ -124,33 +107,21 @@
 
 .ToggleSwitch-track[aria-disabled='true'] {
   cursor: not-allowed;
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-subtle);
+  background-color: var(--color-switch-track-disabled-bg);
+  border-color: transparent;
   transition-property: none;
 
-  &:hover,
-  &:active {
-    & .ToggleSwitch-knob {
-      background-color: var(--color-btn-bg);
-    }
-  }
-
   & .ToggleSwitch-knob {
     border-color: var(--color-border-default);
     box-shadow: none;
-
-    &:hover,
-    &:active {
-      background-color: var(--color-btn-bg);
-    }
   }
 
   & .ToggleSwitch-lineIcon {
-    color: var(--color-fg-subtle);
+    color: var(--color-switch-track-disabled-fg);
   }
 
   & .ToggleSwitch-circleIcon {
-    color: var(--color-fg-subtle);
+    color: var(--color-switch-track-disabled-fg);
   }
 }
 
@@ -164,7 +135,7 @@
 
 .ToggleSwitch-lineIcon {
   line-height: 0;
-  color: var(--color-accent-fg);
+  color: var(--color-switch-track-checked-fg);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(-100%);
@@ -173,7 +144,7 @@
 
 .ToggleSwitch-circleIcon {
   line-height: 0;
-  color: var(--color-fg-default);
+  color: var(--color-switch-track-fg);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(0);
@@ -182,18 +153,17 @@
 
 .ToggleSwitch-knob {
   position: absolute;
-  top: -1px;
-  bottom: -1px;
+  top: 0;
+  bottom: 0;
   z-index: 1;
   width: 50%;
-  background-color: var(--color-btn-bg);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  background-color: var(--color-switch-knob-bg);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);
   border-radius: var(--primer-borderRadius-medium, 6px);
   box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
   transition-property: transform;
-  transform: translateX(-1px);
 
   @media (prefers-reduced-motion) {
     transition: none;

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

@@ -1 +1,28 @@
-{"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]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
+{
+  "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]",
+    ".UnderlineNav-item.selected:after",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
+    ".UnderlineNav-item[role=tab][aria-selected=true]:after",
+    ".UnderlineNav--right",
+    ".UnderlineNav--right .UnderlineNav-actions",
+    ".UnderlineNav-actions",
+    ".UnderlineNav--full",
+    ".UnderlineNav--full .UnderlineNav-body",
+    ".UnderlineNav-octicon",
+    ".UnderlineNav-container"
+  ]
+}

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

@@ -1 +1,17 @@
-{"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1",".avatar-2",".avatar-small",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}
+{
+  "name": "beta/avatar",
+  "selectors": [
+    ".avatar",
+    ".avatar-link",
+    ".avatar-group-item",
+    ".avatar-1",
+    ".avatar-2",
+    ".avatar-small",
+    ".avatar-3",
+    ".avatar-4",
+    ".avatar-5",
+    ".avatar-6",
+    ".avatar-7",
+    ".avatar-8"
+  ]
+}

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

@@ -1 +1,28 @@
-{"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more:after",".avatar.avatar-more:before",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more:before",".AvatarStack--right .avatar.avatar-more:after",".AvatarStack--right .avatar"]}
+{
+  "name": "beta/avatar_stack",
+  "selectors": [
+    ".AvatarStack",
+    ".AvatarStack .AvatarStack-body",
+    ".AvatarStack.AvatarStack--two",
+    ".AvatarStack.AvatarStack--three-plus",
+    ".AvatarStack-body",
+    ".AvatarStack-body .avatar",
+    ".AvatarStack-body .avatar:first-child",
+    ".AvatarStack-body .avatar:last-child",
+    ".AvatarStack-body .avatar img",
+    ".AvatarStack-body .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar",
+    ".AvatarStack-body:hover .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar-more",
+    ".avatar.avatar-more",
+    ".avatar.avatar-more:after",
+    ".avatar.avatar-more:before",
+    ".AvatarStack--right .AvatarStack-body",
+    ".AvatarStack--right .AvatarStack-body:hover .avatar",
+    ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
+    ".AvatarStack--right .avatar.avatar-more",
+    ".AvatarStack--right .avatar.avatar-more:before",
+    ".AvatarStack--right .avatar.avatar-more:after",
+    ".AvatarStack--right .avatar"
+  ]
+}

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

@@ -1 +1,22 @@
-{"name":"beta/blankslate","selectors":[".blankslate",".blankslate p",".blankslate code",".blankslate img",".blankslate-icon",".blankslate-image",".blankslate-heading",".blankslate-action",".blankslate-action:first-of-type",".blankslate-action:last-of-type",".blankslate-capped",".blankslate-spacious",".blankslate-narrow",".blankslate-large img",".blankslate-large h3",".blankslate-large p",".blankslate-clean-background"]}
+{
+  "name": "beta/blankslate",
+  "selectors": [
+    ".blankslate",
+    ".blankslate p",
+    ".blankslate code",
+    ".blankslate img",
+    ".blankslate-icon",
+    ".blankslate-image",
+    ".blankslate-heading",
+    ".blankslate-action",
+    ".blankslate-action:first-of-type",
+    ".blankslate-action:last-of-type",
+    ".blankslate-capped",
+    ".blankslate-spacious",
+    ".blankslate-narrow",
+    ".blankslate-large img",
+    ".blankslate-large h3",
+    ".blankslate-large p",
+    ".blankslate-clean-background"
+  ]
+}

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

@@ -1 +1,54 @@
-{"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"]}
+{
+  "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/breadcrumbs.css.json

@@ -1 +1,11 @@
-{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",".breadcrumb-item-selected:after",".breadcrumb-item[aria-current]:not([aria-current=false]):after",".breadcrumb-item-selected a"]}
+{
+  "name": "beta/breadcrumbs",
+  "selectors": [
+    ".breadcrumb-item",
+    ".breadcrumb-item:after",
+    ".breadcrumb-item:first-child",
+    ".breadcrumb-item-selected:after",
+    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
+    ".breadcrumb-item-selected a"
+  ]
+}

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

@@ -1 +1,71 @@
-{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
+{
+  "name": "beta/button",
+  "selectors": [
+    ":root",
+    ".Button",
+    ".Button:before",
+    ".Button:hover",
+    ".Button:active",
+    ".Button:disabled",
+    ".Button[aria-disabled=true]",
+    ".Button-withTooltip",
+    "a.Button",
+    "summary.Button",
+    "a.Button:hover",
+    "summary.Button:hover",
+    ".Button-content",
+    ".Button-content>:not(:last-child)",
+    ".Button-content--alignStart",
+    ".Button-visual",
+    ".Button-visual .Counter",
+    ".Button-label",
+    ".Button-leadingVisual",
+    ".Button-trailingVisual",
+    ".Button-trailingAction",
+    ".Button--small",
+    ".Button--small .Button-label",
+    ".Button--small .Button-content>:not(:last-child)",
+    ".Button--large",
+    ".Button--large .Button-label",
+    ".Button--large .Button-content>:not(:last-child)",
+    ".Button--fullWidth",
+    ".Button--primary",
+    ".Button--primary:hover:not(:disabled)",
+    ".Button--primary:focus",
+    ".Button--primary:focus:not(:focus-visible)",
+    ".Button--primary:focus-visible",
+    ".Button--primary:active:not(:disabled)",
+    ".Button--primary[aria-pressed=true]",
+    ".Button--primary:disabled",
+    ".Button--primary[aria-disabled=true]",
+    ".Button--secondary",
+    ".Button--secondary:hover:not(:disabled)",
+    ".Button--secondary:active:not(:disabled)",
+    ".Button--secondary[aria-pressed=true]",
+    ".Button--secondary:disabled",
+    ".Button--secondary[aria-disabled=true]",
+    ".Button--invisible",
+    ".Button--invisible:hover:not(:disabled)",
+    ".Button--invisible:active:not(:disabled)",
+    ".Button--invisible[aria-pressed=true]",
+    ".Button--invisible:disabled",
+    ".Button--invisible[aria-disabled=true]",
+    ".Button--invisible.Button--invisible-noVisuals .Button-label",
+    ".Button--invisible .Button-visual",
+    ".Button--link",
+    ".Button--link:hover:not(:disabled)",
+    ".Button--link:focus",
+    ".Button--link:focus-visible",
+    ".Button--link:disabled",
+    ".Button--link[aria-disabled=true]",
+    ".Button--danger",
+    ".Button--danger:hover:not(:disabled)",
+    ".Button--danger:active:not(:disabled)",
+    ".Button--danger[aria-pressed=true]",
+    ".Button--danger:disabled",
+    ".Button--danger[aria-disabled=true]",
+    ".Button--iconOnly",
+    ".Button--iconOnly.Button--small",
+    ".Button--iconOnly.Button--large"
+  ]
+}

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

@@ -1 +1,10 @@
-{"name":"beta/counter","selectors":[".Counter",".Counter:empty",".Counter .octicon",".Counter--primary",".Counter--secondary"]}
+{
+  "name": "beta/counter",
+  "selectors": [
+    ".Counter",
+    ".Counter:empty",
+    ".Counter .octicon",
+    ".Counter--primary",
+    ".Counter--secondary"
+  ]
+}

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

@@ -1 +1,27 @@
-{"name":"beta/flash","selectors":[".flash:not(.Banner)",".flash:not(.Banner) .octicon",".flash:not(.Banner) p:last-child",".flash-messages",".flash-close:not(.Banner-close)",".flash-close:not(.Banner-close):hover",".flash-close:not(.Banner-close):active",".flash-close:not(.Banner-close) .octicon",".flash-action:not(.Banner-actions)",".flash-action.btn:not(.Banner-actions) .octicon",".flash-action.btn-primary:not(.Banner-actions)",".flash-action.btn-primary:not(.Banner-actions) .octicon",".flash-warn:not(.Banner)",".flash-warn:not(.Banner) .octicon",".flash-error:not(.Banner)",".flash-error:not(.Banner) .octicon",".flash-success:not(.Banner)",".flash-success:not(.Banner) .octicon",".flash-full:not(.Banner)",".flash-banner",".flash-full",".warning"]}
+{
+  "name": "beta/flash",
+  "selectors": [
+    ".flash:not(.Banner)",
+    ".flash:not(.Banner) .octicon",
+    ".flash:not(.Banner) p:last-child",
+    ".flash-messages",
+    ".flash-close:not(.Banner-close)",
+    ".flash-close:not(.Banner-close):hover",
+    ".flash-close:not(.Banner-close):active",
+    ".flash-close:not(.Banner-close) .octicon",
+    ".flash-action:not(.Banner-actions)",
+    ".flash-action.btn:not(.Banner-actions) .octicon",
+    ".flash-action.btn-primary:not(.Banner-actions)",
+    ".flash-action.btn-primary:not(.Banner-actions) .octicon",
+    ".flash-warn:not(.Banner)",
+    ".flash-warn:not(.Banner) .octicon",
+    ".flash-error:not(.Banner)",
+    ".flash-error:not(.Banner) .octicon",
+    ".flash-success:not(.Banner)",
+    ".flash-success:not(.Banner) .octicon",
+    ".flash-full:not(.Banner)",
+    ".flash-banner",
+    ".flash-full",
+    ".warning"
+  ]
+}

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

@@ -1 +1,25 @@
-{"name":"beta/label","selectors":[".labels",".Label",".label",".Label:hover",".label:hover",".Label--large",".Label--inline",".Label--primary",".Label--secondary",".Label--accent",".Label--info",".Label--success",".Label--attention",".Label--warning",".Label--severe",".Label--danger",".Label--open",".Label--closed",".Label--done",".Label--sponsors"]}
+{
+  "name": "beta/label",
+  "selectors": [
+    ".labels",
+    ".Label",
+    ".label",
+    ".Label:hover",
+    ".label:hover",
+    ".Label--large",
+    ".Label--inline",
+    ".Label--primary",
+    ".Label--secondary",
+    ".Label--accent",
+    ".Label--info",
+    ".Label--success",
+    ".Label--attention",
+    ".Label--warning",
+    ".Label--severe",
+    ".Label--danger",
+    ".Label--open",
+    ".Label--closed",
+    ".Label--done",
+    ".Label--sponsors"
+  ]
+}

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

@@ -1 +1,19 @@
-{"name":"beta/link","selectors":[".Link",".Link:hover",".Link:focus",".Link:focus-visible",".Link--primary",".Link--primary:hover",".Link--secondary",".Link--secondary:hover",".Link--muted",".Link--muted:hover",".Link--onHover:hover",".Link--muted:hover [class*=color-fg]",".Link--primary:hover [class*=color-fg]",".Link--secondary:hover [class*=color-fg]"]}
+{
+  "name": "beta/link",
+  "selectors": [
+    ".Link",
+    ".Link:hover",
+    ".Link:focus",
+    ".Link:focus-visible",
+    ".Link--primary",
+    ".Link--primary:hover",
+    ".Link--secondary",
+    ".Link--secondary:hover",
+    ".Link--muted",
+    ".Link--muted:hover",
+    ".Link--onHover:hover",
+    ".Link--muted:hover [class*=color-fg]",
+    ".Link--primary:hover [class*=color-fg]",
+    ".Link--secondary:hover [class*=color-fg]"
+  ]
+}

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

@@ -1 +1,39 @@
-{"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}
+{
+  "name": "beta/popover",
+  "selectors": [
+    ".Popover",
+    ".Popover-message",
+    ".Popover-message:after",
+    ".Popover-message:before",
+    ".Popover-message--no-caret:after",
+    ".Popover-message--no-caret:before",
+    ".Popover-message--bottom-left:after",
+    ".Popover-message--bottom-left:before",
+    ".Popover-message--bottom-right:after",
+    ".Popover-message--bottom-right:before",
+    ".Popover-message--bottom:after",
+    ".Popover-message--bottom:before",
+    ".Popover-message--bottom-right",
+    ".Popover-message--top-right",
+    ".Popover-message--top-right:after",
+    ".Popover-message--top-right:before",
+    ".Popover-message--bottom-left",
+    ".Popover-message--top-left",
+    ".Popover-message--top-left:after",
+    ".Popover-message--top-left:before",
+    ".Popover-message--left-bottom:after",
+    ".Popover-message--left-bottom:before",
+    ".Popover-message--left-top:after",
+    ".Popover-message--left-top:before",
+    ".Popover-message--left:after",
+    ".Popover-message--left:before",
+    ".Popover-message--right-bottom:after",
+    ".Popover-message--right-bottom:before",
+    ".Popover-message--right-top:after",
+    ".Popover-message--right-top:before",
+    ".Popover-message--right:after",
+    ".Popover-message--right:before",
+    ".Popover-message--large",
+    ".Popover-message>.btn-octicon"
+  ]
+}

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

@@ -1 +1,10 @@
-{"name":"beta/progress_bar","selectors":[".Progress",".Progress--large",".Progress--small",".Progress-item",".Progress-item+.Progress-item"]}
+{
+  "name": "beta/progress_bar",
+  "selectors": [
+    ".Progress",
+    ".Progress--large",
+    ".Progress--small",
+    ".Progress-item",
+    ".Progress-item+.Progress-item"
+  ]
+}

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

@@ -1 +1,13 @@
-{"name":"beta/state","selectors":[".State",".state",".State--draft",".State--open",".State--merged",".State--closed",".State--small",".State--small .octicon"]}
+{
+  "name": "beta/state",
+  "selectors": [
+    ".State",
+    ".state",
+    ".State--draft",
+    ".State--open",
+    ".State--merged",
+    ".State--closed",
+    ".State--small",
+    ".State--small .octicon"
+  ]
+}

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

@@ -1 +1,12 @@
-{"name":"beta/subhead","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions+.Subhead-description"]}
+{
+  "name": "beta/subhead",
+  "selectors": [
+    ".Subhead",
+    ".Subhead--spacious",
+    ".Subhead-heading",
+    ".Subhead-heading--danger",
+    ".Subhead-description",
+    ".Subhead-actions",
+    ".Subhead-actions+.Subhead-description"
+  ]
+}

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

@@ -1 +1,16 @@
-{"name":"beta/timeline_item","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}
+{
+  "name": "beta/timeline_item",
+  "selectors": [
+    ".TimelineItem",
+    ".TimelineItem:before",
+    ".TimelineItem:target .TimelineItem-badge",
+    ".TimelineItem-badge",
+    ".TimelineItem-badge--success",
+    ".TimelineItem-body",
+    ".TimelineItem-avatar",
+    ".TimelineItem-break",
+    ".TimelineItem--condensed",
+    ".TimelineItem--condensed:last-child",
+    ".TimelineItem--condensed .TimelineItem-badge"
+  ]
+}

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

@@ -1 +1,12 @@
-{"name":"beta/truncate","selectors":[".Truncate",".Truncate>.Truncate-text",".Truncate>.Truncate-text+.Truncate-text",".Truncate>.Truncate-text.Truncate-text--primary",".Truncate>.Truncate-text.Truncate-text--expandable:active",".Truncate>.Truncate-text.Truncate-text--expandable:focus",".Truncate>.Truncate-text.Truncate-text--expandable:hover"]}
+{
+  "name": "beta/truncate",
+  "selectors": [
+    ".Truncate",
+    ".Truncate>.Truncate-text",
+    ".Truncate>.Truncate-text+.Truncate-text",
+    ".Truncate>.Truncate-text.Truncate-text--primary",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:active",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
+  ]
+}

data/app/components/primer/component.rb

@@ -6,8 +6,16 @@ module Primer
   # @private
   # :nocov:
   class Component < ViewComponent::Base
-    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
-    include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
+    if Module.const_defined?("ViewComponent::SlotableV2") &&
+       !(ViewComponent::Base < ViewComponent::SlotableV2)
+      include ViewComponent::SlotableV2
+    end
+
+    if Module.const_defined?("ViewComponent::PolymorphicSlots") &&
+       !(ViewComponent::Base < ViewComponent::PolymorphicSlots)
+      include ViewComponent::PolymorphicSlots
+    end
+
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper