Fix overly broad JavaScript selectors affecting non-UI Kit tabs

Problem/Motivation

The JavaScript in bootstrap-ui-kit.js uses overly broad CSS selectors that affect unintended elements across the entire page, not just within Bootstrap UI Kit components. This causes conflicts when other tabs exist on the same page (e.g.: if you need to setup an independent tabs group within the Bootstrap UI Kit tabs structure).

Specifically, the code uses document.querySelector('[data-bs-toggle="tab"]') and document.querySelectorAll('[data-bs-toggle="tab"]') which selects ALL tab elements on the page, including those from other modules, themes, or components. This can cause:

1. Unintended tab activation/deactivation
2. Conflicts with other tab implementations
3. Hash navigation affects the wrong tabs
4. CSS class manipulation on non-UI Kit tabs

Steps to reproduce

1. Create a page with Bootstrap UI Kit tabs component
2. Add another independent Bootstrap tab component on the same page (from another module or custom code)
3. Observe that the UI Kit JavaScript affects both tab sets
4. Try hash navigation - it may activate tabs in the wrong component
5. Check the browser console for potential conflicts

Proposed resolution

Scope all CSS selectors in bootstrap-ui-kit.js to only target elements within Bootstrap UI Kit components by:

1. Use a more specific selector that will capture only the Bootstrap UI Kit tabs throughout the code.
2. Replacing `document.querySelector()` with container-scoped queries where appropriate
3. Ensuring the `waitForTabs()` function only checks for UI Kit tabs, not all tabs on the page

Remaining tasks

- [ ] Update the tabs template markup to apply specific, scoped class names
- [ ] Update JavaScript selectors to use scoped queries

User interface changes

None. This is a JavaScript scoping fix that should not change any visible behavior for properly implemented UI Kit tabs.

API changes

None. The existing CSS class structure and JavaScript API remain unchanged.

Data model changes

None.