@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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

@@ -2,89 +2,89 @@
   "name": "alpha/stack",
   "selectors": [
     ".Stack",
-    ".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]"
+    ".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']"
   ]
 }

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

@@ -1 +1,27 @@
-.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}}
+.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;
+    }
+  }

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

@@ -2,11 +2,11 @@
   "name": "alpha/stack_item",
   "selectors": [
     ".StackItem",
-    ".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]"
+    ".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']"
   ]
 }

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

@@ -1 +1,112 @@
-.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)}
+/* 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);
+}

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

@@ -5,17 +5,17 @@
     ".tabnav-tabs",
     ".tabnav-tab",
     ".tabnav-tab.selected",
-    ".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[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:hover",
     ".tabnav-tab:focus",
     ".tabnav-tab:focus-visible",
-    ".tabnav-tab .octicon",
     ".tabnav-tab:active",
+    ".tabnav-tab .octicon",
     ".tabnav-tab .Counter",
     ".tabnav-extra",
-    ".tabnav-extra>.octicon",
+    ".tabnav-extra > .octicon",
     "a.tabnav-extra:hover",
     ".tabnav-btn"
   ]