Rewrite alert component page with CSS-only patterns and new variants

[anvme]

Description

Rewrite the alert component to use CSS-only patterns, removing all JavaScript dependency

Motivation & Context

Bootstrap v6 is moving toward reducing JavaScript where native HTML/CSS solutions exist

Type of changes

Remove alert.js plugin, its unit tests, and all Alert JS references from entry points (index.esm.js, index.umd.js), guide pages (Vite, Webpack, Parcel), and getting-started docs
Remove live alert JS snippet from snippets.js
CSS-only dismiss via hidden inside a — :has(.alert-dismiss:checked) hides the alert. Supports instant and animated (.fade.show) dismiss
Proxy focus ring from hidden checkbox to visible close button via :has(input:focus-visible)
New reusable accent-border mixin (scss/mixins/_accent-border.scss)
New variants: accent borders (.alert-accent-start/top/bottom), callout, compact, expandable details, split layout, progress bars (countdown/countup/indeterminate/stepped), live toggle
Update cheatsheet examples (LTR + RTL) to CSS-only dismiss pattern
Expand documentation and visual test page with demos for all new variants

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-42105--twbs-bootstrap.netlify.app/docs/6.0/components/alert/

Related issues

CSS-only dismiss replaces alert.js — faster, no JS dependency
Adds new variants

[MaxLardenois]

This is a good idea, but shouldn't we use the Popover API for this instead ? it would be more future-proof IMO and a simpler DOM... https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

[mdo]

This is a good idea, but shouldn't we use the Popover API for this instead ? it would be more future-proof IMO and a simpler DOM... https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

No, alerts are rarely something that command that much attention. Plus, if I recall, the popover API places content in the top layer, just like native dialog, which is difficult to deal with.

[louismaximepiton]

Do you think we could land it @patrickhlauke ?

I'm not expert but it feels hacky to me to use a checkbox here instead of a button. I understand the idea but these are my 2cents about the close button.

Few remarks about accessibility:

• The role button if we use it should be placed on the focusable element here the checkbox
• We loose the keyboard focus on the Live toggle section (this section feels weird to me)
• I feel like we would still need Javascript to emulate some button standard like pressing Enter on the checkbox
• The vocalization at the moment reference a checkbox and it doesn't match the expectation to close an alert
• The dismiss works well on ATs

Aside, there are many good ideas in this PR, great work !
Don't do it now, but maybe we could split this PR in many little ones to ease the review process ?

[MaxLardenois]

No, alerts are rarely something that command that much attention. Plus, if I recall, the popover API places content in the top layer, just like native dialog, which is difficult to deal with.

Yes you are right popover promotes the element to the top layer so it's not a good use case.

Do you think we could land it @patrickhlauke ?

I'm not expert but it feels hacky to me to use a checkbox here instead of a button. I understand the idea but these are my 2cents about the close button.

Few remarks about accessibility:

• The role button if we use it should be placed on the focusable element here the checkbox
• We loose the keyboard focus on the Live toggle section (this section feels weird to me)
• I feel like we would still need Javascript to emulate some button standard like pressing Enter on the checkbox
• The vocalization at the moment reference a checkbox and it doesn't match the expectation to close an alert
• The dismiss works well on ATs

Actually if we put the role on the input as it should be, the vocalisation references a button so that's good

For the Live toggle I think it's just an oversight, it looks like the checkbox is missing in the code.
Also I think we need a name on the checkbox to be standard compliant.

Still there is the issue of the missing Enter key handling...

[patrickhlauke]

Do you think we could land it @patrickhlauke ?

this is extremely hacky to me. I'd be strongly against this approach. not sure why folks think that CSS-only is inherently better/more desirable than a bit of targeted JS. (also, currently there's no focus indication on those "show alert" "buttons" https://deploy-preview-42105--twbs-bootstrap.netlify.app/docs/6.0/components/alert/#live-toggle and they can't be triggered with Enter as normal buttons would, only Space ... just all feels unnecessarily weird and non-standard. nothing wrong with an actual button and some JS)

[anvme]

hey, it was just a new experience for me, so, feel free to decline it if need