@primer/react-brand 0.70.0-rc.4599efb5 → 0.70.0-rc.9ef718be

package/esm/NavList/NavList.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.module.js","names":[],"sources":["../../src/NavList/NavList.module.css"],"sourcesContent":[".NavList {\n  box-sizing: border-box;\n  font-family: var(--brand-fontStack-sansSerif);\n  color: var(--brand-color-text-default);\n  padding-inline-start: var(--base-size-16);\n  width: 100%;\n}\n\n.NavList__list,\n.NavList__subNav,\n.NavList__groupList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.NavList__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.NavList__list--flat,\n.NavList__groupList {\n  --brand-NavList-alignedLabel-paddingInlineStart: var(--base-size-2);\n}\n\n.NavList__groupList {\n  --brand-NavList-item-paddingInlineStart-level-2: var(--base-size-2);\n}\n\n.NavList__item,\n.NavList__group {\n  position: relative;\n}\n\n.NavList__list:not(.NavList__list--flat) > :is(.NavList__item, .NavList__group) + :is(.NavList__item, .NavList__group) {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--brand-color-border-muted) 0 var(--base-size-2),\n    transparent var(--base-size-2) var(--base-size-4)\n  );\n  background-repeat: no-repeat;\n  background-size: 100% var(--brand-borderWidth-thin);\n  background-position: top left;\n}\n\n.NavList__groupTitle {\n  margin: 0;\n  padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__groupList {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  padding-block-end: var(--base-size-16);\n}\n\n.NavList__itemContent {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  min-width: 0;\n}\n\n.NavList__link {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  flex: 1 1 auto;\n  min-width: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  padding: 0;\n  color: var(--brand-color-text-muted);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  text-decoration: none !important; /* dotcom override */\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.NavList__accordionButton {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--brand-color-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  text-align: start;\n}\n\n.NavList__link:hover {\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__accordionButton:hover {\n  color: var(--brand-color-text-default);\n  background-color: transparent;\n}\n\n.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__accordionButton .NavList__labelArea {\n  order: 2;\n  min-height: var(--base-size-32);\n  padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item:not(.NavList__item--level-1)\n  > .NavList__itemContent\n  .NavList__accordionButton:not(:disabled):hover\n  .NavList__labelArea {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--has-current-descendant > .NavList__itemContent .NavList__accordionButton:not(:disabled) {\n  color: var(--brand-color-text-default);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']:not(:disabled)\n  .NavList__labelArea {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n:is(.NavList__link, .NavList__accordionButton):focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.NavList__subNav :is(.NavList__link, .NavList__accordionButton):focus-visible {\n  outline-offset: calc(-1 * var(--base-size-2));\n}\n\n.NavList__link[aria-current]:not([aria-current='false']) {\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-subtle);\n  padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false'])::before {\n  content: '';\n  position: absolute;\n  inset-block: var(--base-size-8);\n  inset-inline-start: 0;\n  width: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  background-color: var(--brand-NavList-activeIndicator-color);\n}\n\n.NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']:not(:disabled)::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 50%;\n  block-size: var(--base-size-16);\n  width: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  background-color: var(--brand-NavList-activeIndicator-color);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.NavList__item--level-1.NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']::before {\n  inset-inline-start: calc(-1 * var(--base-size-8));\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']::before {\n  inset-inline-start: var(--base-size-4);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false'] {\n  padding-inline-start: var(--base-size-12);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']\n  .NavList__labelArea {\n  padding-inline-start: var(--base-size-2);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link[aria-current]:not([aria-current='false']) {\n  padding-inline-start: 0;\n}\n\n.NavList__link--disabled {\n  color: var(--brand-color-text-disabled);\n  pointer-events: none;\n}\n\n.NavList__accordionButton:disabled {\n  color: var(--brand-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.NavList__label {\n  min-width: 0;\n  word-break: break-word;\n}\n\n.NavList__labelArea {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  gap: var(--base-size-8);\n  min-width: 0;\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__leadingVisual,\n.NavList__trailingVisual {\n  display: inline-flex;\n  flex: none;\n  color: inherit;\n}\n\n.NavList__trailingVisual {\n  margin-inline-start: auto;\n  margin-inline-end: var(--base-size-6);\n}\n\n.NavList__toggleIcon {\n  flex: none;\n  transform-origin: 50% 50%;\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.NavList__accordionButton[aria-expanded='true'] .NavList__toggleIcon {\n  transform: rotate(-180deg);\n}\n\n.NavList__subNav {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  margin: 0;\n  max-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0;\n  transform: translateY(calc(-1 * var(--base-size-8)));\n  visibility: hidden;\n  transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    visibility 0s linear var(--brand-animation-duration-fast);\n}\n\n.NavList__subNav--expanded {\n  max-height: var(--brand-NavList-subNav-height, none);\n  opacity: 1;\n  transform: translateY(0);\n  visibility: visible;\n  transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;\n}\n\n.NavList__subNav[aria-hidden='true'] .NavList__subNav {\n  visibility: hidden;\n}\n\n.NavList__item--level-1 > .NavList__itemContent {\n  padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n}\n\n.NavList__item--level-1.NavList__item--expanded {\n  padding-block-end: var(--base-size-16);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link {\n  order: 1;\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton {\n  color: var(--brand-color-text-default);\n  min-height: var(--base-size-32);\n  margin-block: calc(-1 * var(--base-size-8));\n  padding-inline-start: 0;\n  padding-inline-end: var(--base-size-6);\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton > * {\n  position: relative;\n  z-index: 1;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton:not(:disabled):is(:hover, :active)::after,\n.NavList__item--level-1.NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']:not(:disabled)::after {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n  pointer-events: none;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__toggleIcon {\n  order: 2;\n  margin-inline-start: auto;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4) > .NavList__itemContent {\n  padding-block: calc(var(--base-size-8) + var(--base-size-2));\n  padding-inline-end: var(--base-size-16);\n}\n\n.NavList__item--level-2 > .NavList__itemContent {\n  padding-inline-start: var(--brand-NavList-item-paddingInlineStart-level-2, var(--base-size-24));\n}\n\n.NavList__item--level-3 > .NavList__itemContent {\n  padding-inline-start: var(--base-size-40);\n}\n\n.NavList__item--level-4 > .NavList__itemContent {\n  padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent {\n  min-height: var(--base-size-32);\n  padding-block: 0;\n  padding-inline: var(--base-size-16);\n}\n\n.NavList__item--leaf.NavList__item--level-2 > .NavList__itemContent {\n  padding-inline-start: var(--brand-NavList-alignedLabel-paddingInlineStart, var(--base-size-24));\n}\n\n.NavList__item--leaf.NavList__item--level-3 > .NavList__itemContent {\n  padding-inline-start: var(--base-size-40);\n}\n\n.NavList__item--leaf.NavList__item--level-4 > .NavList__itemContent {\n  padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));\n}\n\n.NavList__item--leaf.NavList__item--level-5 > .NavList__itemContent {\n  padding-inline-start: calc(var(--base-size-64) + var(--base-size-8));\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n  > .NavList__itemContent\n  .NavList__toggleIcon {\n  order: 1;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n  > .NavList__itemContent\n  .NavList__accordionButton {\n  min-height: var(--base-size-32);\n  margin-block: calc(-1 * var(--base-size-8));\n  padding-inline-start: var(--base-size-8);\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n  > .NavList__itemContent\n  .NavList__toggleIcon {\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: calc(-1 * var(--base-size-8));\n  transform: translateY(-50%);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='true']\n  .NavList__toggleIcon {\n  transform: translateY(-50%) rotate(-180deg);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n  > .NavList__itemContent\n  .NavList__accordionButton[aria-expanded='false']\n  .NavList__toggleIcon {\n  inset-inline-start: calc(-1 * var(--base-size-16));\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4, .NavList__item--level-5)\n  > .NavList__itemContent\n  .NavList__link {\n  order: 2;\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.NavList__list--flat > .NavList__item--leaf > .NavList__itemContent .NavList__link {\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link {\n  min-height: var(--base-size-32);\n  padding-inline-start: var(--base-size-8);\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {\n  min-height: calc(var(--base-size-32) - var(--brand-borderWidth-thin));\n  margin-block-end: var(--brand-borderWidth-thin);\n  padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false']) {\n  background-color: transparent;\n  padding-inline-start: var(--base-size-8);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover .NavList__labelArea,\n.NavList__item--leaf:not(.NavList__item--level-1)\n  .NavList__link[aria-current]:not([aria-current='false'])\n  .NavList__labelArea {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover {\n  background-color: transparent;\n  padding-inline-start: var(--base-size-8);\n}\n\n[data-color-mode='dark'] .NavList {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .NavList,\n  .NavList::before,\n  .NavList::after,\n  .NavList * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/NavList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavList';
+//# sourceMappingURL=index.d.ts.map

package/esm/NavList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/NavList/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/esm/index.d.ts

@@ -41,6 +41,7 @@ export * from './Bento';
 export * from './EyebrowBanner';
 export * from './PricingOptions';
 export * from './SubNav';
+export * from './NavList';
 export * from './IDE';
 export * from './Breadcrumbs';
 export * from './Pagination';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}

package/esm/index.esm.js

@@ -65,14 +65,15 @@ import { EyebrowBanner as Xt, EyebrowBannerIconColors as Zt, EyebrowBannerLabelC
 import { Tooltip as en, TooltipContext as tn } from "./Tooltip/Tooltip.js";
 import { PricingOptions as nn } from "./PricingOptions/PricingOptions.js";
 import { SubNav as rn, SubNavSubMenuVariants as an, useSubNavContext as on } from "./SubNav/SubNav.js";
-import { IDE as sn, IDEDefaultIconMap as cn, IDEFileExtensions as ln } from "./IDE/IDE.js";
-import { BreadcrumbVariants as un, Breadcrumbs as dn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as fn, SectionBackgroundColors as pn, SectionPaddingVariants as mn } from "./Section/Section.js";
-import { Statistic as hn, StatisticSizes as gn, StatisticSpacingValues as _n } from "./Statistic/Statistic.js";
-import { BreakoutBanner as vn, BreakoutBannerBackgroundColors as yn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as bn, FootnotesItemTags as xn, FootnotesTags as Sn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as Cn, FrostedGlassVFXIntensity as wn, defaultFrostedGlassVFXIntensity as Tn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as En, SectionIntroStackedVariants as Dn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as On } from "./Tabs/Tabs.js";
-import { Tiles as kn } from "./Tiles/Tiles.js";
-export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, un as BreadcrumbVariants, dn as Breadcrumbs, vn as BreakoutBanner, yn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, bn as Footnotes, xn as FootnotesItemTags, Sn as FootnotesTags, rt as FormControl, Cn as FrostedGlassVFX, wn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, sn as IDE, cn as IDEDefaultIconMap, ln as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, bt as OrderedList, Fe as Pagination, Ct as Pillar, nn as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, fn as Section, pn as SectionBackgroundColors, Lt as SectionIntro, En as SectionIntroStacked, Dn as SectionIntroStackedVariants, mn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, hn as Statistic, gn as StatisticSizes, _n as StatisticSpacingValues, rn as SubNav, an as SubNavSubMenuVariants, Le as SubdomainNavBar, On as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, kn as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, en as Tooltip, tn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, Tn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, on as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };
+import { NavList as sn } from "./NavList/NavList.js";
+import { IDE as cn, IDEDefaultIconMap as ln, IDEFileExtensions as un } from "./IDE/IDE.js";
+import { BreadcrumbVariants as dn, Breadcrumbs as fn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as pn, SectionBackgroundColors as mn, SectionPaddingVariants as hn } from "./Section/Section.js";
+import { Statistic as gn, StatisticSizes as _n, StatisticSpacingValues as vn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as yn, BreakoutBannerBackgroundColors as bn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as xn, FootnotesItemTags as Sn, FootnotesTags as Cn } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as wn, FrostedGlassVFXIntensity as Tn, defaultFrostedGlassVFXIntensity as En } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as Dn, SectionIntroStackedVariants as On } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as kn } from "./Tabs/Tabs.js";
+import { Tiles as An } from "./Tiles/Tiles.js";
+export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, dn as BreadcrumbVariants, fn as Breadcrumbs, yn as BreakoutBanner, bn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, xn as Footnotes, Sn as FootnotesItemTags, Cn as FootnotesTags, rt as FormControl, wn as FrostedGlassVFX, Tn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, cn as IDE, ln as IDEDefaultIconMap, un as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, sn as NavList, bt as OrderedList, Fe as Pagination, Ct as Pillar, nn as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, pn as Section, mn as SectionBackgroundColors, Lt as SectionIntro, Dn as SectionIntroStacked, On as SectionIntroStackedVariants, hn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, gn as Statistic, _n as StatisticSizes, vn as StatisticSpacingValues, rn as SubNav, an as SubNavSubMenuVariants, Le as SubdomainNavBar, kn as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, An as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, en as Tooltip, tn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, En as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, on as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-CGyt2t8f.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-NavList-activeIndicator-color:var(--brand-color-text-emphasized)}[data-color-mode=dark]{--brand-NavList-activeIndicator-color:var(--brand-color-accent-primary)}

package/lib/Heading/Heading.d.ts

@@ -37,7 +37,14 @@ export declare const classMap: {
     h6: "6";
 };
 export type HeadingProps = {
+    /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */
     as?: (typeof HeadingTags)[number];
+    /**
+     * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.
+     *
+     * @example
+     * <Heading as="h2" size="4">This h2 will appear visually identical to an h4</Heading>
+     */
     size?: (typeof HeadingSizes)[number];
     weight?: HeadingWeightVariants | ResponsiveWeightMap;
     stretch?: HeadingStretchVariants | ResponsiveStretchMap;
@@ -45,5 +52,8 @@ export type HeadingProps = {
     font?: HeadingFontVariants;
     textWrap?: HeadingTextWrapVariants;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
+/**
+ * Use the heading component to render titles or subtitle text.
+ */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/NavList/NavList.d.ts

@@ -0,0 +1,85 @@
+import React, { type PropsWithChildren, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css';
+export type NavListRootProps = {
+    /**
+     * Accessible label for the navigation landmark.
+     */
+    'aria-label': string;
+    /**
+     * ID of an element that labels the navigation landmark.
+     */
+    'aria-labelledby'?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLElement> & Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>;
+type Visual = ReactElement | React.ElementType | Icon;
+type NavListItemAs = 'a' | 'button';
+type NavListItemBaseProps = {
+    /**
+     * Leading visual rendered before the item label.
+     */
+    leadingVisual?: Visual;
+    /**
+     * Trailing visual rendered after the item label.
+     */
+    trailingVisual?: Visual;
+    /**
+     * Whether nested items should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls the nested item expanded state.
+     */
+    expanded?: boolean;
+    /**
+     * Called when a nested item is expanded or collapsed.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Marks the item as disabled. Disabled link items receive `aria-disabled`.
+     */
+    disabled?: boolean;
+    'data-testid'?: string;
+};
+export type NavListItemProps<C extends NavListItemAs = 'a'> = {
+    as?: C;
+} & NavListItemBaseProps & PropsWithChildren<BaseProps<HTMLElement>> & Omit<React.ComponentPropsWithoutRef<C>, keyof NavListItemBaseProps | keyof BaseProps<HTMLElement> | 'as' | 'children'>;
+export type NavListSubNavProps = {
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>;
+export type NavListGroupProps = {
+    /**
+     * Heading text for the group.
+     */
+    title?: ReactNode;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLLIElement> & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'>;
+/**
+ * Use NavList to render vertical navigation links with groups and expandable nested lists.
+ * @see https://primer.style/brand/components/NavList
+ */
+export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListRootProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: <C extends NavListItemAs = "a">(props: NavListItemProps<C> & {
+        ref?: Ref<HTMLElement>;
+    }) => ReactElement | null;
+    SubNav: React.ForwardRefExoticComponent<Omit<NavListSubNavProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<NavListGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    testIds: {
+        root: string;
+        readonly list: string;
+        readonly item: string;
+        readonly link: string;
+        readonly leadingVisual: string;
+        readonly trailingVisual: string;
+        readonly subNav: string;
+        readonly group: string;
+        readonly groupTitle: string;
+        readonly groupList: string;
+        readonly toggle: string;
+    };
+};
+export {};

package/lib/NavList/index.d.ts

@@ -0,0 +1 @@
+export * from './NavList';