Update nav and navbar HTML markup

According to the docs, you just need to apply the `navbar-nav` to an
`<ul>` tag in a list-based navbar. In fact, `navbar-nav` seems to
override all the css properties set by `nav`.

Also, `nav-item` class should be used only for `<li>` tags, or in
conjunction with `<a>` tags to entirely avoid the list-based approach.

This commit removes the redundant `nav` class from `navbar-nav` `<ul>`
tags, moves `nav-item` from `<a>` tags to `<li>` tags and properly
adds `nav-item` class to `<li>` tags where missing.

Refs:

* https://v4-alpha.getbootstrap.com/components/navs/
* https://v4-alpha.getbootstrap.com/components/navbar/#nav

Rename `$navbar-*-toggler-bg` to `$navbar-*-toggler-icon-bg` since it's placed on .navbar-toggler-icon (#22564)

Update migration docs for .has-error rename

Drop CSS icons for SVGs (#22708)

* add the svg icon as a partial so we can include it easily

* add the icon to the homepage

* drop .bd-booticon for svgs here

* rip out the import for .bd-booticon sass file

* Delete _booticon.scss

* indentation

* Update bootstrap-icon.html

* remove those

build

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

build

Revert simplified grid column styles from #22376

The premise for #22376 was that if we removed the `max-width` and `flex` properties, we could use the column classes as `width` utilities. The problem that I didn't remember at the time is that column classes have horizontal `padding` on them. This doesn't work for setting `width`. Perhaps more importantly, this causes #22649—the automatic sizing of columns is broken with the absence of `flex` styles.

/cc @sachinsinghi

update equal-width numbering in docs (#22697)

Add box-shadow to .progress-bar (#22579)

* Add box-shadow to .progress-bar

Puts an unused variable back in use for when folks set `$enable-shadows` to `true`.

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

build

add webpack to documentation (#22423)

* add webpack to documentation"

implementing PR comments

implementing PR comments

* replace tether with popper

Fix 22643 - Readme links to vanished file (#22647)

* Fixed dead link to browser list

The link to the list of browsers supported through Autoprefixer was dead, now updated to a working link.

* Updated label to display new file path

Changed the labeling on the updated link to show read as the new updated file path.

Fix fallbackPlacement default value for Popovers documentation

Update Popper.js to 1.9.9

Update documentation for Tooltips/Popovers about auto placement

Placement auto for popovers

Placement auto for tooltips

Documentation display tooltips/popovers arrows with css for static examples

Use Popper.js to manage arrow position

Fix (css): force .navbar .dropdown-menu positioning

Better management of dropdown/dropup with alignment

Use popper to align dropdown menu instead of using css with important

fix tooltip documentation page missing classname prefix "bs-" to popover top

Update Popper.js 1.9.4

Force dropdown to be displayed in position static for navbar, to override Popper css

build

Change "Max CDN" to "MaxCDN"

Update Popper.js 1.9.3

Change fallbackPlacement to flip by default for Tooltips/Popovers

Fix tooltip margin to be stick at their caller

Fix bad position for Tooltips with animation at true

Use _jQueryInterface for Dropdown to call toggle method

Add fallbackPlacement option for Tooltip and Popover

Fix dropdown in scrollspy visual test (add Popper.js)

Update Popper.js 1.9.1 + Update documentation about Dropdown placement

Fix dropdown-menu-right and dropdown-menu-left for Dropdown

Documentation - fix examples for Tooltip and Popovers (display arrow)

Allow to disable flip behaviour on Dropdown + documentation

Update shrinkwrap.

Update Popper.js 1.8.2

Add an update method to allow to update position for Tooltip/Popover/Dropdown manually

Fix some css for the arrow of Popover/Tooltip + update documentation

Better placement for Dropdown + Handle flip of Tooltip/Popover

Remove totaly Tether from documentation + dependencies

Remove Tether from package.json + Update Popper

Handle dropup for Dropdown

Fix unit tests + Update Popper to 1.6.0

Remove constraints option and check every options

Begin to use Popper for Dropdown

Fix arrow for tooltip and popover

Add attachment classes

Begin to add arrow to Popover and Tooltip

Use Popper for tooltip and popover

tooltips/popover must be hidden before their corresponding element is removed from the DOM

Removed several unused scss variables (#22539)

Add explicit role="main" to <main> elements (#22574)

For compatibility in IE10/IE11 which don't otherwise "know" this element's role/don't expose it to AT

Add missing <main> element to documentation

includes explicit `role="main"` for IE10/IE11 compatibility

Add shim for "new" HTML5 structural elements (#22573)

For IE10 (and any older browsers) support , so at least the layout doesn't fall apart if author is using them.

Styling and accessibility clarification for navs documentation

* Split out/expand mention that base navs lack active styles
* Add accessibility notes for navigation bars vs dynamic tabbed interfaces

Remove log from WEBrick during js-test-cloud

Link to package.json Fixed

The link to package.json in the v4 docs was linking to package.json in the v3 source.  Fixed to point to the correct v4 location.  A change like this will need to be made for all branches on version 4 if you want the docs to be linked correctly (github may be smart enough to follow the link to the current branch if you are on github but it was wrong from the main site).

Add watch-css and watch-js + a global watch command

don't prefix docs css, it generates .map files and mucks it all up

watch task docs + css

Fix typo removeData for Tabs plugin

Should remove `data` not `class` on dispose

Documentation cleanup (inc. use of <input ... readonly> for static form controls example)

* Fix incorrect code indentation
* Remove unnecessary vendor prefix for `box-sizing` - all modern browsers now support this unprefixed
* Remove incorrect `<label>` and change static controls to readonly inputs
* Allow `<img>` elements without `src` to allow for `holder.js` images used in the docs, which lack `src` and use `data-src` instead

Run js-test locally before js-test-cloud

Fix build by installing grunt dependencies before js-test-cloud

Fix Toggle buttons don't honor [disabled] or .disabled

Detach accordion from card without requiring 'data-children'

build

Arguably more professional pictures of Rick Ross

More minor build tweaks and docs updates.

Fix for copy/paste error in iOS hack to tooltips

(with apologies, this slipped through due to build system problems on my
end)

Tweak iOS hack for dropdown

Tweak to https://github.com/twbs/bootstrap/pull/22426, where the wrong selector slipped through the net (selecting all of `<body>`s grand-children rather than children)

Add iOS hack to tooltips

Same hack as in https://github.com/twbs/bootstrap/pull/22426 (modulo the selector, which is wrong in that PR and will be updated in a separate PR) to get tooltips to work correctly on iOS. Dynamically adds/removes empty (`noop`) `touchstart` event handlers to all children of `<body>` in order to coax iOS into proper event delegation/bubbling

Build system overhaul.

Add Johann-S to Core team :fireworks:

Update NuGet shield link to latest version and bower shield link to
a bower search

Port button group accessibility callout from v3 to v4

Fix running test on iOS with Saucelabs

Add dropdown menu accessibility callout and fix <a> example

As the question often comes up about why Bootstrap does not do "true"
ARIA menus (with their `role="menu"` etc), add an admittedly lengthy
note (tl;dr because BS is generic, and ARIA menus are specific and quite
limiting).

Additionally, fixes up the `<a>` example for dropdown trigger, with the
missing `role="button"` and neutering the `href` (which would be useless
anyway since BS overrides the link-like nature of the `<a>` so it could
never be triggered/followed anyway)

Fix carousel "hover" behavior on touch-enabled devices

* Add carousel mouse listeners even if touch events enabled

- touch events are enabled not just on "mobile", just also on
touch-enabled desktop/laptop devices; additionally, it's possible to
pair a mouse with traditionally touch-only devices (e.g. Android
phones/tablets); currently, in these situations the carousel WON'T pause
even when using a mouse

* Restart cycle after touchend

as `mouseenter` is fired as part of the touch compatibility events, the
previous change results in carousels which cycle until the user
tapped/interacted with them. after that they stop cycling (as
`mouseleave` is not sent to the carousel after user scrolled/tapped
away).
this fix resets the cycling after `touchend` - essentially returning
to the previous behavior, where on touch the carousel essentially never
pauses, but now with the previous fix it at least pauses correctly for
mouse users on touch-enabled devices.
includes documentation for this new behavior.

Rewrite getting started/accessibility docs

A long overdue rewrite of the accessibility section - instead of the few
snippets of strangely superficial and out-of-context advice (skip links,
use correct heading levels), this tries to answer some of the
fundamental questions about "is Bootstrap accessible", with emphasis on
the fact that the final result will depend in large part on what BS is
applied to/on (since BS relies on the markup etc authored by
developers). This also sets out our ambition to have things work for
keyboard and assistive tech users, and that we strive to make all our
examples etc accessible and semantic.

* Changes based on @mdo's feedback

Rename variable $input-border-focus to $input-border-color-focus (#22413)

* Rename variable $input-border-focus to $input-border-color-focus
* Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively
* Rename variables $state-*-border to $state-*-border-color, respectively
* Rename variables $alert-*-border to $alert-*-border-color
* Rename $list-group-active-border to $list-group-active-border-color
* Rename $table-inverse-border to $table-inverse-border-color
* Rename $btn-*-border to $btn-*-border-color
* Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color

Prevent long words in `.card-title`s from breaking auto layout

Make "Copy" buttons actual buttons

This makes them keyboard-accessible. For mouse users, the only change
here is that the focus outline will remain on the button once clicked
(in future, this can be solved with :focus-ring, but for now this would
require a polyfill). the tooltip is explicitly hidden on `mouseleave`,
so even though the `<button>` retains focus after clicking, the tooltip
won't stay visible once mouse user moves away.
the mouse hover styles have explicitly not been make to also apply to
:focus, so as to minimise the visual impact for
mouse users (though the tooltip remains visible)
 - but due to the default outline and the custom tooltip, it
should be fairly clear when keyboard users set focus to a copy button
too.

grunt

Replace dropdown backdrop hack with cleaner JS-only hack

* Replace backdrop with simple noop mouse listener

As discussed in https://github.com/twbs/bootstrap/pull/22422 the current
approach of injecting a backdrop (to work around iOS' broken event
delegation for the `click` event) has annoying consequences on
touch-enabled laptop/desktop devices.
Instead of a backdrop `<div>`, here we simply add extra empty/noop
mouse listeners to the immediate children of `<body>` (and remove
them when the dropdown is closed) in order to force iOS to properly
bubble a `click` resulting from a tap (essentially, method 2 from
https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
This is sufficient (except in rare cases where the user does manage to tap
on the body itself, rather than any child elements of body - which is not
very likely in an iOS phone/tablet scenario for most layouts) to get iOS to
get a grip and do the correct event bubbling/delegation, meaning the regular
"click" event will bubble back to the `<body>` when tapping outside of the dropdown,
and the dropdown will close properly (just like it already does, even without
this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and
Windows on a touch laptop).
This approach, though a bit hacky, has no impact on the DOM structure, and
has no unforeseen side effects on touch-enabled laptops/desktops. And crucially,
it works just fine in iOS.

* Remove dropdown backdrop styles

* Update doc for dropdowns and touch-enabled devices

remove dropdown.js reliance on roles and fix keyboard navigation

Merge branch 'v4-dev' into dropdown-keyboard

Fix popover arrow color for bottom position

Merge branch 'v4-dev' into dropdown-keyboard

Reword "mobile" to "touch-enabled"

...as touch is not exclusive to "mobile" anymore nowadays. also explicitly clarifies this is a fix for iOS, and that it impacts touch laptops etc as well. lastly, renames the variable from "dropdown" to "backdrop" for clarity/consistency

Reword "mobile" to "touch-enabled"

...as touch is not exclusive to "mobile" anymore nowadays. also explicitly clarifies this is a fix for iOS, and that it impacts touch laptops etc as well. lastly, renames the variable from "dropdown" to "backdrop" for clarity/consistency

Merge branch 'v4-dev' into dropdown-keyboard

Indent

Remove inappropriate role="listbox" from carousels

Closes #22061

Xref #22365