@primer/view-components 0.45.2 → 0.46.0-rc.4214e155

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

@@ -2,89 +2,89 @@
   "name": "alpha/stack",
   "selectors": [
     ".Stack",
-    ".Stack[data-padding='none']",
-    ".Stack[data-padding-narrow='none']",
-    ".Stack[data-padding='condensed']",
-    ".Stack[data-padding-narrow='condensed']",
-    ".Stack[data-padding='normal']",
-    ".Stack[data-padding-narrow='normal']",
-    ".Stack[data-padding='spacious']",
-    ".Stack[data-padding-narrow='spacious']",
-    ".Stack[data-direction='horizontal']",
-    ".Stack[data-direction-narrow='horizontal']",
-    ".Stack[data-direction='vertical']",
-    ".Stack[data-direction-narrow='vertical']",
-    ".Stack[data-gap='none']",
-    ".Stack[data-gap-narrow='none']",
-    ".Stack[data-gap='condensed']",
-    ".Stack[data-gap-narrow='condensed']",
-    ".Stack[data-gap='normal']",
-    ".Stack[data-gap-narrow='normal']",
-    ".Stack[data-gap='spacious']",
-    ".Stack[data-gap-narrow='spacious']",
-    ".Stack[data-align='start']",
-    ".Stack[data-align-narrow='start']",
-    ".Stack[data-align='center']",
-    ".Stack[data-align-narrow='center']",
-    ".Stack[data-align='end']",
-    ".Stack[data-align-narrow='end']",
-    ".Stack[data-align='baseline']",
-    ".Stack[data-align-narrow='baseline']",
-    ".Stack[data-justify='start']",
-    ".Stack[data-justify-narrow='start']",
-    ".Stack[data-justify='center']",
-    ".Stack[data-justify-narrow='center']",
-    ".Stack[data-justify='end']",
-    ".Stack[data-justify-narrow='end']",
-    ".Stack[data-justify='space-between']",
-    ".Stack[data-justify-narrow='space-between']",
-    ".Stack[data-justify='space-evenly']",
-    ".Stack[data-justify-narrow='space-evenly']",
-    ".Stack[data-wrap='wrap']",
-    ".Stack[data-wrap-narrow='wrap']",
-    ".Stack[data-wrap='nowrap']",
-    ".Stack[data-wrap-narrow='nowrap']",
-    ".Stack[data-padding-regular='none']",
-    ".Stack[data-padding-regular='condensed']",
-    ".Stack[data-padding-regular='normal']",
-    ".Stack[data-padding-regular='spacious']",
-    ".Stack[data-direction-regular='horizontal']",
-    ".Stack[data-direction-regular='vertical']",
-    ".Stack[data-gap-regular='none']",
-    ".Stack[data-gap-regular='condensed']",
-    ".Stack[data-gap-regular='normal']",
-    ".Stack[data-gap-regular='spacious']",
-    ".Stack[data-align-regular='start']",
-    ".Stack[data-align-regular='center']",
-    ".Stack[data-align-regular='end']",
-    ".Stack[data-align-regular='baseline']",
-    ".Stack[data-justify-regular='start']",
-    ".Stack[data-justify-regular='center']",
-    ".Stack[data-justify-regular='end']",
-    ".Stack[data-justify-regular='space-between']",
-    ".Stack[data-justify-regular='space-evenly']",
-    ".Stack[data-wrap-regular='wrap']",
-    ".Stack[data-wrap-regular='nowrap']",
-    ".Stack[data-padding-wide='none']",
-    ".Stack[data-padding-wide='condensed']",
-    ".Stack[data-padding-wide='normal']",
-    ".Stack[data-padding-wide='spacious']",
-    ".Stack[data-direction-wide='horizontal']",
-    ".Stack[data-direction-wide='vertical']",
-    ".Stack[data-gap-wide='none']",
-    ".Stack[data-gap-wide='condensed']",
-    ".Stack[data-gap-wide='normal']",
-    ".Stack[data-gap-wide='spacious']",
-    ".Stack[data-align-wide='start']",
-    ".Stack[data-align-wide='center']",
-    ".Stack[data-align-wide='end']",
-    ".Stack[data-align-wide='baseline']",
-    ".Stack[data-justify-wide='start']",
-    ".Stack[data-justify-wide='center']",
-    ".Stack[data-justify-wide='end']",
-    ".Stack[data-justify-wide='space-between']",
-    ".Stack[data-justify-wide='space-evenly']",
-    ".Stack[data-wrap-wide='wrap']",
-    ".Stack[data-wrap-wide='nowrap']"
+    ".Stack[data-padding-narrow=none]",
+    ".Stack[data-padding=none]",
+    ".Stack[data-padding-narrow=condensed]",
+    ".Stack[data-padding=condensed]",
+    ".Stack[data-padding-narrow=normal]",
+    ".Stack[data-padding=normal]",
+    ".Stack[data-padding-narrow=spacious]",
+    ".Stack[data-padding=spacious]",
+    ".Stack[data-direction-narrow=horizontal]",
+    ".Stack[data-direction=horizontal]",
+    ".Stack[data-direction-narrow=vertical]",
+    ".Stack[data-direction=vertical]",
+    ".Stack[data-gap-narrow=none]",
+    ".Stack[data-gap=none]",
+    ".Stack[data-gap-narrow=condensed]",
+    ".Stack[data-gap=condensed]",
+    ".Stack[data-gap-narrow=normal]",
+    ".Stack[data-gap=normal]",
+    ".Stack[data-gap-narrow=spacious]",
+    ".Stack[data-gap=spacious]",
+    ".Stack[data-align-narrow=start]",
+    ".Stack[data-align=start]",
+    ".Stack[data-align-narrow=center]",
+    ".Stack[data-align=center]",
+    ".Stack[data-align-narrow=end]",
+    ".Stack[data-align=end]",
+    ".Stack[data-align-narrow=baseline]",
+    ".Stack[data-align=baseline]",
+    ".Stack[data-justify-narrow=start]",
+    ".Stack[data-justify=start]",
+    ".Stack[data-justify-narrow=center]",
+    ".Stack[data-justify=center]",
+    ".Stack[data-justify-narrow=end]",
+    ".Stack[data-justify=end]",
+    ".Stack[data-justify-narrow=space-between]",
+    ".Stack[data-justify=space-between]",
+    ".Stack[data-justify-narrow=space-evenly]",
+    ".Stack[data-justify=space-evenly]",
+    ".Stack[data-wrap-narrow=wrap]",
+    ".Stack[data-wrap=wrap]",
+    ".Stack[data-wrap-narrow=nowrap]",
+    ".Stack[data-wrap=nowrap]",
+    ".Stack[data-padding-regular=none]",
+    ".Stack[data-padding-regular=condensed]",
+    ".Stack[data-padding-regular=normal]",
+    ".Stack[data-padding-regular=spacious]",
+    ".Stack[data-direction-regular=horizontal]",
+    ".Stack[data-direction-regular=vertical]",
+    ".Stack[data-gap-regular=none]",
+    ".Stack[data-gap-regular=condensed]",
+    ".Stack[data-gap-regular=normal]",
+    ".Stack[data-gap-regular=spacious]",
+    ".Stack[data-align-regular=start]",
+    ".Stack[data-align-regular=center]",
+    ".Stack[data-align-regular=end]",
+    ".Stack[data-align-regular=baseline]",
+    ".Stack[data-justify-regular=start]",
+    ".Stack[data-justify-regular=center]",
+    ".Stack[data-justify-regular=end]",
+    ".Stack[data-justify-regular=space-between]",
+    ".Stack[data-justify-regular=space-evenly]",
+    ".Stack[data-wrap-regular=wrap]",
+    ".Stack[data-wrap-regular=nowrap]",
+    ".Stack[data-padding-wide=none]",
+    ".Stack[data-padding-wide=condensed]",
+    ".Stack[data-padding-wide=normal]",
+    ".Stack[data-padding-wide=spacious]",
+    ".Stack[data-direction-wide=horizontal]",
+    ".Stack[data-direction-wide=vertical]",
+    ".Stack[data-gap-wide=none]",
+    ".Stack[data-gap-wide=condensed]",
+    ".Stack[data-gap-wide=normal]",
+    ".Stack[data-gap-wide=spacious]",
+    ".Stack[data-align-wide=start]",
+    ".Stack[data-align-wide=center]",
+    ".Stack[data-align-wide=end]",
+    ".Stack[data-align-wide=baseline]",
+    ".Stack[data-justify-wide=start]",
+    ".Stack[data-justify-wide=center]",
+    ".Stack[data-justify-wide=end]",
+    ".Stack[data-justify-wide=space-between]",
+    ".Stack[data-justify-wide=space-evenly]",
+    ".Stack[data-wrap-wide=wrap]",
+    ".Stack[data-wrap-wide=nowrap]"
   ]
 }

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

@@ -1,27 +1 @@
-.StackItem {
-  flex: 0 1 auto;
-  min-inline-size: 0;
-}
-.StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] {
-    flex-grow: 1;
-  }
-/* @custom-media --veiwportRange-regular */
-@media (min-width: 48rem) {
-    .StackItem[data-grow-regular='true'] {
-      flex-grow: 1;
-    }
-
-    .StackItem[data-grow-regular='false'] {
-      flex-grow: 0;
-    }
-  }
-/* @custom-media --viewportRange-wide */
-@media (min-width: 87.5rem) {
-    .StackItem[data-grow-wide='true'] {
-      flex-grow: 1;
-    }
-
-    .StackItem[data-grow-wide='false'] {
-      flex-grow: 0;
-    }
-  }
+.StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}

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

@@ -2,11 +2,11 @@
   "name": "alpha/stack_item",
   "selectors": [
     ".StackItem",
-    ".StackItem[data-grow='true']",
-    ".StackItem[data-grow-narrow='true']",
-    ".StackItem[data-grow-regular='true']",
-    ".StackItem[data-grow-regular='false']",
-    ".StackItem[data-grow-wide='true']",
-    ".StackItem[data-grow-wide='false']"
+    ".StackItem[data-grow-narrow=true]",
+    ".StackItem[data-grow=true]",
+    ".StackItem[data-grow-regular=true]",
+    ".StackItem[data-grow-regular=false]",
+    ".StackItem[data-grow-wide=true]",
+    ".StackItem[data-grow-wide=false]"
   ]
 }

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

@@ -1,112 +1 @@
-/* tabnav */
-
-/* Outer wrapper */
-
-.tabnav {
-  margin-top: 0;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: var(--stack-gap-normal);
-  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
-}
-
-.tabnav-tabs {
-  display: flex;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: calc(var(--borderWidth-thin) * -1);
-  overflow: hidden;
-}
-
-.tabnav-tab {
-  display: inline-block;
-  flex-shrink: 0;
-  /* stylelint-disable-next-line primer/spacing */
-  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
-  font-size: var(--text-body-size-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 23px;
-  color: var(--fgColor-muted);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: transparent;
-  border: var(--borderWidth-thin) solid transparent;
-  border-bottom: 0;
-  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-}
-
-.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false']) {
-    color: var(--fgColor-default);
-    background-color: var(--bgColor-default); /* cover bottom border */
-    border-color: var(--borderColor-default);
-    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
-  }
-
-:is(.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false'])) .octicon {
-      color: inherit;
-    }
-
-.tabnav-tab:hover {
-    color: var(--fgColor-default);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    transition-duration: 0.1s;
-  }
-
-.tabnav-tab:focus,.tabnav-tab:focus-visible {
-    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;
-    outline-offset: -6px;
-  }
-
-.tabnav-tab:active {
-    color: var(--fgColor-muted);
-  }
-
-.tabnav-tab .octicon {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-right: var(--control-small-gap);
-    color: var(--fgColor-muted);
-  }
-
-.tabnav-tab .Counter {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-left: var(--control-small-gap);
-    color: inherit;
-  }
-
-/* Tabnav extras
-**
-** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
-** inline text or links. */
-
-.tabnav-extra {
-  display: inline-block;
-  /* stylelint-disable-next-line primer/spacing */
-  padding-top: 10px;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: 10px;
-  font-size: var(--text-body-size-small);
-  color: var(--fgColor-muted);
-}
-
-.tabnav-extra > .octicon {
-    margin-right: var(--base-size-2);
-  }
-
-/* When tabnav-extra are anchors */
-
-/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
-
-a.tabnav-extra:hover {
-  color: var(--fgColor-accent);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-/* Tabnav buttons
-**
-** For when there are multiple buttons, space them out appropriately. Requires
-** the buttons to be floated or inline-block. */
-
-.tabnav-btn {
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: var(--controlStack-medium-gap-condensed);
-}
+.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}

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

@@ -5,17 +5,17 @@
     ".tabnav-tabs",
     ".tabnav-tab",
     ".tabnav-tab.selected",
-    ".tabnav-tab[aria-selected='true']",
-    ".tabnav-tab[aria-current]:not([aria-current='false'])",
-    ":is(.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false'])) .octicon",
+    ".tabnav-tab[aria-current]:not([aria-current=false])",
+    ".tabnav-tab[aria-selected=true]",
+    ":is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon",
     ".tabnav-tab:hover",
     ".tabnav-tab:focus",
     ".tabnav-tab:focus-visible",
-    ".tabnav-tab:active",
     ".tabnav-tab .octicon",
+    ".tabnav-tab:active",
     ".tabnav-tab .Counter",
     ".tabnav-extra",
-    ".tabnav-extra > .octicon",
+    ".tabnav-extra>.octicon",
     "a.tabnav-extra:hover",
     ".tabnav-btn"
   ]