@mixtint/primer-view-components 0.89.2 → 0.91.1

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

@@ -2,17 +2,21 @@
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-specificity */
 /* stylelint-disable primer/spacing */
+
 /* FormControl */
+
 /* groups label, field, caption and inline error message */
 .FormControl {
   display: inline-flex;
   flex-direction: column;
   gap: var(--base-size-4);
 }
+
 /* fill container */
 .FormControl--fullWidth {
   display: flex;
 }
+
 /* <label> */
 .FormControl-label {
   font-size: var(--text-body-size-medium);
@@ -20,6 +24,7 @@
   line-height: var(--text-body-lineHeight-medium);
   color: var(--fgColor-default);
 }
+
 /* optional caption */
 .FormControl-caption {
   margin-bottom: 0;
@@ -28,10 +33,12 @@
   line-height: var(--text-caption-lineHeight);
   color: var(--fgColor-muted);
 }
+
 .FormControl-caption a {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
+
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
@@ -47,25 +54,33 @@
 .FormControl-inlineValidation p {
     margin-bottom: 0;
   }
+
 .FormControl-inlineValidation--success {
   color: var(--fgColor-success);
   fill: var(--fgColor-success);
 }
+
 .FormControl-inlineValidation--visual {
   align-items: center;
   display: flex;
   min-height: var(--base-size-16);
 }
+
 .FormControl-spacingWrapper {
   display: flex;
   flex-direction: column;
   row-gap: var(--stack-gap-normal);
 }
+
 .FormControl-horizontalGroup {
   display: flex;
   column-gap: 0.5rem;
 }
+
 /* shared among all form control components (input, select, textarea, checkbox, radio) */
+/* stylelint-disable nesting-selector-no-missing-scoping-root */
+/* stylelint-enable nesting-selector-no-missing-scoping-root */
+
 /* TextInput structure
 ** ===================
 **
@@ -80,6 +95,7 @@
 ** │  │  ├─ .FormControl-input-trailingAction
 ** ├─ .FormControl-inlineValidation
 ** ├─ .FormControl-caption */
+
 /* // Select structure
 ** ===================
 **
@@ -89,6 +105,7 @@
 ** │  │  ├─ .FormControl-select
 ** ├─ .FormControl-inlineValidation
 ** ├─ .FormControl-caption */
+
 /* // Textarea structure
 ** ===================
 **
@@ -97,6 +114,7 @@
 ** ├─ .FormControl-textarea
 ** ├─ .FormControl-inlineValidation
 ** ├─ .FormControl-caption */
+
 .FormControl-input,
 .FormControl-select,
 .FormControl-textarea {
@@ -105,6 +123,7 @@
   border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
   box-shadow: var(--shadow-inset);
 }
+
 [disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     color: var(--control-fgColor-disabled);
     cursor: not-allowed;
@@ -114,12 +133,15 @@
     opacity: 1;
     -webkit-text-fill-color: var(--control-fgColor-disabled);
   }
+
 [invalid='true']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
     border-color: var(--control-borderColor-danger);
   }
+
 [invalid='false']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
     border-color: var(--control-borderColor-success);
   }
+
 :is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus {
     border-color: var(--focus-outlineColor);
     outline: none;
@@ -127,6 +149,7 @@
 
     /* remove fallback :focus if :focus-visible is supported */
   }
+
 :is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
       border-color: transparent;
 
@@ -136,12 +159,15 @@
 
       box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
     }
+
 /* default focus state */
+
 :is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus-visible {
     border-color: var(--focus-outlineColor);
     outline: none;
     box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
   }
+
 .FormControl-input,
 .FormControl-select,
 .FormControl-textarea {
@@ -155,57 +181,77 @@
   padding-inline: var(--control-medium-paddingInline-condensed);
   padding-block: calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin));
 }
+
 [disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
       color: var(--control-fgColor-disabled);
     }
+
 [readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     background-color: var(--control-bgColor-disabled);
   }
+
 :is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
     color: var(--control-fgColor-placeholder);
     opacity: 1;
   }
+
 /* sizes */
+
 .FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     height: var(--control-small-size);
     padding-inline: var(--control-small-paddingInline-normal);
     padding-block: var(--control-small-paddingBlock);
     font-size: var(--text-body-size-small);
   }
+
 .FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     height: var(--control-medium-size);
   }
+
 .FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     height: var(--control-large-size);
     padding-inline: var(--control-large-paddingInline-normal);
     padding-block: var(--control-large-paddingBlock);
   }
+
 /* variants */
+
 .FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     background-color: var(--bgColor-muted);
   }
+
 .FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus {
       background-color: var(--bgColor-default);
     }
+
 .FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     font-family: var(--fontStack-monospace);
   }
+
 /* validation states */
+
 .FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     border-color: var(--control-borderColor-danger);
   }
+
 .FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     border-color: var(--control-borderColor-success);
   }
+
 .FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
     border-color: var(--control-borderColor-warning);
   }
+
 .FormControl-toggleSwitchInput {
   display: flex;
   align-items: flex-start;
   gap: var(--base-size-16);
 }
+
 /* widths */
+/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
+/* stylelint-enable nesting-selector-no-missing-scoping-root */
+
 /* positioning for leading/trailing items for TextInput */
 .FormControl-input-wrap {
   position: relative;
@@ -506,32 +552,42 @@
         top: unset;
         height: var(--base-size-20);
       }
+
 .FormControl-select-wrap {
   display: grid;
   grid-template-columns: minmax(0, auto) var(--base-size-16);
 }
+
 .FormControl-select-wrap.FormControl-input-width--auto {
     width: auto;
   }
+
 .FormControl-select-wrap.FormControl-input-width--xsmall {
     max-width: min(144px, 100vw - 2rem);
   }
+
 .FormControl-select-wrap.FormControl-input-width--small {
     max-width: min(256px, 100vw - 2rem);
   }
+
 .FormControl-select-wrap.FormControl-input-width--medium {
     max-width: min(320px, 100vw - 2rem);
   }
+
 .FormControl-select-wrap.FormControl-input-width--large {
     max-width: min(480px, 100vw - 2rem);
   }
+
 .FormControl-select-wrap.FormControl-input-width--xlarge {
     max-width: min(680px, 100vw - 2rem);
   }
+
 .FormControl-select-wrap.FormControl-input-width--xxlarge {
     max-width: min(960px, 100vw - 2rem);
   }
+
 /* mask allows for background-color to respect themes */
+
 .FormControl-select-wrap::after {
     width: var(--base-size-16);
     height: var(--base-size-16);
@@ -546,20 +602,26 @@
     grid-row: 1;
     place-self: center end;
   }
+
 /* spans entire grid below mask */
+
 .FormControl-select-wrap .FormControl-select {
     grid-column: 1/-1;
     grid-row: 1;
     appearance: none;
     padding-right: var(--base-size-20);
   }
+
 .FormControl-select-wrap[data-multiple]::after {
       content: none;
     }
+
 .FormControl-select-wrap[data-multiple] .FormControl-select {
       padding-right: var(--base-size-8);
     }
+
 /* checkbox + radio specific styles */
+
 /* // Checkbox + Radio structure
 ** ===================
 **
@@ -568,30 +630,40 @@
 ** ├─ .FormControl-radio-labelWrap
 ** │  ├─ .FormControl-label
 ** │  ├─ .FormControl-caption */
+
 .FormControl-checkbox-wrap,
 .FormControl-radio-wrap {
   display: inline-grid;
   grid-template-columns: min-content auto;
   gap: var(--base-size-8);
 }
-:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base-size-4);
-  }
+
 :is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label {
     cursor: pointer;
   }
+
+/* Expanded per-class so the subject buckets by a single class during style
+** recalc, instead of compiling to a merged `:is(...)` subject that Blink
+** cannot fast-reject. */
+.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
+.FormControl-radio-wrap .FormControl-radio-labelWrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+
 .FormControl-radio-group-wrap fieldset {
     padding: 0;
     margin: 0;
     border: 0;
   }
+
 .FormControl-check-group-wrap fieldset {
     padding: 0;
     margin: 0;
     border: 0;
   }
+
 /* these selectors are temporary to override base.scss
 ** once Field styles are widely adopted, we can adjust this and the global base styles */
 .FormControl-checkbox {
@@ -722,12 +794,14 @@
       mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
       visibility: visible;
     }
+
 .FormControl-radio {
   color: var(--fgColor-default);
   background-color: var(--bgColor-default);
   border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
   box-shadow: var(--shadow-inset);
 }
+
 .FormControl-radio[disabled] {
     color: var(--control-fgColor-disabled);
     cursor: not-allowed;
@@ -737,12 +811,15 @@
     opacity: 1;
     -webkit-text-fill-color: var(--control-fgColor-disabled);
   }
+
 .FormControl-radio[invalid='true']:not(:focus) {
     border-color: var(--control-borderColor-danger);
   }
+
 .FormControl-radio[invalid='false']:not(:focus) {
     border-color: var(--control-borderColor-success);
   }
+
 .FormControl-radio:not([type='checkbox'],[type='radio']):focus {
     border-color: var(--focus-outlineColor);
     outline: none;
@@ -750,6 +827,7 @@
 
     /* remove fallback :focus if :focus-visible is supported */
   }
+
 .FormControl-radio:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
       border-color: transparent;
 
@@ -759,12 +837,15 @@
 
       box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
     }
+
 /* default focus state */
+
 .FormControl-radio:not([type='checkbox'],[type='radio']):focus-visible {
     border-color: var(--focus-outlineColor);
     outline: none;
     box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
   }
+
 .FormControl-radio {
 
   position: relative;
@@ -778,6 +859,7 @@
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
   appearance: none;
 }
+
 :is(.FormControl-radio::after) {
   position: absolute;
   top: 50%;
@@ -788,36 +870,45 @@
   content: "";
   transform: translateX(-50%) translateY(-50%);
 }
+
 :is(.FormControl-radio[disabled] ~ .FormControl-radio-labelWrap) .FormControl-label {
         color: var(--control-fgColor-disabled);
         cursor: not-allowed;
       }
+
 .FormControl-radio:checked {
     border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
     /* stylelint-disable-next-line primer/borders */
     border-width: var(--base-size-4);
   }
+
 .FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled {
       cursor: not-allowed;
       /* stylelint-disable-next-line primer/colors */
       border-color: var(--control-fgColor-disabled);
     }
+
 :is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled) ~ .FormControl-radio-labelWrap) .FormControl-label {
           color: var(--control-fgColor-disabled);
           cursor: not-allowed;
         }
+
 .FormControl-radio:focus-visible {
     outline: 2px solid var(--focus-outlineColor);
     outline-offset: 2px;
     box-shadow: none;
   }
+
 /* Windows High Contrast mode */
+
 @media (forced-colors: active) {
+
 .FormControl-radio {
     background-color: canvastext;
     border-color: canvastext;
 }
   }
+
 @keyframes checkmarkIn {
   from {
     clip-path: inset(var(--base-size-16) 0 0 0);
@@ -827,6 +918,7 @@
     clip-path: inset(0 0 0 0);
   }
 }
+
 @keyframes checkmarkOut {
   from {
     clip-path: inset(0 0 0 0);

package/app/components/primer/alpha/text_field.css.json

@@ -95,9 +95,9 @@
     ".FormControl-select-wrap[data-multiple] .FormControl-select",
     ".FormControl-checkbox-wrap",
     ".FormControl-radio-wrap",
-    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap",
-    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap",
     ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
+    ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-radio-wrap .FormControl-radio-labelWrap",
     ".FormControl-radio-group-wrap fieldset",
     ".FormControl-check-group-wrap fieldset",
     ".FormControl-checkbox",

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

@@ -2,12 +2,14 @@
 
 /* Catalyst in dotcom applies a display: block to all web component elements. This
 ** rule overrides it so the status label and toggle switch are laid out correctly. */
-
 .ToggleSwitch.ToggleSwitch {
   display: inline-flex;
 }
 
 .ToggleSwitch {
+  --toggleSwitch-knob-inset: var(--borderWidth-thin);
+  --toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset));
+
   align-items: center;
   display: inline-flex;
   gap: var(--controlStack-medium-gap-condensed);
@@ -102,7 +104,7 @@
 .ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
     background-color: var(--controlKnob-bgColor-checked);
     border-color: var(--controlKnob-borderColor-checked);
-    transform: translateX(100%);
+    transform: translateX(calc(100% - var(--toggleSwitch-knob-offset)));
   }
 
 .ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon {
@@ -122,7 +124,6 @@
 
 .ToggleSwitch-track[disabled] .ToggleSwitch-knob {
     border-color: var(--borderColor-default);
-    box-shadow: none;
   }
 
 .ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
@@ -163,14 +164,14 @@
 
 .ToggleSwitch-knob {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: var(--toggleSwitch-knob-inset);
+  inset-inline-start: var(--toggleSwitch-knob-inset);
   z-index: 1;
   width: 50%;
   background-color: var(--controlKnob-bgColor-rest);
   border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
-  border-radius: var(--borderRadius-medium);
-  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
   transition-property: transform;

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

@@ -369,6 +369,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin: -1px;
     overflow: hidden;
+    /* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;

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

@@ -12,7 +12,6 @@
 }
 
 .UnderlineNav .Counter {
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-medium-gap);
     color: var(--fgColor-default);
     background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
@@ -33,7 +32,6 @@
 .UnderlineNav-item {
   position: relative;
   display: flex;
-  /* stylelint-disable-next-line primer/spacing */
   padding: 0 var(--control-medium-paddingInline-condensed);
   font-size: var(--text-body-size-medium);
   /* stylelint-disable-next-line primer/typography */
@@ -138,7 +136,6 @@
 
 .UnderlineNav-octicon {
   display: inline !important;
-  /* stylelint-disable-next-line primer/spacing */
   margin-right: var(--control-medium-gap);
   color: var(--fgColor-muted);
   fill: var(--fgColor-muted);

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

@@ -20,7 +20,6 @@
 }
 
 /* User for example on /stars and /user for grids of avatars */
-
 .avatar-group-item {
   display: inline-block;
   margin-bottom: var(--base-size-4);

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

@@ -2,29 +2,37 @@
 /* The selector-max-specificity rule is disabled here because the nested selectors
  in AvatarStack require high specificity to properly override default styles and 
  achieve the intended visual stacking. */
+
 /* AvatarStack */
+
 /* Stacked avatars can be used to show who is participating in thread when
 ** there is limited space available. */
+
 .AvatarStack {
   position: relative;
   min-width: 26px;
   height: 20px;
 }
+
 .AvatarStack .AvatarStack-body {
     position: absolute;
   }
+
 .AvatarStack.AvatarStack--two {
     min-width: 36px;
   }
+
 .AvatarStack.AvatarStack--three-plus {
     min-width: 46px;
   }
+
 .AvatarStack-body {
   display: flex;
   background: var(--bgColor-default);
   /* stylelint-disable-next-line primer/borders */
   border-radius: 100px;
 }
+
 .AvatarStack-body .avatar {
     position: relative;
     z-index: 2;
@@ -38,49 +46,65 @@
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
   }
+
 :is(.AvatarStack-body .avatar):first-child {
       z-index: 3;
     }
+
 :is(.AvatarStack-body .avatar):last-child {
       z-index: 1;
     }
+
 /* stylelint-disable-next-line selector-max-type */
+
 :is(.AvatarStack-body .avatar) img {
       border-radius: var(--borderRadius-small);
     }
+
 /* Account for 4+ avatars */
+
 :is(.AvatarStack-body .avatar):nth-child(n + 4) {
       display: none;
       opacity: 0;
     }
+
 /* stylelint-disable-next-line selector-max-type */
+
 .AvatarStack-body span:nth-child(n + 4) .avatar {
     display: none;
     opacity: 0;
   }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar {
       margin-right: var(--base-size-4);
     }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n + 4) {
       display: flex;
       opacity: 1;
     }
+
 /* stylelint-disable-next-line selector-max-type */
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n + 4) .avatar {
       display: flex;
       opacity: 1;
     }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more {
       display: none !important;
     }
+
 .AvatarStack-body[data-disable-expand] {
     position: relative;
   }
+
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
   background: var(--bgColor-muted);
 }
+
 .avatar.avatar-more::before,.avatar.avatar-more::after {
     position: absolute;
     display: block;
@@ -90,33 +114,42 @@
     border-radius: 2px;
     outline: var(--borderWidth-thin) solid var(--bgColor-default);
   }
+
 .avatar.avatar-more::before {
     width: 17px;
     background: var(--avatarStack-fade-bgColor-muted);
   }
+
 .avatar.avatar-more::after {
     width: 14px;
     background: var(--avatarStack-fade-bgColor-default);
   }
+
 /* Right aligned variation */
+
 .AvatarStack--right .AvatarStack-body {
     right: 0;
     flex-direction: row-reverse;
   }
+
 :is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar {
       margin-right: 0;
       margin-left: var(--base-size-4);
     }
+
 .AvatarStack--right .avatar.avatar-more {
     background: var(--avatarStack-fade-bgColor-default);
   }
+
 :is(.AvatarStack--right .avatar.avatar-more)::before {
       width: 5px;
     }
+
 :is(.AvatarStack--right .avatar.avatar-more)::after {
       width: 2px;
       background: var(--bgColor-muted);
     }
+
 .AvatarStack--right .avatar {
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */