[ { "path": ".babelrc.js", "content": "module.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n loose: true,\n bugfixes: true,\n modules: false\n }\n ]\n ]\n};\n" }, { "path": ".browserslistrc", "content": "# https://github.com/browserslist/browserslist#readme\n\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 60\nFirefox >= 60\nFirefox ESR\niOS >= 12\nSafari >= 12\nnot Explorer <= 11\nnot kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)\n" }, { "path": ".bundlewatch.config.json", "content": "{\n \"files\": [\n {\n \"path\": \"./dist/css/bootstrap-grid.css\",\n \"maxSize\": \"6.5 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap-grid.min.css\",\n \"maxSize\": \"6.0 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap-reboot.css\",\n \"maxSize\": \"3.5 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap-reboot.min.css\",\n \"maxSize\": \"3.25 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap-utilities.css\",\n \"maxSize\": \"11.75 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap-utilities.min.css\",\n \"maxSize\": \"10.75 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap.css\",\n \"maxSize\": \"32.5 kB\"\n },\n {\n \"path\": \"./dist/css/bootstrap.min.css\",\n \"maxSize\": \"30.25 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.bundle.js\",\n \"maxSize\": \"43.0 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.bundle.min.js\",\n \"maxSize\": \"23.5 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.esm.js\",\n \"maxSize\": \"28.0 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.esm.min.js\",\n \"maxSize\": \"18.25 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.js\",\n \"maxSize\": \"28.75 kB\"\n },\n {\n \"path\": \"./dist/js/bootstrap.min.js\",\n \"maxSize\": \"16.25 kB\"\n }\n ],\n \"ci\": {\n \"trackBranches\": [\n \"main\",\n \"v4-dev\"\n ]\n }\n}\n" }, { "path": ".cspell.json", "content": "{\n \"version\": \"0.2\",\n \"words\": [\n \"affordance\",\n \"allowfullscreen\",\n \"Analyser\",\n \"autohide\",\n \"autohiding\",\n \"autoplay\",\n \"autoplays\",\n \"autoplaying\",\n \"blazingly\",\n \"Blockquotes\",\n \"Bootstrappers\",\n \"borderless\",\n \"Brotli\",\n \"browserslist\",\n \"browserslistrc\",\n \"btncheck\",\n \"btnradio\",\n \"callout\",\n \"callouts\",\n \"camelCase\",\n \"clearfix\",\n \"Codesniffer\",\n \"combinator\",\n \"Contentful\",\n \"Cpath\",\n \"Crossfade\",\n \"crossfading\",\n \"cssgrid\",\n \"Csvg\",\n \"Datalists\",\n \"Deque\",\n \"discoverability\",\n \"docsearch\",\n \"docsref\",\n \"dropend\",\n \"dropleft\",\n \"dropright\",\n \"dropstart\",\n \"dropup\",\n \"dgst\",\n \"errorf\",\n \"favicon\",\n \"favicons\",\n \"fieldsets\",\n \"flexbox\",\n \"fullscreen\",\n \"getbootstrap\",\n \"Grayscale\",\n \"Hoverable\",\n \"hreflang\",\n \"hstack\",\n \"importmap\",\n \"jsdelivr\",\n \"Jumpstart\",\n \"keyframes\",\n \"libera\",\n \"libman\",\n \"Libsass\",\n \"lightboxes\",\n \"Lowercased\",\n \"markdownify\",\n \"mediaqueries\",\n \"minifiers\",\n \"misfunction\",\n \"mkdir\",\n \"monospace\",\n \"mouseleave\",\n \"navbars\",\n \"navs\",\n \"Neue\",\n \"noindex\",\n \"Noto\",\n \"offcanvas\",\n \"offcanvases\",\n \"Packagist\",\n \"popperjs\",\n \"prebuild\",\n \"prefersreducedmotion\",\n \"prepended\",\n \"printf\",\n \"rects\",\n \"relref\",\n \"rgba\",\n \"roboto\",\n \"RTLCSS\",\n \"ruleset\",\n \"sassrc\",\n \"screenreaders\",\n \"scrollbars\",\n \"scrollspy\",\n \"Segoe\",\n \"semibold\",\n \"socio\",\n \"srcset\",\n \"stackblitz\",\n \"stickied\",\n \"Stylelint\",\n \"subnav\",\n \"tabbable\",\n \"textareas\",\n \"toggleable\",\n \"topbar\",\n \"touchend\",\n \"twbs\",\n \"unitless\",\n \"unstylable\",\n \"unstyled\",\n \"Uppercased\",\n \"urlize\",\n \"urlquery\",\n \"vbtn\",\n \"viewports\",\n \"Vite\",\n \"vstack\",\n \"walkthroughs\",\n \"WCAG\",\n \"zindex\"\n ],\n \"language\": \"en-US\",\n \"ignorePaths\": [\n \".cspell.json\",\n \"dist/\",\n \"*.min.*\",\n \"**/*rtl*\",\n \"**/tests/**\"\n ],\n \"useGitignore\": true\n}\n" }, { "path": ".editorconfig", "content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "**/*.min.js\n**/dist/\n**/vendor/\n/_site/\n/site/public/\n/js/coverage/\n/site/static/sw.js\n/site/static/docs/**/assets/sw.js\n/site/layouts/partials/\n" }, { "path": ".eslintrc.json", "content": "{\n \"root\": true,\n \"extends\": [\n \"plugin:import/errors\",\n \"plugin:import/warnings\",\n \"plugin:unicorn/recommended\",\n \"xo\",\n \"xo/browser\"\n ],\n \"rules\": {\n \"arrow-body-style\": \"off\",\n \"capitalized-comments\": \"off\",\n \"comma-dangle\": [\n \"error\",\n \"never\"\n ],\n \"import/extensions\": [\n \"error\",\n \"ignorePackages\",\n {\n \"js\": \"always\"\n }\n ],\n \"import/first\": \"error\",\n \"import/newline-after-import\": \"error\",\n \"import/no-absolute-path\": \"error\",\n \"import/no-amd\": \"error\",\n \"import/no-cycle\": [\n \"error\",\n {\n \"ignoreExternal\": true\n }\n ],\n \"import/no-duplicates\": \"error\",\n \"import/no-extraneous-dependencies\": \"error\",\n \"import/no-mutable-exports\": \"error\",\n \"import/no-named-as-default\": \"error\",\n \"import/no-named-as-default-member\": \"error\",\n \"import/no-named-default\": \"error\",\n \"import/no-self-import\": \"error\",\n \"import/no-unassigned-import\": [\n \"error\"\n ],\n \"import/no-useless-path-segments\": \"error\",\n \"import/order\": \"error\",\n \"indent\": [\n \"error\",\n 2,\n {\n \"MemberExpression\": \"off\",\n \"SwitchCase\": 1\n }\n ],\n \"logical-assignment-operators\": \"off\",\n \"max-params\": [\n \"warn\",\n 5\n ],\n \"multiline-ternary\": [\n \"error\",\n \"always-multiline\"\n ],\n \"new-cap\": [\n \"error\",\n {\n \"properties\": false\n }\n ],\n \"no-console\": \"error\",\n \"no-negated-condition\": \"off\",\n \"object-curly-spacing\": [\n \"error\",\n \"always\"\n ],\n \"operator-linebreak\": [\n \"error\",\n \"after\"\n ],\n \"prefer-object-has-own\": \"off\",\n \"prefer-template\": \"error\",\n \"semi\": [\n \"error\",\n \"never\"\n ],\n \"strict\": \"error\",\n \"unicorn/explicit-length-check\": \"off\",\n \"unicorn/filename-case\": \"off\",\n \"unicorn/no-anonymous-default-export\": \"off\",\n \"unicorn/no-array-callback-reference\": \"off\",\n \"unicorn/no-array-method-this-argument\": \"off\",\n \"unicorn/no-null\": \"off\",\n \"unicorn/no-typeof-undefined\": \"off\",\n \"unicorn/no-unused-properties\": \"error\",\n \"unicorn/numeric-separators-style\": \"off\",\n \"unicorn/prefer-array-flat\": \"off\",\n \"unicorn/prefer-at\": \"off\",\n \"unicorn/prefer-dom-node-dataset\": \"off\",\n \"unicorn/prefer-global-this\": \"off\",\n \"unicorn/prefer-module\": \"off\",\n \"unicorn/prefer-query-selector\": \"off\",\n \"unicorn/prefer-spread\": \"off\",\n \"unicorn/prefer-string-raw\": \"off\",\n \"unicorn/prefer-string-replace-all\": \"off\",\n \"unicorn/prefer-structured-clone\": \"off\",\n \"unicorn/prevent-abbreviations\": \"off\"\n },\n \"overrides\": [\n {\n \"files\": [\n \"build/**\"\n ],\n \"env\": {\n \"browser\": false,\n \"node\": true\n },\n \"parserOptions\": {\n \"sourceType\": \"module\"\n },\n \"rules\": {\n \"no-console\": \"off\",\n \"unicorn/prefer-top-level-await\": \"off\"\n }\n },\n {\n \"files\": [\n \"js/**\"\n ],\n \"parserOptions\": {\n \"sourceType\": \"module\"\n }\n },\n {\n \"files\": [\n \"js/tests/*.js\",\n \"js/tests/integration/rollup*.js\"\n ],\n \"env\": {\n \"node\": true\n },\n \"parserOptions\": {\n \"sourceType\": \"script\"\n }\n },\n {\n \"files\": [\n \"js/tests/unit/**\"\n ],\n \"env\": {\n \"jasmine\": true\n },\n \"rules\": {\n \"no-console\": \"off\",\n \"unicorn/consistent-function-scoping\": \"off\",\n \"unicorn/no-useless-undefined\": \"off\",\n \"unicorn/prefer-add-event-listener\": \"off\"\n }\n },\n {\n \"files\": [\n \"js/tests/visual/**\"\n ],\n \"plugins\": [\n \"html\"\n ],\n \"settings\": {\n \"html/html-extensions\": [\n \".html\"\n ]\n },\n \"rules\": {\n \"no-console\": \"off\",\n \"no-new\": \"off\",\n \"unicorn/no-array-for-each\": \"off\"\n }\n },\n {\n \"files\": [\n \"scss/tests/**\"\n ],\n \"env\": {\n \"node\": true\n },\n \"parserOptions\": {\n \"sourceType\": \"script\"\n }\n },\n {\n \"files\": [\n \"site/**\"\n ],\n \"env\": {\n \"browser\": true,\n \"node\": false\n },\n \"parserOptions\": {\n \"sourceType\": \"script\",\n \"ecmaVersion\": 2019\n },\n \"rules\": {\n \"no-new\": \"off\",\n \"unicorn/no-array-for-each\": \"off\"\n }\n },\n {\n \"files\": [\n \"site/src/assets/application.js\",\n \"site/src/assets/partials/*.js\",\n \"site/src/assets/search.js\",\n \"site/src/assets/snippets.js\",\n \"site/src/assets/stackblitz.js\",\n \"site/src/plugins/*.js\"\n ],\n \"parserOptions\": {\n \"sourceType\": \"module\",\n \"ecmaVersion\": 2020\n }\n },\n {\n \"files\": [\n \"**/*.md\"\n ],\n \"plugins\": [\n \"markdown\"\n ],\n \"processor\": \"markdown/markdown\"\n },\n {\n \"files\": [\n \"**/*.md/*.js\",\n \"**/*.md/*.mjs\"\n ],\n \"extends\": \"plugin:markdown/recommended-legacy\",\n \"parserOptions\": {\n \"sourceType\": \"module\"\n },\n \"rules\": {\n \"unicorn/prefer-node-protocol\": \"off\"\n }\n }\n ]\n}\n" }, { "path": ".gitattributes", "content": "# Enforce Unix newlines\n* text=auto eol=lf\n\n# Don't diff or textually merge source maps\n*.map binary\n\nbootstrap.css linguist-vendored=false\nbootstrap.js linguist-vendored=false\n" }, { "path": ".github/CODEOWNERS", "content": "*.js @twbs/js-review\n*.css @twbs/css-review\n*.scss @twbs/css-review\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing to Bootstrap\n\nLooking to contribute something to Bootstrap? **Here’s how you can help.**\n\nPlease take a moment to review this document in order to make the contribution\nprocess easy and effective for everyone involved.\n\nFollowing these guidelines helps to communicate that you respect the time of\nthe developers managing and developing this open source project. In return,\nthey should reciprocate that respect in addressing your issue or assessing\npatches and features.\n\n\n## Using the issue tracker\n\nThe [issue tracker](https://github.com/twbs/bootstrap/issues) is\nthe preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)\nand [submitting pull requests](#pull-requests), but please respect the following\nrestrictions:\n\n- Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help.\n\n- Please **do not** derail or troll issues. Keep the discussion on topic and\n respect the opinions of others.\n\n- Please **do not** post comments consisting solely of \"+1\" or \":thumbsup:\".\n Use [GitHub's \"reactions\" feature](https://github.blog/news-insights/product-news/add-reactions-to-pull-requests-issues-and-comments/)\n instead. We reserve the right to delete comments which violate this rule.\n\n\n## Issues assignment\n\nThe core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won’t be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don’t want to waste your time.\n\nPlease keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don’t get a response immediately, it doesn’t mean that we are ignoring you or that we don’t care about your issue or PR. We will get back to you as soon as we can.\n\n\n## Issues and labels\n\nOur bug tracker utilizes several labels to help organize and identify issues. Here’s what they represent and how we use them:\n\n- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.\n- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.\n- `css` - Issues stemming from our compiled CSS or source Sass files.\n- `docs` - Issues for improving or updating our documentation.\n- `examples` - Issues involving the example templates included in our docs.\n- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).\n- `build` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.\n- `help wanted` - Issues we need or would love help from the community to resolve.\n- `js` - Issues stemming from our compiled or source JavaScript files.\n- `meta` - Issues with the project itself or our GitHub repository.\n\nFor a complete look at our labels, see the [project labels page](https://github.com/twbs/bootstrap/labels).\n\n\n## Bug reports\n\nA bug is a _demonstrable problem_ that is caused by the code in the repository.\nGood bug reports are extremely helpful, so thanks!\n\nGuidelines for bug reports:\n\n0. **[Validate your HTML](https://html5.validator.nu/)** to ensure your\n problem isn’t caused by a simple error in your own code.\n\n1. **Use the GitHub issue search** — check if the issue has already been\n reported.\n\n2. **Check if the issue has been fixed** — try to reproduce it using the\n latest `main` (or `v4-dev` branch if the issue is about v4) in the repository.\n\n3. **Isolate the problem** — ideally create a [reduced test\n case](https://css-tricks.com/reduced-test-cases/) and a live example.\n These [v4 CodePen](https://codepen.io/team/bootstrap/pen/yLabNQL) and [v5 CodePen](https://codepen.io/team/bootstrap/pen/qBamdLj) are helpful templates.\n\n\nA good bug report shouldn’t leave others needing to chase you up for more\ninformation. Please try to be as detailed as possible in your report. What is\nyour environment? What steps will reproduce the issue? What browser(s) and OS\nexperience the problem? Do other browsers show the bug differently? What\nwould you expect to be the outcome? All these details will help people to fix\nany potential bugs.\n\nExample:\n\n> Short and descriptive example bug report title\n>\n> A summary of the issue and the browser/OS environment in which it occurs. If\n> suitable, include the steps required to reproduce the bug.\n>\n> 1. This is the first step\n> 2. This is the second step\n> 3. Further steps, etc.\n>\n> `` - a link to the reduced test case\n>\n> Any other information you want to share that is relevant to the issue being\n> reported. This might include the lines of code that you have identified as\n> causing the bug, and potential solutions (and your opinions on their\n> merits).\n\n### Reporting upstream browser bugs\n\nSometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.\n\n| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |\n| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- |\n| Mozilla | Firefox | Gecko | | \"Core\" is normally the right product option to choose. |\n| Apple | Safari | WebKit | | In Apple’s bug reporter, choose \"Safari\" as the product. |\n| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | | Click the \"New issue\" button. |\n| Microsoft | Edge | Blink | | Go to \"Help > Send Feedback\" from the browser |\n\n\n## Feature requests\n\nFeature requests are welcome. But take a moment to find out whether your idea\nfits with the scope and aims of the project. It’s up to _you_ to make a strong\ncase to convince the project’s developers of the merits of this feature. Please\nprovide as much detail and context as possible.\n\n\n## Pull requests\n\nGood pull requests—patches, improvements, new features—are a fantastic\nhelp. They should remain focused in scope and avoid containing unrelated\ncommits.\n\n**Please ask first** before embarking on any **significant** pull request (e.g.\nimplementing features, refactoring code, porting to a different language),\notherwise you risk spending a lot of time working on something that the\nproject’s developers might not want to merge into the project. For trivial\nthings, or things that don’t require a lot of your time, you can go ahead and\nmake a PR.\n\nPlease adhere to the [coding guidelines](#code-guidelines) used throughout the\nproject (indentation, accurate comments, etc.) and any other requirements\n(such as test coverage).\n\n**Do not edit `bootstrap.css` or `bootstrap.js`, and do not commit\nany dist files (`dist/` or `js/dist`).** Those files are automatically generated by our build tools. You should\nedit the source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/main/scss)\nand/or [`/bootstrap/js/src/`](https://github.com/twbs/bootstrap/tree/main/js/src) instead.\n\nSimilarly, when contributing to Bootstrap’s documentation, you should edit the\ndocumentation source files in\n[the `/bootstrap/site/content/docs/` directory of the `main` branch](https://github.com/twbs/bootstrap/tree/main/site/content/docs).\n**Do not edit the `gh-pages` branch.** That branch is generated from the\ndocumentation source files and is managed separately by the Bootstrap Core Team.\n\nAdhering to the following process is the best way to get your work\nincluded in the project:\n\n1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork,\n and configure the remotes:\n\n ```bash\n # Clone your fork of the repo into the current directory\n git clone https://github.com//bootstrap.git\n # Navigate to the newly cloned directory\n cd bootstrap\n # Assign the original repo to a remote called \"upstream\"\n git remote add upstream https://github.com/twbs/bootstrap.git\n ```\n\n2. If you cloned a while ago, get the latest changes from upstream:\n\n ```bash\n git checkout main\n git pull upstream main\n ```\n\n3. Install or update project dependencies with npm:\n\n ```bash\n npm install\n ```\n\n4. Create a new topic branch (off the main project development branch) to\n contain your feature, change, or fix:\n\n ```bash\n git checkout -b \n ```\n\n5. Commit your changes in logical chunks. Please adhere to these [git commit\n message guidelines](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)\n or your code is unlikely be merged into the main project. Use Git’s\n [interactive rebase](https://help.github.com/articles/about-git-rebase/)\n feature to tidy up your commits before making them public.\n\n6. Ensure your changes compile the dist CSS and JS files in the `dist/` directory. Verify\n the build succeeds locally without errors.\n\n ```bash\n npm run dist\n ```\n\n7. Locally merge (or rebase) the upstream development branch into your topic branch:\n\n ```bash\n git pull [--rebase] upstream main\n ```\n\n8. Commit your changes, but **do not push compiled CSS and JS files in `dist` and `js/dist`**.\n Push your topic branch up to your fork:\n\n ```bash\n git push origin \n ```\n\n9. [Open a pull request](https://help.github.com/articles/about-pull-requests/)\n with a clear title and description against the `main` branch.\n\n**IMPORTANT**: By submitting a patch, you agree to allow the project owners to\nlicense your work under the terms of the [MIT License](../LICENSE) (if it\nincludes code changes) and under the terms of the\n[Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/)\n(if it includes documentation changes).\n\n\n## Code guidelines\n\n### HTML\n\n[Adhere to the Code Guide.](https://codeguide.co/#html)\n\n- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).\n- Use CDNs and HTTPS for third-party JS when possible. We don’t use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.\n- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.\n\n### CSS\n\n[Adhere to the Code Guide.](https://codeguide.co/#css)\n\n- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable).\n- Except in rare cases, don’t remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.\n\n### JS\n\n- No semicolons (in client-side JS)\n- 2 spaces (no tabs)\n- strict mode\n- \"Attractive\"\n\n### Checking coding style\n\nRun `npm run test` before committing to ensure your changes follow our coding standards.\n\n\n## License\n\nBy contributing your code, you agree to license your contribution under the [MIT License](../LICENSE).\nBy contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/).\n\nPrior to v3.1.0, Bootstrap’s code was released under the Apache License v2.0.\n" }, { "path": ".github/INCIDENT_RESPONSE.md", "content": "# Incident response plan\n\nThis document describes how the Bootstrap maintainers respond to and manage security or operational incidents affecting the project, its website, or its distributed releases. This plan is public to promote transparency and community trust. Operational details (e.g., private contacts, credentials, or internal coordination tools) are maintained separately in the maintainers’ private documentation.\n\n---\n\n## 1. Purpose & Scope\n\nThis plan defines how Bootstrap maintainers will:\n\n- Identify, triage, and manage security or integrity incidents affecting project code, releases, or infrastructure.\n- Communicate with the community and downstream consumers during and after an incident.\n- Record lessons learned and update processes to reduce future risk.\n\nIt applies to:\n\n- The Bootstrap source code, documentation, and build pipelines.\n- Release artifacts (npm, CDN, GitHub releases).\n- The main website ([https://getbootstrap.com](https://getbootstrap.com)).\n- Any official Bootstrap GitHub organization infrastructure.\n\nIt does **not** cover unrelated third-party forks or integrations.\n\n---\n\n## 2. Definitions\n\n- **Incident**: Any event that could compromise the confidentiality, integrity, or availability of Bootstrap code, releases, or users. Examples include:\n - A discovered security vulnerability.\n - A compromised GitHub account or CI/CD token.\n - A malicious dependency or injected code in a release.\n - Website defacement or unauthorized modification of documentation.\n - Leaked secrets related to the project infrastructure.\n\n- **Incident Commander (IC)**: The maintainer responsible for coordinating the overall response.\n\n---\n\n## 3. Roles & Responsibilities\n\n| Role | Responsibilities |\n|------|-------------------|\n| **Incident Commander (IC)** | Coordinate the response, assign tasks, ensure timely communication. |\n| **Security Maintainers** | Triage reported vulnerabilities, assess impact, create fixes, handle embargoes. |\n| **Infrastructure Lead** | Manage CI/CD, website, and release infrastructure. |\n| **Communications Lead** | Manage public announcements, blog posts, and social updates. |\n| **Contributors & Community** | Promptly report suspected security issues and follow responsible disclosure guidelines. |\n\nIn practice, Bootstrap’s core team fulfills these roles collectively, assigning an IC on a per-incident basis.\n\n---\n\n## 4. Incident workflow\n\n### 4.1 Detection & Reporting\n\n- All security issues should be **privately reported** via the contact method in [`SECURITY.md`](../SECURITY.md) or through GitHub’s Security Advisory mechanism.\n- Maintainers also monitor:\n - Automated dependency scanners (e.g., Dependabot, npm audit).\n - GitHub notifications and vulnerability alerts.\n - Community channels for suspicious activity.\n\n### 4.2 Initial triage\n\nUpon receiving a report:\n\n1. A maintainer acknowledges receipt within 3 business days (or sooner, when possible). \n Bootstrap is maintained by a small volunteer team; response times may vary slightly outside normal working hours.\n2. The IC assesses severity and impact:\n - **Critical:** immediate compromise of release infrastructure or code integrity.\n - **High:** exploitable vulnerability in distributed assets.\n - **Medium:** minor vulnerability or low-likelihood attack vector.\n - **Low:** informational, no direct risk.\n3. If confirmed as an incident, the IC opens a private coordination channel for maintainers and begins containment.\n\n### 4.3 Containment & Eradication\n\n- Revoke or rotate any affected credentials.\n- Disable compromised infrastructure or build pipelines if necessary.\n- Patch affected branches or dependencies.\n- Verify integrity of artifacts and releases.\n\n### 4.4 Communication\n\n- Keep the reporting party informed (when applicable).\n- For major incidents, the Communications Lead drafts a public advisory describing:\n - What happened\n - What was impacted\n - How users can verify or mitigate\n - What actions were taken\n- Communications occur after containment to avoid amplifying risk.\n\nPublic disclosures are posted via:\n\n- GitHub Security Advisory if appropriate\n- [blog.getbootstrap.com/](https://blog.getbootstrap.com/)\n- [Bootstrap GitHub discussions](https://github.com/orgs/twbs/discussions)\n- [@getbootstrap](https://x.com/getbootstrap) on X (formerly Twitter) for critical security notices.\n\n### 4.5 Recovery\n\n- Validate all systems and releases are secure.\n- Resume normal operations.\n- Tag patched releases and notify affected users.\n\n### 4.6 Post-incident review\n\nWithin two weeks after resolution:\n\n- Conduct an internal debrief.\n- Record:\n - Root cause\n - What worked / what didn’t\n - Remediation steps\n - Documentation or automation updates needed\n- Summarize lessons learned in the private maintainers’ wiki (with optional public summary if appropriate).\n\n---\n\n## 5. Severity levels & Response targets\n\n| Severity | Example | Target response (volunteer team) |\n|-----------|----------|----------------------------------|\n| **Critical** | Compromised release, stolen signing keys | Acknowledge ≤ 24h (best effort), containment ≤ 48h, fix ideally ≤ 14d |\n| **High** | Vulnerability enabling arbitrary code execution | Acknowledge ≤ 3 business days, fix ideally ≤ 14–21d |\n| **Medium** | XSS or content injection on docs site | Acknowledge ≤ 5 business days, fix in next release cycle |\n| **Low** | Minor issue with limited risk | Acknowledge ≤ 7 business days, fix as scheduled |\n\n**Note:** Timelines represent good-faith targets for a small volunteer core team, not hard SLAs. The maintainers will always prioritize public safety and transparency, even if timing varies.\n\n---\n\n## 6. Public disclosure principles\n\nBootstrap follows a responsible disclosure approach:\n\n- Work privately with reporters and affected parties before publishing details.\n- Never name reporters without consent.\n- Coordinate embargo periods with downstream consumers when needed.\n- Publish advisories only after patches or mitigations are available.\n\n---\n\n## 7. Communication Channels\n\n| Purpose | Channel |\n|----------|----------|\n| Private reporting | Email address in [`SECURITY.md`](./SECURITY.md) or GitHub advisory form |\n| General updates | [blog.getbootstrap.com/](https://blog.getbootstrap.com/) blog |\n| Security advisories | GitHub Security Advisory dashboard |\n| Social alerts | [@getbootstrap](https://x.com/getbootstrap) |\n| GitHub discussion alerts | [github.com/orgs/twbs/discussions](https://github.com/orgs/twbs/discussions) |\n\n---\n\n## 8. Plan Maintenance\n\nThis plan is reviewed at least annually or after any major incident. Changes are approved by the Core Team and recorded in Git history.\n\n---\n\n_The Bootstrap maintainers are committed to transparency, user trust, and continuous improvement in our security and response practices._\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: Report a bug\ndescription: Tell us about a bug or issue you may have identified in Bootstrap.\ntitle: \"Provide a general summary of the issue\"\nlabels: [bug]\nassignees: \"-\"\nbody:\n - type: checkboxes\n attributes:\n label: Prerequisites\n description: Take a couple minutes to help our maintainers work faster.\n options:\n - label: I have [searched](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue) for duplicate or closed issues\n required: true\n - label: I have [validated](https://html5.validator.nu/) any HTML to avoid common problems\n required: true\n - label: I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)\n required: true\n - type: textarea\n id: what-happened\n attributes:\n label: Describe the issue\n description: Provide a summary of the issue and what you expected to happen, including specific steps to reproduce.\n validations:\n required: true\n - type: textarea\n id: reduced-test-case\n attributes:\n label: Reduced test cases\n description: Include links [reduced test case](https://css-tricks.com/reduced-test-cases/) links or suggested fixes using CodePen ([v4 template](https://codepen.io/team/bootstrap/pen/yLabNQL) or [v5 template](https://codepen.io/team/bootstrap/pen/qBamdLj)).\n validations:\n required: true\n - type: dropdown\n id: os\n attributes:\n label: What operating system(s) are you seeing the problem on?\n multiple: true\n options:\n - Windows\n - macOS\n - Android\n - iOS\n - Linux\n validations:\n required: true\n - type: dropdown\n id: browser\n attributes:\n label: What browser(s) are you seeing the problem on?\n multiple: true\n options:\n - Chrome\n - Safari\n - Firefox\n - Microsoft Edge\n - Opera\n - type: input\n id: version\n attributes:\n label: What version of Bootstrap are you using?\n placeholder: \"e.g., v5.1.0 or v4.5.2\"\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "contact_links:\n - name: Ask the community\n url: https://github.com/twbs/bootstrap/discussions/new\n about: Ask and discuss questions with other Bootstrap community members.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: Feature request\ndescription: Suggest new or updated features to include in Bootstrap.\ntitle: \"Suggest a new feature\"\nlabels: [feature]\nassignees: []\nbody:\n - type: checkboxes\n attributes:\n label: Prerequisites\n description: Take a couple minutes to help our maintainers work faster.\n options:\n - label: I have [searched](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue) for duplicate or closed feature requests\n required: true\n - label: I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)\n required: true\n - type: textarea\n id: proposal\n attributes:\n label: Proposal\n description: Provide detailed information for what we should add, including relevant links to prior art, screenshots, or live demos whenever possible.\n validations:\n required: true\n - type: textarea\n id: motivation\n attributes:\n label: Motivation and context\n description: Tell us why this change is needed or helpful, and what problems it may help solve.\n validations:\n required: true\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "### Description\n\n\n\n### Motivation & Context\n\n\n\n### Type of changes\n\n\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] Refactoring (non-breaking change)\n- [ ] Breaking change (fix or feature that would change existing functionality)\n\n### Checklist\n\n\n\n\n- [ ] I have read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md)\n- [ ] My code follows the code style of the project _(using `npm run lint`)_\n- [ ] My change introduces changes to the documentation\n- [ ] I have updated the documentation accordingly\n- [ ] I have added tests to cover my changes\n- [ ] All new and existing tests passed\n\n#### Live previews\n\n\n\n- \n\n### Related issues\n\n\n" }, { "path": ".github/SUPPORT.md", "content": "### Bug reports\n\nSee the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.\n\n### How-to\n\nFor general troubleshooting or help getting started:\n\n- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).\n- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.\n- Ask and explore Stack Overflow with the [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag.\n" }, { "path": ".github/codeql/codeql-config.yml", "content": "name: \"CodeQL config\"\npaths-ignore:\n - dist\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: \"github-actions\"\n directory: \"/\"\n schedule:\n interval: weekly\n day: tuesday\n time: \"12:00\"\n timezone: Europe/Athens\n groups:\n github-actions:\n patterns:\n - \"*\"\n - package-ecosystem: npm\n directory: \"/\"\n labels:\n - dependencies\n - v5\n schedule:\n interval: weekly\n day: tuesday\n time: \"12:00\"\n timezone: Europe/Athens\n versioning-strategy: increase\n rebase-strategy: disabled\n groups:\n production-dependencies:\n dependency-type: \"production\"\n development-dependencies:\n dependency-type: \"development\"\n" }, { "path": ".github/release-drafter.yml", "content": "name-template: 'v$NEXT_MAJOR_VERSION'\ntag-template: 'v$NEXT_MAJOR_VERSION'\nprerelease: true\nexclude-labels:\n - 'skip-changelog'\ncategories:\n - title: '❗ Breaking Changes'\n labels:\n - 'breaking-change'\n - title: '🚀 Highlights'\n labels:\n - 'release-highlight'\n - title: '🚀 Features'\n labels:\n - 'new-feature'\n - 'feature'\n - 'enhancement'\n - title: '🐛 Bug fixes'\n labels:\n - 'fix'\n - 'bugfix'\n - 'bug'\n - title: '⚡ Performance improvements'\n labels:\n - 'performance'\n - title: '🎨 CSS'\n labels:\n - 'css'\n - title: '☕️ JavaScript'\n labels:\n - 'js'\n - title: '📖 Docs'\n labels:\n - 'docs'\n - title: '🛠 Examples'\n labels:\n - 'examples'\n - title: '🌎 Accessibility'\n labels:\n - 'accessibility'\n - title: '🔧 Utility API'\n labels:\n - 'utility API'\n - 'utilities'\n - title: '🏭 Tests'\n labels:\n - 'tests'\n - title: '🧰 Misc'\n labels:\n - 'build'\n - 'meta'\n - 'chore'\n - 'CI'\n - title: '📦 Dependencies'\n labels:\n - 'dependencies'\nchange-template: '- #$NUMBER: $TITLE'\ntemplate: |\n ## Changes\n $CHANGES\n" }, { "path": ".github/workflows/browserstack.yml", "content": "name: BrowserStack\n\non:\n push:\n branches:\n - \"**\"\n - \"!dependabot/**\"\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n browserstack:\n runs-on: ubuntu-latest\n if: github.repository == 'twbs/bootstrap'\n timeout-minutes: 30\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n cache: npm\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Run dist\n run: npm run dist\n\n - name: Run BrowserStack tests\n run: npm run js-test-cloud\n env:\n BROWSER_STACK_ACCESS_KEY: \"${{ secrets.BROWSER_STACK_ACCESS_KEY }}\"\n BROWSER_STACK_USERNAME: \"${{ secrets.BROWSER_STACK_USERNAME }}\"\n GITHUB_SHA: \"${{ github.sha }}\"\n" }, { "path": ".github/workflows/bundlewatch.yml", "content": "name: Bundlewatch\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n bundlewatch:\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n cache: npm\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Run dist\n run: npm run dist\n\n - name: Run bundlewatch\n run: npm run bundlewatch\n env:\n BUNDLEWATCH_GITHUB_TOKEN: \"${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}\"\n CI_BRANCH_BASE: main\n" }, { "path": ".github/workflows/calibreapp-image-actions.yml", "content": "name: Compress Images\n\non:\n pull_request:\n paths:\n - '**.jpg'\n - '**.jpeg'\n - '**.png'\n - '**.webp'\n\npermissions:\n contents: read\n\njobs:\n build:\n # Only run on Pull Requests within the same repository, and not from forks.\n if: github.event.pull_request.head.repo.full_name == github.repository\n name: calibreapp/image-actions\n runs-on: ubuntu-latest\n permissions:\n # allow calibreapp/image-actions to update PRs\n pull-requests: write\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Compress Images\n uses: calibreapp/image-actions@f32575787d333b0579f0b7d506ff03be63a669d1 # v1.4.1\n with:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/codeql.yml", "content": "name: \"CodeQL\"\n\non:\n push:\n branches:\n - main\n - v4-dev\n - \"!dependabot/**\"\n pull_request:\n branches:\n - main\n - v4-dev\n - \"!dependabot/**\"\n schedule:\n - cron: \"0 2 * * 4\"\n workflow_dispatch:\n\njobs:\n analyze:\n name: Analyze\n runs-on: ubuntu-latest\n permissions:\n security-events: write\n\n steps:\n - name: Checkout repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Initialize CodeQL\n uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1\n with:\n config-file: ./.github/codeql/codeql-config.yml\n languages: \"javascript\"\n queries: +security-and-quality\n\n - name: Autobuild\n uses: github/codeql-action/autobuild@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1\n with:\n category: \"/language:javascript\"\n" }, { "path": ".github/workflows/cspell.yml", "content": "name: cspell\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n\npermissions:\n contents: read\n\njobs:\n cspell:\n permissions:\n # allow streetsidesoftware/cspell-action to fetch files for commits and PRs\n contents: read\n pull-requests: read\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Run cspell\n uses: streetsidesoftware/cspell-action@9cd41bb518a24fefdafd9880cbab8f0ceba04d28 # v8.3.0\n with:\n config: \".cspell.json\"\n files: \"**/*.{md,mdx}\"\n inline: error\n incremental_files_only: false\n" }, { "path": ".github/workflows/css.yml", "content": "name: CSS\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n css:\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n cache: npm\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Build CSS\n run: npm run css\n\n - name: Run CSS tests\n run: npm run css-test\n" }, { "path": ".github/workflows/docs.yml", "content": "name: Docs\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n docs:\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n cache: npm\n\n - run: java -version\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Build docs\n run: npm run docs-build\n\n - name: Validate HTML\n run: npm run docs-vnu\n\n - name: Run linkinator\n uses: JustinBeckwith/linkinator-action@f62ba0c110a76effb2ee6022cc6ce4ab161085e3 # v2.4\n with:\n paths: _site\n recurse: true\n verbosity: error\n skip: \"^http://localhost\"\n" }, { "path": ".github/workflows/issue-close-require.yml", "content": "name: Close Issue Awaiting Reply\n\non:\n schedule:\n - cron: \"0 0 * * *\"\n\npermissions:\n contents: read\n\njobs:\n issue-close-require:\n permissions:\n # allow actions-cool/issues-helper to update issues and PRs\n issues: write\n pull-requests: write\n runs-on: ubuntu-latest\n if: github.repository == 'twbs/bootstrap'\n steps:\n - name: awaiting reply\n uses: actions-cool/issues-helper@200c78641dbf33838311e5a1e0c31bbdb92d7cf0 # v3.8.0\n with:\n actions: \"close-issues\"\n labels: \"awaiting-reply\"\n inactive-day: 14\n body: |\n As the issue was labeled with `awaiting-reply`, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.\n" }, { "path": ".github/workflows/issue-labeled.yml", "content": "name: Issue Labeled\n\non:\n issues:\n types: [labeled]\n\npermissions:\n contents: read\n\njobs:\n issue-labeled:\n permissions:\n # allow actions-cool/issues-helper to update issues and PRs\n issues: write\n pull-requests: write\n if: github.repository == 'twbs/bootstrap'\n runs-on: ubuntu-latest\n steps:\n - name: awaiting reply\n if: github.event.label.name == 'needs-example'\n uses: actions-cool/issues-helper@200c78641dbf33838311e5a1e0c31bbdb92d7cf0 # v3.8.0\n with:\n actions: \"create-comment\"\n token: ${{ secrets.GITHUB_TOKEN }}\n body: |\n Hello @${{ github.event.issue.user.login }}. Bug reports must include a **live demo** of the issue. Per our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md), please create a reduced test case on [CodePen](https://codepen.io/) or [StackBlitz](https://stackblitz.com/) and report back with your link, Bootstrap version, and specific browser and Operating System details.\n" }, { "path": ".github/workflows/js.yml", "content": "name: JS Tests\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n run:\n permissions:\n # allow coverallsapp/github-action to create new checks issues and fetch code\n checks: write\n contents: read\n name: JS Tests\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: ${{ env.NODE }}\n cache: npm\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Run dist\n run: npm run js\n\n - name: Run JS tests\n run: npm run js-test\n\n - name: Run Coveralls\n uses: coverallsapp/github-action@5cbfd81b66ca5d10c19b062c04de0199c215fb6e # v2.3.7\n if: ${{ !github.event.repository.fork }}\n with:\n github-token: \"${{ secrets.GITHUB_TOKEN }}\"\n path-to-lcov: \"./js/coverage/lcov.info\"\n" }, { "path": ".github/workflows/lint.yml", "content": "name: Lint\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n lint:\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n cache: npm\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Lint\n run: npm run lint\n" }, { "path": ".github/workflows/node-sass.yml", "content": "name: CSS (node-sass)\n\non:\n push:\n branches:\n - main\n pull_request:\n workflow_dispatch:\n\nenv:\n FORCE_COLOR: 2\n NODE: 22\n\npermissions:\n contents: read\n\njobs:\n css:\n runs-on: ubuntu-latest\n\n steps:\n - name: Clone repository\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up Node.js\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0\n with:\n node-version: \"${{ env.NODE }}\"\n\n - name: Build CSS with node-sass\n run: |\n npx --package node-sass@latest node-sass --version\n npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/\n ls -Al dist-sass/css\n\n - name: Check built CSS files for Sass variables\n shell: bash\n run: |\n SASS_VARS_FOUND=$(find \"dist-sass/css/\" -type f -name \"*.css\" -print0 | xargs -0 --no-run-if-empty grep -F \"\\$\" || true)\n if [[ -z \"$SASS_VARS_FOUND\" ]]; then\n echo \"All good, no Sass variables found!\"\n exit 0\n else\n echo \"Found $(echo \"$SASS_VARS_FOUND\" | wc -l | bc) Sass variables:\"\n echo \"$SASS_VARS_FOUND\"\n exit 1\n fi\n" }, { "path": ".github/workflows/publish-nuget.yml", "content": "name: Publish NuGet Packages\n\non:\n release:\n types: [published]\n\npermissions:\n contents: read\n\njobs:\n package-nuget:\n runs-on: windows-latest\n if: ${{ github.repository == 'twbs/bootstrap' && startsWith(github.event.release.tag_name, 'v') }}\n env:\n GITHUB_REF_NAME: ${{ github.ref_name }}\n steps:\n - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: Set up NuGet\n uses: nuget/setup-nuget@12c57947e9458a5b976961b08ea0706a17dd71ae # v3.0.0\n with:\n nuget-api-key: ${{ secrets.NuGetAPIKey }}\n nuget-version: '5.x'\n\n - name: Pack NuGet packages\n shell: pwsh\n run: |\n $bsversion = $env:GITHUB_REF_NAME.Substring(1)\n nuget pack \"nuget\\bootstrap.nuspec\" -Verbosity detailed -NonInteractive -BasePath . -Version $bsversion\n nuget pack \"nuget\\bootstrap.sass.nuspec\" -Verbosity detailed -NonInteractive -BasePath . -Version $bsversion\n nuget push \"bootstrap.$bsversion.nupkg\" -Verbosity detailed -NonInteractive -Source \"https://api.nuget.org/v3/index.json\"\n nuget push \"bootstrap.sass.$bsversion.nupkg\" -Verbosity detailed -NonInteractive -Source \"https://api.nuget.org/v3/index.json\"\n" }, { "path": ".github/workflows/release-notes.yml", "content": "name: Release notes\n\non:\n push:\n branches:\n - main\n workflow_dispatch:\n\npermissions:\n contents: read\n\njobs:\n update_release_draft:\n permissions:\n # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs\n contents: write\n pull-requests: write\n runs-on: ubuntu-latest\n if: github.repository == 'twbs/bootstrap'\n steps:\n - uses: release-drafter/release-drafter@139054aeaa9adc52ab36ddf67437541f039b88e2 # v7.1.1\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/scorecard.yml", "content": "# This workflow uses actions that are not certified by GitHub. They are provided\n# by a third-party and are governed by separate terms of service, privacy\n# policy, and support documentation.\n\nname: Scorecard supply-chain security\non:\n # For Branch-Protection check. Only the default branch is supported. See\n # https://github.com/ossf/scorecard/blob/main/docs/checks.md#branch-protection\n branch_protection_rule:\n # To guarantee Maintained check is occasionally updated. See\n # https://github.com/ossf/scorecard/blob/main/docs/checks.md#maintained\n schedule:\n - cron: '27 12 * * 2'\n push:\n branches: [ \"main\" ]\n\n# Declare default permissions as read only.\npermissions: read-all\n\njobs:\n analysis:\n name: Scorecard analysis\n runs-on: ubuntu-latest\n # `publish_results: true` only works when run from the default branch. conditional can be removed if disabled.\n if: github.event.repository.default_branch == github.ref_name || github.event_name == 'pull_request'\n permissions:\n # Needed to upload the results to code-scanning dashboard.\n security-events: write\n # Needed to publish results and get a badge (see publish_results below).\n id-token: write\n # Uncomment the permissions below if installing in a private repository.\n # contents: read\n # actions: read\n\n steps:\n - name: \"Checkout code\"\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n with:\n persist-credentials: false\n\n - name: \"Run analysis\"\n uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3\n with:\n results_file: results.sarif\n results_format: sarif\n # (Optional) \"write\" PAT token. Uncomment the `repo_token` line below if:\n # - you want to enable the Branch-Protection check on a *public* repository, or\n # - you are installing Scorecard on a *private* repository\n # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action?tab=readme-ov-file#authentication-with-fine-grained-pat-optional.\n # repo_token: ${{ secrets.SCORECARD_TOKEN }}\n\n # Public repositories:\n # - Publish results to OpenSSF REST API for easy access by consumers\n # - Allows the repository to include the Scorecard badge.\n # - See https://github.com/ossf/scorecard-action#publishing-results.\n # For private repositories:\n # - `publish_results` will always be set to `false`, regardless\n # of the value entered here.\n publish_results: true\n\n # (Optional) Uncomment file_mode if you have a .gitattributes with files marked export-ignore\n # file_mode: git\n\n # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF\n # format to the repository Actions tab.\n - name: \"Upload artifact\"\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0\n with:\n name: SARIF file\n path: results.sarif\n retention-days: 5\n\n # Upload the results to GitHub's code scanning dashboard (optional).\n # Commenting out will disable upload of results to your repo's Code Scanning dashboard\n - name: \"Upload to code-scanning\"\n uses: github/codeql-action/upload-sarif@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1\n with:\n sarif_file: results.sarif\n" }, { "path": ".gitignore", "content": "# Ignore docs files\n/_site/\n\n# Numerous always-ignore extensions\n*.diff\n*.err\n*.log\n*.orig\n*.rej\n*.swo\n*.swp\n*.vi\n*.zip\n*~\n\n# OS or Editor folders\n._*\n.cache\n.DS_Store\n.idea\n.project\n.settings\n.tmproj\n*.esproj\n*.sublime-project\n*.sublime-workspace\nnbproject\nThumbs.db\n# Local Netlify folder\n.netlify\n\n# Komodo\n.komodotools\n*.komodoproject\n\n# Folders to ignore\n/dist-sass/\n/js/coverage/\n/node_modules/\n\n# Site\n/site/dist\n/site/node_modules\n/site/.astro\n/site/public\n" }, { "path": ".prettierignore", "content": "# Prettier is only used for the website\n\nsite/.astro\nsite/dist\nsite/public\nsite/src/assets\nsite/src/scss\nsite/src/pages/**/*.md\nsite/src/pages/**/*.mdx\nsite/src/content/**/*.mdx\nsite/src/layouts/RedirectLayout.astro\nsite/static\n" }, { "path": ".stylelintignore", "content": "**/*.min.css\n**/dist/\n**/vendor/\n/_site/\n/site/public/\n/js/coverage/\n" }, { "path": ".stylelintrc.json", "content": "{\n \"extends\": [\n \"stylelint-config-twbs-bootstrap\"\n ],\n \"reportInvalidScopeDisables\": true,\n \"reportNeedlessDisables\": true,\n \"overrides\": [\n {\n \"files\": \"**/*.scss\",\n \"rules\": {\n \"declaration-property-value-disallowed-list\": {\n \"border\": \"none\",\n \"outline\": \"none\"\n },\n \"function-disallowed-list\": [\n \"calc\",\n \"lighten\",\n \"darken\"\n ],\n \"property-disallowed-list\": [\n \"border-radius\",\n \"border-top-left-radius\",\n \"border-top-right-radius\",\n \"border-bottom-right-radius\",\n \"border-bottom-left-radius\",\n \"transition\"\n ],\n \"scss/dollar-variable-default\": [\n true,\n {\n \"ignore\": \"local\"\n }\n ],\n \"scss/selector-no-union-class-name\": true\n }\n },\n {\n \"files\": \"scss/**/*.{test,spec}.scss\",\n \"rules\": {\n \"scss/dollar-variable-default\": null,\n \"declaration-no-important\": null\n }\n },\n {\n \"files\": \"site/**/*.scss\",\n \"rules\": {\n \"scss/dollar-variable-default\": null\n }\n },\n {\n \"files\": \"site/**/examples/**/*.css\",\n \"rules\": {\n \"comment-empty-line-before\": null,\n \"property-no-vendor-prefix\": null,\n \"selector-no-qualifying-type\": null,\n \"value-no-vendor-prefix\": null\n }\n }\n ]\n}\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"astro-build.astro-vscode\",\n \"dbaeumer.vscode-eslint\",\n \"EditorConfig.EditorConfig\",\n \"hossaini.bootstrap-intellisense\",\n \"streetsidesoftware.code-spell-checker\",\n \"stylelint.vscode-stylelint\"\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\",\n \"source.fixAll.stylelint\": \"always\"\n },\n \"editor.renderWhitespace\": \"all\",\n \"scss.validate\": false,\n \"stylelint.enable\": true,\n \"stylelint.validate\": [\"scss\"]\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, caste, color, religion, or sexual\nidentity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall\n community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or advances of\n any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others’ private information, such as a physical or email address,\n without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nmdo@getbootstrap.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.1, available at\n[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder][Mozilla CoC].\n\nFor answers to common questions about this code of conduct, see the FAQ at\n[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at\n[https://www.contributor-covenant.org/translations][translations].\n\n[homepage]: https://www.contributor-covenant.org\n[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html\n[Mozilla CoC]: https://github.com/mozilla/diversity\n[FAQ]: https://www.contributor-covenant.org/faq\n[translations]: https://www.contributor-covenant.org/translations\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2011-2026 The Bootstrap Authors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "

\n \n \"Bootstrap\n \n

\n\n

Bootstrap

\n\n

\n Sleek, intuitive, and powerful front-end framework for faster and easier web development.\n
\n Explore Bootstrap docs »\n
\n
\n Report bug\n ·\n Request feature\n ·\n Blog\n

\n\n\n## Bootstrap 5\n\nOur default branch is for development of our Bootstrap 5 release. Head to the [`v4-dev` branch](https://github.com/twbs/bootstrap/tree/v4-dev) to view the readme, documentation, and source code for Bootstrap 4.\n\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [Status](#status)\n- [What’s included](#whats-included)\n- [Bugs and feature requests](#bugs-and-feature-requests)\n- [Documentation](#documentation)\n- [Contributing](#contributing)\n- [Community](#community)\n- [Versioning](#versioning)\n- [Creators](#creators)\n- [Thanks](#thanks)\n- [Copyright and license](#copyright-and-license)\n\n\n## Quick start\n\nSeveral quick start options are available:\n\n- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.8.zip)\n- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`\n- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.8`\n- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.8`\n- Install with [Bun](https://bun.sh/): `bun add bootstrap@v5.3.8`\n- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.8`\n- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`\n\nRead the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more.\n\n\n## Status\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/bootstrap/js.yml?branch=main&label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions/workflows/js.yml?query=workflow%3AJS+branch%3Amain)\n[![npm version](https://img.shields.io/npm/v/bootstrap?logo=npm&logoColor=fff)](https://www.npmjs.com/package/bootstrap)\n[![Gem version](https://img.shields.io/gem/v/bootstrap?logo=rubygems&logoColor=fff)](https://rubygems.org/gems/bootstrap)\n[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue?logo=meteor&logoColor=fff)](https://atmospherejs.com/twbs/bootstrap)\n[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap?logo=packagist&logoColor=fff)](https://packagist.org/packages/twbs/bootstrap)\n[![NuGet](https://img.shields.io/nuget/vpre/bootstrap?logo=nuget&logoColor=fff)](https://www.nuget.org/packages/bootstrap/absoluteLatest)\n[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/main?logo=coveralls&logoColor=fff)](https://coveralls.io/github/twbs/bootstrap?branch=main)\n[![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)\n[![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)\n[![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)\n[![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)\n![Open Source Security Foundation Scorecard](https://img.shields.io/ossf-scorecard/github.com/twbs/bootstrap)\n[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap?logo=opencollective&logoColor=fff)](#backers)\n[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap?logo=opencollective&logoColor=fff)](#sponsors)\n\n\n## What’s included\n\nWithin the download you’ll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.\n\n
\n Download contents\n\n ```text\n bootstrap/\n ├── css/\n │ ├── bootstrap-grid.css\n │ ├── bootstrap-grid.css.map\n │ ├── bootstrap-grid.min.css\n │ ├── bootstrap-grid.min.css.map\n │ ├── bootstrap-grid.rtl.css\n │ ├── bootstrap-grid.rtl.css.map\n │ ├── bootstrap-grid.rtl.min.css\n │ ├── bootstrap-grid.rtl.min.css.map\n │ ├── bootstrap-reboot.css\n │ ├── bootstrap-reboot.css.map\n │ ├── bootstrap-reboot.min.css\n │ ├── bootstrap-reboot.min.css.map\n │ ├── bootstrap-reboot.rtl.css\n │ ├── bootstrap-reboot.rtl.css.map\n │ ├── bootstrap-reboot.rtl.min.css\n │ ├── bootstrap-reboot.rtl.min.css.map\n │ ├── bootstrap-utilities.css\n │ ├── bootstrap-utilities.css.map\n │ ├── bootstrap-utilities.min.css\n │ ├── bootstrap-utilities.min.css.map\n │ ├── bootstrap-utilities.rtl.css\n │ ├── bootstrap-utilities.rtl.css.map\n │ ├── bootstrap-utilities.rtl.min.css\n │ ├── bootstrap-utilities.rtl.min.css.map\n │ ├── bootstrap.css\n │ ├── bootstrap.css.map\n │ ├── bootstrap.min.css\n │ ├── bootstrap.min.css.map\n │ ├── bootstrap.rtl.css\n │ ├── bootstrap.rtl.css.map\n │ ├── bootstrap.rtl.min.css\n │ └── bootstrap.rtl.min.css.map\n └── js/\n ├── bootstrap.bundle.js\n ├── bootstrap.bundle.js.map\n ├── bootstrap.bundle.min.js\n ├── bootstrap.bundle.min.js.map\n ├── bootstrap.esm.js\n ├── bootstrap.esm.js.map\n ├── bootstrap.esm.min.js\n ├── bootstrap.esm.min.js.map\n ├── bootstrap.js\n ├── bootstrap.js.map\n ├── bootstrap.min.js\n └── bootstrap.min.js.map\n ```\n
\n\nWe provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).\n\n\n## Bugs and feature requests\n\nHave a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new/choose).\n\n\n## Documentation\n\nBootstrap’s documentation, included in this repo in the root directory, is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages at . The docs may also be run locally.\n\nDocumentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/).\n\n### Running documentation locally\n\n1. Run `npm install` to install the Node.js dependencies, including Astro (the site builder).\n2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.\n3. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.\n4. Open in your browser, and voilà.\n\nLearn more about using Astro by reading its [documentation](https://docs.astro.build/en/getting-started/).\n\n### Documentation for previous releases\n\nYou can find all our previous releases docs on .\n\n[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.\n\n\n## Contributing\n\nPlease read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.\n\nMoreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/main/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).\n\nEditor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at .\n\n\n## Community\n\nGet updates on Bootstrap’s development and chat with the project maintainers and community members.\n\n- Follow [@getbootstrap on X](https://x.com/getbootstrap).\n- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).\n- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).\n- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).\n- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.\n- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).\n- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.\n\n\n## Versioning\n\nFor transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we adhere to those rules whenever possible.\n\nSee [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.\n\n\n## Creators\n\n**Mark Otto**\n\n- \n- \n\n**Jacob Thornton**\n\n- \n- \n\n\n## Thanks\n\n\n \"BrowserStack\"\n\n\nThanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!\n\n\n \"Netlify\"\n\n\nThanks to [Netlify](https://www.netlify.com/) for providing us with Deploy Previews!\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/bootstrap#sponsor)]\n\n[![OC sponsor 0](https://opencollective.com/bootstrap/sponsor/0/avatar.svg)](https://opencollective.com/bootstrap/sponsor/0/website)\n[![OC sponsor 1](https://opencollective.com/bootstrap/sponsor/1/avatar.svg)](https://opencollective.com/bootstrap/sponsor/1/website)\n[![OC sponsor 2](https://opencollective.com/bootstrap/sponsor/2/avatar.svg)](https://opencollective.com/bootstrap/sponsor/2/website)\n[![OC sponsor 3](https://opencollective.com/bootstrap/sponsor/3/avatar.svg)](https://opencollective.com/bootstrap/sponsor/3/website)\n[![OC sponsor 4](https://opencollective.com/bootstrap/sponsor/4/avatar.svg)](https://opencollective.com/bootstrap/sponsor/4/website)\n[![OC sponsor 5](https://opencollective.com/bootstrap/sponsor/5/avatar.svg)](https://opencollective.com/bootstrap/sponsor/5/website)\n[![OC sponsor 6](https://opencollective.com/bootstrap/sponsor/6/avatar.svg)](https://opencollective.com/bootstrap/sponsor/6/website)\n[![OC sponsor 7](https://opencollective.com/bootstrap/sponsor/7/avatar.svg)](https://opencollective.com/bootstrap/sponsor/7/website)\n[![OC sponsor 8](https://opencollective.com/bootstrap/sponsor/8/avatar.svg)](https://opencollective.com/bootstrap/sponsor/8/website)\n[![OC sponsor 9](https://opencollective.com/bootstrap/sponsor/9/avatar.svg)](https://opencollective.com/bootstrap/sponsor/9/website)\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/bootstrap#backer)]\n\n[![Backers](https://opencollective.com/bootstrap/backers.svg?width=890)](https://opencollective.com/bootstrap#backers)\n\n\n## Copyright and license\n\nCode and documentation copyright 2011-2026 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).\n" }, { "path": "SECURITY.md", "content": "# Reporting Security Issues\n\nThe Bootstrap team and community take security issues in Bootstrap seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.\n\nTo report a security issue, email [security@getbootstrap.com](mailto:security@getbootstrap.com) and include the word \"SECURITY\" in the subject line.\n\nWe'll endeavor to respond quickly, and will keep you updated throughout the process.\n" }, { "path": "build/banner.mjs", "content": "import fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\nconst pkgJson = path.join(__dirname, '../package.json')\nconst pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))\n\nconst year = new Date().getFullYear()\n\nfunction getBanner(pluginFilename) {\n return `/*!\n * Bootstrap${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})\n * Copyright 2011-${year} ${pkg.author}\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */`\n}\n\nexport default getBanner\n" }, { "path": "build/build-plugins.mjs", "content": "#!/usr/bin/env node\n\n/*!\n * Script to build our plugins to use them separately.\n * Copyright 2020-2026 The Bootstrap Authors\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { babel } from '@rollup/plugin-babel'\nimport { globby } from 'globby'\nimport { rollup } from 'rollup'\nimport banner from './banner.mjs'\n\nconst __filename = fileURLToPath(import.meta.url)\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\nconst sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\\\/g, '/')\nconst jsFiles = await globby(`${sourcePath}/**/*.js`)\n\n// Array which holds the resolved plugins\nconst resolvedPlugins = []\n\n// Trims the \"js\" extension and uppercases => first letter, hyphens, backslashes & slashes\nconst filenameToEntity = filename => filename.replace('.js', '')\n .replace(/(?:^|-|\\/|\\\\)[a-z]/g, str => str.slice(-1).toUpperCase())\n\nfor (const file of jsFiles) {\n resolvedPlugins.push({\n src: file,\n dist: file.replace('src', 'dist'),\n fileName: path.basename(file),\n className: filenameToEntity(path.basename(file))\n // safeClassName: filenameToEntity(path.relative(sourcePath, file))\n })\n}\n\nconst build = async plugin => {\n /**\n * @type {import('rollup').GlobalsOption}\n */\n const globals = {}\n\n const bundle = await rollup({\n input: plugin.src,\n plugins: [\n babel({\n // Only transpile our source code\n exclude: 'node_modules/**',\n // Include the helpers in each file, at most one copy of each\n babelHelpers: 'bundled'\n })\n ],\n external(source) {\n // Pattern to identify local files\n const pattern = /^(\\.{1,2})\\//\n\n // It's not a local file, e.g a Node.js package\n if (!pattern.test(source)) {\n globals[source] = source\n return true\n }\n\n const usedPlugin = resolvedPlugins.find(plugin => {\n return plugin.src.includes(source.replace(pattern, ''))\n })\n\n if (!usedPlugin) {\n throw new Error(`Source ${source} is not mapped!`)\n }\n\n // We can change `Index` with `UtilIndex` etc if we use\n // `safeClassName` instead of `className` everywhere\n globals[path.normalize(usedPlugin.src)] = usedPlugin.className\n return true\n }\n })\n\n await bundle.write({\n banner: banner(plugin.fileName),\n format: 'umd',\n name: plugin.className,\n sourcemap: true,\n globals,\n generatedCode: 'es2015',\n file: plugin.dist\n })\n\n console.log(`Built ${plugin.className}`)\n}\n\n(async () => {\n try {\n const basename = path.basename(__filename)\n const timeLabel = `[${basename}] finished`\n\n console.log('Building individual plugins...')\n console.time(timeLabel)\n\n await Promise.all(Object.values(resolvedPlugins).map(plugin => build(plugin)))\n\n console.timeEnd(timeLabel)\n } catch (error) {\n console.error(error)\n process.exit(1)\n }\n})()\n" }, { "path": "build/change-version.mjs", "content": "#!/usr/bin/env node\n\n/*!\n * Script to update version number references in the project.\n * Copyright 2017-2026 The Bootstrap Authors\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\nimport { execFile } from 'node:child_process'\nimport fs from 'node:fs/promises'\nimport process from 'node:process'\n\nconst VERBOSE = process.argv.includes('--verbose')\nconst DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')\n\n// These are the files we only care about replacing the version\nconst FILES = [\n 'README.md',\n 'config.yml',\n 'js/src/base-component.js',\n 'package.js',\n 'scss/mixins/_banner.scss',\n 'site/data/docs-versions.yml'\n]\n\n// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37\nfunction regExpQuote(string) {\n return string.replace(/[$()*+-.?[\\\\\\]^{|}]/g, '\\\\$&')\n}\n\nfunction regExpQuoteReplacement(string) {\n return string.replace(/\\$/g, '$$')\n}\n\nasync function replaceRecursively(file, oldVersion, newVersion) {\n const originalString = await fs.readFile(file, 'utf8')\n const newString = originalString\n .replace(\n new RegExp(regExpQuote(oldVersion), 'g'),\n regExpQuoteReplacement(newVersion)\n )\n // Also replace the version used by the rubygem,\n // which is using periods (`.`) instead of hyphens (`-`)\n .replace(\n new RegExp(regExpQuote(oldVersion.replace(/-/g, '.')), 'g'),\n regExpQuoteReplacement(newVersion.replace(/-/g, '.'))\n )\n\n // No need to move any further if the strings are identical\n if (originalString === newString) {\n return\n }\n\n if (VERBOSE) {\n console.log(`Found ${oldVersion} in ${file}`)\n }\n\n if (DRY_RUN) {\n return\n }\n\n await fs.writeFile(file, newString, 'utf8')\n}\n\nfunction bumpNpmVersion(newVersion) {\n if (DRY_RUN) {\n return\n }\n\n execFile('npm', ['version', newVersion, '--no-git-tag'], { shell: true }, error => {\n if (error) {\n console.error(error)\n process.exit(1)\n }\n })\n}\n\nfunction showUsage(args) {\n console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')\n console.error('Got arguments:', args)\n process.exit(1)\n}\n\nasync function main(args) {\n let [oldVersion, newVersion] = args\n\n if (!oldVersion || !newVersion) {\n showUsage(args)\n }\n\n // Strip any leading `v` from arguments because\n // otherwise we will end up with duplicate `v`s\n [oldVersion, newVersion] = [oldVersion, newVersion].map(arg => {\n return arg.startsWith('v') ? arg.slice(1) : arg\n })\n\n if (oldVersion === newVersion) {\n showUsage(args)\n }\n\n bumpNpmVersion(newVersion)\n\n try {\n await Promise.all(\n FILES.map(file => replaceRecursively(file, oldVersion, newVersion))\n )\n } catch (error) {\n console.error(error)\n process.exit(1)\n }\n}\n\nmain(process.argv.slice(2))\n" }, { "path": "build/docs-prep.sh", "content": "#!/bin/bash\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[0;33m'\nBLUE='\\033[0;34m'\nNC='\\033[0m' # No Color\n\n# Default branch suffix\nBRANCH_SUFFIX=\"release\"\n\n# Check if a custom version parameter was provided\nif [ $# -eq 1 ]; then\n BRANCH_SUFFIX=\"$1\"\nfi\n\n# Branch name to create\nNEW_BRANCH=\"gh-pages-${BRANCH_SUFFIX}\"\n\n# Get the current docs version from config\nDOCS_VERSION=$(node -p \"require('js-yaml').load(require('fs').readFileSync('config.yml', 'utf8')).docs_version\")\n\n# Function to print colored messages\nprint_success() {\n echo -e \"${GREEN}✓ $1${NC}\"\n}\n\nprint_error() {\n echo -e \"${RED}✗ $1${NC}\"\n exit 1\n}\n\nprint_info() {\n echo -e \"${BLUE}ℹ $1${NC}\"\n}\n\nprint_warning() {\n echo -e \"${YELLOW}⚠ $1${NC}\"\n}\n\n# Function to execute command with error handling\nexecute() {\n print_info \"Running: $1\"\n eval $1\n if [ $? -ne 0 ]; then\n print_error \"Failed to execute: $1\"\n else\n print_success \"Successfully executed: $1\"\n fi\n}\n\n# Check if /tmp/_site directory exists from a previous run\nif [ -d \"/tmp/_site\" ]; then\n print_warning \"Found existing /tmp/_site directory. Removing it…\"\n rm -rf /tmp/_site\nfi\n\n# Main process\nprint_info \"Starting documentation deployment process…\"\n\n# Step 1: Build documentation\nprint_info \"Building documentation with npm run docs…\"\nnpm run docs\nif [ $? -ne 0 ]; then\n print_error \"Documentation build failed!\"\nfi\nprint_success \"Documentation built successfully\"\n\n# Step 2: Move _site to /tmp/\nprint_info \"Moving _site to temporary location…\"\nexecute \"mv _site /tmp/\"\n\n# Step 3: Switch to gh-pages branch\nprint_info \"Checking out gh-pages branch…\"\ngit checkout gh-pages\nif [ $? -ne 0 ]; then\n print_error \"Failed to checkout gh-pages branch. Make sure it exists.\"\nfi\nprint_success \"Switched to gh-pages branch\"\n\ngit reset --hard origin/gh-pages\nif [ $? -ne 0 ]; then\n print_error \"Failed to reset to origin/gh-pages. Check your git configuration.\"\nfi\nprint_success \"Reset to origin/gh-pages\"\n\ngit pull origin gh-pages\nif [ $? -ne 0 ]; then\n print_error \"Failed to pull from origin/gh-pages. Check your network connection and git configuration.\"\nfi\nprint_success \"Pulled latest changes from origin/gh-pages\"\n\n# Step 4: Create a new branch for the update\nprint_info \"Checking if branch ${NEW_BRANCH} exists and deleting it if it does…\"\nif git show-ref --verify --quiet refs/heads/${NEW_BRANCH}; then\n execute \"git branch -D ${NEW_BRANCH}\"\nelse\n print_info \"Branch ${NEW_BRANCH} does not exist, proceeding with creation…\"\nfi\nprint_info \"Creating new branch ${NEW_BRANCH}…\"\nexecute \"git checkout -b ${NEW_BRANCH}\"\n\n# Step 5: Move all root-level files from Astro build\nfind /tmp/_site -maxdepth 1 -type f -exec mv {} . \\;\n\n# Step 6: Move all top-level directories except 'docs' (which needs special handling)\nfind /tmp/_site -maxdepth 1 -type d ! -name \"_site\" ! -name \"docs\" -exec sh -c 'dir=$(basename \"$1\"); rm -rf \"$dir\"; mv \"$1\" .' _ {} \\;\n\n# Step 7: Handle docs directory specially\nif [ -d \"/tmp/_site/docs\" ]; then\n # Replace only the current version's docs\n if [ -d \"docs/$DOCS_VERSION\" ]; then\n rm -rf \"docs/$DOCS_VERSION\"\n fi\n mv \"/tmp/_site/docs/$DOCS_VERSION\" \"docs/\"\n\n # Handle docs root files\n find /tmp/_site/docs -maxdepth 1 -type f -exec mv {} docs/ \\;\n\n # Handle special docs directories (getting-started, versions)\n for special_dir in getting-started versions; do\n if [ -d \"/tmp/_site/docs/$special_dir\" ]; then\n rm -rf \"docs/$special_dir\"\n mv \"/tmp/_site/docs/$special_dir\" \"docs/\"\n fi\n done\nfi\n\n# Clean up remaining files in /tmp/_site if any\nif [ -d \"/tmp/_site\" ]; then\n remaining_files=$(find /tmp/_site -type f | wc -l)\n remaining_dirs=$(find /tmp/_site -type d | wc -l)\n if [ $remaining_files -gt 0 ] || [ $remaining_dirs -gt 1 ]; then\n print_warning \"There are still some files or directories in /tmp/_site that weren't moved.\"\n print_warning \"You may want to inspect /tmp/_site to see if anything important was missed.\"\n else\n print_info \"Cleaning up temporary directory…\"\n rm -rf /tmp/_site\n print_success \"Temporary directory cleaned up\"\n fi\nfi\n\n# Step 10: Remove empty site directory if it exists\nif [ -d \"site\" ]; then\n print_info \"Removing empty site directory…\"\n execute \"rm -rf site\"\nfi\n\nprint_success \"Docs prep complete!\"\nprint_info \"Review changes before committing and pushing.\"\nprint_info \"Next steps:\"\nprint_info \" 1. Run a local server to review changes\"\nprint_info \" 2. Check browser and web inspector for any errors\"\nprint_info \" 3. git add .\"\nprint_info \" 4. git commit -m \\\"Update documentation\\\"\"\nprint_info \" 5. git push origin ${NEW_BRANCH}\"\n" }, { "path": "build/generate-sri.mjs", "content": "#!/usr/bin/env node\n\n/*!\n * Script to generate SRI hashes for use in our docs.\n * Remember to use the same vendor files as the CDN ones,\n * otherwise the hashes won't match!\n *\n * Copyright 2017-2026 The Bootstrap Authors\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\nimport crypto from 'node:crypto'\nimport fs from 'node:fs'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport sh from 'shelljs'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\nsh.config.fatal = true\n\nconst configFile = path.join(__dirname, '../config.yml')\n\n// Array of objects which holds the files to generate SRI hashes for.\n// `file` is the path from the root folder\n// `configPropertyName` is the config.yml variable's name of the file\nconst files = [\n {\n file: 'dist/css/bootstrap.min.css',\n configPropertyName: 'css_hash'\n },\n {\n file: 'dist/css/bootstrap.rtl.min.css',\n configPropertyName: 'css_rtl_hash'\n },\n {\n file: 'dist/js/bootstrap.min.js',\n configPropertyName: 'js_hash'\n },\n {\n file: 'dist/js/bootstrap.bundle.min.js',\n configPropertyName: 'js_bundle_hash'\n },\n {\n file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',\n configPropertyName: 'popper_hash'\n }\n]\n\nfor (const { file, configPropertyName } of files) {\n fs.readFile(file, 'utf8', (error, data) => {\n if (error) {\n throw error\n }\n\n const algorithm = 'sha384'\n const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')\n const integrity = `${algorithm}-${hash}`\n\n console.log(`${configPropertyName}: ${integrity}`)\n\n sh.sed('-i', new RegExp(`^(\\\\s+${configPropertyName}:\\\\s+[\"'])\\\\S*([\"'])`), `$1${integrity}$2`, configFile)\n })\n}\n" }, { "path": "build/postcss.config.mjs", "content": "const mapConfig = {\n inline: false,\n annotation: true,\n sourcesContent: true\n}\n\nexport default context => {\n return {\n map: context.file.dirname.includes('examples') ? false : mapConfig,\n plugins: {\n autoprefixer: {\n cascade: false\n },\n rtlcss: context.env === 'RTL'\n }\n }\n}\n" }, { "path": "build/rollup.config.mjs", "content": "import path from 'node:path'\nimport process from 'node:process'\nimport { fileURLToPath } from 'node:url'\nimport { babel } from '@rollup/plugin-babel'\nimport { nodeResolve } from '@rollup/plugin-node-resolve'\nimport replace from '@rollup/plugin-replace'\nimport banner from './banner.mjs'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\n\nconst BUNDLE = process.env.BUNDLE === 'true'\nconst ESM = process.env.ESM === 'true'\n\nlet destinationFile = `bootstrap${ESM ? '.esm' : ''}`\nconst external = ['@popperjs/core']\nconst plugins = [\n babel({\n // Only transpile our source code\n exclude: 'node_modules/**',\n // Include the helpers in the bundle, at most one copy of each\n babelHelpers: 'bundled'\n })\n]\nconst globals = {\n '@popperjs/core': 'Popper'\n}\n\nif (BUNDLE) {\n destinationFile += '.bundle'\n // Remove last entry in external array to bundle Popper\n external.pop()\n delete globals['@popperjs/core']\n plugins.push(\n replace({\n 'process.env.NODE_ENV': '\"production\"',\n preventAssignment: true\n }),\n nodeResolve()\n )\n}\n\nconst rollupConfig = {\n input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),\n output: {\n banner: banner(),\n file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),\n format: ESM ? 'esm' : 'umd',\n globals,\n generatedCode: 'es2015'\n },\n external,\n plugins\n}\n\nif (!ESM) {\n rollupConfig.output.name = 'bootstrap'\n}\n\nexport default rollupConfig\n" }, { "path": "build/vnu-jar.mjs", "content": "#!/usr/bin/env node\n\n/*!\n * Script to run vnu-jar if Java is available.\n * Copyright 2017-2026 The Bootstrap Authors\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\nimport { execFile, spawn } from 'node:child_process'\nimport vnu from 'vnu-jar'\n\nexecFile('java', ['-version'], (error, stdout, stderr) => {\n if (error) {\n console.error('Skipping vnu-jar test; Java is probably missing.')\n console.error(error)\n return\n }\n\n console.log('Running vnu-jar validation...')\n\n const is32bitJava = !/64-Bit/.test(stderr)\n\n // vnu-jar accepts multiple ignores joined with a `|`.\n // Also note that the ignores are string regular expressions.\n const ignores = [\n // \"autocomplete\" is included in ',\n ''\n ].join('')\n\n const button = document.querySelector('button')\n\n button.click()\n expect(document.querySelectorAll('.alert')).toHaveSize(0)\n })\n\n it('should close an alert without instantiating it manually with the parent selector', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const button = document.querySelector('button')\n\n button.click()\n expect(document.querySelectorAll('.alert')).toHaveSize(0)\n })\n })\n\n describe('close', () => {\n it('should close an alert', () => {\n return new Promise(resolve => {\n const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)\n fixtureEl.innerHTML = '
'\n\n const alertEl = document.querySelector('.alert')\n const alert = new Alert(alertEl)\n\n alertEl.addEventListener('closed.bs.alert', () => {\n expect(document.querySelectorAll('.alert')).toHaveSize(0)\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n alert.close()\n })\n })\n\n it('should close alert with fade class', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const alertEl = document.querySelector('.alert')\n const alert = new Alert(alertEl)\n\n alertEl.addEventListener('transitionend', () => {\n expect().nothing()\n })\n\n alertEl.addEventListener('closed.bs.alert', () => {\n expect(document.querySelectorAll('.alert')).toHaveSize(0)\n resolve()\n })\n\n alert.close()\n })\n })\n\n it('should not remove alert if close event is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const getAlert = () => document.querySelector('.alert')\n const alertEl = getAlert()\n const alert = new Alert(alertEl)\n\n alertEl.addEventListener('close.bs.alert', event => {\n event.preventDefault()\n setTimeout(() => {\n expect(getAlert()).not.toBeNull()\n resolve()\n }, 10)\n })\n\n alertEl.addEventListener('closed.bs.alert', () => {\n reject(new Error('should not fire closed event'))\n })\n\n alert.close()\n })\n })\n })\n\n describe('dispose', () => {\n it('should dispose an alert', () => {\n fixtureEl.innerHTML = '
'\n\n const alertEl = document.querySelector('.alert')\n const alert = new Alert(alertEl)\n\n expect(Alert.getInstance(alertEl)).not.toBeNull()\n\n alert.dispose()\n\n expect(Alert.getInstance(alertEl)).toBeNull()\n })\n })\n\n describe('jQueryInterface', () => {\n it('should handle config passed and toggle existing alert', () => {\n fixtureEl.innerHTML = '
'\n\n const alertEl = fixtureEl.querySelector('.alert')\n const alert = new Alert(alertEl)\n\n const spy = spyOn(alert, 'close')\n\n jQueryMock.fn.alert = Alert.jQueryInterface\n jQueryMock.elements = [alertEl]\n\n jQueryMock.fn.alert.call(jQueryMock, 'close')\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should create new alert instance and call close', () => {\n fixtureEl.innerHTML = '
'\n\n const alertEl = fixtureEl.querySelector('.alert')\n\n jQueryMock.fn.alert = Alert.jQueryInterface\n jQueryMock.elements = [alertEl]\n\n expect(Alert.getInstance(alertEl)).toBeNull()\n jQueryMock.fn.alert.call(jQueryMock, 'close')\n\n expect(fixtureEl.querySelector('.alert')).toBeNull()\n })\n\n it('should just create an alert instance without calling close', () => {\n fixtureEl.innerHTML = '
'\n\n const alertEl = fixtureEl.querySelector('.alert')\n\n jQueryMock.fn.alert = Alert.jQueryInterface\n jQueryMock.elements = [alertEl]\n\n jQueryMock.fn.alert.call(jQueryMock)\n\n expect(Alert.getInstance(alertEl)).not.toBeNull()\n expect(fixtureEl.querySelector('.alert')).not.toBeNull()\n })\n\n it('should throw an error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.alert = Alert.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.alert.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should throw an error on protected method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = '_getConfig'\n\n jQueryMock.fn.alert = Alert.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.alert.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return alert instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const alert = new Alert(div)\n\n expect(Alert.getInstance(div)).toEqual(alert)\n expect(Alert.getInstance(div)).toBeInstanceOf(Alert)\n })\n\n it('should return null when there is no alert instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Alert.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return alert instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const alert = new Alert(div)\n\n expect(Alert.getOrCreateInstance(div)).toEqual(alert)\n expect(Alert.getInstance(div)).toEqual(Alert.getOrCreateInstance(div, {}))\n expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert)\n })\n\n it('should return new instance when there is no alert instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Alert.getInstance(div)).toBeNull()\n expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert)\n })\n })\n})\n" }, { "path": "js/tests/unit/base-component.spec.js", "content": "import BaseComponent from '../../src/base-component.js'\nimport EventHandler from '../../src/dom/event-handler.js'\nimport { noop } from '../../src/util/index.js'\nimport { clearFixture, getFixture } from '../helpers/fixture.js'\n\nclass DummyClass extends BaseComponent {\n constructor(element) {\n super(element)\n\n EventHandler.on(this._element, `click${DummyClass.EVENT_KEY}`, noop)\n }\n\n static get NAME() {\n return 'dummy'\n }\n}\n\ndescribe('Base Component', () => {\n let fixtureEl\n const name = 'dummy'\n let element\n let instance\n const createInstance = () => {\n fixtureEl.innerHTML = '
'\n element = fixtureEl.querySelector('#foo')\n instance = new DummyClass(element)\n }\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('Static Methods', () => {\n describe('VERSION', () => {\n it('should return version', () => {\n expect(DummyClass.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(DummyClass.DATA_KEY).toEqual(`bs.${name}`)\n })\n })\n\n describe('NAME', () => {\n it('should throw an Error if it is not initialized', () => {\n expect(() => {\n // eslint-disable-next-line no-unused-expressions\n BaseComponent.NAME\n }).toThrowError(Error)\n })\n\n it('should return plugin NAME', () => {\n expect(DummyClass.NAME).toEqual(name)\n })\n })\n\n describe('EVENT_KEY', () => {\n it('should return plugin event key', () => {\n expect(DummyClass.EVENT_KEY).toEqual(`.bs.${name}`)\n })\n })\n })\n\n describe('Public Methods', () => {\n describe('constructor', () => {\n it('should accept element, either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = [\n '
',\n '
'\n ].join('')\n\n const el = fixtureEl.querySelector('#foo')\n const elInstance = new DummyClass(el)\n const selectorInstance = new DummyClass('#bar')\n\n expect(elInstance._element).toEqual(el)\n expect(selectorInstance._element).toEqual(fixtureEl.querySelector('#bar'))\n })\n\n it('should not initialize and add element record to Data (caching), if argument `element` is not an HTML element', () => {\n fixtureEl.innerHTML = ''\n\n const el = fixtureEl.querySelector('#foo')\n const elInstance = new DummyClass(el)\n const selectorInstance = new DummyClass('#bar')\n\n expect(elInstance._element).not.toBeDefined()\n expect(selectorInstance._element).not.toBeDefined()\n })\n })\n\n describe('dispose', () => {\n it('should dispose an component', () => {\n createInstance()\n expect(DummyClass.getInstance(element)).not.toBeNull()\n\n instance.dispose()\n\n expect(DummyClass.getInstance(element)).toBeNull()\n expect(instance._element).toBeNull()\n })\n\n it('should de-register element event listeners', () => {\n createInstance()\n const spy = spyOn(EventHandler, 'off')\n\n instance.dispose()\n\n expect(spy).toHaveBeenCalledWith(element, DummyClass.EVENT_KEY)\n })\n })\n\n describe('getInstance', () => {\n it('should return an instance', () => {\n createInstance()\n\n expect(DummyClass.getInstance(element)).toEqual(instance)\n expect(DummyClass.getInstance(element)).toBeInstanceOf(DummyClass)\n })\n\n it('should accept element, either passed as a CSS selector, jQuery element, or DOM element', () => {\n createInstance()\n\n expect(DummyClass.getInstance('#foo')).toEqual(instance)\n expect(DummyClass.getInstance(element)).toEqual(instance)\n\n const fakejQueryObject = {\n 0: element,\n jquery: 'foo'\n }\n\n expect(DummyClass.getInstance(fakejQueryObject)).toEqual(instance)\n })\n\n it('should return null when there is no instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(DummyClass.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return an instance', () => {\n createInstance()\n\n expect(DummyClass.getOrCreateInstance(element)).toEqual(instance)\n expect(DummyClass.getInstance(element)).toEqual(DummyClass.getOrCreateInstance(element, {}))\n expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass)\n })\n\n it('should return new instance when there is no alert instance', () => {\n fixtureEl.innerHTML = '
'\n element = fixtureEl.querySelector('#foo')\n\n expect(DummyClass.getInstance(element)).toBeNull()\n expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass)\n })\n })\n })\n})\n" }, { "path": "js/tests/unit/button.spec.js", "content": "import Button from '../../src/button.js'\nimport { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'\n\ndescribe('Button', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = ''\n const buttonEl = fixtureEl.querySelector('[data-bs-toggle=\"button\"]')\n const buttonBySelector = new Button('[data-bs-toggle=\"button\"]')\n const buttonByElement = new Button(buttonEl)\n\n expect(buttonBySelector._element).toEqual(buttonEl)\n expect(buttonByElement._element).toEqual(buttonEl)\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Button.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Button.DATA_KEY).toEqual('bs.button')\n })\n })\n\n describe('data-api', () => {\n it('should toggle active class on click', () => {\n fixtureEl.innerHTML = [\n '',\n ''\n ].join('')\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n const btnTestParent = fixtureEl.querySelector('.testParent')\n\n expect(btn).not.toHaveClass('active')\n\n btn.click()\n\n expect(btn).toHaveClass('active')\n\n btn.click()\n\n expect(btn).not.toHaveClass('active')\n\n divTest.click()\n\n expect(btnTestParent).toHaveClass('active')\n })\n })\n\n describe('toggle', () => {\n it('should toggle aria-pressed', () => {\n fixtureEl.innerHTML = ''\n\n const btnEl = fixtureEl.querySelector('.btn')\n const button = new Button(btnEl)\n\n expect(btnEl.getAttribute('aria-pressed')).toEqual('false')\n expect(btnEl).not.toHaveClass('active')\n\n button.toggle()\n\n expect(btnEl.getAttribute('aria-pressed')).toEqual('true')\n expect(btnEl).toHaveClass('active')\n })\n })\n\n describe('dispose', () => {\n it('should dispose a button', () => {\n fixtureEl.innerHTML = ''\n\n const btnEl = fixtureEl.querySelector('.btn')\n const button = new Button(btnEl)\n\n expect(Button.getInstance(btnEl)).not.toBeNull()\n\n button.dispose()\n\n expect(Button.getInstance(btnEl)).toBeNull()\n })\n })\n\n describe('jQueryInterface', () => {\n it('should handle config passed and toggle existing button', () => {\n fixtureEl.innerHTML = ''\n\n const btnEl = fixtureEl.querySelector('.btn')\n const button = new Button(btnEl)\n\n const spy = spyOn(button, 'toggle')\n\n jQueryMock.fn.button = Button.jQueryInterface\n jQueryMock.elements = [btnEl]\n\n jQueryMock.fn.button.call(jQueryMock, 'toggle')\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should create new button instance and call toggle', () => {\n fixtureEl.innerHTML = ''\n\n const btnEl = fixtureEl.querySelector('.btn')\n\n jQueryMock.fn.button = Button.jQueryInterface\n jQueryMock.elements = [btnEl]\n\n jQueryMock.fn.button.call(jQueryMock, 'toggle')\n\n expect(Button.getInstance(btnEl)).not.toBeNull()\n expect(btnEl).toHaveClass('active')\n })\n\n it('should just create a button instance without calling toggle', () => {\n fixtureEl.innerHTML = ''\n\n const btnEl = fixtureEl.querySelector('.btn')\n\n jQueryMock.fn.button = Button.jQueryInterface\n jQueryMock.elements = [btnEl]\n\n jQueryMock.fn.button.call(jQueryMock)\n\n expect(Button.getInstance(btnEl)).not.toBeNull()\n expect(btnEl).not.toHaveClass('active')\n })\n })\n\n describe('getInstance', () => {\n it('should return button instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const button = new Button(div)\n\n expect(Button.getInstance(div)).toEqual(button)\n expect(Button.getInstance(div)).toBeInstanceOf(Button)\n })\n\n it('should return null when there is no button instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Button.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return button instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const button = new Button(div)\n\n expect(Button.getOrCreateInstance(div)).toEqual(button)\n expect(Button.getInstance(div)).toEqual(Button.getOrCreateInstance(div, {}))\n expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)\n })\n\n it('should return new instance when there is no button instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Button.getInstance(div)).toBeNull()\n expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button)\n })\n })\n})\n" }, { "path": "js/tests/unit/carousel.spec.js", "content": "import Carousel from '../../src/carousel.js'\nimport EventHandler from '../../src/dom/event-handler.js'\nimport { isRTL, noop } from '../../src/util/index.js'\nimport Swipe from '../../src/util/swipe.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Carousel', () => {\n const { Simulator, PointerEvent } = window\n const originWinPointerEvent = PointerEvent\n const supportPointerEvent = Boolean(PointerEvent)\n\n const cssStyleCarousel = '.carousel.pointer-event { touch-action: none; }'\n\n const stylesCarousel = document.createElement('style')\n stylesCarousel.type = 'text/css'\n stylesCarousel.append(document.createTextNode(cssStyleCarousel))\n\n const clearPointerEvents = () => {\n window.PointerEvent = null\n }\n\n const restorePointerEvents = () => {\n window.PointerEvent = originWinPointerEvent\n }\n\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Carousel.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Carousel.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Carousel.DATA_KEY).toEqual('bs.carousel')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carouselBySelector = new Carousel('#myCarousel')\n const carouselByElement = new Carousel(carouselEl)\n\n expect(carouselBySelector._element).toEqual(carouselEl)\n expect(carouselByElement._element).toEqual(carouselEl)\n })\n\n it('should start cycling if `ride`===`carousel`', () => {\n fixtureEl.innerHTML = '
'\n\n const carousel = new Carousel('#myCarousel')\n expect(carousel._interval).not.toBeNull()\n })\n\n it('should not start cycling if `ride`!==`carousel`', () => {\n fixtureEl.innerHTML = '
'\n\n const carousel = new Carousel('#myCarousel')\n expect(carousel._interval).toBeNull()\n })\n\n it('should go to next item if right arrow key is pressed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {\n keyboard: true\n })\n\n const spy = spyOn(carousel, '_keydown').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowRight'\n\n carouselEl.dispatchEvent(keydown)\n })\n })\n\n it('should ignore keyboard events if data-bs-keyboard=false', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
',\n '
'\n ].join('')\n\n const spy = spyOn(EventHandler, 'trigger').and.callThrough()\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n // eslint-disable-next-line no-new\n new Carousel('#myCarousel')\n expect(spy).not.toHaveBeenCalledWith(carouselEl, 'keydown.bs.carousel', jasmine.any(Function))\n })\n\n it('should ignore mouse events if data-bs-pause=false', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
',\n '
'\n ].join('')\n\n const spy = spyOn(EventHandler, 'trigger').and.callThrough()\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n // eslint-disable-next-line no-new\n new Carousel('#myCarousel')\n expect(spy).not.toHaveBeenCalledWith(carouselEl, 'hover.bs.carousel', jasmine.any(Function))\n })\n\n it('should go to previous item if left arrow key is pressed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {\n keyboard: true\n })\n\n const spy = spyOn(carousel, '_keydown').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item1'))\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowLeft'\n\n carouselEl.dispatchEvent(keydown)\n })\n })\n\n it('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {\n keyboard: true\n })\n\n const spy = spyOn(carousel, '_keydown').and.callThrough()\n\n carouselEl.addEventListener('keydown', event => {\n expect(spy).toHaveBeenCalled()\n expect(event.defaultPrevented).toBeFalse()\n resolve()\n })\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n\n carouselEl.dispatchEvent(keydown)\n })\n })\n\n it('should ignore keyboard events within s and ',\n ' ',\n '
',\n '
item 3
',\n ' ',\n ''\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const input = fixtureEl.querySelector('input')\n const textarea = fixtureEl.querySelector('textarea')\n const carousel = new Carousel(carouselEl, {\n keyboard: true\n })\n\n const spyKeydown = spyOn(carousel, '_keydown').and.callThrough()\n const spySlide = spyOn(carousel, '_slide')\n\n const keydown = createEvent('keydown', { bubbles: true, cancelable: true })\n keydown.key = 'ArrowRight'\n Object.defineProperty(keydown, 'target', {\n value: input,\n writable: true,\n configurable: true\n })\n\n input.dispatchEvent(keydown)\n\n expect(spyKeydown).toHaveBeenCalled()\n expect(spySlide).not.toHaveBeenCalled()\n\n spyKeydown.calls.reset()\n spySlide.calls.reset()\n\n Object.defineProperty(keydown, 'target', {\n value: textarea\n })\n textarea.dispatchEvent(keydown)\n\n expect(spyKeydown).toHaveBeenCalled()\n expect(spySlide).not.toHaveBeenCalled()\n })\n\n it('should not slide if arrow key is pressed and carousel is sliding', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(EventHandler, 'trigger')\n\n carousel._isSliding = true\n\n for (const key of ['ArrowLeft', 'ArrowRight']) {\n const keydown = createEvent('keydown')\n keydown.key = key\n\n carouselEl.dispatchEvent(keydown)\n }\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should wrap around from end to start when wrap option is true', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, { wrap: true })\n const getActiveId = () => carouselEl.querySelector('.carousel-item.active').getAttribute('id')\n\n carouselEl.addEventListener('slid.bs.carousel', event => {\n const activeId = getActiveId()\n\n if (activeId === 'two') {\n carousel.next()\n return\n }\n\n if (activeId === 'three') {\n carousel.next()\n return\n }\n\n if (activeId === 'one') {\n // carousel wrapped around and slid from 3rd to 1st slide\n expect(activeId).toEqual('one')\n expect(event.from + 1).toEqual(3)\n resolve()\n }\n })\n\n carousel.next()\n })\n })\n\n it('should stay at the start when the prev method is called and wrap is false', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const firstElement = fixtureEl.querySelector('#one')\n const carousel = new Carousel(carouselEl, { wrap: false })\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n reject(new Error('carousel slid when it should not have slid'))\n })\n\n carousel.prev()\n\n setTimeout(() => {\n expect(firstElement).toHaveClass('active')\n resolve()\n }, 10)\n })\n })\n\n it('should not add touch event listeners if touch = false', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n\n const spy = spyOn(Carousel.prototype, '_addTouchEventListeners')\n\n const carousel = new Carousel(carouselEl, {\n touch: false\n })\n\n expect(spy).not.toHaveBeenCalled()\n expect(carousel._swipeHelper).toBeNull()\n })\n\n it('should not add touch event listeners if touch supported = false', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n spyOn(Swipe, 'isSupported').and.returnValue(false)\n\n const carousel = new Carousel(carouselEl)\n EventHandler.off(carouselEl, Carousel.EVENT_KEY)\n\n const spy = spyOn(carousel, '_addTouchEventListeners')\n\n carousel._addEventListeners()\n\n expect(spy).not.toHaveBeenCalled()\n expect(carousel._swipeHelper).toBeNull()\n })\n\n it('should add touch event listeners by default', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n\n spyOn(Carousel.prototype, '_addTouchEventListeners')\n\n // Headless browser does not support touch events, so need to fake it\n // to test that touch events are add properly.\n document.documentElement.ontouchstart = noop\n const carousel = new Carousel(carouselEl)\n\n expect(carousel._addTouchEventListeners).toHaveBeenCalled()\n })\n\n it('should allow swiperight and call _slide (prev) with pointer events', () => {\n return new Promise(resolve => {\n if (!supportPointerEvent) {\n expect().nothing()\n resolve()\n return\n }\n\n document.documentElement.ontouchstart = noop\n document.head.append(stylesCarousel)\n Simulator.setType('pointer')\n\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const item = fixtureEl.querySelector('#item')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, '_slide').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', event => {\n expect(item).toHaveClass('active')\n expect(spy).toHaveBeenCalledWith('prev')\n expect(event.direction).toEqual('right')\n stylesCarousel.remove()\n delete document.documentElement.ontouchstart\n resolve()\n })\n\n Simulator.gestures.swipe(carouselEl, {\n deltaX: 300,\n deltaY: 0\n })\n })\n })\n\n it('should allow swipeleft and call next with pointer events', () => {\n return new Promise(resolve => {\n if (!supportPointerEvent) {\n expect().nothing()\n resolve()\n return\n }\n\n document.documentElement.ontouchstart = noop\n document.head.append(stylesCarousel)\n Simulator.setType('pointer')\n\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const item = fixtureEl.querySelector('#item')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, '_slide').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', event => {\n expect(item).not.toHaveClass('active')\n expect(spy).toHaveBeenCalledWith('next')\n expect(event.direction).toEqual('left')\n stylesCarousel.remove()\n delete document.documentElement.ontouchstart\n resolve()\n })\n\n Simulator.gestures.swipe(carouselEl, {\n pos: [300, 10],\n deltaX: -300,\n deltaY: 0\n })\n })\n })\n\n it('should allow swiperight and call _slide (prev) with touch events', () => {\n return new Promise(resolve => {\n Simulator.setType('touch')\n clearPointerEvents()\n document.documentElement.ontouchstart = noop\n\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const item = fixtureEl.querySelector('#item')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, '_slide').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', event => {\n expect(item).toHaveClass('active')\n expect(spy).toHaveBeenCalledWith('prev')\n expect(event.direction).toEqual('right')\n delete document.documentElement.ontouchstart\n restorePointerEvents()\n resolve()\n })\n\n Simulator.gestures.swipe(carouselEl, {\n deltaX: 300,\n deltaY: 0\n })\n })\n })\n\n it('should allow swipeleft and call _slide (next) with touch events', () => {\n return new Promise(resolve => {\n Simulator.setType('touch')\n clearPointerEvents()\n document.documentElement.ontouchstart = noop\n\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const item = fixtureEl.querySelector('#item')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, '_slide').and.callThrough()\n\n carouselEl.addEventListener('slid.bs.carousel', event => {\n expect(item).not.toHaveClass('active')\n expect(spy).toHaveBeenCalledWith('next')\n expect(event.direction).toEqual('left')\n delete document.documentElement.ontouchstart\n restorePointerEvents()\n resolve()\n })\n\n Simulator.gestures.swipe(carouselEl, {\n pos: [300, 10],\n deltaX: -300,\n deltaY: 0\n })\n })\n })\n\n it('should not slide when swiping and carousel is sliding', () => {\n return new Promise(resolve => {\n Simulator.setType('touch')\n clearPointerEvents()\n document.documentElement.ontouchstart = noop\n\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n ' \"\"',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const carousel = new Carousel(carouselEl)\n carousel._isSliding = true\n\n const spy = spyOn(EventHandler, 'trigger')\n\n Simulator.gestures.swipe(carouselEl, {\n deltaX: 300,\n deltaY: 0\n })\n\n Simulator.gestures.swipe(carouselEl, {\n pos: [300, 10],\n deltaX: -300,\n deltaY: 0\n })\n\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n delete document.documentElement.ontouchstart\n restorePointerEvents()\n resolve()\n }, 300)\n })\n })\n\n it('should not allow pinch with touch events', () => {\n return new Promise(resolve => {\n Simulator.setType('touch')\n clearPointerEvents()\n document.documentElement.ontouchstart = noop\n\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const carousel = new Carousel(carouselEl)\n\n Simulator.gestures.swipe(carouselEl, {\n pos: [300, 10],\n deltaX: -300,\n deltaY: 0,\n touches: 2\n }, () => {\n restorePointerEvents()\n delete document.documentElement.ontouchstart\n expect(carousel._swipeHelper._deltaX).toEqual(0)\n resolve()\n })\n })\n })\n\n it('should call pause method on mouse over with pause equal to hover', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, 'pause')\n\n const mouseOverEvent = createEvent('mouseover')\n carouselEl.dispatchEvent(mouseOverEvent)\n\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 10)\n })\n })\n\n it('should call `maybeEnableCycle` on mouse out with pause equal to hover', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const carousel = new Carousel(carouselEl)\n\n const spyEnable = spyOn(carousel, '_maybeEnableCycle').and.callThrough()\n const spyCycle = spyOn(carousel, 'cycle')\n\n const mouseOutEvent = createEvent('mouseout')\n carouselEl.dispatchEvent(mouseOutEvent)\n\n setTimeout(() => {\n expect(spyEnable).toHaveBeenCalled()\n expect(spyCycle).toHaveBeenCalled()\n resolve()\n }, 10)\n })\n })\n })\n\n describe('next', () => {\n it('should not slide if the carousel is sliding', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(EventHandler, 'trigger')\n\n carousel._isSliding = true\n carousel.next()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should not fire slid when slide is prevented', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n let slidEvent = false\n\n const doneTest = () => {\n setTimeout(() => {\n expect(slidEvent).toBeFalse()\n resolve()\n }, 20)\n }\n\n carouselEl.addEventListener('slide.bs.carousel', event => {\n event.preventDefault()\n doneTest()\n })\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n slidEvent = true\n })\n\n carousel.next()\n })\n })\n\n it('should fire slide event with: direction, relatedTarget, from and to', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n const onSlide = event => {\n expect(event.direction).toEqual('left')\n expect(event.relatedTarget).toHaveClass('carousel-item')\n expect(event.from).toEqual(0)\n expect(event.to).toEqual(1)\n\n carouselEl.removeEventListener('slide.bs.carousel', onSlide)\n carouselEl.addEventListener('slide.bs.carousel', onSlide2)\n\n carousel.prev()\n }\n\n const onSlide2 = event => {\n expect(event.direction).toEqual('right')\n resolve()\n }\n\n carouselEl.addEventListener('slide.bs.carousel', onSlide)\n carousel.next()\n })\n })\n\n it('should fire slid event with: direction, relatedTarget, from and to', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n const onSlid = event => {\n expect(event.direction).toEqual('left')\n expect(event.relatedTarget).toHaveClass('carousel-item')\n expect(event.from).toEqual(0)\n expect(event.to).toEqual(1)\n\n carouselEl.removeEventListener('slid.bs.carousel', onSlid)\n carouselEl.addEventListener('slid.bs.carousel', onSlid2)\n\n carousel.prev()\n }\n\n const onSlid2 = event => {\n expect(event.direction).toEqual('right')\n resolve()\n }\n\n carouselEl.addEventListener('slid.bs.carousel', onSlid)\n carousel.next()\n })\n })\n\n it('should update the active element to the next item before sliding', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const secondItemEl = fixtureEl.querySelector('#secondItem')\n const carousel = new Carousel(carouselEl)\n\n carousel.next()\n\n expect(carousel._activeElement).toEqual(secondItemEl)\n })\n\n it('should continue cycling if it was already', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl)\n const spy = spyOn(carousel, 'cycle')\n\n carousel.next()\n expect(spy).not.toHaveBeenCalled()\n\n carousel.cycle()\n carousel.next()\n expect(spy).toHaveBeenCalledTimes(1)\n })\n\n it('should update indicators if present', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n ' ',\n ' ',\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const firstIndicator = fixtureEl.querySelector('#firstIndicator')\n const secondIndicator = fixtureEl.querySelector('#secondIndicator')\n const carousel = new Carousel(carouselEl)\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n expect(firstIndicator).not.toHaveClass('active')\n expect(firstIndicator.hasAttribute('aria-current')).toBeFalse()\n expect(secondIndicator).toHaveClass('active')\n expect(secondIndicator.getAttribute('aria-current')).toEqual('true')\n resolve()\n })\n\n carousel.next()\n })\n })\n\n it('should call next()/prev() instance methods when clicking the respective direction buttons', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#carousel')\n const prevBtnEl = fixtureEl.querySelector('.carousel-control-prev')\n const nextBtnEl = fixtureEl.querySelector('.carousel-control-next')\n\n const carousel = new Carousel(carouselEl)\n const nextSpy = spyOn(carousel, 'next')\n const prevSpy = spyOn(carousel, 'prev')\n const spyEnable = spyOn(carousel, '_maybeEnableCycle')\n\n nextBtnEl.click()\n prevBtnEl.click()\n\n expect(nextSpy).toHaveBeenCalled()\n expect(prevSpy).toHaveBeenCalled()\n expect(spyEnable).toHaveBeenCalled()\n })\n })\n\n describe('nextWhenVisible', () => {\n it('should not call next when the page is not visible', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('.carousel')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(carousel, 'next')\n\n carousel.nextWhenVisible()\n\n expect(spy).not.toHaveBeenCalled()\n })\n })\n\n describe('prev', () => {\n it('should not slide if the carousel is sliding', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(EventHandler, 'trigger')\n\n carousel._isSliding = true\n carousel.prev()\n\n expect(spy).not.toHaveBeenCalled()\n })\n })\n\n describe('pause', () => {\n it('should trigger transitionend if the carousel have carousel-item-next or carousel-item-prev class, cause is sliding', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl)\n const spy = spyOn(carousel, '_clearInterval')\n\n carouselEl.addEventListener('transitionend', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n carousel._slide('next')\n carousel.pause()\n })\n })\n })\n\n describe('cycle', () => {\n it('should set an interval', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl)\n\n const spy = spyOn(window, 'setInterval').and.callThrough()\n\n carousel.cycle()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should clear interval if there is one', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl)\n\n carousel._interval = setInterval(noop, 10)\n\n const spySet = spyOn(window, 'setInterval').and.callThrough()\n const spyClear = spyOn(window, 'clearInterval').and.callThrough()\n\n carousel.cycle()\n\n expect(spySet).toHaveBeenCalled()\n expect(spyClear).toHaveBeenCalled()\n })\n\n it('should get interval from data attribute on the active item element', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const secondItemEl = fixtureEl.querySelector('#secondItem')\n const carousel = new Carousel(carouselEl, {\n interval: 1814\n })\n\n expect(carousel._config.interval).toEqual(1814)\n\n carousel.cycle()\n\n expect(carousel._config.interval).toEqual(7)\n\n carousel._activeElement = secondItemEl\n carousel.cycle()\n\n expect(carousel._config.interval).toEqual(9385)\n })\n })\n\n describe('to', () => {\n it('should go directly to the provided index', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item1'))\n\n carousel.to(2)\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item3'))\n resolve()\n })\n })\n })\n\n it('should return to a previous slide if the provided index is lower than the current', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item3'))\n\n carousel.to(1)\n\n carouselEl.addEventListener('slid.bs.carousel', () => {\n expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))\n resolve()\n })\n })\n })\n\n it('should do nothing if a wrong index is provided', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(carousel, '_slide')\n\n carousel.to(25)\n\n expect(spy).not.toHaveBeenCalled()\n\n spy.calls.reset()\n\n carousel.to(-5)\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should not continue if the provided is the same compare to the current one', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(carousel, '_slide')\n\n carousel.to(0)\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should wait before performing to if a slide is sliding', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const carousel = new Carousel(carouselEl, {})\n\n const spyOne = spyOn(EventHandler, 'one').and.callThrough()\n const spySlide = spyOn(carousel, '_slide')\n\n carousel._isSliding = true\n carousel.to(1)\n\n expect(spySlide).not.toHaveBeenCalled()\n expect(spyOne).toHaveBeenCalled()\n\n const spyTo = spyOn(carousel, 'to')\n\n EventHandler.trigger(carouselEl, 'slid.bs.carousel')\n\n setTimeout(() => {\n expect(spyTo).toHaveBeenCalledWith(1)\n resolve()\n })\n })\n })\n })\n\n describe('rtl function', () => {\n it('\"_directionToOrder\" and \"_orderToDirection\" must return the right results', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n\n expect(carousel._directionToOrder('left')).toEqual('next')\n expect(carousel._directionToOrder('right')).toEqual('prev')\n\n expect(carousel._orderToDirection('next')).toEqual('left')\n expect(carousel._orderToDirection('prev')).toEqual('right')\n })\n\n it('\"_directionToOrder\" and \"_orderToDirection\" must return the right results when rtl=true', () => {\n document.documentElement.dir = 'rtl'\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n expect(isRTL()).toBeTrue()\n\n expect(carousel._directionToOrder('left')).toEqual('prev')\n expect(carousel._directionToOrder('right')).toEqual('next')\n\n expect(carousel._orderToDirection('next')).toEqual('right')\n expect(carousel._orderToDirection('prev')).toEqual('left')\n document.documentElement.dir = 'ltl'\n })\n\n it('\"_slide\" has to call _directionToOrder and \"_orderToDirection\"', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n\n const spy = spyOn(carousel, '_orderToDirection').and.callThrough()\n\n carousel._slide(carousel._directionToOrder('left'))\n expect(spy).toHaveBeenCalledWith('next')\n\n carousel._slide(carousel._directionToOrder('right'))\n expect(spy).toHaveBeenCalledWith('prev')\n })\n\n it('\"_slide\" has to call \"_directionToOrder\" and \"_orderToDirection\" when rtl=true', () => {\n document.documentElement.dir = 'rtl'\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const carousel = new Carousel(carouselEl, {})\n const spy = spyOn(carousel, '_orderToDirection').and.callThrough()\n\n carousel._slide(carousel._directionToOrder('left'))\n expect(spy).toHaveBeenCalledWith('prev')\n\n carousel._slide(carousel._directionToOrder('right'))\n expect(spy).toHaveBeenCalledWith('next')\n\n document.documentElement.dir = 'ltl'\n })\n })\n\n describe('dispose', () => {\n it('should destroy a carousel', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
'\n ].join('')\n\n const carouselEl = fixtureEl.querySelector('#myCarousel')\n const addEventSpy = spyOn(carouselEl, 'addEventListener').and.callThrough()\n const removeEventSpy = spyOn(EventHandler, 'off').and.callThrough()\n\n // Headless browser does not support touch events, so need to fake it\n // to test that touch events are add/removed properly.\n document.documentElement.ontouchstart = noop\n\n const carousel = new Carousel(carouselEl)\n const swipeHelperSpy = spyOn(carousel._swipeHelper, 'dispose').and.callThrough()\n\n const expectedArgs = [\n ['keydown', jasmine.any(Function), jasmine.any(Boolean)],\n ['mouseover', jasmine.any(Function), jasmine.any(Boolean)],\n ['mouseout', jasmine.any(Function), jasmine.any(Boolean)],\n ...(carousel._swipeHelper._supportPointerEvents ?\n [\n ['pointerdown', jasmine.any(Function), jasmine.any(Boolean)],\n ['pointerup', jasmine.any(Function), jasmine.any(Boolean)]\n ] :\n [\n ['touchstart', jasmine.any(Function), jasmine.any(Boolean)],\n ['touchmove', jasmine.any(Function), jasmine.any(Boolean)],\n ['touchend', jasmine.any(Function), jasmine.any(Boolean)]\n ])\n ]\n\n expect(addEventSpy.calls.allArgs()).toEqual(expectedArgs)\n\n carousel.dispose()\n\n expect(carousel._swipeHelper).toBeNull()\n expect(removeEventSpy).toHaveBeenCalledWith(carouselEl, Carousel.EVENT_KEY)\n expect(swipeHelperSpy).toHaveBeenCalled()\n\n delete document.documentElement.ontouchstart\n })\n })\n\n describe('getInstance', () => {\n it('should return carousel instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const carousel = new Carousel(div)\n\n expect(Carousel.getInstance(div)).toEqual(carousel)\n expect(Carousel.getInstance(div)).toBeInstanceOf(Carousel)\n })\n\n it('should return null when there is no carousel instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Carousel.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return carousel instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const carousel = new Carousel(div)\n\n expect(Carousel.getOrCreateInstance(div)).toEqual(carousel)\n expect(Carousel.getInstance(div)).toEqual(Carousel.getOrCreateInstance(div, {}))\n expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel)\n })\n\n it('should return new instance when there is no carousel instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Carousel.getInstance(div)).toBeNull()\n expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel)\n })\n\n it('should return new instance when there is no carousel instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Carousel.getInstance(div)).toBeNull()\n const carousel = Carousel.getOrCreateInstance(div, {\n interval: 1\n })\n expect(carousel).toBeInstanceOf(Carousel)\n\n expect(carousel._config.interval).toEqual(1)\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const carousel = new Carousel(div, {\n interval: 1\n })\n expect(Carousel.getInstance(div)).toEqual(carousel)\n\n const carousel2 = Carousel.getOrCreateInstance(div, {\n interval: 2\n })\n expect(carousel).toBeInstanceOf(Carousel)\n expect(carousel2).toEqual(carousel)\n\n expect(carousel2._config.interval).toEqual(1)\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a carousel', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.carousel = Carousel.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.carousel.call(jQueryMock)\n\n expect(Carousel.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a carousel', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const carousel = new Carousel(div)\n\n jQueryMock.fn.carousel = Carousel.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.carousel.call(jQueryMock)\n\n expect(Carousel.getInstance(div)).toEqual(carousel)\n })\n\n it('should call to if the config is a number', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const carousel = new Carousel(div)\n const slideTo = 2\n\n const spy = spyOn(carousel, 'to')\n\n jQueryMock.fn.carousel = Carousel.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.carousel.call(jQueryMock, slideTo)\n\n expect(spy).toHaveBeenCalledWith(slideTo)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.carousel = Carousel.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.carousel.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('data-api', () => {\n it('should init carousels with data-bs-ride=\"carousel\" on load', () => {\n fixtureEl.innerHTML = '
'\n\n const carouselEl = fixtureEl.querySelector('div')\n const loadEvent = createEvent('load')\n\n window.dispatchEvent(loadEvent)\n const carousel = Carousel.getInstance(carouselEl)\n expect(carousel._interval).not.toBeNull()\n })\n\n it('should create carousel and go to the next slide on click (with real button controls)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const next = fixtureEl.querySelector('#next')\n const item2 = fixtureEl.querySelector('#item2')\n\n next.click()\n\n setTimeout(() => {\n expect(item2).toHaveClass('active')\n resolve()\n }, 10)\n })\n })\n\n it('should create carousel and go to the next slide on click (using links as controls)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const next = fixtureEl.querySelector('#next')\n const item2 = fixtureEl.querySelector('#item2')\n\n next.click()\n\n setTimeout(() => {\n expect(item2).toHaveClass('active')\n resolve()\n }, 10)\n })\n })\n\n it('should create carousel and go to the next slide on click with data-bs-slide-to', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n '
',\n '
'\n ].join('')\n\n const next = fixtureEl.querySelector('#next')\n const item2 = fixtureEl.querySelector('#item2')\n\n next.click()\n\n setTimeout(() => {\n expect(item2).toHaveClass('active')\n expect(Carousel.getInstance('#myCarousel')._interval).not.toBeNull()\n resolve()\n }, 10)\n })\n })\n\n it('should do nothing if no selector on click on arrows', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const next = fixtureEl.querySelector('#next')\n\n next.click()\n\n expect().nothing()\n })\n\n it('should do nothing if no carousel class on click on arrows', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
item 1
',\n '
item 2
',\n '
item 3
',\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const next = fixtureEl.querySelector('#next')\n\n next.click()\n\n expect().nothing()\n })\n })\n})\n" }, { "path": "js/tests/unit/collapse.spec.js", "content": "import Collapse from '../../src/collapse.js'\nimport EventHandler from '../../src/dom/event-handler.js'\nimport { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'\n\ndescribe('Collapse', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Collapse.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Collapse.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Collapse.DATA_KEY).toEqual('bs.collapse')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div.my-collapse')\n const collapseBySelector = new Collapse('div.my-collapse')\n const collapseByElement = new Collapse(collapseEl)\n\n expect(collapseBySelector._element).toEqual(collapseEl)\n expect(collapseByElement._element).toEqual(collapseEl)\n })\n\n it('should allow jquery object in parent config', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Toggle item',\n '
Lorem ipsum
',\n '
',\n '
'\n ].join('')\n\n const collapseEl = fixtureEl.querySelector('div.collapse')\n const myCollapseEl = fixtureEl.querySelector('.my-collapse')\n const fakejQueryObject = {\n 0: myCollapseEl,\n jquery: 'foo'\n }\n const collapse = new Collapse(collapseEl, {\n parent: fakejQueryObject\n })\n\n expect(collapse._config.parent).toEqual(myCollapseEl)\n })\n\n it('should allow non jquery object in parent config', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Toggle item',\n '
Lorem ipsum
',\n '
',\n '
'\n ].join('')\n\n const collapseEl = fixtureEl.querySelector('div.collapse')\n const myCollapseEl = fixtureEl.querySelector('.my-collapse')\n const collapse = new Collapse(collapseEl, {\n parent: myCollapseEl\n })\n\n expect(collapse._config.parent).toEqual(myCollapseEl)\n })\n\n it('should allow string selector in parent config', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Toggle item',\n '
Lorem ipsum
',\n '
',\n '
'\n ].join('')\n\n const collapseEl = fixtureEl.querySelector('div.collapse')\n const myCollapseEl = fixtureEl.querySelector('.my-collapse')\n const collapse = new Collapse(collapseEl, {\n parent: 'div.my-collapse'\n })\n\n expect(collapse._config.parent).toEqual(myCollapseEl)\n })\n })\n\n describe('toggle', () => {\n it('should call show method if show class is not present', () => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl)\n\n const spy = spyOn(collapse, 'show')\n\n collapse.toggle()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should call hide method if show class is present', () => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('.show')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n const spy = spyOn(collapse, 'hide')\n\n collapse.toggle()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should find collapse children if they have collapse class too not only data-bs-parent', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Toggle item 1',\n '
Lorem ipsum 1
',\n '
',\n '
',\n ' Toggle item 2',\n '
Lorem ipsum 2
',\n '
',\n '
'\n ].join('')\n\n const parent = fixtureEl.querySelector('.my-collapse')\n const collapseEl1 = fixtureEl.querySelector('#collapse1')\n const collapseEl2 = fixtureEl.querySelector('#collapse2')\n\n const collapseList = [].concat(...fixtureEl.querySelectorAll('.collapse'))\n .map(el => new Collapse(el, {\n parent,\n toggle: false\n }))\n\n collapseEl2.addEventListener('shown.bs.collapse', () => {\n expect(collapseEl2).toHaveClass('show')\n expect(collapseEl1).not.toHaveClass('show')\n resolve()\n })\n\n collapseList[1].toggle()\n })\n })\n })\n\n describe('show', () => {\n it('should do nothing if is transitioning', () => {\n fixtureEl.innerHTML = '
'\n\n const spy = spyOn(EventHandler, 'trigger')\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapse._isTransitioning = true\n collapse.show()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should do nothing if already shown', () => {\n fixtureEl.innerHTML = '
'\n\n const spy = spyOn(EventHandler, 'trigger')\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapse.show()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should show a collapsed element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapseEl.addEventListener('show.bs.collapse', () => {\n expect(collapseEl.style.height).toEqual('0px')\n })\n collapseEl.addEventListener('shown.bs.collapse', () => {\n expect(collapseEl).toHaveClass('show')\n expect(collapseEl.style.height).toEqual('')\n resolve()\n })\n\n collapse.show()\n })\n })\n\n it('should show a collapsed element on width', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapseEl.addEventListener('show.bs.collapse', () => {\n expect(collapseEl.style.width).toEqual('0px')\n })\n collapseEl.addEventListener('shown.bs.collapse', () => {\n expect(collapseEl).toHaveClass('show')\n expect(collapseEl.style.width).toEqual('')\n resolve()\n })\n\n collapse.show()\n })\n })\n\n it('should collapse only the first collapse', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const el1 = fixtureEl.querySelector('#collapse1')\n const el2 = fixtureEl.querySelector('#collapse2')\n const collapse = new Collapse(el1, {\n toggle: false\n })\n\n el1.addEventListener('shown.bs.collapse', () => {\n expect(el1).toHaveClass('show')\n expect(el2).toHaveClass('show')\n resolve()\n })\n\n collapse.show()\n })\n })\n\n it('should be able to handle toggling of other children siblings', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
content
',\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
content
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const el = selector => fixtureEl.querySelector(selector)\n\n const parentBtn = el('[data-bs-target=\"#parentContent\"]')\n const childBtn1 = el('[data-bs-target=\"#childContent1\"]')\n const childBtn2 = el('[data-bs-target=\"#childContent2\"]')\n\n const parentCollapseEl = el('#parentContent')\n const childCollapseEl1 = el('#childContent1')\n const childCollapseEl2 = el('#childContent2')\n\n parentCollapseEl.addEventListener('shown.bs.collapse', () => {\n expect(parentCollapseEl).toHaveClass('show')\n childBtn1.click()\n })\n childCollapseEl1.addEventListener('shown.bs.collapse', () => {\n expect(childCollapseEl1).toHaveClass('show')\n childBtn2.click()\n })\n childCollapseEl2.addEventListener('shown.bs.collapse', () => {\n expect(childCollapseEl2).toHaveClass('show')\n expect(childCollapseEl1).not.toHaveClass('show')\n resolve()\n })\n\n parentBtn.click()\n })\n })\n\n it('should not change tab tabpanels descendants on accordion', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '

',\n ' ',\n '

',\n '
',\n '
',\n ' ',\n '
',\n '
Home
',\n '
Profile
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const el = fixtureEl.querySelector('#collapseOne')\n const activeTabPane = fixtureEl.querySelector('#nav-home')\n const collapse = new Collapse(el)\n let times = 1\n\n el.addEventListener('hidden.bs.collapse', () => {\n collapse.show()\n })\n\n el.addEventListener('shown.bs.collapse', () => {\n expect(activeTabPane).toHaveClass('show')\n times++\n if (times === 2) {\n resolve()\n }\n\n collapse.hide()\n })\n\n collapse.show()\n })\n })\n\n it('should not fire shown when show is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n const expectEnd = () => {\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n }\n\n collapseEl.addEventListener('show.bs.collapse', event => {\n event.preventDefault()\n expectEnd()\n })\n\n collapseEl.addEventListener('shown.bs.collapse', () => {\n reject(new Error('should not fire shown event'))\n })\n\n collapse.show()\n })\n })\n })\n\n describe('hide', () => {\n it('should do nothing if is transitioning', () => {\n fixtureEl.innerHTML = '
'\n\n const spy = spyOn(EventHandler, 'trigger')\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapse._isTransitioning = true\n collapse.hide()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should do nothing if already shown', () => {\n fixtureEl.innerHTML = '
'\n\n const spy = spyOn(EventHandler, 'trigger')\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapse.hide()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should hide a collapsed element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n collapseEl.addEventListener('hidden.bs.collapse', () => {\n expect(collapseEl).not.toHaveClass('show')\n expect(collapseEl.style.height).toEqual('')\n resolve()\n })\n\n collapse.hide()\n })\n })\n\n it('should not fire hidden when hide is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n const expectEnd = () => {\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n }\n\n collapseEl.addEventListener('hide.bs.collapse', event => {\n event.preventDefault()\n expectEnd()\n })\n\n collapseEl.addEventListener('hidden.bs.collapse', () => {\n reject(new Error('should not fire hidden event'))\n })\n\n collapse.hide()\n })\n })\n })\n\n describe('dispose', () => {\n it('should destroy a collapse', () => {\n fixtureEl.innerHTML = '
'\n\n const collapseEl = fixtureEl.querySelector('div')\n const collapse = new Collapse(collapseEl, {\n toggle: false\n })\n\n expect(Collapse.getInstance(collapseEl)).toEqual(collapse)\n\n collapse.dispose()\n\n expect(Collapse.getInstance(collapseEl)).toBeNull()\n })\n })\n\n describe('data-api', () => {\n it('should prevent url change if click on nested elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n ' ',\n '',\n '
'\n ].join('')\n\n const triggerEl = fixtureEl.querySelector('a')\n const nestedTriggerEl = fixtureEl.querySelector('#nested')\n\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n triggerEl.addEventListener('click', event => {\n expect(event.target.isEqualNode(nestedTriggerEl)).toBeTrue()\n expect(event.delegateTarget.isEqualNode(triggerEl)).toBeTrue()\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n nestedTriggerEl.click()\n })\n })\n\n it('should show multiple collapsed elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('a')\n const collapse1 = fixtureEl.querySelector('#collapse1')\n const collapse2 = fixtureEl.querySelector('#collapse2')\n\n collapse2.addEventListener('shown.bs.collapse', () => {\n expect(trigger.getAttribute('aria-expanded')).toEqual('true')\n expect(trigger).not.toHaveClass('collapsed')\n expect(collapse1).toHaveClass('show')\n expect(collapse1).toHaveClass('show')\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should hide multiple collapsed elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('a')\n const collapse1 = fixtureEl.querySelector('#collapse1')\n const collapse2 = fixtureEl.querySelector('#collapse2')\n\n collapse2.addEventListener('hidden.bs.collapse', () => {\n expect(trigger.getAttribute('aria-expanded')).toEqual('false')\n expect(trigger).toHaveClass('collapsed')\n expect(collapse1).not.toHaveClass('show')\n expect(collapse1).not.toHaveClass('show')\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should remove \"collapsed\" class from target when collapse is shown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '',\n '
'\n ].join('')\n\n const link1 = fixtureEl.querySelector('#link1')\n const link2 = fixtureEl.querySelector('#link2')\n const collapseTest1 = fixtureEl.querySelector('#test1')\n\n collapseTest1.addEventListener('shown.bs.collapse', () => {\n expect(link1.getAttribute('aria-expanded')).toEqual('true')\n expect(link2.getAttribute('aria-expanded')).toEqual('true')\n expect(link1).not.toHaveClass('collapsed')\n expect(link2).not.toHaveClass('collapsed')\n resolve()\n })\n\n link1.click()\n })\n })\n\n it('should add \"collapsed\" class to target when collapse is hidden', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '',\n '
'\n ].join('')\n\n const link1 = fixtureEl.querySelector('#link1')\n const link2 = fixtureEl.querySelector('#link2')\n const collapseTest1 = fixtureEl.querySelector('#test1')\n\n collapseTest1.addEventListener('hidden.bs.collapse', () => {\n expect(link1.getAttribute('aria-expanded')).toEqual('false')\n expect(link2.getAttribute('aria-expanded')).toEqual('false')\n expect(link1).toHaveClass('collapsed')\n expect(link2).toHaveClass('collapsed')\n resolve()\n })\n\n link1.click()\n })\n })\n\n it('should allow accordion to use children other than card', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('#linkTrigger')\n const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo')\n const collapseOne = fixtureEl.querySelector('#collapseOne')\n const collapseTwo = fixtureEl.querySelector('#collapseTwo')\n\n collapseOne.addEventListener('shown.bs.collapse', () => {\n expect(collapseOne).toHaveClass('show')\n expect(collapseTwo).not.toHaveClass('show')\n\n collapseTwo.addEventListener('shown.bs.collapse', () => {\n expect(collapseOne).not.toHaveClass('show')\n expect(collapseTwo).toHaveClass('show')\n resolve()\n })\n\n triggerTwo.click()\n })\n\n trigger.click()\n })\n })\n\n it('should not prevent event for input', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const target = fixtureEl.querySelector('input')\n const collapseEl = fixtureEl.querySelector('#collapsediv1')\n\n collapseEl.addEventListener('shown.bs.collapse', () => {\n expect(collapseEl).toHaveClass('show')\n expect(target.checked).toBeTrue()\n resolve()\n })\n\n target.click()\n })\n })\n\n it('should allow accordion to contain nested elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerEl = fixtureEl.querySelector('#linkTrigger')\n const triggerTwoEl = fixtureEl.querySelector('#linkTriggerTwo')\n const collapseOneEl = fixtureEl.querySelector('#collapseOne')\n const collapseTwoEl = fixtureEl.querySelector('#collapseTwo')\n\n collapseOneEl.addEventListener('shown.bs.collapse', () => {\n expect(collapseOneEl).toHaveClass('show')\n expect(triggerEl).not.toHaveClass('collapsed')\n expect(triggerEl.getAttribute('aria-expanded')).toEqual('true')\n\n expect(collapseTwoEl).not.toHaveClass('show')\n expect(triggerTwoEl).toHaveClass('collapsed')\n expect(triggerTwoEl.getAttribute('aria-expanded')).toEqual('false')\n\n collapseTwoEl.addEventListener('shown.bs.collapse', () => {\n expect(collapseOneEl).not.toHaveClass('show')\n expect(triggerEl).toHaveClass('collapsed')\n expect(triggerEl.getAttribute('aria-expanded')).toEqual('false')\n\n expect(collapseTwoEl).toHaveClass('show')\n expect(triggerTwoEl).not.toHaveClass('collapsed')\n expect(triggerTwoEl.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n triggerTwoEl.click()\n })\n\n triggerEl.click()\n })\n })\n\n it('should allow accordion to target multiple elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('#linkTriggerOne')\n const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo')\n const collapseOneOne = fixtureEl.querySelector('#collapseOneOne')\n const collapseOneTwo = fixtureEl.querySelector('#collapseOneTwo')\n const collapseTwoOne = fixtureEl.querySelector('#collapseTwoOne')\n const collapseTwoTwo = fixtureEl.querySelector('#collapseTwoTwo')\n const collapsedElements = {\n one: false,\n two: false\n }\n\n function firstTest() {\n expect(collapseOneOne).toHaveClass('show')\n expect(collapseOneTwo).toHaveClass('show')\n\n expect(collapseTwoOne).not.toHaveClass('show')\n expect(collapseTwoTwo).not.toHaveClass('show')\n\n triggerTwo.click()\n }\n\n function secondTest() {\n expect(collapseOneOne).not.toHaveClass('show')\n expect(collapseOneTwo).not.toHaveClass('show')\n\n expect(collapseTwoOne).toHaveClass('show')\n expect(collapseTwoTwo).toHaveClass('show')\n resolve()\n }\n\n collapseOneOne.addEventListener('shown.bs.collapse', () => {\n if (collapsedElements.one) {\n firstTest()\n } else {\n collapsedElements.one = true\n }\n })\n\n collapseOneTwo.addEventListener('shown.bs.collapse', () => {\n if (collapsedElements.one) {\n firstTest()\n } else {\n collapsedElements.one = true\n }\n })\n\n collapseTwoOne.addEventListener('shown.bs.collapse', () => {\n if (collapsedElements.two) {\n secondTest()\n } else {\n collapsedElements.two = true\n }\n })\n\n collapseTwoTwo.addEventListener('shown.bs.collapse', () => {\n if (collapsedElements.two) {\n secondTest()\n } else {\n collapsedElements.two = true\n }\n })\n\n trigger.click()\n })\n })\n\n it('should collapse accordion children but not nested accordion children', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('#linkTrigger')\n const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo')\n const nestedTrigger = fixtureEl.querySelector('#nestedLinkTrigger')\n const collapseOne = fixtureEl.querySelector('#collapseOne')\n const collapseTwo = fixtureEl.querySelector('#collapseTwo')\n const nestedCollapseOne = fixtureEl.querySelector('#nestedCollapseOne')\n\n function handlerCollapseOne() {\n expect(collapseOne).toHaveClass('show')\n expect(collapseTwo).not.toHaveClass('show')\n expect(nestedCollapseOne).not.toHaveClass('show')\n\n nestedCollapseOne.addEventListener('shown.bs.collapse', handlerNestedCollapseOne)\n nestedTrigger.click()\n collapseOne.removeEventListener('shown.bs.collapse', handlerCollapseOne)\n }\n\n function handlerNestedCollapseOne() {\n expect(collapseOne).toHaveClass('show')\n expect(collapseTwo).not.toHaveClass('show')\n expect(nestedCollapseOne).toHaveClass('show')\n\n collapseTwo.addEventListener('shown.bs.collapse', () => {\n expect(collapseOne).not.toHaveClass('show')\n expect(collapseTwo).toHaveClass('show')\n expect(nestedCollapseOne).toHaveClass('show')\n resolve()\n })\n\n triggerTwo.click()\n nestedCollapseOne.removeEventListener('shown.bs.collapse', handlerNestedCollapseOne)\n }\n\n collapseOne.addEventListener('shown.bs.collapse', handlerCollapseOne)\n trigger.click()\n })\n })\n\n it('should add \"collapsed\" class and set aria-expanded to triggers only when all the targeted collapse are hidden', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '',\n '',\n '
',\n '
'\n ].join('')\n\n const trigger1 = fixtureEl.querySelector('#trigger1')\n const trigger2 = fixtureEl.querySelector('#trigger2')\n const trigger3 = fixtureEl.querySelector('#trigger3')\n const target1 = fixtureEl.querySelector('#test1')\n const target2 = fixtureEl.querySelector(`#${CSS.escape('0/my/id')}`)\n\n const target2Shown = () => {\n expect(trigger1).not.toHaveClass('collapsed')\n expect(trigger1.getAttribute('aria-expanded')).toEqual('true')\n\n expect(trigger2).not.toHaveClass('collapsed')\n expect(trigger2.getAttribute('aria-expanded')).toEqual('true')\n\n expect(trigger3).not.toHaveClass('collapsed')\n expect(trigger3.getAttribute('aria-expanded')).toEqual('true')\n\n target2.addEventListener('hidden.bs.collapse', () => {\n expect(trigger1).not.toHaveClass('collapsed')\n expect(trigger1.getAttribute('aria-expanded')).toEqual('true')\n\n expect(trigger2).toHaveClass('collapsed')\n expect(trigger2.getAttribute('aria-expanded')).toEqual('false')\n\n expect(trigger3).not.toHaveClass('collapsed')\n expect(trigger3.getAttribute('aria-expanded')).toEqual('true')\n\n target1.addEventListener('hidden.bs.collapse', () => {\n expect(trigger1).toHaveClass('collapsed')\n expect(trigger1.getAttribute('aria-expanded')).toEqual('false')\n\n expect(trigger2).toHaveClass('collapsed')\n expect(trigger2.getAttribute('aria-expanded')).toEqual('false')\n\n expect(trigger3).toHaveClass('collapsed')\n expect(trigger3.getAttribute('aria-expanded')).toEqual('false')\n resolve()\n })\n\n trigger1.click()\n })\n\n trigger2.click()\n }\n\n target2.addEventListener('shown.bs.collapse', target2Shown)\n trigger3.click()\n })\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a collapse', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.collapse = Collapse.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.collapse.call(jQueryMock)\n\n expect(Collapse.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a collapse', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const collapse = new Collapse(div)\n\n jQueryMock.fn.collapse = Collapse.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.collapse.call(jQueryMock)\n\n expect(Collapse.getInstance(div)).toEqual(collapse)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.collapse = Collapse.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.collapse.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return collapse instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const collapse = new Collapse(div)\n\n expect(Collapse.getInstance(div)).toEqual(collapse)\n expect(Collapse.getInstance(div)).toBeInstanceOf(Collapse)\n })\n\n it('should return null when there is no collapse instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Collapse.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return collapse instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const collapse = new Collapse(div)\n\n expect(Collapse.getOrCreateInstance(div)).toEqual(collapse)\n expect(Collapse.getInstance(div)).toEqual(Collapse.getOrCreateInstance(div, {}))\n expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse)\n })\n\n it('should return new instance when there is no collapse instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Collapse.getInstance(div)).toBeNull()\n expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse)\n })\n\n it('should return new instance when there is no collapse instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Collapse.getInstance(div)).toBeNull()\n const collapse = Collapse.getOrCreateInstance(div, {\n toggle: false\n })\n expect(collapse).toBeInstanceOf(Collapse)\n\n expect(collapse._config.toggle).toBeFalse()\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const collapse = new Collapse(div, {\n toggle: false\n })\n expect(Collapse.getInstance(div)).toEqual(collapse)\n\n const collapse2 = Collapse.getOrCreateInstance(div, {\n toggle: true\n })\n expect(collapse).toBeInstanceOf(Collapse)\n expect(collapse2).toEqual(collapse)\n\n expect(collapse2._config.toggle).toBeFalse()\n })\n })\n})\n" }, { "path": "js/tests/unit/dom/data.spec.js", "content": "import Data from '../../../src/dom/data.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\ndescribe('Data', () => {\n const TEST_KEY = 'bs.test'\n const UNKNOWN_KEY = 'bs.unknown'\n const TEST_DATA = {\n test: 'bsData'\n }\n\n let fixtureEl\n let div\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n beforeEach(() => {\n fixtureEl.innerHTML = '
'\n div = fixtureEl.querySelector('div')\n })\n\n afterEach(() => {\n Data.remove(div, TEST_KEY)\n clearFixture()\n })\n\n it('should return null for unknown elements', () => {\n const data = { ...TEST_DATA }\n\n Data.set(div, TEST_KEY, data)\n\n expect(Data.get(null)).toBeNull()\n expect(Data.get(undefined)).toBeNull()\n expect(Data.get(document.createElement('div'), TEST_KEY)).toBeNull()\n })\n\n it('should return null for unknown keys', () => {\n const data = { ...TEST_DATA }\n\n Data.set(div, TEST_KEY, data)\n\n expect(Data.get(div, null)).toBeNull()\n expect(Data.get(div, undefined)).toBeNull()\n expect(Data.get(div, UNKNOWN_KEY)).toBeNull()\n })\n\n it('should store data for an element with a given key and return it', () => {\n const data = { ...TEST_DATA }\n\n Data.set(div, TEST_KEY, data)\n\n expect(Data.get(div, TEST_KEY)).toEqual(data)\n })\n\n it('should overwrite data if something is already stored', () => {\n const data = { ...TEST_DATA }\n const copy = { ...data }\n\n Data.set(div, TEST_KEY, data)\n Data.set(div, TEST_KEY, copy)\n\n // Using `toBe` since spread creates a shallow copy\n expect(Data.get(div, TEST_KEY)).not.toBe(data)\n expect(Data.get(div, TEST_KEY)).toBe(copy)\n })\n\n it('should do nothing when an element has nothing stored', () => {\n Data.remove(div, TEST_KEY)\n\n expect().nothing()\n })\n\n it('should remove nothing for an unknown key', () => {\n const data = { ...TEST_DATA }\n\n Data.set(div, TEST_KEY, data)\n Data.remove(div, UNKNOWN_KEY)\n\n expect(Data.get(div, TEST_KEY)).toEqual(data)\n })\n\n it('should remove data for a given key', () => {\n const data = { ...TEST_DATA }\n\n Data.set(div, TEST_KEY, data)\n Data.remove(div, TEST_KEY)\n\n expect(Data.get(div, TEST_KEY)).toBeNull()\n })\n\n it('should console.error a message if called with multiple keys', () => {\n console.error = jasmine.createSpy('console.error')\n\n const data = { ...TEST_DATA }\n const copy = { ...data }\n\n Data.set(div, TEST_KEY, data)\n Data.set(div, UNKNOWN_KEY, copy)\n\n expect(console.error).toHaveBeenCalled()\n expect(Data.get(div, UNKNOWN_KEY)).toBeNull()\n })\n})\n" }, { "path": "js/tests/unit/dom/event-handler.spec.js", "content": "import EventHandler from '../../../src/dom/event-handler.js'\nimport { noop } from '../../../src/util/index.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\ndescribe('EventHandler', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('on', () => {\n it('should not add event listener if the event is not a string', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n EventHandler.on(div, null, noop)\n EventHandler.on(null, 'click', noop)\n\n expect().nothing()\n })\n\n it('should add event listener', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n EventHandler.on(div, 'click', () => {\n expect().nothing()\n resolve()\n })\n\n div.click()\n })\n })\n\n it('should add namespaced event listener', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n EventHandler.on(div, 'bs.namespace', () => {\n expect().nothing()\n resolve()\n })\n\n EventHandler.trigger(div, 'bs.namespace')\n })\n })\n\n it('should add native namespaced event listener', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n EventHandler.on(div, 'click.namespace', () => {\n expect().nothing()\n resolve()\n })\n\n EventHandler.trigger(div, 'click')\n })\n })\n\n it('should handle event delegation', () => {\n return new Promise(resolve => {\n EventHandler.on(document, 'click', '.test', () => {\n expect().nothing()\n resolve()\n })\n\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n div.click()\n })\n })\n\n it('should handle mouseenter/mouseleave like the native counterpart', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const outer = fixtureEl.querySelector('.outer')\n const inner = fixtureEl.querySelector('.inner')\n const nested = fixtureEl.querySelector('.nested')\n const deep = fixtureEl.querySelector('.deep')\n const sibling = fixtureEl.querySelector('.sibling')\n\n const enterSpy = jasmine.createSpy('mouseenter')\n const leaveSpy = jasmine.createSpy('mouseleave')\n const delegateEnterSpy = jasmine.createSpy('mouseenter')\n const delegateLeaveSpy = jasmine.createSpy('mouseleave')\n\n EventHandler.on(inner, 'mouseenter', enterSpy)\n EventHandler.on(inner, 'mouseleave', leaveSpy)\n EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)\n EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)\n\n EventHandler.on(sibling, 'mouseenter', () => {\n expect(enterSpy.calls.count()).toEqual(2)\n expect(leaveSpy.calls.count()).toEqual(2)\n expect(delegateEnterSpy.calls.count()).toEqual(2)\n expect(delegateLeaveSpy.calls.count()).toEqual(2)\n resolve()\n })\n\n const moveMouse = (from, to) => {\n from.dispatchEvent(new MouseEvent('mouseout', {\n bubbles: true,\n relatedTarget: to\n }))\n\n to.dispatchEvent(new MouseEvent('mouseover', {\n bubbles: true,\n relatedTarget: from\n }))\n }\n\n // from outer to deep and back to outer (nested)\n moveMouse(outer, inner)\n moveMouse(inner, nested)\n moveMouse(nested, deep)\n moveMouse(deep, nested)\n moveMouse(nested, inner)\n moveMouse(inner, outer)\n\n setTimeout(() => {\n expect(enterSpy.calls.count()).toEqual(1)\n expect(leaveSpy.calls.count()).toEqual(1)\n expect(delegateEnterSpy.calls.count()).toEqual(1)\n expect(delegateLeaveSpy.calls.count()).toEqual(1)\n\n // from outer to inner to sibling (adjacent)\n moveMouse(outer, inner)\n moveMouse(inner, sibling)\n }, 20)\n })\n })\n })\n\n describe('one', () => {\n it('should call listener just once', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n let called = 0\n const div = fixtureEl.querySelector('div')\n const obj = {\n oneListener() {\n called++\n }\n }\n\n EventHandler.one(div, 'bootstrap', obj.oneListener)\n\n EventHandler.trigger(div, 'bootstrap')\n EventHandler.trigger(div, 'bootstrap')\n\n setTimeout(() => {\n expect(called).toEqual(1)\n resolve()\n }, 20)\n })\n })\n\n it('should call delegated listener just once', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n let called = 0\n const div = fixtureEl.querySelector('div')\n const obj = {\n oneListener() {\n called++\n }\n }\n\n EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)\n\n EventHandler.trigger(div, 'bootstrap')\n EventHandler.trigger(div, 'bootstrap')\n\n setTimeout(() => {\n expect(called).toEqual(1)\n resolve()\n }, 20)\n })\n })\n })\n\n describe('off', () => {\n it('should not remove a listener', () => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n EventHandler.off(div, null, noop)\n EventHandler.off(null, 'click', noop)\n expect().nothing()\n })\n\n it('should remove a listener', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let called = 0\n const handler = () => {\n called++\n }\n\n EventHandler.on(div, 'foobar', handler)\n EventHandler.trigger(div, 'foobar')\n\n EventHandler.off(div, 'foobar', handler)\n EventHandler.trigger(div, 'foobar')\n\n setTimeout(() => {\n expect(called).toEqual(1)\n resolve()\n }, 20)\n })\n })\n\n it('should remove all the events', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let called = 0\n\n EventHandler.on(div, 'foobar', () => {\n called++\n })\n EventHandler.on(div, 'foobar', () => {\n called++\n })\n EventHandler.trigger(div, 'foobar')\n\n EventHandler.off(div, 'foobar')\n EventHandler.trigger(div, 'foobar')\n\n setTimeout(() => {\n expect(called).toEqual(2)\n resolve()\n }, 20)\n })\n })\n\n it('should remove all the namespaced listeners if namespace is passed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let called = 0\n\n EventHandler.on(div, 'foobar.namespace', () => {\n called++\n })\n EventHandler.on(div, 'foofoo.namespace', () => {\n called++\n })\n EventHandler.trigger(div, 'foobar.namespace')\n EventHandler.trigger(div, 'foofoo.namespace')\n\n EventHandler.off(div, '.namespace')\n EventHandler.trigger(div, 'foobar.namespace')\n EventHandler.trigger(div, 'foofoo.namespace')\n\n setTimeout(() => {\n expect(called).toEqual(2)\n resolve()\n }, 20)\n })\n })\n\n it('should remove the namespaced listeners', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let calledCallback1 = 0\n let calledCallback2 = 0\n\n EventHandler.on(div, 'foobar.namespace', () => {\n calledCallback1++\n })\n EventHandler.on(div, 'foofoo.namespace', () => {\n calledCallback2++\n })\n\n EventHandler.trigger(div, 'foobar.namespace')\n EventHandler.off(div, 'foobar.namespace')\n EventHandler.trigger(div, 'foobar.namespace')\n\n EventHandler.trigger(div, 'foofoo.namespace')\n\n setTimeout(() => {\n expect(calledCallback1).toEqual(1)\n expect(calledCallback2).toEqual(1)\n resolve()\n }, 20)\n })\n })\n\n it('should remove the all the namespaced listeners for native events', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let called = 0\n\n EventHandler.on(div, 'click.namespace', () => {\n called++\n })\n EventHandler.on(div, 'click.namespace2', () => {\n called++\n })\n\n EventHandler.trigger(div, 'click')\n EventHandler.off(div, 'click')\n EventHandler.trigger(div, 'click')\n\n setTimeout(() => {\n expect(called).toEqual(2)\n resolve()\n }, 20)\n })\n })\n\n it('should remove the specified namespaced listeners for native events', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const div = fixtureEl.querySelector('div')\n\n let called1 = 0\n let called2 = 0\n\n EventHandler.on(div, 'click.namespace', () => {\n called1++\n })\n EventHandler.on(div, 'click.namespace2', () => {\n called2++\n })\n EventHandler.trigger(div, 'click')\n\n EventHandler.off(div, 'click.namespace')\n EventHandler.trigger(div, 'click')\n\n setTimeout(() => {\n expect(called1).toEqual(1)\n expect(called2).toEqual(2)\n resolve()\n }, 20)\n })\n })\n\n it('should remove a listener registered by .one', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const handler = () => {\n reject(new Error('called'))\n }\n\n EventHandler.one(div, 'foobar', handler)\n EventHandler.off(div, 'foobar', handler)\n\n EventHandler.trigger(div, 'foobar')\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 20)\n })\n })\n\n it('should remove the correct delegated event listener', () => {\n const element = document.createElement('div')\n const subelement = document.createElement('span')\n element.append(subelement)\n\n const anchor = document.createElement('a')\n element.append(anchor)\n\n let i = 0\n const handler = () => {\n i++\n }\n\n EventHandler.on(element, 'click', 'a', handler)\n EventHandler.on(element, 'click', 'span', handler)\n\n fixtureEl.append(element)\n\n EventHandler.trigger(anchor, 'click')\n EventHandler.trigger(subelement, 'click')\n\n // first listeners called\n expect(i).toEqual(2)\n\n EventHandler.off(element, 'click', 'span', handler)\n EventHandler.trigger(subelement, 'click')\n\n // removed listener not called\n expect(i).toEqual(2)\n\n EventHandler.trigger(anchor, 'click')\n\n // not removed listener called\n expect(i).toEqual(3)\n\n EventHandler.on(element, 'click', 'span', handler)\n EventHandler.trigger(anchor, 'click')\n EventHandler.trigger(subelement, 'click')\n\n // listener re-registered\n expect(i).toEqual(5)\n\n EventHandler.off(element, 'click', 'span')\n EventHandler.trigger(subelement, 'click')\n\n // listener removed again\n expect(i).toEqual(5)\n })\n })\n\n describe('general functionality', () => {\n it('should hydrate properties, and make them configurable', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div1 = fixtureEl.querySelector('#div1')\n const div2 = fixtureEl.querySelector('#div2')\n\n EventHandler.on(div1, 'click', event => {\n expect(event.currentTarget).toBe(div2)\n expect(event.delegateTarget).toBe(div1)\n expect(event.originalTarget).toBeNull()\n\n Object.defineProperty(event, 'currentTarget', {\n configurable: true,\n get() {\n return div1\n }\n })\n\n expect(event.currentTarget).toBe(div1)\n resolve()\n })\n\n expect(() => {\n EventHandler.trigger(div1, 'click', { originalTarget: null, currentTarget: div2 })\n }).not.toThrowError(TypeError)\n })\n })\n })\n})\n" }, { "path": "js/tests/unit/dom/manipulator.spec.js", "content": "import Manipulator from '../../../src/dom/manipulator.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\ndescribe('Manipulator', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('setDataAttribute', () => {\n it('should set data attribute prefixed with bs', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n Manipulator.setDataAttribute(div, 'key', 'value')\n expect(div.getAttribute('data-bs-key')).toEqual('value')\n })\n\n it('should set data attribute in kebab case', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n Manipulator.setDataAttribute(div, 'testKey', 'value')\n expect(div.getAttribute('data-bs-test-key')).toEqual('value')\n })\n })\n\n describe('removeDataAttribute', () => {\n it('should only remove bs-prefixed data attribute', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n Manipulator.removeDataAttribute(div, 'key')\n expect(div.getAttribute('data-bs-key')).toBeNull()\n expect(div.getAttribute('data-key-bs')).toEqual('postfixed')\n expect(div.getAttribute('data-key')).toEqual('value')\n })\n\n it('should remove data attribute in kebab case', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n Manipulator.removeDataAttribute(div, 'testKey')\n expect(div.getAttribute('data-bs-test-key')).toBeNull()\n })\n })\n\n describe('getDataAttributes', () => {\n it('should return an empty object for null', () => {\n expect(Manipulator.getDataAttributes(null)).toEqual({})\n expect().nothing()\n })\n\n it('should get only bs-prefixed data attributes without bs namespace', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttributes(div)).toEqual({\n toggle: 'tabs',\n target: '#element'\n })\n })\n\n it('should omit `bs-config` data attribute', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttributes(div)).toEqual({\n toggle: 'tabs',\n target: '#element'\n })\n })\n })\n\n describe('getDataAttribute', () => {\n it('should only get bs-prefixed data attribute', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttribute(div, 'key')).toEqual('value')\n expect(Manipulator.getDataAttribute(div, 'test')).toBeNull()\n expect(Manipulator.getDataAttribute(div, 'toggle')).toBeNull()\n })\n\n it('should get data attribute in kebab case', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttribute(div, 'testKey')).toEqual('value')\n })\n\n it('should normalize data', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttribute(div, 'test')).toBeFalse()\n\n div.setAttribute('data-bs-test', 'true')\n expect(Manipulator.getDataAttribute(div, 'test')).toBeTrue()\n\n div.setAttribute('data-bs-test', '1')\n expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)\n })\n\n it('should normalize json data', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Manipulator.getDataAttribute(div, 'test')).toEqual({ delay: { show: 100, hide: 10 } })\n\n const objectData = { 'Super Hero': ['Iron Man', 'Super Man'], testNum: 90, url: 'http://localhost:8080/test?foo=bar' }\n const dataStr = JSON.stringify(objectData)\n div.setAttribute('data-bs-test', encodeURIComponent(dataStr))\n expect(Manipulator.getDataAttribute(div, 'test')).toEqual(objectData)\n\n div.setAttribute('data-bs-test', dataStr)\n expect(Manipulator.getDataAttribute(div, 'test')).toEqual(objectData)\n })\n })\n})\n" }, { "path": "js/tests/unit/dom/selector-engine.spec.js", "content": "import SelectorEngine from '../../../src/dom/selector-engine.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\ndescribe('SelectorEngine', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('find', () => {\n it('should find elements', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(SelectorEngine.find('div', fixtureEl)).toEqual([div])\n })\n\n it('should find elements globally', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.find('#test')).toEqual([div])\n })\n\n it('should handle :scope selectors', () => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n '
  • ',\n ' link',\n '
    • ',\n '
  • ',\n '
'\n ].join('')\n\n const listEl = fixtureEl.querySelector('ul')\n const aActive = fixtureEl.querySelector('.active')\n\n expect(SelectorEngine.find(':scope > li > .active', listEl)).toEqual([aActive])\n })\n })\n\n describe('findOne', () => {\n it('should return one element', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.findOne('#test')).toEqual(div)\n })\n })\n\n describe('children', () => {\n it('should find children', () => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n '
  • ',\n '
  • ',\n '
'\n ].join('')\n\n const list = fixtureEl.querySelector('ul')\n const liList = [].concat(...fixtureEl.querySelectorAll('li'))\n const result = SelectorEngine.children(list, 'li')\n\n expect(result).toEqual(liList)\n })\n })\n\n describe('parents', () => {\n it('should return parents', () => {\n expect(SelectorEngine.parents(fixtureEl, 'body')).toHaveSize(1)\n })\n })\n\n describe('prev', () => {\n it('should return previous element', () => {\n fixtureEl.innerHTML = '
'\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n\n expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])\n })\n\n it('should return previous element with an extra element between', () => {\n fixtureEl.innerHTML = [\n '
',\n '',\n ''\n ].join('')\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n\n expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])\n })\n\n it('should return previous element with comments or text nodes between', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '',\n 'Text',\n ''\n ].join('')\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelectorAll('.test')[1]\n\n expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])\n })\n })\n\n describe('next', () => {\n it('should return next element', () => {\n fixtureEl.innerHTML = '
'\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n\n expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])\n })\n\n it('should return next element with an extra element between', () => {\n fixtureEl.innerHTML = [\n '
',\n '',\n ''\n ].join('')\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n\n expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])\n })\n\n it('should return next element with comments or text nodes between', () => {\n fixtureEl.innerHTML = [\n '
',\n '',\n 'Text',\n '',\n ''\n ].join('')\n\n const btn = fixtureEl.querySelector('.btn')\n const divTest = fixtureEl.querySelector('.test')\n\n expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])\n })\n })\n\n describe('focusableChildren', () => {\n it('should return only elements with specific tag names', () => {\n fixtureEl.innerHTML = [\n '
lorem
',\n 'lorem',\n 'lorem',\n '',\n '',\n '',\n '',\n '
lorem
'\n ].join('')\n\n const expectedElements = [\n fixtureEl.querySelector('a'),\n fixtureEl.querySelector('button'),\n fixtureEl.querySelector('input'),\n fixtureEl.querySelector('textarea'),\n fixtureEl.querySelector('select'),\n fixtureEl.querySelector('details')\n ]\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n\n it('should return any element with non negative tab index', () => {\n fixtureEl.innerHTML = [\n '
lorem
',\n '
lorem
',\n '
lorem
'\n ].join('')\n\n const expectedElements = [\n fixtureEl.querySelector('[tabindex]'),\n fixtureEl.querySelector('[tabindex=\"0\"]'),\n fixtureEl.querySelector('[tabindex=\"10\"]')\n ]\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n\n it('should return not return elements with negative tab index', () => {\n fixtureEl.innerHTML = ''\n\n const expectedElements = []\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n\n it('should return contenteditable elements', () => {\n fixtureEl.innerHTML = '
lorem
'\n\n const expectedElements = [fixtureEl.querySelector('[contenteditable=\"true\"]')]\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n\n it('should not return disabled elements', () => {\n fixtureEl.innerHTML = ''\n\n const expectedElements = []\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n\n it('should not return invisible elements', () => {\n fixtureEl.innerHTML = ''\n\n const expectedElements = []\n\n expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)\n })\n })\n\n describe('getSelectorFromElement', () => {\n it('should get selector from data-bs-target', () => {\n fixtureEl.innerHTML = [\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')\n })\n\n it('should get selector from href if no data-bs-target set', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')\n })\n\n it('should get selector from href if data-bs-target equal to #', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')\n })\n\n it('should return null if a selector from a href is a url without an anchor', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()\n })\n\n it('should return the anchor if a selector from a href is a url', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('#target')\n })\n\n it('should return null if selector not found', () => {\n fixtureEl.innerHTML = ''\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()\n })\n\n it('should return null if no selector', () => {\n fixtureEl.innerHTML = '
'\n\n const testEl = fixtureEl.querySelector('div')\n\n expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()\n })\n })\n\n describe('getElementFromSelector', () => {\n it('should get element from data-bs-target', () => {\n fixtureEl.innerHTML = [\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))\n })\n\n it('should get element from href if no data-bs-target set', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))\n })\n\n it('should return null if element not found', () => {\n fixtureEl.innerHTML = ''\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull()\n })\n\n it('should return null if no selector', () => {\n fixtureEl.innerHTML = '
'\n\n const testEl = fixtureEl.querySelector('div')\n\n expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull()\n })\n })\n\n describe('getMultipleElementsFromSelector', () => {\n it('should get elements from data-bs-target', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))\n })\n\n it('should get elements if several ids are given', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))\n })\n\n it('should get elements if several ids with special chars are given', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))\n })\n\n it('should get elements in array, from href if no data-bs-target set', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
'\n ].join('')\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))\n })\n\n it('should return empty array if elements not found', () => {\n fixtureEl.innerHTML = ''\n\n const testEl = fixtureEl.querySelector('#test')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0)\n })\n\n it('should return empty array if no selector', () => {\n fixtureEl.innerHTML = '
'\n\n const testEl = fixtureEl.querySelector('div')\n\n expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0)\n })\n })\n})\n" }, { "path": "js/tests/unit/dropdown.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport Dropdown from '../../src/dropdown.js'\nimport { noop } from '../../src/util/index.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Dropdown', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Dropdown.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Dropdown.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DefaultType', () => {\n it('should return plugin default type config', () => {\n expect(Dropdown.DefaultType).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Dropdown.DATA_KEY).toEqual('bs.dropdown')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownBySelector = new Dropdown('[data-bs-toggle=\"dropdown\"]')\n const dropdownByElement = new Dropdown(btnDropdown)\n\n expect(dropdownBySelector._element).toEqual(btnDropdown)\n expect(dropdownByElement._element).toEqual(btnDropdown)\n })\n\n it('should work on invalid markup', () => {\n return new Promise(resolve => {\n // TODO: REMOVE in v6\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Link',\n '
',\n '
'\n ].join('')\n\n const dropdownElem = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(dropdownElem)\n\n dropdownElem.addEventListener('shown.bs.dropdown', () => {\n resolve()\n })\n\n expect().nothing()\n dropdown.show()\n })\n })\n\n it('should create offset modifier correctly when offset option is a function', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown, {\n offset: getOffset,\n popperConfig: {\n onFirstUpdate(state) {\n expect(getOffset).toHaveBeenCalledWith({\n popper: state.rects.popper,\n reference: state.rects.reference,\n placement: state.placement\n }, btnDropdown)\n resolve()\n }\n }\n })\n const offset = dropdown._getOffset()\n\n expect(typeof offset).toEqual('function')\n\n dropdown.show()\n })\n })\n\n it('should create offset modifier correctly when offset option is a string into data attribute', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n expect(dropdown._getOffset()).toEqual([10, 20])\n })\n\n it('should allow to pass config to Popper with `popperConfig`', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown, {\n popperConfig: {\n placement: 'left'\n }\n })\n\n const popperConfig = dropdown._getPopperConfig()\n\n expect(popperConfig.placement).toEqual('left')\n })\n\n it('should allow to pass config to Popper with `popperConfig` as a function', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })\n const dropdown = new Dropdown(btnDropdown, {\n popperConfig: getPopperConfig\n })\n\n const popperConfig = dropdown._getPopperConfig()\n\n // Ensure that the function was called with the default config.\n expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({\n placement: jasmine.any(String)\n }))\n expect(popperConfig.placement).toEqual('left')\n })\n })\n\n describe('toggle', () => {\n it('should toggle a dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should destroy old popper references on toggle', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
',\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown1 = fixtureEl.querySelector('.firstBtn')\n const btnDropdown2 = fixtureEl.querySelector('.secondBtn')\n const firstDropdownEl = fixtureEl.querySelector('.first')\n const secondDropdownEl = fixtureEl.querySelector('.second')\n const dropdown1 = new Dropdown(btnDropdown1)\n\n firstDropdownEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown1).toHaveClass('show')\n spyOn(dropdown1._popper, 'destroy')\n btnDropdown2.click()\n })\n\n secondDropdownEl.addEventListener('shown.bs.dropdown', () => setTimeout(() => {\n expect(dropdown1._popper.destroy).toHaveBeenCalled()\n resolve()\n }))\n\n dropdown1.toggle()\n })\n })\n\n it('should toggle a dropdown and add/remove event listener on mobile', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const defaultValueOnTouchStart = document.documentElement.ontouchstart\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n document.documentElement.ontouchstart = noop\n const spy = spyOn(EventHandler, 'on')\n const spyOff = spyOn(EventHandler, 'off')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n expect(spy).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)\n\n dropdown.toggle()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(btnDropdown).not.toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')\n expect(spyOff).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)\n\n document.documentElement.ontouchstart = defaultValueOnTouchStart\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropdown at the right', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a centered dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropup', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropupEl = fixtureEl.querySelector('.dropup')\n const dropdown = new Dropdown(btnDropdown)\n\n dropupEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropup centered', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropupEl = fixtureEl.querySelector('.dropup-center')\n const dropdown = new Dropdown(btnDropdown)\n\n dropupEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropup at the right', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropupEl = fixtureEl.querySelector('.dropup')\n const dropdown = new Dropdown(btnDropdown)\n\n dropupEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropend', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropendEl = fixtureEl.querySelector('.dropend')\n const dropdown = new Dropdown(btnDropdown)\n\n dropendEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropstart', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropstartEl = fixtureEl.querySelector('.dropstart')\n const dropdown = new Dropdown(btnDropdown)\n\n dropstartEl.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropdown with parent reference', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown, {\n reference: 'parent'\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropdown with a dom node reference', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown, {\n reference: fixtureEl\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropdown with a jquery object reference', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown, {\n reference: { 0: fixtureEl, jquery: 'jQuery' }\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n })\n\n dropdown.toggle()\n })\n })\n\n it('should toggle a dropdown with a valid virtual element reference', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const virtualElement = {\n nodeType: 1,\n getBoundingClientRect() {\n return {\n width: 0,\n height: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n }\n }\n }\n\n expect(() => new Dropdown(btnDropdown, {\n reference: {}\n })).toThrowError(TypeError, 'DROPDOWN: Option \"reference\" provided type \"object\" without a required \"getBoundingClientRect\" method.')\n\n expect(() => new Dropdown(btnDropdown, {\n reference: {\n getBoundingClientRect: 'not-a-function'\n }\n })).toThrowError(TypeError, 'DROPDOWN: Option \"reference\" provided type \"object\" without a required \"getBoundingClientRect\" method.')\n\n // use onFirstUpdate as Poppers internal update is executed async\n const dropdown = new Dropdown(btnDropdown, {\n reference: virtualElement,\n popperConfig: {\n onFirstUpdate() {\n expect(spy).toHaveBeenCalled()\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n }\n }\n })\n\n const spy = spyOn(virtualElement, 'getBoundingClientRect').and.callThrough()\n\n dropdown.toggle()\n })\n })\n\n it('should not toggle a dropdown if the element is disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.toggle()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n })\n })\n })\n\n it('should not toggle a dropdown if the element contains .disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.toggle()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n })\n })\n })\n\n it('should not toggle a dropdown if the menu is shown', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.toggle()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n })\n })\n })\n\n it('should not toggle a dropdown if show event is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('show.bs.dropdown', event => {\n event.preventDefault()\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.toggle()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n })\n })\n })\n })\n\n describe('show', () => {\n it('should show a dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should not show a dropdown if the element is disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.show()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n\n it('should not show a dropdown if the element contains .disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.show()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n\n it('should not show a dropdown if the menu is shown', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.show()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n\n it('should not show a dropdown if show event is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('show.bs.dropdown', event => {\n event.preventDefault()\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n reject(new Error('should not throw shown.bs.dropdown event'))\n })\n\n dropdown.show()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n })\n\n describe('hide', () => {\n it('should hide a dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(dropdownMenu).not.toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')\n resolve()\n })\n\n dropdown.hide()\n })\n })\n\n it('should hide a dropdown and destroy popper', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n spyOn(dropdown._popper, 'destroy')\n dropdown.hide()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(dropdown._popper.destroy).toHaveBeenCalled()\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should not hide a dropdown if the element is disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n reject(new Error('should not throw hidden.bs.dropdown event'))\n })\n\n dropdown.hide()\n\n setTimeout(() => {\n expect(dropdownMenu).toHaveClass('show')\n resolve()\n }, 10)\n })\n })\n\n it('should not hide a dropdown if the element contains .disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n reject(new Error('should not throw hidden.bs.dropdown event'))\n })\n\n dropdown.hide()\n\n setTimeout(() => {\n expect(dropdownMenu).toHaveClass('show')\n resolve()\n }, 10)\n })\n })\n\n it('should not hide a dropdown if the menu is not shown', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n reject(new Error('should not throw hidden.bs.dropdown event'))\n })\n\n dropdown.hide()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n\n it('should not hide a dropdown if hide event is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('hide.bs.dropdown', event => {\n event.preventDefault()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n reject(new Error('should not throw hidden.bs.dropdown event'))\n })\n\n dropdown.hide()\n\n setTimeout(() => {\n expect(dropdownMenu).toHaveClass('show')\n resolve()\n })\n })\n })\n\n it('should remove event listener on touch-enabled device that was added in show method', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const defaultValueOnTouchStart = document.documentElement.ontouchstart\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n document.documentElement.ontouchstart = noop\n const spy = spyOn(EventHandler, 'off')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n dropdown.hide()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(btnDropdown).not.toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')\n expect(spy).toHaveBeenCalled()\n\n document.documentElement.ontouchstart = defaultValueOnTouchStart\n resolve()\n })\n\n dropdown.show()\n })\n })\n })\n\n describe('dispose', () => {\n it('should dispose dropdown', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n const dropdown = new Dropdown(btnDropdown)\n\n expect(dropdown._popper).toBeNull()\n expect(dropdown._menu).not.toBeNull()\n expect(dropdown._element).not.toBeNull()\n const spy = spyOn(EventHandler, 'off')\n\n dropdown.dispose()\n\n expect(dropdown._menu).toBeNull()\n expect(dropdown._element).toBeNull()\n expect(spy).toHaveBeenCalledWith(btnDropdown, Dropdown.EVENT_KEY)\n })\n\n it('should dispose dropdown with Popper', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n dropdown.toggle()\n\n expect(dropdown._popper).not.toBeNull()\n expect(dropdown._menu).not.toBeNull()\n expect(dropdown._element).not.toBeNull()\n\n dropdown.dispose()\n\n expect(dropdown._popper).toBeNull()\n expect(dropdown._menu).toBeNull()\n expect(dropdown._element).toBeNull()\n })\n })\n\n describe('update', () => {\n it('should call Popper and detect navbar on update', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n dropdown.toggle()\n\n expect(dropdown._popper).not.toBeNull()\n\n const spyUpdate = spyOn(dropdown._popper, 'update')\n const spyDetect = spyOn(dropdown, '_detectNavbar')\n\n dropdown.update()\n\n expect(spyUpdate).toHaveBeenCalled()\n expect(spyDetect).toHaveBeenCalled()\n })\n\n it('should just detect navbar on update', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(btnDropdown)\n\n const spy = spyOn(dropdown, '_detectNavbar')\n\n dropdown.update()\n\n expect(dropdown._popper).toBeNull()\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('data-api', () => {\n it('should show and hide a dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n let showEventTriggered = false\n let hideEventTriggered = false\n\n btnDropdown.addEventListener('show.bs.dropdown', () => {\n showEventTriggered = true\n })\n\n btnDropdown.addEventListener('shown.bs.dropdown', event => setTimeout(() => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n expect(showEventTriggered).toBeTrue()\n expect(event.relatedTarget).toEqual(btnDropdown)\n document.body.click()\n }))\n\n btnDropdown.addEventListener('hide.bs.dropdown', () => {\n hideEventTriggered = true\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', event => {\n expect(btnDropdown).not.toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')\n expect(hideEventTriggered).toBeTrue()\n expect(event.relatedTarget).toEqual(btnDropdown)\n resolve()\n })\n\n btnDropdown.click()\n })\n })\n\n it('should not use \"static\" Popper in navbar', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n ''\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(dropdown._popper).not.toBeNull()\n expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should not collapse the dropdown when clicking a select option nested in the dropdown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n const hideSpy = spyOn(dropdown, '_completeHide')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n const clickEvent = new MouseEvent('click', {\n bubbles: true\n })\n\n dropdownMenu.querySelector('option').dispatchEvent(clickEvent)\n })\n\n dropdownMenu.addEventListener('click', event => {\n expect(event.target.tagName).toMatch(/select|option/i)\n\n Dropdown.clearMenus(event)\n\n setTimeout(() => {\n expect(hideSpy).not.toHaveBeenCalled()\n resolve()\n }, 10)\n })\n\n dropdown.show()\n })\n })\n\n it('should manage bs attribute `data-bs-popper`=\"static\" when dropdown is in navbar', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n ''\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')\n dropdown.hide()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should not use Popper if display set to static', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n // Popper adds this attribute when we use it\n expect(dropdownMenu.getAttribute('data-popper-placement')).toBeNull()\n resolve()\n })\n\n btnDropdown.click()\n })\n })\n\n it('should manage bs attribute `data-bs-popper`=\"static\" when display set to static', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const dropdown = new Dropdown(btnDropdown)\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')\n dropdown.hide()\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should remove \"show\" class if tabbing outside of menu', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(btnDropdown).toHaveClass('show')\n\n const keyup = createEvent('keyup')\n\n keyup.key = 'Tab'\n document.dispatchEvent(keyup)\n })\n\n btnDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect(btnDropdown).not.toHaveClass('show')\n resolve()\n })\n\n btnDropdown.click()\n })\n })\n\n it('should remove \"show\" class if body is clicked, with multiple dropdowns', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Test menu',\n '
',\n ' Submenu 1',\n '
',\n '
',\n '
',\n '
',\n ' ',\n ' ',\n '
',\n ' Action 1',\n '
',\n '
'\n ].join('')\n\n const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle=\"dropdown\"]')\n\n expect(triggerDropdownList).toHaveSize(2)\n\n const [triggerDropdownFirst, triggerDropdownLast] = triggerDropdownList\n\n triggerDropdownFirst.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdownFirst).toHaveClass('show')\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(1)\n document.body.click()\n })\n\n triggerDropdownFirst.addEventListener('hidden.bs.dropdown', () => {\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)\n triggerDropdownLast.click()\n })\n\n triggerDropdownLast.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdownLast).toHaveClass('show')\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(1)\n document.body.click()\n })\n\n triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)\n resolve()\n })\n\n triggerDropdownFirst.click()\n })\n })\n\n it('should remove \"show\" class if body if tabbing outside of menu, with multiple dropdowns', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' Test menu',\n '
',\n ' Submenu 1',\n '
',\n '
',\n '
',\n ' ',\n ' ',\n '
',\n ' Action 1',\n '
',\n '
'\n ].join('')\n\n const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle=\"dropdown\"]')\n\n expect(triggerDropdownList).toHaveSize(2)\n\n const [triggerDropdownFirst, triggerDropdownLast] = triggerDropdownList\n\n triggerDropdownFirst.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdownFirst).toHaveClass('show')\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(1)\n\n const keyup = createEvent('keyup')\n keyup.key = 'Tab'\n\n document.dispatchEvent(keyup)\n })\n\n triggerDropdownFirst.addEventListener('hidden.bs.dropdown', () => {\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)\n triggerDropdownLast.click()\n })\n\n triggerDropdownLast.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdownLast).toHaveClass('show')\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(1)\n\n const keyup = createEvent('keyup')\n keyup.key = 'Tab'\n\n document.dispatchEvent(keyup)\n })\n\n triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {\n expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)\n resolve()\n })\n\n triggerDropdownFirst.click()\n })\n })\n\n it('should be able to identify clicked dropdown, even with multiple dropdowns in the same tag', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')\n const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')\n const dropdownMenu1 = fixtureEl.querySelector('#menu1')\n const dropdownMenu2 = fixtureEl.querySelector('#menu2')\n const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()\n\n dropdownToggle1.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle1)\n\n dropdownToggle2.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle2)\n\n dropdownMenu1.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle1)\n\n dropdownMenu2.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle2)\n })\n\n it('should be able to show the proper menu, even with multiple dropdowns in the same tag', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')\n const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')\n const dropdownMenu1 = fixtureEl.querySelector('#menu1')\n const dropdownMenu2 = fixtureEl.querySelector('#menu2')\n\n dropdownToggle1.click()\n expect(dropdownMenu1).toHaveClass('show')\n expect(dropdownMenu2).not.toHaveClass('show')\n\n dropdownToggle2.click()\n expect(dropdownMenu1).not.toHaveClass('show')\n expect(dropdownMenu2).toHaveClass('show')\n })\n\n it('should fire hide and hidden event without a clickEvent if event type is not click', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Submenu 1',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n triggerDropdown.addEventListener('hide.bs.dropdown', event => {\n expect(event.clickEvent).toBeUndefined()\n })\n\n triggerDropdown.addEventListener('hidden.bs.dropdown', event => {\n expect(event.clickEvent).toBeUndefined()\n resolve()\n })\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n const keydown = createEvent('keydown')\n\n keydown.key = 'Escape'\n triggerDropdown.dispatchEvent(keydown)\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should bubble up the events to the parent elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Sub menu',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownParent = fixtureEl.querySelector('.dropdown')\n const dropdown = new Dropdown(triggerDropdown)\n\n const showFunction = jasmine.createSpy('showFunction')\n dropdownParent.addEventListener('show.bs.dropdown', showFunction)\n\n const shownFunction = jasmine.createSpy('shownFunction')\n dropdownParent.addEventListener('shown.bs.dropdown', () => {\n shownFunction()\n dropdown.hide()\n })\n\n const hideFunction = jasmine.createSpy('hideFunction')\n dropdownParent.addEventListener('hide.bs.dropdown', hideFunction)\n\n dropdownParent.addEventListener('hidden.bs.dropdown', () => {\n expect(showFunction).toHaveBeenCalled()\n expect(shownFunction).toHaveBeenCalled()\n expect(hideFunction).toHaveBeenCalled()\n resolve()\n })\n\n dropdown.show()\n })\n })\n\n it('should ignore keyboard events within s and ',\n ' ',\n ''\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const input = fixtureEl.querySelector('input')\n const textarea = fixtureEl.querySelector('textarea')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n input.focus()\n const keydown = createEvent('keydown')\n\n keydown.key = 'ArrowUp'\n input.dispatchEvent(keydown)\n\n expect(document.activeElement).toEqual(input, 'input still focused')\n\n textarea.focus()\n textarea.dispatchEvent(keydown)\n\n expect(document.activeElement).toEqual(textarea, 'textarea still focused')\n resolve()\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should skip disabled element when using keyboard navigation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Submenu 1',\n ' ',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n\n triggerDropdown.dispatchEvent(keydown)\n triggerDropdown.dispatchEvent(keydown)\n\n expect(document.activeElement).not.toHaveClass('disabled')\n expect(document.activeElement.hasAttribute('disabled')).toBeFalse()\n resolve()\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should skip hidden element when using keyboard navigation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n ' ',\n '
',\n ' ',\n ' Hidden link',\n ' Hidden link',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n\n triggerDropdown.dispatchEvent(keydown)\n\n expect(document.activeElement).not.toHaveClass('d-none')\n expect(document.activeElement.style.display).not.toEqual('none')\n expect(document.activeElement.style.visibility).not.toEqual('hidden')\n\n resolve()\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should focus next/previous element when using keyboard navigation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' A link',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const item1 = fixtureEl.querySelector('#item1')\n const item2 = fixtureEl.querySelector('#item2')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n const keydownArrowDown = createEvent('keydown')\n keydownArrowDown.key = 'ArrowDown'\n\n triggerDropdown.dispatchEvent(keydownArrowDown)\n expect(document.activeElement).toEqual(item1, 'item1 is focused')\n\n document.activeElement.dispatchEvent(keydownArrowDown)\n expect(document.activeElement).toEqual(item2, 'item2 is focused')\n\n const keydownArrowUp = createEvent('keydown')\n keydownArrowUp.key = 'ArrowUp'\n\n document.activeElement.dispatchEvent(keydownArrowUp)\n expect(document.activeElement).toEqual(item1, 'item1 is focused')\n\n resolve()\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should open the dropdown and focus on the last item when using ArrowUp for the first time', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' A link',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const lastItem = fixtureEl.querySelector('#item2')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n setTimeout(() => {\n expect(document.activeElement).toEqual(lastItem, 'item2 is focused')\n resolve()\n })\n })\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowUp'\n triggerDropdown.dispatchEvent(keydown)\n })\n })\n\n it('should open the dropdown and focus on the first item when using ArrowDown for the first time', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' A link',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const firstItem = fixtureEl.querySelector('#item1')\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n setTimeout(() => {\n expect(document.activeElement).toEqual(firstItem, 'item1 is focused')\n resolve()\n })\n })\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n triggerDropdown.dispatchEvent(keydown)\n })\n })\n\n it('should not close the dropdown if the user clicks on a text field within dropdown-menu', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const input = fixtureEl.querySelector('input')\n\n input.addEventListener('click', () => {\n expect(triggerDropdown).toHaveClass('show')\n resolve()\n })\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdown).toHaveClass('show')\n input.dispatchEvent(createEvent('click'))\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const textarea = fixtureEl.querySelector('textarea')\n\n textarea.addEventListener('click', () => {\n expect(triggerDropdown).toHaveClass('show')\n resolve()\n })\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n expect(triggerDropdown).toHaveClass('show')\n textarea.dispatchEvent(createEvent('click'))\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n '
',\n '
',\n ''\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const input = fixtureEl.querySelector('input')\n\n triggerDropdown.addEventListener('hidden.bs.dropdown', () => {\n expect().nothing()\n resolve()\n })\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n input.dispatchEvent(createEvent('click', {\n bubbles: true\n }))\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should ignore keyboard events for s and ',\n ' ',\n ''\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const input = fixtureEl.querySelector('input')\n const textarea = fixtureEl.querySelector('textarea')\n\n const test = (eventKey, elementToDispatch) => {\n const event = createEvent('keydown')\n event.key = eventKey\n elementToDispatch.focus()\n elementToDispatch.dispatchEvent(event)\n expect(document.activeElement).toEqual(elementToDispatch, `${elementToDispatch.tagName} still focused`)\n }\n\n const keydownEscape = createEvent('keydown')\n keydownEscape.key = 'Escape'\n\n triggerDropdown.addEventListener('shown.bs.dropdown', () => {\n // Key Space\n test('Space', input)\n\n test('Space', textarea)\n\n // Key ArrowUp\n test('ArrowUp', input)\n\n test('ArrowUp', textarea)\n\n // Key ArrowDown\n test('ArrowDown', input)\n\n test('ArrowDown', textarea)\n\n // Key Escape\n input.focus()\n input.dispatchEvent(keydownEscape)\n\n expect(triggerDropdown).not.toHaveClass('show')\n resolve()\n })\n\n triggerDropdown.click()\n })\n })\n\n it('should not open dropdown if escape key was pressed on the toggle', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n ' Secondary link',\n ' Something else here',\n '
',\n ' Another link',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = new Dropdown(triggerDropdown)\n const button = fixtureEl.querySelector('button[data-bs-toggle=\"dropdown\"]')\n\n const spy = spyOn(dropdown, 'toggle')\n\n // Key escape\n button.focus()\n // Key escape\n const keydownEscape = createEvent('keydown')\n keydownEscape.key = 'Escape'\n button.dispatchEvent(keydownEscape)\n\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n expect(triggerDropdown).not.toHaveClass('show')\n resolve()\n }, 20)\n })\n })\n\n it('should propagate escape key events if dropdown is closed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n ' Some Item',\n '
',\n '
',\n '
'\n ].join('')\n\n const parent = fixtureEl.querySelector('.parent')\n const toggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n const parentKeyHandler = jasmine.createSpy('parentKeyHandler')\n\n parent.addEventListener('keydown', parentKeyHandler)\n parent.addEventListener('keyup', () => {\n expect(parentKeyHandler).toHaveBeenCalled()\n resolve()\n })\n\n const keydownEscape = createEvent('keydown', { bubbles: true })\n keydownEscape.key = 'Escape'\n const keyupEscape = createEvent('keyup', { bubbles: true })\n keyupEscape.key = 'Escape'\n\n toggle.focus()\n toggle.dispatchEvent(keydownEscape)\n toggle.dispatchEvent(keyupEscape)\n })\n })\n\n it('should not propagate escape key events if dropdown is open', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n ' Some Item',\n '
',\n '
',\n '
'\n ].join('')\n\n const parent = fixtureEl.querySelector('.parent')\n const toggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n const parentKeyHandler = jasmine.createSpy('parentKeyHandler')\n\n parent.addEventListener('keydown', parentKeyHandler)\n parent.addEventListener('keyup', () => {\n expect(parentKeyHandler).not.toHaveBeenCalled()\n resolve()\n })\n\n const keydownEscape = createEvent('keydown', { bubbles: true })\n keydownEscape.key = 'Escape'\n const keyupEscape = createEvent('keyup', { bubbles: true })\n keyupEscape.key = 'Escape'\n\n toggle.click()\n toggle.dispatchEvent(keydownEscape)\n toggle.dispatchEvent(keyupEscape)\n })\n })\n\n it('should close dropdown using `escape` button, and return focus to its trigger', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Some Item',\n '
',\n '
'\n ].join('')\n\n const toggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n\n toggle.addEventListener('shown.bs.dropdown', () => {\n const keydownEvent = createEvent('keydown', { bubbles: true })\n keydownEvent.key = 'ArrowDown'\n toggle.dispatchEvent(keydownEvent)\n keydownEvent.key = 'Escape'\n toggle.dispatchEvent(keydownEvent)\n })\n\n toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {\n expect(document.activeElement).toEqual(toggle)\n resolve()\n }))\n\n toggle.click()\n })\n })\n\n it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close=\"inside\"`', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n\n const expectDropdownToBeOpened = () => setTimeout(() => {\n expect(dropdownToggle).toHaveClass('show')\n dropdownMenu.click()\n }, 150)\n\n dropdownToggle.addEventListener('shown.bs.dropdown', () => {\n document.documentElement.click()\n expectDropdownToBeOpened()\n })\n\n dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {\n expect(dropdownToggle).not.toHaveClass('show')\n resolve()\n }))\n\n dropdownToggle.click()\n })\n })\n\n it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close=\"outside\"`', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n\n const expectDropdownToBeOpened = () => setTimeout(() => {\n expect(dropdownToggle).toHaveClass('show')\n document.documentElement.click()\n }, 150)\n\n dropdownToggle.addEventListener('shown.bs.dropdown', () => {\n dropdownMenu.click()\n expectDropdownToBeOpened()\n })\n\n dropdownToggle.addEventListener('hidden.bs.dropdown', () => {\n expect(dropdownToggle).not.toHaveClass('show')\n resolve()\n })\n\n dropdownToggle.click()\n })\n })\n\n it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close=\"false\"`', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Dropdown item',\n '
',\n '
'\n ].join('')\n\n const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n\n const expectDropdownToBeOpened = (shouldTriggerClick = true) => setTimeout(() => {\n expect(dropdownToggle).toHaveClass('show')\n if (shouldTriggerClick) {\n document.documentElement.click()\n } else {\n resolve()\n }\n\n expectDropdownToBeOpened(false)\n }, 150)\n\n dropdownToggle.addEventListener('shown.bs.dropdown', () => {\n dropdownMenu.click()\n expectDropdownToBeOpened()\n })\n\n dropdownToggle.click()\n })\n })\n\n it('should be able to identify clicked dropdown, no matter the markup order', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' Dropdown item',\n '
',\n ' ',\n '
'\n ].join('')\n\n const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')\n const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()\n\n dropdownToggle.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle)\n dropdownMenu.click()\n expect(spy).toHaveBeenCalledWith(dropdownToggle)\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a dropdown', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.dropdown = Dropdown.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.dropdown.call(jQueryMock)\n\n expect(Dropdown.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a dropdown', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const dropdown = new Dropdown(div)\n\n jQueryMock.fn.dropdown = Dropdown.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.dropdown.call(jQueryMock)\n\n expect(Dropdown.getInstance(div)).toEqual(dropdown)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.dropdown = Dropdown.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.dropdown.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return dropdown instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const dropdown = new Dropdown(div)\n\n expect(Dropdown.getInstance(div)).toEqual(dropdown)\n expect(Dropdown.getInstance(div)).toBeInstanceOf(Dropdown)\n })\n\n it('should return null when there is no dropdown instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Dropdown.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return dropdown instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const dropdown = new Dropdown(div)\n\n expect(Dropdown.getOrCreateInstance(div)).toEqual(dropdown)\n expect(Dropdown.getInstance(div)).toEqual(Dropdown.getOrCreateInstance(div, {}))\n expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown)\n })\n\n it('should return new instance when there is no dropdown instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Dropdown.getInstance(div)).toBeNull()\n expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown)\n })\n\n it('should return new instance when there is no dropdown instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Dropdown.getInstance(div)).toBeNull()\n const dropdown = Dropdown.getOrCreateInstance(div, {\n display: 'dynamic'\n })\n expect(dropdown).toBeInstanceOf(Dropdown)\n\n expect(dropdown._config.display).toEqual('dynamic')\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const dropdown = new Dropdown(div, {\n display: 'dynamic'\n })\n expect(Dropdown.getInstance(div)).toEqual(dropdown)\n\n const dropdown2 = Dropdown.getOrCreateInstance(div, {\n display: 'static'\n })\n expect(dropdown).toBeInstanceOf(Dropdown)\n expect(dropdown2).toEqual(dropdown)\n\n expect(dropdown2._config.display).toEqual('dynamic')\n })\n })\n\n it('should open dropdown when pressing keydown or keyup', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Submenu 1',\n ' ',\n ' Another link',\n '
',\n '
'\n ].join('')\n\n const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const dropdown = fixtureEl.querySelector('.dropdown')\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n\n const keyup = createEvent('keyup')\n keyup.key = 'ArrowUp'\n\n const handleArrowDown = () => {\n expect(triggerDropdown).toHaveClass('show')\n expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')\n setTimeout(() => {\n dropdown.hide()\n keydown.key = 'ArrowUp'\n triggerDropdown.dispatchEvent(keyup)\n }, 20)\n }\n\n const handleArrowUp = () => {\n expect(triggerDropdown).toHaveClass('show')\n expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n }\n\n dropdown.addEventListener('shown.bs.dropdown', event => {\n if (event.target.key === 'ArrowDown') {\n handleArrowDown()\n } else {\n handleArrowUp()\n }\n })\n\n triggerDropdown.dispatchEvent(keydown)\n })\n })\n\n it('should allow `data-bs-toggle=\"dropdown\"` click events to bubble up', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n ' Secondary link',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const clickListener = jasmine.createSpy('clickListener')\n const delegatedClickListener = jasmine.createSpy('delegatedClickListener')\n\n btnDropdown.addEventListener('click', clickListener)\n document.addEventListener('click', delegatedClickListener)\n\n btnDropdown.click()\n\n expect(clickListener).toHaveBeenCalled()\n expect(delegatedClickListener).toHaveBeenCalled()\n })\n\n it('should open the dropdown when clicking the child element inside `data-bs-toggle=\"dropdown\"`', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n ' Sub menu',\n '
',\n '
',\n '
'\n ].join('')\n\n const btnDropdown = fixtureEl.querySelector('[data-bs-toggle=\"dropdown\"]')\n const childElement = fixtureEl.querySelector('#childElement')\n\n btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => {\n expect(btnDropdown).toHaveClass('show')\n expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')\n resolve()\n }))\n\n childElement.click()\n })\n })\n})\n" }, { "path": "js/tests/unit/jquery.spec.js", "content": "/* eslint-env jquery */\n\nimport Alert from '../../src/alert.js'\nimport Button from '../../src/button.js'\nimport Carousel from '../../src/carousel.js'\nimport Collapse from '../../src/collapse.js'\nimport Dropdown from '../../src/dropdown.js'\nimport Modal from '../../src/modal.js'\nimport Offcanvas from '../../src/offcanvas.js'\nimport Popover from '../../src/popover.js'\nimport ScrollSpy from '../../src/scrollspy.js'\nimport Tab from '../../src/tab.js'\nimport Toast from '../../src/toast.js'\nimport Tooltip from '../../src/tooltip.js'\nimport { clearFixture, getFixture } from '../helpers/fixture.js'\n\ndescribe('jQuery', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n it('should add all plugins in jQuery', () => {\n expect(Alert.jQueryInterface).toEqual(jQuery.fn.alert)\n expect(Button.jQueryInterface).toEqual(jQuery.fn.button)\n expect(Carousel.jQueryInterface).toEqual(jQuery.fn.carousel)\n expect(Collapse.jQueryInterface).toEqual(jQuery.fn.collapse)\n expect(Dropdown.jQueryInterface).toEqual(jQuery.fn.dropdown)\n expect(Modal.jQueryInterface).toEqual(jQuery.fn.modal)\n expect(Offcanvas.jQueryInterface).toEqual(jQuery.fn.offcanvas)\n expect(Popover.jQueryInterface).toEqual(jQuery.fn.popover)\n expect(ScrollSpy.jQueryInterface).toEqual(jQuery.fn.scrollspy)\n expect(Tab.jQueryInterface).toEqual(jQuery.fn.tab)\n expect(Toast.jQueryInterface).toEqual(jQuery.fn.toast)\n expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)\n })\n\n it('should use jQuery event system', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n $(fixtureEl).find('.alert')\n .one('closed.bs.alert', () => {\n expect($(fixtureEl).find('.alert')).toHaveSize(0)\n resolve()\n })\n\n $(fixtureEl).find('button').trigger('click')\n })\n })\n})\n" }, { "path": "js/tests/unit/modal.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport Modal from '../../src/modal.js'\nimport ScrollBarHelper from '../../src/util/scrollbar.js'\nimport {\n clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Modal', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n clearBodyAndDocument()\n document.body.classList.remove('modal-open')\n\n for (const backdrop of document.querySelectorAll('.modal-backdrop')) {\n backdrop.remove()\n }\n })\n\n beforeEach(() => {\n clearBodyAndDocument()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Modal.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Modal.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Modal.DATA_KEY).toEqual('bs.modal')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modalBySelector = new Modal('.modal')\n const modalByElement = new Modal(modalEl)\n\n expect(modalBySelector._element).toEqual(modalEl)\n expect(modalByElement._element).toEqual(modalEl)\n })\n })\n\n describe('toggle', () => {\n it('should call ScrollBarHelper to handle scrollBar on body', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const spyHide = spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()\n const spyReset = spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(spyHide).toHaveBeenCalled()\n modal.toggle()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spyReset).toHaveBeenCalled()\n resolve()\n })\n\n modal.toggle()\n })\n })\n })\n\n describe('show', () => {\n it('should show a modal', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('show.bs.modal', event => {\n expect(event).toBeDefined()\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toEqual('true')\n expect(modalEl.getAttribute('role')).toEqual('dialog')\n expect(modalEl.getAttribute('aria-hidden')).toBeNull()\n expect(modalEl.style.display).toEqual('block')\n expect(document.querySelector('.modal-backdrop')).not.toBeNull()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should show a modal without backdrop', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: false\n })\n\n modalEl.addEventListener('show.bs.modal', event => {\n expect(event).toBeDefined()\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toEqual('true')\n expect(modalEl.getAttribute('role')).toEqual('dialog')\n expect(modalEl.getAttribute('aria-hidden')).toBeNull()\n expect(modalEl.style.display).toEqual('block')\n expect(document.querySelector('.modal-backdrop')).toBeNull()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should show a modal and append the element', () => {\n return new Promise(resolve => {\n const modalEl = document.createElement('div')\n const id = 'dynamicModal'\n\n modalEl.setAttribute('id', id)\n modalEl.classList.add('modal')\n modalEl.innerHTML = '
'\n\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const dynamicModal = document.getElementById(id)\n expect(dynamicModal).not.toBeNull()\n dynamicModal.remove()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should do nothing if a modal is shown', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(EventHandler, 'trigger')\n modal._isShown = true\n\n modal.show()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should do nothing if a modal is transitioning', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(EventHandler, 'trigger')\n modal._isTransitioning = true\n\n modal.show()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should not fire shown event when show is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('show.bs.modal', event => {\n event.preventDefault()\n\n const expectedDone = () => {\n expect().nothing()\n resolve()\n }\n\n setTimeout(expectedDone, 10)\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n reject(new Error('shown event triggered'))\n })\n\n modal.show()\n })\n })\n\n it('should be shown after the first call to show() has been prevented while fading is enabled ', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n let prevented = false\n modalEl.addEventListener('show.bs.modal', event => {\n if (!prevented) {\n event.preventDefault()\n prevented = true\n\n setTimeout(() => {\n modal.show()\n })\n }\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(prevented).toBeTrue()\n expect(modal._isAnimated()).toBeTrue()\n resolve()\n })\n\n modal.show()\n })\n })\n it('should set is transitioning if fade class is present', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('show.bs.modal', () => {\n setTimeout(() => {\n expect(modal._isTransitioning).toBeTrue()\n })\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modal._isTransitioning).toBeFalse()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should close modal when a click occurred on data-bs-dismiss=\"modal\" inside modal', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"modal\"]')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n btnClose.click()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should close modal when a click occurred on a data-bs-dismiss=\"modal\" with \"bs-target\" outside of modal element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"modal\"]')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n btnClose.click()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should set .modal\\'s scroll top to 0', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalEl.scrollTop).toEqual(0)\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should set modal body scroll top to 0 if modal body do not exists', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modalBody = modalEl.querySelector('.modal-body')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalBody.scrollTop).toEqual(0)\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should not trap focus if focus equal to false', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n focus: false\n })\n\n const spy = spyOn(modal._focustrap, 'activate').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should add listener when escape touch is pressed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const keydownEscape = createEvent('keydown')\n keydownEscape.key = 'Escape'\n\n modalEl.dispatchEvent(keydownEscape)\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should do nothing when the pressed key is not escape', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide')\n\n const expectDone = () => {\n expect(spy).not.toHaveBeenCalled()\n\n resolve()\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const keydownTab = createEvent('keydown')\n keydownTab.key = 'Tab'\n\n modalEl.dispatchEvent(keydownTab)\n setTimeout(expectDone, 30)\n })\n\n modal.show()\n })\n })\n\n it('should adjust dialog on resize', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, '_adjustDialog').and.callThrough()\n\n const expectDone = () => {\n expect(spy).toHaveBeenCalled()\n\n resolve()\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const resizeEvent = createEvent('resize')\n\n window.dispatchEvent(resizeEvent)\n setTimeout(expectDone, 10)\n })\n\n modal.show()\n })\n })\n\n it('should not close modal when clicking on modal-content', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const shownCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toEqual(true)\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n fixtureEl.querySelector('.modal-dialog').click()\n fixtureEl.querySelector('.modal-content').click()\n shownCallback()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n reject(new Error('Should not hide a modal'))\n })\n\n modal.show()\n })\n })\n\n it('should not close modal when clicking outside of modal-content if backdrop = false', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: false\n })\n\n const shownCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toBeTrue()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modalEl.click()\n shownCallback()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n reject(new Error('Should not hide a modal'))\n })\n\n modal.show()\n })\n })\n\n it('should not close modal when clicking outside of modal-content if backdrop = static', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: 'static'\n })\n\n const shownCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toBeTrue()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modalEl.click()\n shownCallback()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n reject(new Error('Should not hide a modal'))\n })\n\n modal.show()\n })\n })\n it('should close modal when escape key is pressed with keyboard = true and backdrop is static', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: 'static',\n keyboard: true\n })\n\n const shownCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toBeFalse()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const keydownEscape = createEvent('keydown')\n keydownEscape.key = 'Escape'\n\n modalEl.dispatchEvent(keydownEscape)\n shownCallback()\n })\n\n modal.show()\n })\n })\n\n it('should not close modal when escape key is pressed with keyboard = false', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n keyboard: false\n })\n\n const shownCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toBeTrue()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const keydownEscape = createEvent('keydown')\n keydownEscape.key = 'Escape'\n\n modalEl.dispatchEvent(keydownEscape)\n shownCallback()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n reject(new Error('Should not hide a modal'))\n })\n\n modal.show()\n })\n })\n\n it('should not overflow when clicking outside of modal-content if backdrop = static', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: 'static'\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modalEl.click()\n setTimeout(() => {\n expect(modalEl.clientHeight).toEqual(modalEl.scrollHeight)\n resolve()\n }, 20)\n })\n\n modal.show()\n })\n })\n\n it('should not queue multiple callbacks when clicking outside of modal-content and backdrop = static', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl, {\n backdrop: 'static'\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const spy = spyOn(modal, '_queueCallback').and.callThrough()\n const mouseDown = createEvent('mousedown')\n\n modalEl.dispatchEvent(mouseDown)\n modalEl.click()\n modalEl.dispatchEvent(mouseDown)\n modalEl.click()\n\n setTimeout(() => {\n expect(spy).toHaveBeenCalledTimes(1)\n resolve()\n }, 20)\n })\n\n modal.show()\n })\n })\n\n it('should trap focus', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal._focustrap, 'activate').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n })\n\n describe('hide', () => {\n it('should hide a modal', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n const backdropSpy = spyOn(modal._backdrop, 'hide').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modal.hide()\n })\n\n modalEl.addEventListener('hide.bs.modal', event => {\n expect(event).toBeDefined()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toBeNull()\n expect(modalEl.getAttribute('role')).toBeNull()\n expect(modalEl.getAttribute('aria-hidden')).toEqual('true')\n expect(modalEl.style.display).toEqual('none')\n expect(backdropSpy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should close modal when clicking outside of modal-content', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const dialogEl = modalEl.querySelector('.modal-dialog')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide')\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const mouseDown = createEvent('mousedown')\n\n dialogEl.dispatchEvent(mouseDown)\n modalEl.click()\n expect(spy).not.toHaveBeenCalled()\n\n modalEl.dispatchEvent(mouseDown)\n modalEl.click()\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should not close modal when clicking on an element removed from modal content', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const buttonEl = modalEl.querySelector('.btn')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, 'hide')\n buttonEl.addEventListener('click', () => {\n buttonEl.remove()\n })\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modalEl.dispatchEvent(createEvent('mousedown'))\n buttonEl.click()\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should do nothing is the modal is not shown', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modal.hide()\n\n expect().nothing()\n })\n\n it('should do nothing is the modal is transitioning', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modal._isTransitioning = true\n modal.hide()\n\n expect().nothing()\n })\n\n it('should not hide a modal if hide is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modal.hide()\n })\n\n const hideCallback = () => {\n setTimeout(() => {\n expect(modal._isShown).toBeTrue()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('hide.bs.modal', event => {\n event.preventDefault()\n hideCallback()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n reject(new Error('should not trigger hidden'))\n })\n\n modal.show()\n })\n })\n\n it('should release focus trap', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n const spy = spyOn(modal._focustrap, 'deactivate').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n modal.hide()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n })\n\n describe('dispose', () => {\n it('should dispose a modal', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n const focustrap = modal._focustrap\n const spyDeactivate = spyOn(focustrap, 'deactivate').and.callThrough()\n\n expect(Modal.getInstance(modalEl)).toEqual(modal)\n\n const spyOff = spyOn(EventHandler, 'off')\n\n modal.dispose()\n\n expect(Modal.getInstance(modalEl)).toBeNull()\n expect(spyOff).toHaveBeenCalledTimes(3)\n expect(spyDeactivate).toHaveBeenCalled()\n })\n })\n\n describe('handleUpdate', () => {\n it('should call adjust dialog', () => {\n fixtureEl.innerHTML = '
'\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(modal, '_adjustDialog')\n\n modal.handleUpdate()\n\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('data-api', () => {\n it('should toggle modal', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toEqual('true')\n expect(modalEl.getAttribute('role')).toEqual('dialog')\n expect(modalEl.getAttribute('aria-hidden')).toBeNull()\n expect(modalEl.style.display).toEqual('block')\n expect(document.querySelector('.modal-backdrop')).not.toBeNull()\n setTimeout(() => trigger.click(), 10)\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toBeNull()\n expect(modalEl.getAttribute('role')).toBeNull()\n expect(modalEl.getAttribute('aria-hidden')).toEqual('true')\n expect(modalEl.style.display).toEqual('none')\n expect(document.querySelector('.modal-backdrop')).toBeNull()\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should not recreate a new modal', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const modal = new Modal(modalEl)\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n const spy = spyOn(modal, 'show').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should prevent default when the trigger is or ', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n expect(modalEl.getAttribute('aria-modal')).toEqual('true')\n expect(modalEl.getAttribute('role')).toEqual('dialog')\n expect(modalEl.getAttribute('aria-hidden')).toBeNull()\n expect(modalEl.style.display).toEqual('block')\n expect(document.querySelector('.modal-backdrop')).not.toBeNull()\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should focus the trigger on hide', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n const spy = spyOn(trigger, 'focus')\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const modal = Modal.getInstance(modalEl)\n\n modal.hide()\n })\n\n const hideListener = () => {\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 20)\n }\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n hideListener()\n })\n\n trigger.click()\n })\n })\n\n it('should open modal, having special characters in its id', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n '
',\n '
',\n '

modal body

',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n modalEl.addEventListener('shown.bs.modal', () => {\n resolve()\n })\n\n trigger.click()\n })\n })\n\n it('should not prevent default when a click occurred on data-bs-dismiss=\"modal\" where tagName is DIFFERENT than or ', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const btnClose = fixtureEl.querySelector('button[data-bs-dismiss=\"modal\"]')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n btnClose.click()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n\n it('should prevent default when a click occurred on data-bs-dismiss=\"modal\" where tagName is or ', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' ',\n '
',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const btnClose = fixtureEl.querySelector('a[data-bs-dismiss=\"modal\"]')\n const modal = new Modal(modalEl)\n\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n modalEl.addEventListener('shown.bs.modal', () => {\n btnClose.click()\n })\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n modal.show()\n })\n })\n it('should not focus the trigger if the modal is not visible', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n const spy = spyOn(trigger, 'focus')\n\n modalEl.addEventListener('shown.bs.modal', () => {\n const modal = Modal.getInstance(modalEl)\n\n modal.hide()\n })\n\n const hideListener = () => {\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 20)\n }\n\n modalEl.addEventListener('hidden.bs.modal', () => {\n hideListener()\n })\n\n trigger.click()\n })\n })\n it('should not focus the trigger if the modal is not shown', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const modalEl = fixtureEl.querySelector('.modal')\n const trigger = fixtureEl.querySelector('[data-bs-toggle=\"modal\"]')\n\n const spy = spyOn(trigger, 'focus')\n\n const showListener = () => {\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 10)\n }\n\n modalEl.addEventListener('show.bs.modal', event => {\n event.preventDefault()\n showListener()\n })\n\n trigger.click()\n })\n })\n\n it('should call hide first, if another modal is open', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
'\n ].join('')\n\n const trigger2 = fixtureEl.querySelector('button')\n const modalEl1 = document.querySelector('#modal1')\n const modalEl2 = document.querySelector('#modal2')\n const modal1 = new Modal(modalEl1)\n\n modalEl1.addEventListener('shown.bs.modal', () => {\n trigger2.click()\n })\n modalEl1.addEventListener('hidden.bs.modal', () => {\n expect(Modal.getInstance(modalEl2)).not.toBeNull()\n expect(modalEl2).toHaveClass('show')\n resolve()\n })\n modal1.show()\n })\n })\n })\n describe('jQueryInterface', () => {\n it('should create a modal', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.modal.call(jQueryMock)\n\n expect(Modal.getInstance(div)).not.toBeNull()\n })\n\n it('should create a modal with given config', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.modal.call(jQueryMock, { keyboard: false })\n const spy = spyOn(Modal.prototype, 'constructor')\n expect(spy).not.toHaveBeenCalledWith(div, { keyboard: false })\n\n const modal = Modal.getInstance(div)\n expect(modal).not.toBeNull()\n expect(modal._config.keyboard).toBeFalse()\n })\n\n it('should not re create a modal', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const modal = new Modal(div)\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.modal.call(jQueryMock)\n\n expect(Modal.getInstance(div)).toEqual(modal)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.modal.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should call show method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const modal = new Modal(div)\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n const spy = spyOn(modal, 'show')\n\n jQueryMock.fn.modal.call(jQueryMock, 'show')\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should not call show method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.modal = Modal.jQueryInterface\n jQueryMock.elements = [div]\n\n const spy = spyOn(Modal.prototype, 'show')\n\n jQueryMock.fn.modal.call(jQueryMock)\n\n expect(spy).not.toHaveBeenCalled()\n })\n })\n\n describe('getInstance', () => {\n it('should return modal instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const modal = new Modal(div)\n\n expect(Modal.getInstance(div)).toEqual(modal)\n expect(Modal.getInstance(div)).toBeInstanceOf(Modal)\n })\n\n it('should return null when there is no modal instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Modal.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return modal instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const modal = new Modal(div)\n\n expect(Modal.getOrCreateInstance(div)).toEqual(modal)\n expect(Modal.getInstance(div)).toEqual(Modal.getOrCreateInstance(div, {}))\n expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal)\n })\n\n it('should return new instance when there is no modal instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Modal.getInstance(div)).toBeNull()\n expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal)\n })\n\n it('should return new instance when there is no modal instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Modal.getInstance(div)).toBeNull()\n const modal = Modal.getOrCreateInstance(div, {\n backdrop: true\n })\n expect(modal).toBeInstanceOf(Modal)\n\n expect(modal._config.backdrop).toBeTrue()\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const modal = new Modal(div, {\n backdrop: true\n })\n expect(Modal.getInstance(div)).toEqual(modal)\n\n const modal2 = Modal.getOrCreateInstance(div, {\n backdrop: false\n })\n expect(modal).toBeInstanceOf(Modal)\n expect(modal2).toEqual(modal)\n\n expect(modal2._config.backdrop).toBeTrue()\n })\n })\n})\n" }, { "path": "js/tests/unit/offcanvas.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport Offcanvas from '../../src/offcanvas.js'\nimport { isVisible } from '../../src/util/index.js'\nimport ScrollBarHelper from '../../src/util/scrollbar.js'\nimport {\n clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Offcanvas', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n document.body.classList.remove('offcanvas-open')\n clearBodyAndDocument()\n })\n\n beforeEach(() => {\n clearBodyAndDocument()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Offcanvas.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Offcanvas.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Offcanvas.DATA_KEY).toEqual('bs.offcanvas')\n })\n })\n\n describe('constructor', () => {\n it('should call hide when a element with data-bs-dismiss=\"offcanvas\" is clicked', () => {\n fixtureEl.innerHTML = [\n '
',\n ' Close',\n '
'\n ].join('')\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const closeEl = fixtureEl.querySelector('a')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n const spy = spyOn(offCanvas, 'hide')\n\n closeEl.click()\n\n expect(offCanvas._config.keyboard).toBeTrue()\n expect(spy).toHaveBeenCalled()\n })\n\n it('should hide if esc is pressed', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n const keyDownEsc = createEvent('keydown')\n keyDownEsc.key = 'Escape'\n\n const spy = spyOn(offCanvas, 'hide')\n\n offCanvasEl.dispatchEvent(keyDownEsc)\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should hide if esc is pressed and backdrop is static', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, { backdrop: 'static' })\n const keyDownEsc = createEvent('keydown')\n keyDownEsc.key = 'Escape'\n\n const spy = spyOn(offCanvas, 'hide')\n\n offCanvasEl.dispatchEvent(keyDownEsc)\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should not hide if esc is not pressed', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n const keydownTab = createEvent('keydown')\n keydownTab.key = 'Tab'\n\n const spy = spyOn(offCanvas, 'hide')\n\n offCanvasEl.dispatchEvent(keydownTab)\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should not hide if esc is pressed but with keyboard = false', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, { keyboard: false })\n const keyDownEsc = createEvent('keydown')\n keyDownEsc.key = 'Escape'\n\n const spy = spyOn(offCanvas, 'hide')\n const hidePreventedSpy = jasmine.createSpy('hidePrevented')\n offCanvasEl.addEventListener('hidePrevented.bs.offcanvas', hidePreventedSpy)\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvas._config.keyboard).toBeFalse()\n offCanvasEl.dispatchEvent(keyDownEsc)\n\n expect(hidePreventedSpy).toHaveBeenCalled()\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n\n it('should not hide if user clicks on static backdrop', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl, { backdrop: 'static' })\n\n const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })\n const spyClick = spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()\n const spyHide = spyOn(offCanvas._backdrop, 'hide').and.callThrough()\n const hidePreventedSpy = jasmine.createSpy('hidePrevented')\n offCanvasEl.addEventListener('hidePrevented.bs.offcanvas', hidePreventedSpy)\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spyClick).toEqual(jasmine.any(Function))\n\n offCanvas._backdrop._getElement().dispatchEvent(clickEvent)\n expect(hidePreventedSpy).toHaveBeenCalled()\n expect(spyHide).not.toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n\n it('should call `hide` on resize, if element\\'s position is not fixed any more', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n const spy = spyOn(offCanvas, 'hide').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n const resizeEvent = createEvent('resize')\n offCanvasEl.style.removeProperty('position')\n\n window.dispatchEvent(resizeEvent)\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n })\n\n describe('config', () => {\n it('should have default values', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n expect(offCanvas._config.backdrop).toBeTrue()\n expect(offCanvas._backdrop._config.isVisible).toBeTrue()\n expect(offCanvas._config.keyboard).toBeTrue()\n expect(offCanvas._config.scroll).toBeFalse()\n })\n\n it('should read data attributes and override default config', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n expect(offCanvas._config.backdrop).toBeFalse()\n expect(offCanvas._backdrop._config.isVisible).toBeFalse()\n expect(offCanvas._config.keyboard).toBeFalse()\n expect(offCanvas._config.scroll).toBeTrue()\n })\n\n it('given a config object must override data attributes', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, {\n backdrop: true,\n keyboard: true,\n scroll: false\n })\n expect(offCanvas._config.backdrop).toBeTrue()\n expect(offCanvas._config.keyboard).toBeTrue()\n expect(offCanvas._config.scroll).toBeFalse()\n })\n })\n\n describe('options', () => {\n it('if scroll is enabled, should allow body to scroll while offcanvas is open', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const spyHide = spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()\n const spyReset = spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spyHide).not.toHaveBeenCalled()\n offCanvas.hide()\n })\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(spyReset).not.toHaveBeenCalled()\n resolve()\n })\n offCanvas.show()\n })\n })\n\n it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const spyHide = spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()\n const spyReset = spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spyHide).toHaveBeenCalled()\n offCanvas.hide()\n })\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(spyReset).toHaveBeenCalled()\n resolve()\n })\n offCanvas.show()\n })\n })\n\n it('should hide a shown element if user click on backdrop', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })\n\n const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })\n const spy = spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvas._backdrop._config.clickCallback).toEqual(jasmine.any(Function))\n\n offCanvas._backdrop._getElement().dispatchEvent(clickEvent)\n })\n\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n\n it('should not trap focus if scroll is allowed', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, {\n scroll: true,\n backdrop: false\n })\n\n const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n\n it('should trap focus if scroll is allowed OR backdrop is enabled', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl, {\n scroll: true,\n backdrop: true\n })\n\n const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n })\n\n describe('toggle', () => {\n it('should call show method if show class is not present', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n const spy = spyOn(offCanvas, 'show')\n\n offCanvas.toggle()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should call hide method if show class is present', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvasEl).toHaveClass('show')\n const spy = spyOn(offCanvas, 'hide')\n\n offCanvas.toggle()\n\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n })\n\n describe('show', () => {\n it('should add `showing` class during opening and `show` class on end', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n offCanvasEl.addEventListener('show.bs.offcanvas', () => {\n expect(offCanvasEl).not.toHaveClass('show')\n })\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvasEl).not.toHaveClass('showing')\n expect(offCanvasEl).toHaveClass('show')\n resolve()\n })\n\n offCanvas.show()\n expect(offCanvasEl).toHaveClass('showing')\n })\n })\n\n it('should do nothing if already shown', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n offCanvas.show()\n\n expect(offCanvasEl).toHaveClass('show')\n\n const spyShow = spyOn(offCanvas._backdrop, 'show').and.callThrough()\n const spyTrigger = spyOn(EventHandler, 'trigger').and.callThrough()\n offCanvas.show()\n\n expect(spyTrigger).not.toHaveBeenCalled()\n expect(spyShow).not.toHaveBeenCalled()\n })\n\n it('should show a hidden element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spy = spyOn(offCanvas._backdrop, 'show').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvasEl).toHaveClass('show')\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n\n it('should not fire shown when show is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spy = spyOn(offCanvas._backdrop, 'show').and.callThrough()\n\n const expectEnd = () => {\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 10)\n }\n\n offCanvasEl.addEventListener('show.bs.offcanvas', event => {\n event.preventDefault()\n expectEnd()\n })\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n reject(new Error('should not fire shown event'))\n })\n\n offCanvas.show()\n })\n })\n\n it('on window load, should make visible an offcanvas element, if its markup contains class \"show\"', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const spy = spyOn(Offcanvas.prototype, 'show').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n resolve()\n })\n\n window.dispatchEvent(createEvent('load'))\n\n const instance = Offcanvas.getInstance(offCanvasEl)\n expect(instance).not.toBeNull()\n expect(spy).toHaveBeenCalled()\n })\n })\n\n it('should trap focus', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.show()\n })\n })\n })\n\n describe('hide', () => {\n it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n const offCanvasEl = fixtureEl.querySelector('.offcanvas')\n const offCanvas = new Offcanvas(offCanvasEl)\n\n offCanvasEl.addEventListener('hide.bs.offcanvas', () => {\n expect(offCanvasEl).not.toHaveClass('showing')\n expect(offCanvasEl).toHaveClass('show')\n })\n\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(offCanvasEl).not.toHaveClass('hiding')\n expect(offCanvasEl).not.toHaveClass('show')\n resolve()\n })\n\n offCanvas.show()\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n offCanvas.hide()\n expect(offCanvasEl).not.toHaveClass('showing')\n expect(offCanvasEl).toHaveClass('hiding')\n })\n })\n })\n\n it('should do nothing if already shown', () => {\n fixtureEl.innerHTML = '
'\n\n const spyTrigger = spyOn(EventHandler, 'trigger').and.callThrough()\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spyHide = spyOn(offCanvas._backdrop, 'hide').and.callThrough()\n\n offCanvas.hide()\n expect(spyHide).not.toHaveBeenCalled()\n expect(spyTrigger).not.toHaveBeenCalled()\n })\n\n it('should hide a shown element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spy = spyOn(offCanvas._backdrop, 'hide').and.callThrough()\n offCanvas.show()\n\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(offCanvasEl).not.toHaveClass('show')\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.hide()\n })\n })\n\n it('should not fire hidden when hide is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spy = spyOn(offCanvas._backdrop, 'hide').and.callThrough()\n\n offCanvas.show()\n\n const expectEnd = () => {\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 10)\n }\n\n offCanvasEl.addEventListener('hide.bs.offcanvas', event => {\n event.preventDefault()\n expectEnd()\n })\n\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n reject(new Error('should not fire hidden event'))\n })\n\n offCanvas.hide()\n })\n })\n\n it('should release focus trap', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const spy = spyOn(offCanvas._focustrap, 'deactivate').and.callThrough()\n offCanvas.show()\n\n offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n offCanvas.hide()\n })\n })\n })\n\n describe('dispose', () => {\n it('should dispose an offcanvas', () => {\n fixtureEl.innerHTML = '
'\n\n const offCanvasEl = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(offCanvasEl)\n const backdrop = offCanvas._backdrop\n const spyDispose = spyOn(backdrop, 'dispose').and.callThrough()\n const focustrap = offCanvas._focustrap\n const spyDeactivate = spyOn(focustrap, 'deactivate').and.callThrough()\n\n expect(Offcanvas.getInstance(offCanvasEl)).toEqual(offCanvas)\n\n offCanvas.dispose()\n\n expect(spyDispose).toHaveBeenCalled()\n expect(offCanvas._backdrop).toBeNull()\n expect(spyDeactivate).toHaveBeenCalled()\n expect(offCanvas._focustrap).toBeNull()\n expect(Offcanvas.getInstance(offCanvasEl)).toBeNull()\n })\n })\n\n describe('data-api', () => {\n it('should not prevent event for input', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const target = fixtureEl.querySelector('input')\n const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')\n\n offCanvasEl.addEventListener('shown.bs.offcanvas', () => {\n expect(offCanvasEl).toHaveClass('show')\n expect(target.checked).toBeTrue()\n resolve()\n })\n\n target.click()\n })\n })\n\n it('should not call toggle on disabled elements', () => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const target = fixtureEl.querySelector('a')\n\n const spy = spyOn(Offcanvas.prototype, 'toggle')\n\n target.click()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should call hide first, if another offcanvas is open', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
'\n ].join('')\n\n const trigger2 = fixtureEl.querySelector('#btn2')\n const offcanvasEl1 = document.querySelector('#offcanvas1')\n const offcanvasEl2 = document.querySelector('#offcanvas2')\n const offcanvas1 = new Offcanvas(offcanvasEl1)\n\n offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {\n trigger2.click()\n })\n offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {\n expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()\n resolve()\n })\n offcanvas1.show()\n })\n })\n\n it('should focus on trigger element after closing offcanvas', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('#btn')\n const offcanvasEl = fixtureEl.querySelector('#offcanvas')\n const offcanvas = new Offcanvas(offcanvasEl)\n const spy = spyOn(trigger, 'focus')\n\n offcanvasEl.addEventListener('shown.bs.offcanvas', () => {\n offcanvas.hide()\n })\n offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 5)\n })\n\n trigger.click()\n })\n })\n\n it('should not focus on trigger element after closing offcanvas, if it is not visible', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
'\n ].join('')\n\n const trigger = fixtureEl.querySelector('#btn')\n const offcanvasEl = fixtureEl.querySelector('#offcanvas')\n const offcanvas = new Offcanvas(offcanvasEl)\n const spy = spyOn(trigger, 'focus')\n\n offcanvasEl.addEventListener('shown.bs.offcanvas', () => {\n trigger.style.display = 'none'\n offcanvas.hide()\n })\n offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {\n setTimeout(() => {\n expect(isVisible(trigger)).toBeFalse()\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 5)\n })\n\n trigger.click()\n })\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create an offcanvas', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.offcanvas.call(jQueryMock)\n\n expect(Offcanvas.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create an offcanvas', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(div)\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.offcanvas.call(jQueryMock)\n\n expect(Offcanvas.getInstance(div)).toEqual(offCanvas)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.offcanvas.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should throw error on protected method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = '_getConfig'\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.offcanvas.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should throw error if method \"constructor\" is being called', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'constructor'\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.offcanvas.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should call offcanvas method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n const spy = spyOn(Offcanvas.prototype, 'show')\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.offcanvas.call(jQueryMock, 'show')\n expect(spy).toHaveBeenCalled()\n })\n\n it('should create a offcanvas with given config', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.offcanvas.call(jQueryMock, { scroll: true })\n\n const offcanvas = Offcanvas.getInstance(div)\n expect(offcanvas).not.toBeNull()\n expect(offcanvas._config.scroll).toBeTrue()\n })\n })\n\n describe('getInstance', () => {\n it('should return offcanvas instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const offCanvas = new Offcanvas(div)\n\n expect(Offcanvas.getInstance(div)).toEqual(offCanvas)\n expect(Offcanvas.getInstance(div)).toBeInstanceOf(Offcanvas)\n })\n\n it('should return null when there is no offcanvas instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Offcanvas.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return offcanvas instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const offcanvas = new Offcanvas(div)\n\n expect(Offcanvas.getOrCreateInstance(div)).toEqual(offcanvas)\n expect(Offcanvas.getInstance(div)).toEqual(Offcanvas.getOrCreateInstance(div, {}))\n expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas)\n })\n\n it('should return new instance when there is no Offcanvas instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Offcanvas.getInstance(div)).toBeNull()\n expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas)\n })\n\n it('should return new instance when there is no offcanvas instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Offcanvas.getInstance(div)).toBeNull()\n const offcanvas = Offcanvas.getOrCreateInstance(div, {\n scroll: true\n })\n expect(offcanvas).toBeInstanceOf(Offcanvas)\n\n expect(offcanvas._config.scroll).toBeTrue()\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const offcanvas = new Offcanvas(div, {\n scroll: true\n })\n expect(Offcanvas.getInstance(div)).toEqual(offcanvas)\n\n const offcanvas2 = Offcanvas.getOrCreateInstance(div, {\n scroll: false\n })\n expect(offcanvas).toBeInstanceOf(Offcanvas)\n expect(offcanvas2).toEqual(offcanvas)\n\n expect(offcanvas2._config.scroll).toBeTrue()\n })\n })\n})\n" }, { "path": "js/tests/unit/popover.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport Popover from '../../src/popover.js'\nimport {\n clearFixture, getFixture, jQueryMock, createEvent\n} from '../helpers/fixture.js'\n\ndescribe('Popover', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n\n const popoverList = document.querySelectorAll('.popover')\n\n for (const popoverEl of popoverList) {\n popoverEl.remove()\n }\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Popover.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Popover.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('NAME', () => {\n it('should return plugin name', () => {\n expect(Popover.NAME).toEqual(jasmine.any(String))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Popover.DATA_KEY).toEqual('bs.popover')\n })\n })\n\n describe('EVENT_KEY', () => {\n it('should return plugin event key', () => {\n expect(Popover.EVENT_KEY).toEqual('.bs.popover')\n })\n })\n\n describe('DefaultType', () => {\n it('should return plugin default type', () => {\n expect(Popover.DefaultType).toEqual(jasmine.any(Object))\n })\n })\n\n describe('show', () => {\n it('should toggle a popover after show', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n expect(document.querySelector('.popover')).not.toBeNull()\n popover.toggle()\n })\n popoverEl.addEventListener('hidden.bs.popover', () => {\n expect(document.querySelector('.popover')).toBeNull()\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should show a popover', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n expect(document.querySelector('.popover')).not.toBeNull()\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should set title and content from functions', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n title: () => 'Bootstrap',\n content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')\n expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should call content and title functions with trigger element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n title(el) {\n return el.dataset.foo\n },\n content(el) {\n return el.dataset.foo\n }\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')\n expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should call content and title functions with correct this value', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n title() {\n return this.dataset.foo\n },\n content() {\n return this.dataset.foo\n }\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')\n expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should show a popover with just content without having header', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'Nice link'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n content: 'Some beautiful content :)'\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()\n expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should show a popover with just title without having body', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'Nice link'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n title: 'Title which does not require content'\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should show a popover with just title without having body using data-attribute to get config', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'Nice link'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()\n expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should NOT show a popover without `title` and `content`', () => {\n fixtureEl.innerHTML = 'Nice link'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, { animation: false })\n const spy = spyOn(EventHandler, 'trigger').and.callThrough()\n\n popover.show()\n\n expect(spy).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))\n expect(document.querySelector('.popover')).toBeNull()\n })\n\n it('\"setContent\" should keep the initial template', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popover.setContent({ '.tooltip-inner': 'foo' })\n const tip = popover._getTipElement()\n\n expect(tip).toHaveClass('popover')\n expect(tip).toHaveClass('bs-popover-auto')\n expect(tip.querySelector('.popover-arrow')).not.toBeNull()\n expect(tip.querySelector('.popover-header')).not.toBeNull()\n expect(tip.querySelector('.popover-body')).not.toBeNull()\n })\n\n it('should call setContent once', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl, {\n content: 'Popover content'\n })\n expect(popover._templateFactory).toBeNull()\n let spy = null\n let times = 1\n\n popoverEl.addEventListener('hidden.bs.popover', () => {\n popover.show()\n })\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()\n const popoverDisplayed = document.querySelector('.popover')\n\n expect(popoverDisplayed).not.toBeNull()\n expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')\n expect(spy).toHaveBeenCalledTimes(0)\n if (times > 1) {\n resolve()\n }\n\n times++\n popover.hide()\n })\n popover.show()\n })\n })\n\n it('should show a popover with provided custom class', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n const tip = document.querySelector('.popover')\n expect(tip).not.toBeNull()\n expect(tip).toHaveClass('custom-class')\n resolve()\n })\n\n popover.show()\n })\n })\n\n it('should keep popover open when mouse leaves after click trigger', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n new Popover(popoverEl) // eslint-disable-line no-new\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n popoverEl.dispatchEvent(createEvent('mouseout'))\n\n popoverEl.addEventListener('hide.bs.popover', () => {\n throw new Error('Popover should not hide when mouse leaves after click')\n })\n\n expect(document.querySelector('.popover')).not.toBeNull()\n resolve()\n })\n\n popoverEl.click()\n })\n })\n })\n\n describe('hide', () => {\n it('should hide a popover', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n popoverEl.addEventListener('shown.bs.popover', () => {\n popover.hide()\n })\n\n popoverEl.addEventListener('hidden.bs.popover', () => {\n expect(document.querySelector('.popover')).toBeNull()\n resolve()\n })\n\n popover.show()\n })\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a popover', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n\n jQueryMock.fn.popover = Popover.jQueryInterface\n jQueryMock.elements = [popoverEl]\n\n jQueryMock.fn.popover.call(jQueryMock)\n\n expect(Popover.getInstance(popoverEl)).not.toBeNull()\n })\n\n it('should create a popover with a config object', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n\n jQueryMock.fn.popover = Popover.jQueryInterface\n jQueryMock.elements = [popoverEl]\n\n jQueryMock.fn.popover.call(jQueryMock, {\n content: 'Popover content'\n })\n\n expect(Popover.getInstance(popoverEl)).not.toBeNull()\n })\n\n it('should not re create a popover', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n jQueryMock.fn.popover = Popover.jQueryInterface\n jQueryMock.elements = [popoverEl]\n\n jQueryMock.fn.popover.call(jQueryMock)\n\n expect(Popover.getInstance(popoverEl)).toEqual(popover)\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.popover = Popover.jQueryInterface\n jQueryMock.elements = [popoverEl]\n\n expect(() => {\n jQueryMock.fn.popover.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should should call show method', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n jQueryMock.fn.popover = Popover.jQueryInterface\n jQueryMock.elements = [popoverEl]\n\n const spy = spyOn(popover, 'show')\n\n jQueryMock.fn.popover.call(jQueryMock, 'show')\n\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('getInstance', () => {\n it('should return popover instance', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n const popover = new Popover(popoverEl)\n\n expect(Popover.getInstance(popoverEl)).toEqual(popover)\n expect(Popover.getInstance(popoverEl)).toBeInstanceOf(Popover)\n })\n\n it('should return null when there is no popover instance', () => {\n fixtureEl.innerHTML = 'BS X'\n\n const popoverEl = fixtureEl.querySelector('a')\n\n expect(Popover.getInstance(popoverEl)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return popover instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const popover = new Popover(div)\n\n expect(Popover.getOrCreateInstance(div)).toEqual(popover)\n expect(Popover.getInstance(div)).toEqual(Popover.getOrCreateInstance(div, {}))\n expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover)\n })\n\n it('should return new instance when there is no popover instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Popover.getInstance(div)).toBeNull()\n expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover)\n })\n\n it('should return new instance when there is no popover instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Popover.getInstance(div)).toBeNull()\n const popover = Popover.getOrCreateInstance(div, {\n placement: 'top'\n })\n expect(popover).toBeInstanceOf(Popover)\n\n expect(popover._config.placement).toEqual('top')\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const popover = new Popover(div, {\n placement: 'top'\n })\n expect(Popover.getInstance(div)).toEqual(popover)\n\n const popover2 = Popover.getOrCreateInstance(div, {\n placement: 'bottom'\n })\n expect(popover).toBeInstanceOf(Popover)\n expect(popover2).toEqual(popover)\n\n expect(popover2._config.placement).toEqual('top')\n })\n })\n})\n" }, { "path": "js/tests/unit/scrollspy.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport ScrollSpy from '../../src/scrollspy.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('ScrollSpy', () => {\n let fixtureEl\n\n const getElementScrollSpy = element => element.scrollTo ?\n spyOn(element, 'scrollTo').and.callThrough() :\n spyOnProperty(element, 'scrollTop', 'set').and.callThrough()\n\n const scrollTo = (el, height) => {\n el.scrollTop = height\n }\n\n const onScrollStop = (callback, element, timeout = 30) => {\n let handle = null\n const onScroll = function () {\n if (handle) {\n window.clearTimeout(handle)\n }\n\n handle = setTimeout(() => {\n element.removeEventListener('scroll', onScroll)\n callback()\n }, timeout + 1)\n }\n\n element.addEventListener('scroll', onScroll)\n }\n\n const getDummyFixture = () => {\n return [\n '',\n '
',\n '
div 1
',\n '
'\n ].join('')\n }\n\n const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, cb }) => {\n const element = fixtureEl.querySelector(elementSelector)\n const target = fixtureEl.querySelector(targetSelector)\n // add top padding to fix Chrome on Android failures\n const paddingTop = 0\n const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop\n const scrollHeight = (target.offsetTop - parentOffset) + paddingTop\n\n contentEl.addEventListener('activate.bs.scrollspy', event => {\n if (scrollSpy._activeTarget !== element) {\n return\n }\n\n expect(element).toHaveClass('active')\n expect(scrollSpy._activeTarget).toEqual(element)\n expect(event.relatedTarget).toEqual(element)\n cb()\n })\n\n setTimeout(() => { // in case we scroll something before the test\n scrollTo(contentEl, scrollHeight)\n }, 100)\n }\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(ScrollSpy.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(ScrollSpy.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(ScrollSpy.DATA_KEY).toEqual('bs.scrollspy')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const sSpyEl = fixtureEl.querySelector('.content')\n const sSpyBySelector = new ScrollSpy('.content')\n const sSpyByElement = new ScrollSpy(sSpyEl)\n\n expect(sSpyBySelector._element).toEqual(sSpyEl)\n expect(sSpyByElement._element).toEqual(sSpyEl)\n })\n\n it('should null, if element is not scrollable', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
test
',\n '
'\n ].join('')\n\n const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {\n target: '#navigation'\n })\n\n expect(scrollSpy._observer.root).toBeNull()\n expect(scrollSpy._rootElement).toBeNull()\n })\n\n it('should respect threshold option', () => {\n fixtureEl.innerHTML = [\n '
    ',\n ' One' +\n '
',\n '
',\n '
test
',\n '
'\n ].join('')\n\n const scrollSpy = new ScrollSpy('#content', {\n target: '#navigation',\n threshold: [1]\n })\n\n expect(scrollSpy._observer.thresholds).toEqual([1])\n })\n\n it('should respect threshold option markup', () => {\n fixtureEl.innerHTML = [\n '
    ',\n ' One' +\n '
',\n '
',\n '
test
',\n '
'\n ].join('')\n\n const scrollSpy = new ScrollSpy('#content', {\n target: '#navigation'\n })\n\n // See https://stackoverflow.com/a/45592926\n const expectToBeCloseToArray = (actual, expected) => {\n expect(actual.length).toBe(expected.length)\n for (const x of actual) {\n const i = actual.indexOf(x)\n expect(x).withContext(`[${i}]`).toBeCloseTo(expected[i])\n }\n }\n\n expectToBeCloseToArray(scrollSpy._observer.thresholds, [0, 0.2, 1])\n })\n\n it('should not take count to not visible sections', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
test
',\n ' ',\n '
test
',\n '
'\n ].join('')\n\n const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {\n target: '#navigation'\n })\n\n expect(scrollSpy._observableSections.size).toBe(1)\n expect(scrollSpy._targetLinks.size).toBe(1)\n })\n\n it('should not process element without target', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
test
',\n '
test2
',\n '
'\n ].join('')\n\n const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {\n target: '#navigation'\n })\n\n expect(scrollSpy._targetLinks).toHaveSize(2)\n })\n\n it('should only switch \"active\" class on current target', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
Overview
',\n '
Detail
',\n '
',\n '
'\n ].join('')\n\n const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')\n const rootEl = fixtureEl.querySelector('#root')\n const scrollSpy = new ScrollSpy(scrollSpyEl, {\n target: 'ss-target'\n })\n\n const spy = spyOn(scrollSpy, '_process').and.callThrough()\n\n onScrollStop(() => {\n expect(rootEl).toHaveClass('active')\n expect(spy).toHaveBeenCalled()\n resolve()\n }, scrollSpyEl)\n\n scrollTo(scrollSpyEl, 350)\n })\n })\n\n it('should not process data if `activeTarget` is same as given target', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
div 2
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(contentEl, {\n offset: 0,\n target: '.navbar'\n })\n\n const triggerSpy = spyOn(EventHandler, 'trigger').and.callThrough()\n\n scrollSpy._activeTarget = fixtureEl.querySelector('#a-1')\n testElementIsActiveAfterScroll({\n elementSelector: '#a-1',\n targetSelector: '#div-1',\n contentEl,\n scrollSpy,\n cb: reject\n })\n\n setTimeout(() => {\n expect(triggerSpy).not.toHaveBeenCalled()\n resolve()\n }, 100)\n })\n })\n\n it('should only switch \"active\" class on current target specified w element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
Overview
',\n '
Detail
',\n '
',\n '
'\n ].join('')\n\n const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')\n const rootEl = fixtureEl.querySelector('#root')\n const scrollSpy = new ScrollSpy(scrollSpyEl, {\n target: fixtureEl.querySelector('#ss-target')\n })\n\n const spy = spyOn(scrollSpy, '_process').and.callThrough()\n\n onScrollStop(() => {\n expect(rootEl).toHaveClass('active')\n expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href=\"#detail\"]'))\n expect(spy).toHaveBeenCalled()\n resolve()\n }, scrollSpyEl)\n\n scrollTo(scrollSpyEl, 350)\n })\n })\n\n it('should add the active class to the correct element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
div 2
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(contentEl, {\n offset: 0,\n target: '.navbar'\n })\n\n testElementIsActiveAfterScroll({\n elementSelector: '#a-1',\n targetSelector: '#div-1',\n contentEl,\n scrollSpy,\n cb() {\n testElementIsActiveAfterScroll({\n elementSelector: '#a-2',\n targetSelector: '#div-2',\n contentEl,\n scrollSpy,\n cb: resolve\n })\n }\n })\n })\n })\n\n it('should add to nav the active class to the correct element (nav markup)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
div 2
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(contentEl, {\n offset: 0,\n target: '.navbar'\n })\n\n testElementIsActiveAfterScroll({\n elementSelector: '#a-1',\n targetSelector: '#div-1',\n contentEl,\n scrollSpy,\n cb() {\n testElementIsActiveAfterScroll({\n elementSelector: '#a-2',\n targetSelector: '#div-2',\n contentEl,\n scrollSpy,\n cb: resolve\n })\n }\n })\n })\n })\n\n it('should add to list-group, the active class to the correct element (list-group markup)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
div 2
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(contentEl, {\n offset: 0,\n target: '.navbar'\n })\n\n testElementIsActiveAfterScroll({\n elementSelector: '#a-1',\n targetSelector: '#div-1',\n contentEl,\n scrollSpy,\n cb() {\n testElementIsActiveAfterScroll({\n elementSelector: '#a-2',\n targetSelector: '#div-2',\n contentEl,\n scrollSpy,\n cb: resolve\n })\n }\n })\n })\n })\n\n it('should clear selection if above the first section', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '',\n '
',\n '
',\n '
text
',\n '
text
',\n '
text
',\n '
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('#content')\n const scrollSpy = new ScrollSpy(contentEl, {\n target: '#navigation',\n offset: contentEl.offsetTop\n })\n const spy = spyOn(scrollSpy, '_process').and.callThrough()\n\n onScrollStop(() => {\n const active = () => fixtureEl.querySelector('.active')\n expect(spy).toHaveBeenCalled()\n\n expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)\n expect(active().getAttribute('id')).toEqual('two-link')\n onScrollStop(() => {\n expect(active()).toBeNull()\n resolve()\n }, contentEl)\n scrollTo(contentEl, 0)\n }, contentEl)\n\n scrollTo(contentEl, 200)\n })\n })\n\n it('should not clear selection if above the first section and first section is at the top', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '',\n '
',\n '
test
',\n '
test
',\n '
test
',\n '
test
',\n '
'\n ].join('')\n\n const negativeHeight = 0\n const startOfSectionTwo = 101\n const contentEl = fixtureEl.querySelector('#content')\n // eslint-disable-next-line no-unused-vars\n const scrollSpy = new ScrollSpy(contentEl, {\n target: '#navigation',\n rootMargin: '0px 0px -50%'\n })\n\n onScrollStop(() => {\n const activeId = () => fixtureEl.querySelector('.active').getAttribute('id')\n\n expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)\n expect(activeId()).toEqual('two-link')\n scrollTo(contentEl, negativeHeight)\n\n onScrollStop(() => {\n expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)\n expect(activeId()).toEqual('one-link')\n resolve()\n }, contentEl)\n\n scrollTo(contentEl, 0)\n }, contentEl)\n\n scrollTo(contentEl, startOfSectionTwo)\n })\n })\n\n it('should correctly select navigation element on backward scrolling when each target section height is 100%', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
div 2
',\n '
div 3
',\n '
div 4
',\n '
div 5
',\n '
'\n ].join('')\n\n const contentEl = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(contentEl, {\n offset: 0,\n target: '.navbar'\n })\n\n scrollTo(contentEl, 0)\n testElementIsActiveAfterScroll({\n elementSelector: '#li-100-5',\n targetSelector: '#div-100-5',\n contentEl,\n scrollSpy,\n cb() {\n scrollTo(contentEl, 0)\n testElementIsActiveAfterScroll({\n elementSelector: '#li-100-2',\n targetSelector: '#div-100-2',\n contentEl,\n scrollSpy,\n cb() {\n scrollTo(contentEl, 0)\n testElementIsActiveAfterScroll({\n elementSelector: '#li-100-3',\n targetSelector: '#div-100-3',\n contentEl,\n scrollSpy,\n cb() {\n scrollTo(contentEl, 0)\n testElementIsActiveAfterScroll({\n elementSelector: '#li-100-2',\n targetSelector: '#div-100-2',\n contentEl,\n scrollSpy,\n cb() {\n scrollTo(contentEl, 0)\n testElementIsActiveAfterScroll({\n elementSelector: '#li-100-1',\n targetSelector: '#div-100-1',\n contentEl,\n scrollSpy,\n cb: resolve\n })\n }\n })\n }\n })\n }\n })\n }\n })\n })\n })\n })\n\n describe('refresh', () => {\n it('should disconnect existing observer', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const el = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(el)\n\n const spy = spyOn(scrollSpy._observer, 'disconnect')\n\n scrollSpy.refresh()\n\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('dispose', () => {\n it('should dispose a scrollspy', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const el = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(el)\n\n expect(ScrollSpy.getInstance(el)).not.toBeNull()\n\n scrollSpy.dispose()\n\n expect(ScrollSpy.getInstance(el)).toBeNull()\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a scrollspy', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.scrollspy.call(jQueryMock, { target: '#navBar' })\n\n expect(ScrollSpy.getInstance(div)).not.toBeNull()\n })\n\n it('should create a scrollspy with given config', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' })\n const spy = spyOn(ScrollSpy.prototype, 'constructor')\n expect(spy).not.toHaveBeenCalledWith(div, { rootMargin: '100px' })\n\n const scrollspy = ScrollSpy.getInstance(div)\n expect(scrollspy).not.toBeNull()\n expect(scrollspy._config.rootMargin).toEqual('100px')\n })\n\n it('should not re create a scrollspy', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(div)\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.scrollspy.call(jQueryMock)\n\n expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)\n })\n\n it('should call a scrollspy method', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(div)\n\n const spy = spyOn(scrollSpy, 'refresh')\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.scrollspy.call(jQueryMock, 'refresh')\n\n expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)\n expect(spy).toHaveBeenCalled()\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.scrollspy.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should throw error on protected method', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const action = '_getConfig'\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.scrollspy.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n\n it('should throw error if method \"constructor\" is being called', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const action = 'constructor'\n\n jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.scrollspy.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return scrollspy instance', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const scrollSpy = new ScrollSpy(div, { target: fixtureEl.querySelector('#navBar') })\n\n expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)\n expect(ScrollSpy.getInstance(div)).toBeInstanceOf(ScrollSpy)\n })\n\n it('should return null if there is no instance', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n expect(ScrollSpy.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return scrollspy instance', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const scrollspy = new ScrollSpy(div)\n\n expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy)\n expect(ScrollSpy.getInstance(div)).toEqual(ScrollSpy.getOrCreateInstance(div, {}))\n expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy)\n })\n\n it('should return new instance when there is no scrollspy instance', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n\n expect(ScrollSpy.getInstance(div)).toBeNull()\n expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy)\n })\n\n it('should return new instance when there is no scrollspy instance with given configuration', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n\n expect(ScrollSpy.getInstance(div)).toBeNull()\n const scrollspy = ScrollSpy.getOrCreateInstance(div, {\n offset: 1\n })\n expect(scrollspy).toBeInstanceOf(ScrollSpy)\n\n expect(scrollspy._config.offset).toEqual(1)\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const scrollspy = new ScrollSpy(div, {\n offset: 1\n })\n expect(ScrollSpy.getInstance(div)).toEqual(scrollspy)\n\n const scrollspy2 = ScrollSpy.getOrCreateInstance(div, {\n offset: 2\n })\n expect(scrollspy).toBeInstanceOf(ScrollSpy)\n expect(scrollspy2).toEqual(scrollspy)\n\n expect(scrollspy2._config.offset).toEqual(1)\n })\n })\n\n describe('event handler', () => {\n it('should create scrollspy on window load event', () => {\n fixtureEl.innerHTML = [\n '
' +\n '
'\n ].join('')\n\n const scrollSpyEl = fixtureEl.querySelector('#wrapper')\n\n window.dispatchEvent(createEvent('load'))\n\n expect(ScrollSpy.getInstance(scrollSpyEl)).not.toBeNull()\n })\n })\n\n describe('SmoothScroll', () => {\n it('should not enable smoothScroll', () => {\n fixtureEl.innerHTML = getDummyFixture()\n const offSpy = spyOn(EventHandler, 'off').and.callThrough()\n const onSpy = spyOn(EventHandler, 'on').and.callThrough()\n\n const div = fixtureEl.querySelector('.content')\n const target = fixtureEl.querySelector('#navBar')\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1\n })\n\n expect(offSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')\n expect(onSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')\n })\n\n it('should enable smoothScroll', () => {\n fixtureEl.innerHTML = getDummyFixture()\n const offSpy = spyOn(EventHandler, 'off').and.callThrough()\n const onSpy = spyOn(EventHandler, 'on').and.callThrough()\n\n const div = fixtureEl.querySelector('.content')\n const target = fixtureEl.querySelector('#navBar')\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1,\n smoothScroll: true\n })\n\n expect(offSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy')\n expect(onSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy', '[href]', jasmine.any(Function))\n })\n\n it('should not smoothScroll to element if it not handles a scrollspy section', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('.content')\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1,\n smoothScroll: true\n })\n\n const clickSpy = getElementScrollSpy(div)\n\n fixtureEl.querySelector('#anchor-2').click()\n expect(clickSpy).not.toHaveBeenCalled()\n })\n\n it('should call `scrollTop` if element doesn\\'t not support `scrollTo`', () => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const link = fixtureEl.querySelector('[href=\"#div-jsm-1\"]')\n delete div.scrollTo\n const clickSpy = getElementScrollSpy(div)\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1,\n smoothScroll: true\n })\n\n link.click()\n expect(clickSpy).toHaveBeenCalled()\n })\n\n it('should smoothScroll to the proper observable element on anchor click', done => {\n fixtureEl.innerHTML = getDummyFixture()\n\n const div = fixtureEl.querySelector('.content')\n const link = fixtureEl.querySelector('[href=\"#div-jsm-1\"]')\n const observable = fixtureEl.querySelector('#div-jsm-1')\n const clickSpy = getElementScrollSpy(div)\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1,\n smoothScroll: true\n })\n\n setTimeout(() => {\n if (div.scrollTo) {\n expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' })\n } else {\n expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)\n }\n\n done()\n }, 100)\n link.click()\n })\n\n it('should smoothscroll to observable with anchor link that contains a french word as id', done => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
div 1
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('.content')\n const link = fixtureEl.querySelector('[href=\"#présentation\"]')\n const observable = fixtureEl.querySelector('#présentation')\n const clickSpy = getElementScrollSpy(div)\n // eslint-disable-next-line no-new\n new ScrollSpy(div, {\n offset: 1,\n smoothScroll: true\n })\n\n setTimeout(() => {\n if (div.scrollTo) {\n expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' })\n } else {\n expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)\n }\n\n done()\n }, 100)\n link.click()\n })\n })\n})\n" }, { "path": "js/tests/unit/tab.spec.js", "content": "import Tab from '../../src/tab.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Tab', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Tab.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = [\n '',\n '
    ',\n '
  • ',\n '
'\n ].join('')\n\n const tabEl = fixtureEl.querySelector('[href=\"#home\"]')\n const tabBySelector = new Tab('[href=\"#home\"]')\n const tabByElement = new Tab(tabEl)\n\n expect(tabBySelector._element).toEqual(tabEl)\n expect(tabByElement._element).toEqual(tabEl)\n })\n\n it('Do not Throw exception if not parent', () => {\n fixtureEl.innerHTML = [\n fixtureEl.innerHTML = '
'\n ].join('')\n const navEl = fixtureEl.querySelector('.nav-link')\n\n expect(() => {\n new Tab(navEl) // eslint-disable-line no-new\n }).not.toThrowError(TypeError)\n })\n })\n\n describe('show', () => {\n it('should activate element by tab id (using buttons, the preferred semantic way)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
    ',\n '
  • ',\n '
  • ',\n '
'\n ].join('')\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')\n resolve()\n })\n\n tab.show()\n })\n })\n\n it('should activate element by tab id (using links for tabs - not ideal, but still supported)', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
    ',\n '
  • ',\n '
  • ',\n '
'\n ].join('')\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')\n resolve()\n })\n\n tab.show()\n })\n })\n\n it('should activate element by tab id in ordered list', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    2. ',\n '
    3. ',\n '
',\n '
    ',\n '
  1. ',\n '
  2. ',\n '
'\n ].join('')\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n resolve()\n })\n\n tab.show()\n })\n })\n\n it('should activate element by tab id in nav list', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n resolve()\n })\n\n tab.show()\n })\n })\n\n it('should activate element by tab id in list group', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n resolve()\n })\n\n tab.show()\n })\n })\n\n it('should work with tab id being an int', done => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
',\n '
',\n '
',\n '
',\n ' Working Tab 1 (#tab1) Content Here',\n '
',\n '
',\n ' Working Tab 2 (#2) with numeric ID',\n '
',\n '
'\n ].join('')\n const profileTriggerEl = fixtureEl.querySelector('#trigger2')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelector(`#${CSS.escape('2')}`)).toHaveClass('active')\n done()\n })\n\n tab.show()\n })\n\n it('should not fire shown when show is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = '
'\n\n const navEl = fixtureEl.querySelector('.nav > div')\n const tab = new Tab(navEl)\n const expectDone = () => {\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 30)\n }\n\n navEl.addEventListener('show.bs.tab', ev => {\n ev.preventDefault()\n expectDone()\n })\n\n navEl.addEventListener('shown.bs.tab', () => {\n reject(new Error('should not trigger shown event'))\n })\n\n tab.show()\n })\n })\n\n it('should not fire shown when tab is already active', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerActive = fixtureEl.querySelector('button.active')\n const tab = new Tab(triggerActive)\n\n triggerActive.addEventListener('shown.bs.tab', () => {\n reject(new Error('should not trigger shown event'))\n })\n\n tab.show()\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 30)\n })\n })\n\n it('show and shown events should reference correct relatedTarget', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')\n const secondTab = new Tab(secondTabTrigger)\n\n secondTabTrigger.addEventListener('show.bs.tab', ev => {\n expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')\n })\n\n secondTabTrigger.addEventListener('shown.bs.tab', ev => {\n expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')\n expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')\n expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false')\n resolve()\n })\n\n secondTab.show()\n })\n })\n\n it('should fire hide and hidden events', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
'\n ].join('')\n\n const triggerList = fixtureEl.querySelectorAll('button')\n const firstTab = new Tab(triggerList[0])\n const secondTab = new Tab(triggerList[1])\n\n let hideCalled = false\n triggerList[0].addEventListener('shown.bs.tab', () => {\n secondTab.show()\n })\n\n triggerList[0].addEventListener('hide.bs.tab', ev => {\n hideCalled = true\n expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')\n })\n\n triggerList[0].addEventListener('hidden.bs.tab', ev => {\n expect(hideCalled).toBeTrue()\n expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')\n resolve()\n })\n\n firstTab.show()\n })\n })\n\n it('should not fire hidden when hide is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
'\n ].join('')\n\n const triggerList = fixtureEl.querySelectorAll('button')\n const firstTab = new Tab(triggerList[0])\n const secondTab = new Tab(triggerList[1])\n const expectDone = () => {\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 30)\n }\n\n triggerList[0].addEventListener('shown.bs.tab', () => {\n secondTab.show()\n })\n\n triggerList[0].addEventListener('hide.bs.tab', ev => {\n ev.preventDefault()\n expectDone()\n })\n\n triggerList[0].addEventListener('hidden.bs.tab', () => {\n reject(new Error('should not trigger hidden'))\n })\n\n firstTab.show()\n })\n })\n\n it('should handle removed tabs', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
test 1
',\n '
test 2
',\n '
test 3
',\n '
'\n ].join('')\n\n const secondNavEl = fixtureEl.querySelector('#secondNav')\n const btnCloseEl = fixtureEl.querySelector('#btnClose')\n const secondNavTab = new Tab(secondNavEl)\n\n secondNavEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelectorAll('.nav-tab')).toHaveSize(2)\n resolve()\n })\n\n btnCloseEl.addEventListener('click', () => {\n const linkEl = btnCloseEl.parentNode\n const liEl = linkEl.parentNode\n const tabId = linkEl.getAttribute('href')\n const tabIdEl = fixtureEl.querySelector(tabId)\n\n liEl.remove()\n tabIdEl.remove()\n secondNavTab.show()\n })\n\n btnCloseEl.click()\n })\n })\n\n it('should not focus on opened tab', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
    ',\n '
  • ',\n '
  • ',\n '
'\n ].join('')\n\n const firstTab = fixtureEl.querySelector('#home')\n firstTab.focus()\n\n const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')\n const tab = new Tab(profileTriggerEl)\n\n profileTriggerEl.addEventListener('shown.bs.tab', () => {\n expect(document.activeElement).toBe(firstTab)\n expect(document.activeElement).not.toBe(profileTriggerEl)\n resolve()\n })\n\n tab.show()\n })\n })\n })\n\n describe('dispose', () => {\n it('should dispose a tab', () => {\n fixtureEl.innerHTML = '
'\n\n const el = fixtureEl.querySelector('.nav > div')\n const tab = new Tab(fixtureEl.querySelector('.nav > div'))\n\n expect(Tab.getInstance(el)).not.toBeNull()\n\n tab.dispose()\n\n expect(Tab.getInstance(el)).toBeNull()\n })\n })\n\n describe('_activate', () => {\n it('should not be called if element argument is null', () => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n '
'\n ].join('')\n\n const tabEl = fixtureEl.querySelector('.nav-link')\n const tab = new Tab(tabEl)\n const spy = jasmine.createSpy('spy')\n\n const spyQueue = spyOn(tab, '_queueCallback')\n tab._activate(null, spy)\n expect(spyQueue).not.toHaveBeenCalled()\n expect(spy).not.toHaveBeenCalled()\n })\n })\n\n describe('_setInitialAttributes', () => {\n it('should put aria attributes', () => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n '
  • ',\n '
',\n '
',\n '
'\n ].join('')\n\n const tabEl = fixtureEl.querySelector('.nav-link')\n const parent = fixtureEl.querySelector('.nav')\n const children = fixtureEl.querySelectorAll('.nav-link')\n const tabPanel = fixtureEl.querySelector('#panel')\n const tabPanel2 = fixtureEl.querySelector('#panel2')\n\n expect(parent.getAttribute('role')).toEqual(null)\n expect(tabEl.getAttribute('role')).toEqual(null)\n expect(tabPanel.getAttribute('role')).toEqual(null)\n const tab = new Tab(tabEl)\n tab._setInitialAttributes(parent, children)\n\n expect(parent.getAttribute('role')).toEqual('tablist')\n expect(tabEl.getAttribute('role')).toEqual('tab')\n\n expect(tabPanel.getAttribute('role')).toEqual('tabpanel')\n expect(tabPanel2.getAttribute('role')).toEqual('tabpanel')\n expect(tabPanel.hasAttribute('tabindex')).toBeFalse()\n expect(tabPanel.hasAttribute('tabindex2')).toBeFalse()\n\n expect(tabPanel.getAttribute('aria-labelledby')).toEqual('foo')\n expect(tabPanel2.hasAttribute('aria-labelledby')).toBeFalse()\n })\n })\n\n describe('_keydown', () => {\n it('if event is not one of left/right/up/down arrow, ignore it', () => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n '
'\n ].join('')\n\n const tabEl = fixtureEl.querySelector('.nav-link')\n const tab = new Tab(tabEl)\n\n const keydown = createEvent('keydown')\n keydown.key = 'Enter'\n const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough()\n const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n const spyKeydown = spyOn(tab, '_keydown')\n const spyGet = spyOn(tab, '_getChildren')\n\n tabEl.dispatchEvent(keydown)\n expect(spyKeydown).toHaveBeenCalled()\n expect(spyGet).not.toHaveBeenCalled()\n\n expect(spyStop).not.toHaveBeenCalled()\n expect(spyPrevent).not.toHaveBeenCalled()\n })\n\n it('if keydown event is right/down arrow, handle it', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n const tab1 = new Tab(tabEl1)\n const tab2 = new Tab(tabEl2)\n const tab3 = new Tab(tabEl3)\n const spyShow1 = spyOn(tab1, 'show').and.callThrough()\n const spyShow2 = spyOn(tab2, 'show').and.callThrough()\n const spyShow3 = spyOn(tab3, 'show').and.callThrough()\n const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()\n const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()\n const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()\n\n const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough()\n const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n let keydown = createEvent('keydown')\n keydown.key = 'ArrowRight'\n\n tabEl1.dispatchEvent(keydown)\n expect(spyShow2).toHaveBeenCalled()\n expect(spyFocus2).toHaveBeenCalled()\n\n keydown = createEvent('keydown')\n keydown.key = 'ArrowDown'\n\n tabEl2.dispatchEvent(keydown)\n expect(spyShow3).toHaveBeenCalled()\n expect(spyFocus3).toHaveBeenCalled()\n\n tabEl3.dispatchEvent(keydown)\n expect(spyShow1).toHaveBeenCalled()\n expect(spyFocus1).toHaveBeenCalled()\n\n expect(spyStop).toHaveBeenCalledTimes(3)\n expect(spyPrevent).toHaveBeenCalledTimes(3)\n })\n\n it('if keydown event is left arrow, handle it', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tab1 = new Tab(tabEl1)\n const tab2 = new Tab(tabEl2)\n const spyShow1 = spyOn(tab1, 'show').and.callThrough()\n const spyShow2 = spyOn(tab2, 'show').and.callThrough()\n const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()\n const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()\n\n const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough()\n const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n let keydown = createEvent('keydown')\n keydown.key = 'ArrowLeft'\n\n tabEl2.dispatchEvent(keydown)\n expect(spyShow1).toHaveBeenCalled()\n expect(spyFocus1).toHaveBeenCalled()\n\n keydown = createEvent('keydown')\n keydown.key = 'ArrowUp'\n\n tabEl1.dispatchEvent(keydown)\n expect(spyShow2).toHaveBeenCalled()\n expect(spyFocus2).toHaveBeenCalled()\n\n expect(spyStop).toHaveBeenCalledTimes(2)\n expect(spyPrevent).toHaveBeenCalledTimes(2)\n })\n\n it('if keydown event is Home, handle it', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n\n const tab3 = new Tab(tabEl3)\n tab3.show()\n\n const spyShown = jasmine.createSpy()\n tabEl1.addEventListener('shown.bs.tab', spyShown)\n\n const keydown = createEvent('keydown')\n keydown.key = 'Home'\n\n tabEl3.dispatchEvent(keydown)\n\n expect(spyShown).toHaveBeenCalled()\n })\n\n it('if keydown event is End, handle it', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n\n const tab1 = new Tab(tabEl1)\n tab1.show()\n\n const spyShown = jasmine.createSpy()\n tabEl3.addEventListener('shown.bs.tab', spyShown)\n\n const keydown = createEvent('keydown')\n keydown.key = 'End'\n\n tabEl1.dispatchEvent(keydown)\n\n expect(spyShown).toHaveBeenCalled()\n })\n\n it('if keydown event is right arrow and next element is disabled', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n const tabEl4 = fixtureEl.querySelector('#tab4')\n const tab1 = new Tab(tabEl1)\n const tab2 = new Tab(tabEl2)\n const tab3 = new Tab(tabEl3)\n const tab4 = new Tab(tabEl4)\n const spy1 = spyOn(tab1, 'show').and.callThrough()\n const spy2 = spyOn(tab2, 'show').and.callThrough()\n const spy3 = spyOn(tab3, 'show').and.callThrough()\n const spy4 = spyOn(tab4, 'show').and.callThrough()\n const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()\n const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()\n const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()\n const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowRight'\n\n tabEl1.dispatchEvent(keydown)\n expect(spy1).not.toHaveBeenCalled()\n expect(spy2).not.toHaveBeenCalled()\n expect(spy3).not.toHaveBeenCalled()\n expect(spy4).toHaveBeenCalledTimes(1)\n expect(spyFocus1).not.toHaveBeenCalled()\n expect(spyFocus2).not.toHaveBeenCalled()\n expect(spyFocus3).not.toHaveBeenCalled()\n expect(spyFocus4).toHaveBeenCalledTimes(1)\n })\n\n it('if keydown event is left arrow and next element is disabled', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n const tabEl4 = fixtureEl.querySelector('#tab4')\n const tab1 = new Tab(tabEl1)\n const tab2 = new Tab(tabEl2)\n const tab3 = new Tab(tabEl3)\n const tab4 = new Tab(tabEl4)\n const spy1 = spyOn(tab1, 'show').and.callThrough()\n const spy2 = spyOn(tab2, 'show').and.callThrough()\n const spy3 = spyOn(tab3, 'show').and.callThrough()\n const spy4 = spyOn(tab4, 'show').and.callThrough()\n const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()\n const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()\n const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()\n const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()\n\n const keydown = createEvent('keydown')\n keydown.key = 'ArrowLeft'\n\n tabEl4.dispatchEvent(keydown)\n expect(spy4).not.toHaveBeenCalled()\n expect(spy3).not.toHaveBeenCalled()\n expect(spy2).not.toHaveBeenCalled()\n expect(spy1).toHaveBeenCalledTimes(1)\n expect(spyFocus4).not.toHaveBeenCalled()\n expect(spyFocus3).not.toHaveBeenCalled()\n expect(spyFocus2).not.toHaveBeenCalled()\n expect(spyFocus1).toHaveBeenCalledTimes(1)\n })\n\n it('if keydown event is Home and first element is disabled', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n const tab3 = new Tab(tabEl3)\n\n tab3.show()\n\n const spyShown1 = jasmine.createSpy()\n const spyShown2 = jasmine.createSpy()\n tabEl1.addEventListener('shown.bs.tab', spyShown1)\n tabEl2.addEventListener('shown.bs.tab', spyShown2)\n\n const keydown = createEvent('keydown')\n keydown.key = 'Home'\n\n tabEl3.dispatchEvent(keydown)\n\n expect(spyShown1).not.toHaveBeenCalled()\n expect(spyShown2).toHaveBeenCalled()\n })\n\n it('if keydown event is End and last element is disabled', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const tabEl1 = fixtureEl.querySelector('#tab1')\n const tabEl2 = fixtureEl.querySelector('#tab2')\n const tabEl3 = fixtureEl.querySelector('#tab3')\n const tab1 = new Tab(tabEl1)\n\n tab1.show()\n\n const spyShown2 = jasmine.createSpy()\n const spyShown3 = jasmine.createSpy()\n tabEl2.addEventListener('shown.bs.tab', spyShown2)\n tabEl3.addEventListener('shown.bs.tab', spyShown3)\n\n const keydown = createEvent('keydown')\n keydown.key = 'End'\n\n tabEl1.dispatchEvent(keydown)\n\n expect(spyShown3).not.toHaveBeenCalled()\n expect(spyShown2).toHaveBeenCalled()\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a tab', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('.nav > div')\n\n jQueryMock.fn.tab = Tab.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tab.call(jQueryMock)\n\n expect(Tab.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a tab', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('.nav > div')\n const tab = new Tab(div)\n\n jQueryMock.fn.tab = Tab.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tab.call(jQueryMock)\n\n expect(Tab.getInstance(div)).toEqual(tab)\n })\n\n it('should call a tab method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('.nav > div')\n const tab = new Tab(div)\n\n const spy = spyOn(tab, 'show')\n\n jQueryMock.fn.tab = Tab.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tab.call(jQueryMock, 'show')\n\n expect(Tab.getInstance(div)).toEqual(tab)\n expect(spy).toHaveBeenCalled()\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('.nav > div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.tab = Tab.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.tab.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return null if there is no instance', () => {\n expect(Tab.getInstance(fixtureEl)).toBeNull()\n })\n\n it('should return this instance', () => {\n fixtureEl.innerHTML = '
'\n\n const divEl = fixtureEl.querySelector('.nav > div')\n const tab = new Tab(divEl)\n\n expect(Tab.getInstance(divEl)).toEqual(tab)\n expect(Tab.getInstance(divEl)).toBeInstanceOf(Tab)\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return tab instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tab = new Tab(div)\n\n expect(Tab.getOrCreateInstance(div)).toEqual(tab)\n expect(Tab.getInstance(div)).toEqual(Tab.getOrCreateInstance(div, {}))\n expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab)\n })\n\n it('should return new instance when there is no tab instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Tab.getInstance(div)).toBeNull()\n expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab)\n })\n })\n\n describe('data-api', () => {\n it('should create dynamically a tab', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')\n\n secondTabTrigger.addEventListener('shown.bs.tab', () => {\n expect(secondTabTrigger).toHaveClass('active')\n expect(fixtureEl.querySelector('#profile')).toHaveClass('active')\n resolve()\n })\n\n secondTabTrigger.click()\n })\n })\n\n it('selected tab should deactivate previous selected link in dropdown', () => {\n fixtureEl.innerHTML = [\n ''\n ].join('')\n\n const firstLiLinkEl = fixtureEl.querySelector('li:first-child a')\n\n firstLiLinkEl.click()\n expect(firstLiLinkEl).toHaveClass('active')\n expect(fixtureEl.querySelector('li:last-child a')).not.toHaveClass('active')\n expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child')).not.toHaveClass('active')\n })\n\n it('selecting a dropdown tab does not activate another', () => {\n const nav1 = [\n ''\n ].join('')\n const nav2 = [\n ''\n ].join('')\n\n fixtureEl.innerHTML = nav1 + nav2\n\n const firstDropItem = fixtureEl.querySelector('#nav1 .dropdown-item')\n\n firstDropItem.click()\n expect(firstDropItem).toHaveClass('active')\n expect(fixtureEl.querySelector('#nav1 .dropdown-toggle')).toHaveClass('active')\n expect(fixtureEl.querySelector('#nav2 .dropdown-toggle')).not.toHaveClass('active')\n expect(fixtureEl.querySelector('#nav2 .dropdown-item')).not.toHaveClass('active')\n })\n\n it('should support li > .dropdown-item', () => {\n fixtureEl.innerHTML = [\n ''\n ].join('')\n\n const dropItems = fixtureEl.querySelectorAll('.dropdown-item')\n\n dropItems[1].click()\n expect(dropItems[0]).not.toHaveClass('active')\n expect(dropItems[1]).toHaveClass('active')\n expect(fixtureEl.querySelector('.nav-link')).not.toHaveClass('active')\n })\n\n it('should handle nested tabs', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n ' ',\n '
',\n '
Nested Tab1 Content
',\n '
Nested Tab2 Content
',\n '
',\n '
',\n '
Tab2 Content
',\n '
Tab3 Content
',\n '
'\n ].join('')\n\n const tab1El = fixtureEl.querySelector('#tab1')\n const tabNested2El = fixtureEl.querySelector('#tabNested2')\n const xTab1El = fixtureEl.querySelector('#x-tab1')\n\n tabNested2El.addEventListener('shown.bs.tab', () => {\n expect(xTab1El).toHaveClass('active')\n resolve()\n })\n\n tab1El.addEventListener('shown.bs.tab', () => {\n expect(xTab1El).toHaveClass('active')\n tabNested2El.click()\n })\n\n tab1El.click()\n })\n })\n\n it('should not remove fade class if no active pane is present', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerTabProfileEl = fixtureEl.querySelector('#tab-profile')\n const triggerTabHomeEl = fixtureEl.querySelector('#tab-home')\n const tabProfileEl = fixtureEl.querySelector('#profile')\n const tabHomeEl = fixtureEl.querySelector('#home')\n\n triggerTabHomeEl.addEventListener('shown.bs.tab', () => {\n setTimeout(() => {\n expect(tabProfileEl).toHaveClass('fade')\n expect(tabProfileEl).not.toHaveClass('show')\n\n expect(tabHomeEl).toHaveClass('fade')\n expect(tabHomeEl).toHaveClass('show')\n\n resolve()\n }, 10)\n })\n\n triggerTabProfileEl.addEventListener('shown.bs.tab', () => {\n setTimeout(() => {\n expect(tabProfileEl).toHaveClass('fade')\n expect(tabProfileEl).toHaveClass('show')\n triggerTabHomeEl.click()\n }, 10)\n })\n\n triggerTabProfileEl.click()\n })\n })\n\n it('should add `show` class to tab panes if there is no `.fade` class', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n ' ',\n '
    • ',\n '
  • ',\n ' ',\n '
    • ',\n '
',\n '
',\n '
test 1
',\n '
test 2
',\n '
'\n ].join('')\n\n const secondNavEl = fixtureEl.querySelector('#secondNav')\n\n secondNavEl.addEventListener('shown.bs.tab', () => {\n expect(fixtureEl.querySelectorAll('.tab-content .show')).toHaveSize(1)\n resolve()\n })\n\n secondNavEl.click()\n })\n })\n\n it('should add show class to tab panes if there is a `.fade` class', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
    ',\n '
  • ',\n ' ',\n '
    • ',\n '
  • ',\n ' ',\n '
    • ',\n '
',\n '
',\n '
test 1
',\n '
test 2
',\n '
'\n ].join('')\n\n const secondNavEl = fixtureEl.querySelector('#secondNav')\n\n secondNavEl.addEventListener('shown.bs.tab', () => {\n setTimeout(() => {\n expect(fixtureEl.querySelectorAll('.show')).toHaveSize(1)\n resolve()\n }, 10)\n })\n\n secondNavEl.click()\n })\n })\n\n it('should prevent default when the trigger is or ', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n ''\n ].join('')\n\n const tabEl = fixtureEl.querySelector('[href=\"#test2\"]')\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n tabEl.addEventListener('shown.bs.tab', () => {\n expect(tabEl).toHaveClass('active')\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n tabEl.click()\n })\n })\n\n it('should not fire shown when tab has disabled attribute', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
    ',\n '
    • ',\n '
    • ',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerDisabled = fixtureEl.querySelector('button[disabled]')\n triggerDisabled.addEventListener('shown.bs.tab', () => {\n reject(new Error('should not trigger shown event'))\n })\n\n triggerDisabled.click()\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 30)\n })\n })\n\n it('should not fire shown when tab has disabled class', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const triggerDisabled = fixtureEl.querySelector('a.disabled')\n\n triggerDisabled.addEventListener('shown.bs.tab', () => {\n reject(new Error('should not trigger shown event'))\n })\n\n triggerDisabled.click()\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 30)\n })\n })\n })\n})\n" }, { "path": "js/tests/unit/toast.spec.js", "content": "import Toast from '../../src/toast.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Toast', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Toast.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Toast.DATA_KEY).toEqual('bs.toast')\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = '
'\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toastBySelector = new Toast('.toast')\n const toastByElement = new Toast(toastEl)\n\n expect(toastBySelector._element).toEqual(toastEl)\n expect(toastByElement._element).toEqual(toastEl)\n })\n\n it('should allow to config in js', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('div')\n const toast = new Toast(toastEl, {\n delay: 1\n })\n\n toastEl.addEventListener('shown.bs.toast', () => {\n expect(toastEl).toHaveClass('show')\n resolve()\n })\n\n toast.show()\n })\n })\n\n it('should close toast when close element with data-bs-dismiss attribute is set', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('div')\n const toast = new Toast(toastEl)\n\n toastEl.addEventListener('shown.bs.toast', () => {\n expect(toastEl).toHaveClass('show')\n\n const button = toastEl.querySelector('.btn-close')\n\n button.click()\n })\n\n toastEl.addEventListener('hidden.bs.toast', () => {\n expect(toastEl).not.toHaveClass('show')\n resolve()\n })\n\n toast.show()\n })\n })\n })\n\n describe('Default', () => {\n it('should expose default setting to allow to override them', () => {\n const defaultDelay = 1000\n\n Toast.Default.delay = defaultDelay\n\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('div')\n const toast = new Toast(toastEl)\n\n expect(toast._config.delay).toEqual(defaultDelay)\n })\n })\n\n describe('DefaultType', () => {\n it('should expose default setting types for read', () => {\n expect(Toast.DefaultType).toEqual(jasmine.any(Object))\n })\n })\n\n describe('show', () => {\n it('should auto hide', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n toastEl.addEventListener('hidden.bs.toast', () => {\n expect(toastEl).not.toHaveClass('show')\n resolve()\n })\n\n toast.show()\n })\n })\n\n it('should not add fade class', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n toastEl.addEventListener('shown.bs.toast', () => {\n expect(toastEl).not.toHaveClass('fade')\n resolve()\n })\n\n toast.show()\n })\n })\n\n it('should not trigger shown if show is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n const assertDone = () => {\n setTimeout(() => {\n expect(toastEl).not.toHaveClass('show')\n resolve()\n }, 20)\n }\n\n toastEl.addEventListener('show.bs.toast', event => {\n event.preventDefault()\n assertDone()\n })\n\n toastEl.addEventListener('shown.bs.toast', () => {\n reject(new Error('shown event should not be triggered if show is prevented'))\n })\n\n toast.show()\n })\n })\n\n it('should clear timeout if toast is shown again before it is hidden', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n setTimeout(() => {\n toast._config.autohide = false\n toastEl.addEventListener('shown.bs.toast', () => {\n expect(spy).toHaveBeenCalled()\n expect(toast._timeout).toBeNull()\n resolve()\n })\n toast.show()\n }, toast._config.delay / 2)\n\n const spy = spyOn(toast, '_clearTimeout').and.callThrough()\n\n toast.show()\n })\n })\n\n it('should clear timeout if toast is interacted with mouse', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n const spy = spyOn(toast, '_clearTimeout').and.callThrough()\n\n setTimeout(() => {\n spy.calls.reset()\n\n toastEl.addEventListener('mouseover', () => {\n expect(toast._clearTimeout).toHaveBeenCalledTimes(1)\n expect(toast._timeout).toBeNull()\n resolve()\n })\n\n const mouseOverEvent = createEvent('mouseover')\n toastEl.dispatchEvent(mouseOverEvent)\n }, toast._config.delay / 2)\n\n toast.show()\n })\n })\n\n it('should clear timeout if toast is interacted with keyboard', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n ' a simple toast',\n ' ',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n const spy = spyOn(toast, '_clearTimeout').and.callThrough()\n\n setTimeout(() => {\n spy.calls.reset()\n\n toastEl.addEventListener('focusin', () => {\n expect(toast._clearTimeout).toHaveBeenCalledTimes(1)\n expect(toast._timeout).toBeNull()\n resolve()\n })\n\n const insideFocusable = toastEl.querySelector('button')\n insideFocusable.focus()\n }, toast._config.delay / 2)\n\n toast.show()\n })\n })\n\n it('should still auto hide after being interacted with mouse and keyboard', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n ' a simple toast',\n ' ',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n setTimeout(() => {\n toastEl.addEventListener('mouseover', () => {\n const insideFocusable = toastEl.querySelector('button')\n insideFocusable.focus()\n })\n\n toastEl.addEventListener('focusin', () => {\n const mouseOutEvent = createEvent('mouseout')\n toastEl.dispatchEvent(mouseOutEvent)\n })\n\n toastEl.addEventListener('mouseout', () => {\n const outsideFocusable = document.getElementById('outside-focusable')\n outsideFocusable.focus()\n })\n\n toastEl.addEventListener('focusout', () => {\n expect(toast._timeout).not.toBeNull()\n resolve()\n })\n\n const mouseOverEvent = createEvent('mouseover')\n toastEl.dispatchEvent(mouseOverEvent)\n }, toast._config.delay / 2)\n\n toast.show()\n })\n })\n\n it('should not auto hide if focus leaves but mouse pointer remains inside', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n ' a simple toast',\n ' ',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n setTimeout(() => {\n toastEl.addEventListener('mouseover', () => {\n const insideFocusable = toastEl.querySelector('button')\n insideFocusable.focus()\n })\n\n toastEl.addEventListener('focusin', () => {\n const outsideFocusable = document.getElementById('outside-focusable')\n outsideFocusable.focus()\n })\n\n toastEl.addEventListener('focusout', () => {\n expect(toast._timeout).toBeNull()\n resolve()\n })\n\n const mouseOverEvent = createEvent('mouseover')\n toastEl.dispatchEvent(mouseOverEvent)\n }, toast._config.delay / 2)\n\n toast.show()\n })\n })\n\n it('should not auto hide if mouse pointer leaves but focus remains inside', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n '
',\n '
',\n ' a simple toast',\n ' ',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n setTimeout(() => {\n toastEl.addEventListener('mouseover', () => {\n const insideFocusable = toastEl.querySelector('button')\n insideFocusable.focus()\n })\n\n toastEl.addEventListener('focusin', () => {\n const mouseOutEvent = createEvent('mouseout')\n toastEl.dispatchEvent(mouseOutEvent)\n })\n\n toastEl.addEventListener('mouseout', () => {\n expect(toast._timeout).toBeNull()\n resolve()\n })\n\n const mouseOverEvent = createEvent('mouseover')\n toastEl.dispatchEvent(mouseOverEvent)\n }, toast._config.delay / 2)\n\n toast.show()\n })\n })\n })\n\n describe('hide', () => {\n it('should allow to hide toast manually', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n toastEl.addEventListener('shown.bs.toast', () => {\n toast.hide()\n })\n\n toastEl.addEventListener('hidden.bs.toast', () => {\n expect(toastEl).not.toHaveClass('show')\n resolve()\n })\n\n toast.show()\n })\n })\n\n it('should do nothing when we call hide on a non shown toast', () => {\n fixtureEl.innerHTML = '
'\n\n const toastEl = fixtureEl.querySelector('div')\n const toast = new Toast(toastEl)\n\n const spy = spyOn(toastEl.classList, 'contains')\n\n toast.hide()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('should not trigger hidden if hide is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('.toast')\n const toast = new Toast(toastEl)\n\n const assertDone = () => {\n setTimeout(() => {\n expect(toastEl).toHaveClass('show')\n resolve()\n }, 20)\n }\n\n toastEl.addEventListener('shown.bs.toast', () => {\n toast.hide()\n })\n\n toastEl.addEventListener('hide.bs.toast', event => {\n event.preventDefault()\n assertDone()\n })\n\n toastEl.addEventListener('hidden.bs.toast', () => {\n reject(new Error('hidden event should not be triggered if hide is prevented'))\n })\n\n toast.show()\n })\n })\n })\n\n describe('dispose', () => {\n it('should allow to destroy toast', () => {\n fixtureEl.innerHTML = '
'\n\n const toastEl = fixtureEl.querySelector('div')\n\n const toast = new Toast(toastEl)\n\n expect(Toast.getInstance(toastEl)).not.toBeNull()\n\n toast.dispose()\n\n expect(Toast.getInstance(toastEl)).toBeNull()\n })\n\n it('should allow to destroy toast and hide it before that', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n ' a simple toast',\n '
',\n '
'\n ].join('')\n\n const toastEl = fixtureEl.querySelector('div')\n const toast = new Toast(toastEl)\n const expected = () => {\n expect(toastEl).toHaveClass('show')\n expect(Toast.getInstance(toastEl)).not.toBeNull()\n\n toast.dispose()\n\n expect(Toast.getInstance(toastEl)).toBeNull()\n expect(toastEl).not.toHaveClass('show')\n\n resolve()\n }\n\n toastEl.addEventListener('shown.bs.toast', () => {\n setTimeout(expected, 1)\n })\n\n toast.show()\n })\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a toast', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.toast = Toast.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.toast.call(jQueryMock)\n\n expect(Toast.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a toast', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const toast = new Toast(div)\n\n jQueryMock.fn.toast = Toast.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.toast.call(jQueryMock)\n\n expect(Toast.getInstance(div)).toEqual(toast)\n })\n\n it('should call a toast method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const toast = new Toast(div)\n\n const spy = spyOn(toast, 'show')\n\n jQueryMock.fn.toast = Toast.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.toast.call(jQueryMock, 'show')\n\n expect(Toast.getInstance(div)).toEqual(toast)\n expect(spy).toHaveBeenCalled()\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.toast = Toast.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.toast.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n\n describe('getInstance', () => {\n it('should return a toast instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const toast = new Toast(div)\n\n expect(Toast.getInstance(div)).toEqual(toast)\n expect(Toast.getInstance(div)).toBeInstanceOf(Toast)\n })\n\n it('should return null when there is no toast instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Toast.getInstance(div)).toBeNull()\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return toast instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const toast = new Toast(div)\n\n expect(Toast.getOrCreateInstance(div)).toEqual(toast)\n expect(Toast.getInstance(div)).toEqual(Toast.getOrCreateInstance(div, {}))\n expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)\n })\n\n it('should return new instance when there is no toast instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Toast.getInstance(div)).toBeNull()\n expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)\n })\n\n it('should return new instance when there is no toast instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Toast.getInstance(div)).toBeNull()\n const toast = Toast.getOrCreateInstance(div, {\n delay: 1\n })\n expect(toast).toBeInstanceOf(Toast)\n\n expect(toast._config.delay).toEqual(1)\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const toast = new Toast(div, {\n delay: 1\n })\n expect(Toast.getInstance(div)).toEqual(toast)\n\n const toast2 = Toast.getOrCreateInstance(div, {\n delay: 2\n })\n expect(toast).toBeInstanceOf(Toast)\n expect(toast2).toEqual(toast)\n\n expect(toast2._config.delay).toEqual(1)\n })\n })\n})\n" }, { "path": "js/tests/unit/tooltip.spec.js", "content": "import EventHandler from '../../src/dom/event-handler.js'\nimport Tooltip from '../../src/tooltip.js'\nimport { noop } from '../../src/util/index.js'\nimport {\n clearFixture, createEvent, getFixture, jQueryMock\n} from '../helpers/fixture.js'\n\ndescribe('Tooltip', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n\n for (const tooltipEl of document.querySelectorAll('.tooltip')) {\n tooltipEl.remove()\n }\n })\n\n describe('VERSION', () => {\n it('should return plugin version', () => {\n expect(Tooltip.VERSION).toEqual(jasmine.any(String))\n })\n })\n\n describe('Default', () => {\n it('should return plugin default config', () => {\n expect(Tooltip.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('NAME', () => {\n it('should return plugin name', () => {\n expect(Tooltip.NAME).toEqual(jasmine.any(String))\n })\n })\n\n describe('DATA_KEY', () => {\n it('should return plugin data key', () => {\n expect(Tooltip.DATA_KEY).toEqual('bs.tooltip')\n })\n })\n\n describe('EVENT_KEY', () => {\n it('should return plugin event key', () => {\n expect(Tooltip.EVENT_KEY).toEqual('.bs.tooltip')\n })\n })\n\n describe('DefaultType', () => {\n it('should return plugin default type', () => {\n expect(Tooltip.DefaultType).toEqual(jasmine.any(Object))\n })\n })\n\n describe('constructor', () => {\n it('should take care of element either passed as a CSS selector or DOM element', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('#tooltipEl')\n const tooltipBySelector = new Tooltip('#tooltipEl')\n const tooltipByElement = new Tooltip(tooltipEl)\n\n expect(tooltipBySelector._element).toEqual(tooltipEl)\n expect(tooltipByElement._element).toEqual(tooltipEl)\n })\n\n it('should not take care of disallowed data attributes', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._config.sanitize).toBeTrue()\n })\n\n it('should convert title and content to string if numbers', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n title: 1,\n content: 7\n })\n\n expect(tooltip._config.title).toEqual('1')\n expect(tooltip._config.content).toEqual('7')\n })\n\n it('should enable selector delegation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const containerEl = fixtureEl.querySelector('div')\n const tooltipContainer = new Tooltip(containerEl, {\n selector: 'a[rel=\"tooltip\"]',\n trigger: 'click'\n })\n\n containerEl.innerHTML = ''\n\n const tooltipInContainerEl = containerEl.querySelector('a')\n\n tooltipInContainerEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n tooltipContainer.dispose()\n resolve()\n })\n\n tooltipInContainerEl.click()\n })\n })\n\n it('should create offset modifier when offset is passed as a function', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n offset: getOffset,\n popperConfig: {\n onFirstUpdate(state) {\n expect(getOffset).toHaveBeenCalledWith({\n popper: state.rects.popper,\n reference: state.rects.reference,\n placement: state.placement\n }, tooltipEl)\n resolve()\n }\n }\n })\n\n const offset = tooltip._getOffset()\n\n expect(offset).toEqual(jasmine.any(Function))\n\n tooltip.show()\n })\n })\n\n it('should create offset modifier when offset option is passed in data attribute', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._getOffset()).toEqual([10, 20])\n })\n\n it('should allow to pass config to Popper with `popperConfig`', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n popperConfig: {\n placement: 'left'\n }\n })\n\n const popperConfig = tooltip._getPopperConfig('top')\n\n expect(popperConfig.placement).toEqual('left')\n })\n\n it('should allow to pass config to Popper with `popperConfig` as a function', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })\n const tooltip = new Tooltip(tooltipEl, {\n popperConfig: getPopperConfig\n })\n\n const popperConfig = tooltip._getPopperConfig('top')\n\n // Ensure that the function was called with the default config.\n expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({\n placement: jasmine.any(String)\n }))\n expect(popperConfig.placement).toEqual('left')\n })\n\n it('should use original title, if not \"data-bs-title\" is given', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._getTitle()).toEqual('Another tooltip')\n })\n })\n\n describe('enable', () => {\n it('should enable a tooltip', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.enable()\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n })\n\n describe('disable', () => {\n it('should disable tooltip', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.disable()\n\n tooltipEl.addEventListener('show.bs.tooltip', () => {\n reject(new Error('should not show a disabled tooltip'))\n })\n\n tooltip.show()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n })\n\n describe('toggleEnabled', () => {\n it('should toggle enabled', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._isEnabled).toBeTrue()\n\n tooltip.toggleEnabled()\n\n expect(tooltip._isEnabled).toBeFalse()\n })\n })\n\n describe('toggle', () => {\n it('should do nothing if disabled', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.disable()\n\n tooltipEl.addEventListener('show.bs.tooltip', () => {\n reject(new Error('should not show a disabled tooltip'))\n })\n\n tooltip.toggle()\n\n setTimeout(() => {\n expect().nothing()\n resolve()\n }, 10)\n })\n })\n\n it('should show a tooltip', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n resolve()\n })\n\n tooltip.toggle()\n })\n })\n\n it('should call toggle and show the tooltip when trigger is \"click\"', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n trigger: 'click'\n })\n\n const spy = spyOn(tooltip, 'toggle').and.callThrough()\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n tooltipEl.click()\n })\n })\n\n it('should hide a tooltip', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n tooltip.toggle()\n })\n\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).toBeNull()\n resolve()\n })\n\n tooltip.toggle()\n })\n })\n\n it('should call toggle and hide the tooltip when trigger is \"click\"', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n trigger: 'click'\n })\n\n const spy = spyOn(tooltip, 'toggle').and.callThrough()\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n tooltipEl.click()\n })\n\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n tooltipEl.click()\n })\n })\n })\n\n describe('dispose', () => {\n it('should destroy a tooltip', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const addEventSpy = spyOn(tooltipEl, 'addEventListener').and.callThrough()\n const removeEventSpy = spyOn(tooltipEl, 'removeEventListener').and.callThrough()\n\n const tooltip = new Tooltip(tooltipEl)\n\n expect(Tooltip.getInstance(tooltipEl)).toEqual(tooltip)\n\n const expectedArgs = [\n ['mouseover', jasmine.any(Function), jasmine.any(Boolean)],\n ['mouseout', jasmine.any(Function), jasmine.any(Boolean)],\n ['focusin', jasmine.any(Function), jasmine.any(Boolean)],\n ['focusout', jasmine.any(Function), jasmine.any(Boolean)]\n ]\n\n expect(addEventSpy.calls.allArgs()).toEqual(expectedArgs)\n\n tooltip.dispose()\n\n expect(Tooltip.getInstance(tooltipEl)).toBeNull()\n expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)\n })\n\n it('should destroy a tooltip after it is shown and hidden', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n tooltip.hide()\n })\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n tooltip.dispose()\n expect(tooltip.tip).toBeNull()\n expect(Tooltip.getInstance(tooltipEl)).toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should destroy a tooltip and remove it from the dom', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n\n tooltip.dispose()\n\n expect(document.querySelector('.tooltip')).toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should destroy a tooltip and reset it\\'s initial title', () => {\n fixtureEl.innerHTML = [\n '',\n ''\n ].join('')\n\n const tooltipWithTitleEl = fixtureEl.querySelector('#tooltipWithTitle')\n const tooltip = new Tooltip('#tooltipWithTitle')\n expect(tooltipWithTitleEl.getAttribute('title')).toBeNull()\n tooltip.dispose()\n expect(tooltipWithTitleEl.getAttribute('title')).toBe('tooltipTitle')\n\n const tooltipWithoutTitleEl = fixtureEl.querySelector('#tooltipWithoutTitle')\n const tooltip2 = new Tooltip('#tooltipWithTitle')\n expect(tooltipWithoutTitleEl.getAttribute('title')).toBeNull()\n tooltip2.dispose()\n expect(tooltipWithoutTitleEl.getAttribute('title')).toBeNull()\n })\n })\n\n describe('show', () => {\n it('should show a tooltip', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n expect(tooltipEl.getAttribute('aria-describedby')).toEqual(tooltipShown.getAttribute('id'))\n expect(tooltipShown.getAttribute('id')).toContain('tooltip')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip when hovering a child element', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n ' ',\n ' ',\n ' ',\n ' ',\n ''\n ].join('')\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n const spy = spyOn(tooltip, 'show')\n\n tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true }))\n\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 0)\n })\n })\n\n it('should show a tooltip on mobile', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n document.documentElement.ontouchstart = noop\n\n const spy = spyOn(EventHandler, 'on').and.callThrough()\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n expect(spy).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)\n document.documentElement.ontouchstart = undefined\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip relative to placement option', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n placement: 'bottom'\n })\n\n tooltipEl.addEventListener('inserted.bs.tooltip', () => {\n expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')\n expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should not error when trying to show a tooltip that has been removed from the dom', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n const firstCallback = () => {\n tooltipEl.removeEventListener('shown.bs.tooltip', firstCallback)\n let tooltipShown = document.querySelector('.tooltip')\n\n tooltipShown.remove()\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n resolve()\n })\n\n tooltip.show()\n }\n\n tooltipEl.addEventListener('shown.bs.tooltip', firstCallback)\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with a dom element container', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n container: fixtureEl\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with a jquery element container', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n container: {\n 0: fixtureEl,\n jquery: 'jQuery'\n }\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with a selector in container', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n container: '#fixture'\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with placement as a function', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const spy = jasmine.createSpy('placement').and.returnValue('top')\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n placement: spy\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip without the animation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n animation: false\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tip = document.querySelector('.tooltip')\n\n expect(tip).not.toBeNull()\n expect(tip).not.toHaveClass('fade')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should throw an error the element is not visible', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n try {\n tooltip.show()\n } catch (error) {\n expect(error.message).toEqual('Please use show on visible elements')\n }\n })\n\n it('should not show a tooltip if show.bs.tooltip is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n const expectedDone = () => {\n setTimeout(() => {\n expect(document.querySelector('.tooltip')).toBeNull()\n resolve()\n }, 10)\n }\n\n tooltipEl.addEventListener('show.bs.tooltip', ev => {\n ev.preventDefault()\n expectedDone()\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n reject(new Error('Tooltip should not be shown'))\n })\n\n tooltip.show()\n })\n })\n\n it('should show tooltip if leave event hasn\\'t occurred before delay expires', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n delay: 150\n })\n\n const spy = spyOn(tooltip, 'show')\n\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n }, 100)\n\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 200)\n\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n })\n })\n\n it('should not show tooltip if leave event occurs before delay expires', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n delay: 150\n })\n\n const spy = spyOn(tooltip, 'show')\n\n setTimeout(() => {\n expect(spy).not.toHaveBeenCalled()\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n }, 100)\n\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n expect(document.querySelectorAll('.tooltip')).toHaveSize(0)\n resolve()\n }, 200)\n\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n })\n })\n\n it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._config.delay).toEqual({ show: 0, hide: 150 })\n\n setTimeout(() => {\n expect(tooltip._getTipElement()).toHaveClass('show')\n tooltipEl.dispatchEvent(createEvent('mouseout'))\n\n setTimeout(() => {\n expect(tooltip._getTipElement()).toHaveClass('show')\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n }, 100)\n\n setTimeout(() => {\n expect(tooltip._getTipElement()).toHaveClass('show')\n expect(document.querySelectorAll('.tooltip')).toHaveSize(1)\n resolve()\n }, 200)\n }, 10)\n\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n })\n })\n\n it('should not hide tooltip if leave event occurs and interaction remains inside trigger', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '',\n 'Trigger',\n 'the tooltip',\n ''\n ].join('')\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n const triggerChild = tooltipEl.querySelector('b')\n\n const spy = spyOn(tooltip, 'hide').and.callThrough()\n\n tooltipEl.addEventListener('mouseover', () => {\n const moveMouseToChildEvent = createEvent('mouseout')\n Object.defineProperty(moveMouseToChildEvent, 'relatedTarget', {\n value: triggerChild\n })\n\n tooltipEl.dispatchEvent(moveMouseToChildEvent)\n })\n\n tooltipEl.addEventListener('mouseout', () => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n })\n })\n\n it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', () => {\n return new Promise(resolve => {\n // Style this tooltip to give it plenty of room for popper to do what it wants\n fixtureEl.innerHTML = 'Trigger'\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.15s',\n transitionDelay: '0s'\n })\n\n setTimeout(() => {\n expect(tooltip._popper).not.toBeNull()\n expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')\n tooltipEl.dispatchEvent(createEvent('mouseout'))\n\n setTimeout(() => {\n expect(tooltip._getTipElement()).not.toHaveClass('show')\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n }, 100)\n\n setTimeout(() => {\n expect(tooltip._popper).not.toBeNull()\n expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')\n resolve()\n }, 200)\n }, 10)\n\n tooltipEl.dispatchEvent(createEvent('mouseover'))\n })\n })\n\n it('should only trigger inserted event if a new tooltip element was created', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.15s',\n transitionDelay: '0s'\n })\n\n const insertedFunc = jasmine.createSpy()\n tooltipEl.addEventListener('inserted.bs.tooltip', insertedFunc)\n\n setTimeout(() => {\n expect(insertedFunc).toHaveBeenCalledTimes(1)\n tooltip.hide()\n\n setTimeout(() => {\n tooltip.show()\n }, 100)\n\n setTimeout(() => {\n expect(insertedFunc).toHaveBeenCalledTimes(2)\n resolve()\n }, 200)\n }, 0)\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with custom class provided in data attributes', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tip = document.querySelector('.tooltip')\n expect(tip).not.toBeNull()\n expect(tip).toHaveClass('custom-class')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with custom class provided as a string in config', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n customClass: 'custom-class custom-class-2'\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tip = document.querySelector('.tooltip')\n expect(tip).not.toBeNull()\n expect(tip).toHaveClass('custom-class')\n expect(tip).toHaveClass('custom-class-2')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should show a tooltip with custom class provided as a function in config', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const spy = jasmine.createSpy('customClass').and.callFake(function (el) {\n return `${el.dataset.classA} ${this.dataset.classB}`\n })\n const tooltip = new Tooltip(tooltipEl, {\n customClass: spy\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tip = document.querySelector('.tooltip')\n expect(tip).not.toBeNull()\n expect(spy).toHaveBeenCalled()\n expect(tip).toHaveClass('custom-class-a')\n expect(tip).toHaveClass('custom-class-b')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should remove `title` attribute if exists', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n expect(tooltipEl.getAttribute('title')).toBeNull()\n resolve()\n })\n tooltip.show()\n })\n })\n })\n\n describe('hide', () => {\n it('should hide a tooltip', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).toBeNull()\n expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should hide a tooltip on mobile', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n const spy = spyOn(EventHandler, 'off')\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n document.documentElement.ontouchstart = noop\n tooltip.hide()\n })\n\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).toBeNull()\n expect(spy).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)\n document.documentElement.ontouchstart = undefined\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should hide a tooltip without animation', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n animation: false\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n expect(document.querySelector('.tooltip')).toBeNull()\n expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should not hide a tooltip if hide event is prevented', () => {\n return new Promise((resolve, reject) => {\n fixtureEl.innerHTML = ''\n\n const assertDone = () => {\n setTimeout(() => {\n expect(document.querySelector('.tooltip')).not.toBeNull()\n resolve()\n }, 20)\n }\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n animation: false\n })\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())\n tooltipEl.addEventListener('hide.bs.tooltip', event => {\n event.preventDefault()\n assertDone()\n })\n tooltipEl.addEventListener('hidden.bs.tooltip', () => {\n reject(new Error('should not trigger hidden event'))\n })\n\n tooltip.show()\n })\n })\n\n it('should not throw error running hide if popper hasn\\'t been shown', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(div)\n\n try {\n tooltip.hide()\n expect().nothing()\n } catch {\n throw new Error('should not throw error')\n }\n })\n })\n\n describe('update', () => {\n it('should call popper update', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const spy = spyOn(tooltip._popper, 'update')\n\n tooltip.update()\n\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should do nothing if the tooltip is not shown', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.update()\n expect().nothing()\n })\n })\n\n describe('_isWithContent', () => {\n it('should return true if there is content', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._isWithContent()).toBeTrue()\n })\n\n it('should return false if there is no content', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._isWithContent()).toBeFalse()\n })\n })\n\n describe('_getTipElement', () => {\n it('should create the tip element and return it', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n const spy = spyOn(document, 'createElement').and.callThrough()\n\n expect(tooltip._getTipElement()).toBeDefined()\n expect(spy).toHaveBeenCalled()\n })\n\n it('should return the created tip element', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n const spy = spyOn(document, 'createElement').and.callThrough()\n\n expect(tooltip._getTipElement()).toBeDefined()\n expect(spy).toHaveBeenCalled()\n\n spy.calls.reset()\n\n expect(tooltip._getTipElement()).toBeDefined()\n expect(spy).not.toHaveBeenCalled()\n })\n })\n\n describe('setContent', () => {\n it('should set tip content', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, { animation: false })\n\n const tip = tooltip._getTipElement()\n\n tooltip.setContent(tip)\n\n expect(tip).not.toHaveClass('show')\n expect(tip).not.toHaveClass('fade')\n expect(tip.querySelector('.tooltip-inner').textContent).toEqual('Another tooltip')\n })\n\n it('should re-show tip if it was already shown', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n tooltip.show()\n const tip = () => tooltip._getTipElement()\n\n expect(tip()).toHaveClass('show')\n tooltip.setContent({ '.tooltip-inner': 'foo' })\n\n expect(tip()).toHaveClass('show')\n expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')\n })\n\n it('should keep tip hidden, if it was already hidden before', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n const tip = () => tooltip._getTipElement()\n\n expect(tip()).not.toHaveClass('show')\n tooltip.setContent({ '.tooltip-inner': 'foo' })\n\n expect(tip()).not.toHaveClass('show')\n tooltip.show()\n expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')\n })\n\n it('\"setContent\" should keep the initial template', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.setContent({ '.tooltip-inner': 'foo' })\n const tip = tooltip._getTipElement()\n\n expect(tip).toHaveClass('tooltip')\n expect(tip).toHaveClass('bs-tooltip-auto')\n expect(tip.querySelector('.tooltip-arrow')).not.toBeNull()\n expect(tip.querySelector('.tooltip-inner')).not.toBeNull()\n })\n })\n\n describe('setContent', () => {\n it('should do nothing if the element is null', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.setContent({ '.tooltip': null })\n expect().nothing()\n })\n\n it('should do nothing if the content is a child of the element', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n ''\n ].join('')\n\n const tooltipEl = fixtureEl.querySelector('a')\n const childContent = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(tooltipEl, {\n html: true\n })\n\n tooltip._getTipElement().append(childContent)\n tooltip.setContent({ '.tooltip': childContent })\n\n expect().nothing()\n })\n\n it('should add the content as a child of the element for jQuery elements', () => {\n fixtureEl.innerHTML = [\n '',\n '
',\n ''\n ].join('')\n\n const tooltipEl = fixtureEl.querySelector('a')\n const childContent = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(tooltipEl, {\n html: true\n })\n\n tooltip.setContent({ '.tooltip': { 0: childContent, jquery: 'jQuery' } })\n tooltip.show()\n\n expect(childContent.parentNode).toEqual(tooltip._getTipElement())\n })\n\n it('should add the child text content in the element', () => {\n fixtureEl.innerHTML = [\n '',\n '
Tooltip
',\n ''\n ].join('')\n\n const tooltipEl = fixtureEl.querySelector('a')\n const childContent = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.setContent({ '.tooltip': childContent })\n\n expect(childContent.textContent).toEqual(tooltip._getTipElement().textContent)\n })\n\n it('should add html without sanitize it', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n sanitize: false,\n html: true\n })\n\n tooltip.setContent({ '.tooltip': '
Tooltip
' })\n\n expect(tooltip._getTipElement().querySelector('div').id).toEqual('childContent')\n })\n\n it('should add html sanitized', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n html: true\n })\n\n const content = [\n '
',\n ' ',\n '
'\n ].join('')\n\n tooltip.setContent({ '.tooltip': content })\n expect(tooltip._getTipElement().querySelector('div').id).toEqual('childContent')\n expect(tooltip._getTipElement().querySelector('button')).toBeNull()\n })\n\n it('should add text content', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltip.setContent({ '.tooltip': 'test' })\n\n expect(tooltip._getTipElement().textContent).toEqual('test')\n })\n })\n\n describe('_getTitle', () => {\n it('should return the title', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n expect(tooltip._getTitle()).toEqual('Another tooltip')\n })\n\n it('should call title function', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n title: () => 'test'\n })\n\n expect(tooltip._getTitle()).toEqual('test')\n })\n\n it('should call title function with trigger element', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n title(el) {\n return el.dataset.foo\n }\n })\n\n expect(tooltip._getTitle()).toEqual('bar')\n })\n\n it('should call title function with correct this value', () => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl, {\n title() {\n return this.dataset.foo\n }\n })\n\n expect(tooltip._getTitle()).toEqual('bar')\n })\n })\n\n describe('getInstance', () => {\n it('should return tooltip instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const alert = new Tooltip(div)\n\n expect(Tooltip.getInstance(div)).toEqual(alert)\n expect(Tooltip.getInstance(div)).toBeInstanceOf(Tooltip)\n })\n\n it('should return null when there is no tooltip instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Tooltip.getInstance(div)).toBeNull()\n })\n })\n\n describe('aria-label', () => {\n it('should add the aria-label attribute for referencing original title', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n expect(tooltipEl.getAttribute('aria-label')).toEqual('Another tooltip')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should add the aria-label attribute when element text content is a whitespace string', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ' '\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n expect(tooltipEl.getAttribute('aria-label')).toEqual('A tooltip')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should not add the aria-label attribute if the attribute already exists', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = ''\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n expect(tooltipEl.getAttribute('aria-label')).toEqual('Different label')\n resolve()\n })\n\n tooltip.show()\n })\n })\n\n it('should not add the aria-label attribute if the element has text content', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = 'text content'\n\n const tooltipEl = fixtureEl.querySelector('a')\n const tooltip = new Tooltip(tooltipEl)\n\n tooltipEl.addEventListener('shown.bs.tooltip', () => {\n const tooltipShown = document.querySelector('.tooltip')\n\n expect(tooltipShown).not.toBeNull()\n expect(tooltipEl.getAttribute('aria-label')).toBeNull()\n resolve()\n })\n\n tooltip.show()\n })\n })\n })\n\n describe('getOrCreateInstance', () => {\n it('should return tooltip instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(div)\n\n expect(Tooltip.getOrCreateInstance(div)).toEqual(tooltip)\n expect(Tooltip.getInstance(div)).toEqual(Tooltip.getOrCreateInstance(div, {}))\n expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip)\n })\n\n it('should return new instance when there is no tooltip instance', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Tooltip.getInstance(div)).toBeNull()\n expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip)\n })\n\n it('should return new instance when there is no tooltip instance with given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Tooltip.getInstance(div)).toBeNull()\n const tooltip = Tooltip.getOrCreateInstance(div, {\n title: () => 'test'\n })\n expect(tooltip).toBeInstanceOf(Tooltip)\n\n expect(tooltip._getTitle()).toEqual('test')\n })\n\n it('should return the instance when exists without given configuration', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(div, {\n title: () => 'nothing'\n })\n expect(Tooltip.getInstance(div)).toEqual(tooltip)\n\n const tooltip2 = Tooltip.getOrCreateInstance(div, {\n title: () => 'test'\n })\n expect(tooltip).toBeInstanceOf(Tooltip)\n expect(tooltip2).toEqual(tooltip)\n\n expect(tooltip2._getTitle()).toEqual('nothing')\n })\n })\n\n describe('jQueryInterface', () => {\n it('should create a tooltip', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n jQueryMock.fn.tooltip = Tooltip.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tooltip.call(jQueryMock)\n\n expect(Tooltip.getInstance(div)).not.toBeNull()\n })\n\n it('should not re create a tooltip', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(div)\n\n jQueryMock.fn.tooltip = Tooltip.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tooltip.call(jQueryMock)\n\n expect(Tooltip.getInstance(div)).toEqual(tooltip)\n })\n\n it('should call a tooltip method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const tooltip = new Tooltip(div)\n\n const spy = spyOn(tooltip, 'show')\n\n jQueryMock.fn.tooltip = Tooltip.jQueryInterface\n jQueryMock.elements = [div]\n\n jQueryMock.fn.tooltip.call(jQueryMock, 'show')\n\n expect(Tooltip.getInstance(div)).toEqual(tooltip)\n expect(spy).toHaveBeenCalled()\n })\n\n it('should throw error on undefined method', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const action = 'undefinedMethod'\n\n jQueryMock.fn.tooltip = Tooltip.jQueryInterface\n jQueryMock.elements = [div]\n\n expect(() => {\n jQueryMock.fn.tooltip.call(jQueryMock, action)\n }).toThrowError(TypeError, `No method named \"${action}\"`)\n })\n })\n})\n" }, { "path": "js/tests/unit/util/backdrop.spec.js", "content": "import Backdrop from '../../../src/util/backdrop.js'\nimport { getTransitionDurationFromElement } from '../../../src/util/index.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\nconst CLASS_BACKDROP = '.modal-backdrop'\nconst CLASS_NAME_FADE = 'fade'\nconst CLASS_NAME_SHOW = 'show'\n\ndescribe('Backdrop', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n const list = document.querySelectorAll(CLASS_BACKDROP)\n\n for (const el of list) {\n el.remove()\n }\n })\n\n describe('show', () => {\n it('should append the backdrop html once on show and include the \"show\" class if it is \"shown\"', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: false\n })\n const getElements = () => document.querySelectorAll(CLASS_BACKDROP)\n\n expect(getElements()).toHaveSize(0)\n\n instance.show()\n instance.show(() => {\n expect(getElements()).toHaveSize(1)\n for (const el of getElements()) {\n expect(el).toHaveClass(CLASS_NAME_SHOW)\n }\n\n resolve()\n })\n })\n })\n\n it('should not append the backdrop html if it is not \"shown\"', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: false,\n isAnimated: true\n })\n const getElements = () => document.querySelectorAll(CLASS_BACKDROP)\n\n expect(getElements()).toHaveSize(0)\n instance.show(() => {\n expect(getElements()).toHaveSize(0)\n resolve()\n })\n })\n })\n\n it('should append the backdrop html once and include the \"fade\" class if it is \"shown\" and \"animated\"', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: true\n })\n const getElements = () => document.querySelectorAll(CLASS_BACKDROP)\n\n expect(getElements()).toHaveSize(0)\n\n instance.show(() => {\n expect(getElements()).toHaveSize(1)\n for (const el of getElements()) {\n expect(el).toHaveClass(CLASS_NAME_FADE)\n }\n\n resolve()\n })\n })\n })\n })\n\n describe('hide', () => {\n it('should remove the backdrop html', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: true\n })\n\n const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)\n\n expect(getElements()).toHaveSize(0)\n instance.show(() => {\n expect(getElements()).toHaveSize(1)\n instance.hide(() => {\n expect(getElements()).toHaveSize(0)\n resolve()\n })\n })\n })\n })\n\n it('should remove the \"show\" class', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: true\n })\n const elem = instance._getElement()\n\n instance.show()\n instance.hide(() => {\n expect(elem).not.toHaveClass(CLASS_NAME_SHOW)\n resolve()\n })\n })\n })\n\n it('should not try to remove Node on remove method if it is not \"shown\"', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: false,\n isAnimated: true\n })\n const getElements = () => document.querySelectorAll(CLASS_BACKDROP)\n const spy = spyOn(instance, 'dispose').and.callThrough()\n\n expect(getElements()).toHaveSize(0)\n expect(instance._isAppended).toBeFalse()\n instance.show(() => {\n instance.hide(() => {\n expect(getElements()).toHaveSize(0)\n expect(spy).not.toHaveBeenCalled()\n expect(instance._isAppended).toBeFalse()\n resolve()\n })\n })\n })\n })\n\n it('should not error if the backdrop no longer has a parent', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const wrapper = fixtureEl.querySelector('#wrapper')\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: true,\n rootElement: wrapper\n })\n\n const getElements = () => document.querySelectorAll(CLASS_BACKDROP)\n\n instance.show(() => {\n wrapper.remove()\n instance.hide(() => {\n expect(getElements()).toHaveSize(0)\n resolve()\n })\n })\n })\n })\n })\n\n describe('click callback', () => {\n it('should execute callback on click', () => {\n return new Promise(resolve => {\n const spy = jasmine.createSpy('spy')\n\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: false,\n clickCallback: () => spy()\n })\n const endTest = () => {\n setTimeout(() => {\n expect(spy).toHaveBeenCalled()\n resolve()\n }, 10)\n }\n\n instance.show(() => {\n const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })\n document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)\n endTest()\n })\n })\n })\n\n describe('animation callbacks', () => {\n it('should show and hide backdrop after counting transition duration if it is animated', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: true\n })\n const spy2 = jasmine.createSpy('spy2')\n\n const execDone = () => {\n setTimeout(() => {\n expect(spy2).toHaveBeenCalledTimes(2)\n resolve()\n }, 10)\n }\n\n instance.show(spy2)\n instance.hide(() => {\n spy2()\n execDone()\n })\n expect(spy2).not.toHaveBeenCalled()\n })\n })\n\n it('should show and hide backdrop without a delay if it is not animated', () => {\n return new Promise(resolve => {\n const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)\n const instance = new Backdrop({\n isVisible: true,\n isAnimated: false\n })\n const spy2 = jasmine.createSpy('spy2')\n\n instance.show(spy2)\n instance.hide(spy2)\n\n setTimeout(() => {\n expect(spy2).toHaveBeenCalled()\n expect(spy).not.toHaveBeenCalled()\n resolve()\n }, 10)\n })\n })\n\n it('should not call delay callbacks if it is not \"shown\"', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: false,\n isAnimated: true\n })\n const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)\n\n instance.show()\n instance.hide(() => {\n expect(spy).not.toHaveBeenCalled()\n resolve()\n })\n })\n })\n })\n\n describe('Config', () => {\n describe('rootElement initialization', () => {\n it('should be appended on \"document.body\" by default', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true\n })\n const getElement = () => document.querySelector(CLASS_BACKDROP)\n instance.show(() => {\n expect(getElement().parentElement).toEqual(document.body)\n resolve()\n })\n })\n })\n\n it('should find the rootElement if passed as a string', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n rootElement: 'body'\n })\n const getElement = () => document.querySelector(CLASS_BACKDROP)\n instance.show(() => {\n expect(getElement().parentElement).toEqual(document.body)\n resolve()\n })\n })\n })\n\n it('should be appended on any element given by the proper config', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const wrapper = fixtureEl.querySelector('#wrapper')\n const instance = new Backdrop({\n isVisible: true,\n rootElement: wrapper\n })\n const getElement = () => document.querySelector(CLASS_BACKDROP)\n instance.show(() => {\n expect(getElement().parentElement).toEqual(wrapper)\n resolve()\n })\n })\n })\n })\n\n describe('ClassName', () => {\n it('should allow configuring className', () => {\n return new Promise(resolve => {\n const instance = new Backdrop({\n isVisible: true,\n className: 'foo'\n })\n const getElement = () => document.querySelector('.foo')\n instance.show(() => {\n expect(getElement()).toEqual(instance._getElement())\n instance.dispose()\n resolve()\n })\n })\n })\n })\n })\n })\n})\n" }, { "path": "js/tests/unit/util/component-functions.spec.js", "content": "import BaseComponent from '../../../src/base-component.js'\nimport { enableDismissTrigger } from '../../../src/util/component-functions.js'\nimport { clearFixture, createEvent, getFixture } from '../../helpers/fixture.js'\n\nclass DummyClass2 extends BaseComponent {\n static get NAME() {\n return 'test'\n }\n\n hide() {\n return true\n }\n\n testMethod() {\n return true\n }\n}\n\ndescribe('Plugin functions', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('data-bs-dismiss functionality', () => {\n it('should get Plugin and execute the given method, when a click occurred on data-bs-dismiss=\"PluginName\"', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const spyGet = spyOn(DummyClass2, 'getOrCreateInstance').and.callThrough()\n const spyTest = spyOn(DummyClass2.prototype, 'testMethod')\n const componentWrapper = fixtureEl.querySelector('#foo')\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"test\"]')\n const event = createEvent('click')\n\n enableDismissTrigger(DummyClass2, 'testMethod')\n btnClose.dispatchEvent(event)\n\n expect(spyGet).toHaveBeenCalledWith(componentWrapper)\n expect(spyTest).toHaveBeenCalled()\n })\n\n it('if data-bs-dismiss=\"PluginName\" hasn\\'t got \"data-bs-target\", \"getOrCreateInstance\" has to be initialized by closest \"plugin.Name\" class', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const spyGet = spyOn(DummyClass2, 'getOrCreateInstance').and.callThrough()\n const spyHide = spyOn(DummyClass2.prototype, 'hide')\n const componentWrapper = fixtureEl.querySelector('#foo')\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"test\"]')\n const event = createEvent('click')\n\n enableDismissTrigger(DummyClass2)\n btnClose.dispatchEvent(event)\n\n expect(spyGet).toHaveBeenCalledWith(componentWrapper)\n expect(spyHide).toHaveBeenCalled()\n })\n\n it('if data-bs-dismiss=\"PluginName\" is disabled, must not trigger function', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const spy = spyOn(DummyClass2, 'getOrCreateInstance').and.callThrough()\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"test\"]')\n const event = createEvent('click')\n\n enableDismissTrigger(DummyClass2)\n btnClose.dispatchEvent(event)\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should prevent default when the trigger is or ', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const btnClose = fixtureEl.querySelector('[data-bs-dismiss=\"test\"]')\n const event = createEvent('click')\n\n enableDismissTrigger(DummyClass2)\n const spy = spyOn(Event.prototype, 'preventDefault').and.callThrough()\n\n btnClose.dispatchEvent(event)\n\n expect(spy).toHaveBeenCalled()\n })\n })\n})\n" }, { "path": "js/tests/unit/util/config.spec.js", "content": "import Config from '../../../src/util/config.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\nclass DummyConfigClass extends Config {\n static get NAME() {\n return 'dummy'\n }\n}\n\ndescribe('Config', () => {\n let fixtureEl\n const name = 'dummy'\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('NAME', () => {\n it('should return plugin NAME', () => {\n expect(DummyConfigClass.NAME).toEqual(name)\n })\n })\n\n describe('DefaultType', () => {\n it('should return plugin default type', () => {\n expect(DummyConfigClass.DefaultType).toEqual(jasmine.any(Object))\n })\n })\n\n describe('Default', () => {\n it('should return plugin defaults', () => {\n expect(DummyConfigClass.Default).toEqual(jasmine.any(Object))\n })\n })\n\n describe('mergeConfigObj', () => {\n it('should parse element\\'s data attributes and merge it with default config. Element\\'s data attributes must excel Defaults', () => {\n fixtureEl.innerHTML = '
'\n\n spyOnProperty(DummyConfigClass, 'Default', 'get').and.returnValue({\n testBool: true,\n testString: 'foo',\n testString1: 'foo',\n testInt: 7\n })\n const instance = new DummyConfigClass()\n const configResult = instance._mergeConfigObj({}, fixtureEl.querySelector('#test'))\n\n expect(configResult.testBool).toEqual(false)\n expect(configResult.testString).toEqual('foo')\n expect(configResult.testString1).toEqual('bar')\n expect(configResult.testInt).toEqual(8)\n })\n\n it('should parse element\\'s data attributes and merge it with default config, plug these given during method call. The programmatically given should excel all', () => {\n fixtureEl.innerHTML = '
'\n\n spyOnProperty(DummyConfigClass, 'Default', 'get').and.returnValue({\n testBool: true,\n testString: 'foo',\n testString1: 'foo',\n testInt: 7\n })\n const instance = new DummyConfigClass()\n const configResult = instance._mergeConfigObj({\n testString1: 'test',\n testInt: 3\n }, fixtureEl.querySelector('#test'))\n\n expect(configResult.testBool).toEqual(false)\n expect(configResult.testString).toEqual('foo')\n expect(configResult.testString1).toEqual('test')\n expect(configResult.testInt).toEqual(3)\n })\n\n it('should parse element\\'s data attribute `config` and any rest attributes. The programmatically given should excel all. Data attribute `config` should excel only Defaults', () => {\n fixtureEl.innerHTML = '
'\n\n spyOnProperty(DummyConfigClass, 'Default', 'get').and.returnValue({\n testBool: true,\n testString: 'foo',\n testString1: 'foo',\n testInt: 7,\n testInt2: 600\n })\n const instance = new DummyConfigClass()\n const configResult = instance._mergeConfigObj({\n testString1: 'test'\n }, fixtureEl.querySelector('#test'))\n\n expect(configResult.testBool).toEqual(false)\n expect(configResult.testString).toEqual('foo')\n expect(configResult.testString1).toEqual('test')\n expect(configResult.testInt).toEqual(8)\n expect(configResult.testInt2).toEqual(100)\n })\n\n it('should omit element\\'s data attribute `config` if is not an object', () => {\n fixtureEl.innerHTML = '
'\n\n spyOnProperty(DummyConfigClass, 'Default', 'get').and.returnValue({\n testInt: 7,\n testInt2: 79\n })\n const instance = new DummyConfigClass()\n const configResult = instance._mergeConfigObj({}, fixtureEl.querySelector('#test'))\n\n expect(configResult.testInt).toEqual(8)\n expect(configResult.testInt2).toEqual(79)\n })\n })\n\n describe('typeCheckConfig', () => {\n it('should check type of the config object', () => {\n spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({\n toggle: 'boolean',\n parent: '(string|element)'\n })\n const config = {\n toggle: true,\n parent: 777\n }\n\n const obj = new DummyConfigClass()\n expect(() => {\n obj._typeCheckConfig(config)\n }).toThrowError(TypeError, `${obj.constructor.NAME.toUpperCase()}: Option \"parent\" provided type \"number\" but expected type \"(string|element)\".`)\n })\n\n it('should return null stringified when null is passed', () => {\n spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({\n toggle: 'boolean',\n parent: '(null|element)'\n })\n\n const obj = new DummyConfigClass()\n const config = {\n toggle: true,\n parent: null\n }\n\n obj._typeCheckConfig(config)\n expect().nothing()\n })\n\n it('should return undefined stringified when undefined is passed', () => {\n spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({\n toggle: 'boolean',\n parent: '(undefined|element)'\n })\n\n const obj = new DummyConfigClass()\n const config = {\n toggle: true,\n parent: undefined\n }\n\n obj._typeCheckConfig(config)\n expect().nothing()\n })\n })\n})\n" }, { "path": "js/tests/unit/util/focustrap.spec.js", "content": "import EventHandler from '../../../src/dom/event-handler.js'\nimport SelectorEngine from '../../../src/dom/selector-engine.js'\nimport FocusTrap from '../../../src/util/focustrap.js'\nimport { clearFixture, createEvent, getFixture } from '../../helpers/fixture.js'\n\ndescribe('FocusTrap', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('activate', () => {\n it('should autofocus itself by default', () => {\n fixtureEl.innerHTML = '
'\n\n const trapElement = fixtureEl.querySelector('div')\n\n const spy = spyOn(trapElement, 'focus')\n\n const focustrap = new FocusTrap({ trapElement })\n focustrap.activate()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('if configured not to autofocus, should not autofocus itself', () => {\n fixtureEl.innerHTML = '
'\n\n const trapElement = fixtureEl.querySelector('div')\n\n const spy = spyOn(trapElement, 'focus')\n\n const focustrap = new FocusTrap({ trapElement, autofocus: false })\n focustrap.activate()\n\n expect(spy).not.toHaveBeenCalled()\n })\n\n it('should force focus inside focus trap if it can', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n 'outside',\n '
',\n ' inside',\n '
'\n ].join('')\n\n const trapElement = fixtureEl.querySelector('div')\n const focustrap = new FocusTrap({ trapElement })\n focustrap.activate()\n\n const inside = document.getElementById('inside')\n\n const focusInListener = () => {\n expect(spy).toHaveBeenCalled()\n document.removeEventListener('focusin', focusInListener)\n resolve()\n }\n\n const spy = spyOn(inside, 'focus')\n spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])\n\n document.addEventListener('focusin', focusInListener)\n\n const focusInEvent = createEvent('focusin', { bubbles: true })\n Object.defineProperty(focusInEvent, 'target', {\n value: document.getElementById('outside')\n })\n\n document.dispatchEvent(focusInEvent)\n })\n })\n\n it('should wrap focus around forward on tab', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n 'outside',\n '
',\n ' first',\n ' inside',\n ' last',\n '
'\n ].join('')\n\n const trapElement = fixtureEl.querySelector('div')\n const focustrap = new FocusTrap({ trapElement })\n focustrap.activate()\n\n const first = document.getElementById('first')\n const inside = document.getElementById('inside')\n const last = document.getElementById('last')\n const outside = document.getElementById('outside')\n\n spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])\n const spy = spyOn(first, 'focus').and.callThrough()\n\n const focusInListener = () => {\n expect(spy).toHaveBeenCalled()\n first.removeEventListener('focusin', focusInListener)\n resolve()\n }\n\n first.addEventListener('focusin', focusInListener)\n\n const keydown = createEvent('keydown')\n keydown.key = 'Tab'\n\n document.dispatchEvent(keydown)\n outside.focus()\n })\n })\n\n it('should wrap focus around backwards on shift-tab', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n 'outside',\n '
',\n ' first',\n ' inside',\n ' last',\n '
'\n ].join('')\n\n const trapElement = fixtureEl.querySelector('div')\n const focustrap = new FocusTrap({ trapElement })\n focustrap.activate()\n\n const first = document.getElementById('first')\n const inside = document.getElementById('inside')\n const last = document.getElementById('last')\n const outside = document.getElementById('outside')\n\n spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])\n const spy = spyOn(last, 'focus').and.callThrough()\n\n const focusInListener = () => {\n expect(spy).toHaveBeenCalled()\n last.removeEventListener('focusin', focusInListener)\n resolve()\n }\n\n last.addEventListener('focusin', focusInListener)\n\n const keydown = createEvent('keydown')\n keydown.key = 'Tab'\n keydown.shiftKey = true\n\n document.dispatchEvent(keydown)\n outside.focus()\n })\n })\n\n it('should force focus on itself if there is no focusable content', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n 'outside',\n '
'\n ].join('')\n\n const trapElement = fixtureEl.querySelector('div')\n const focustrap = new FocusTrap({ trapElement })\n focustrap.activate()\n\n const focusInListener = () => {\n expect(spy).toHaveBeenCalled()\n document.removeEventListener('focusin', focusInListener)\n resolve()\n }\n\n const spy = spyOn(focustrap._config.trapElement, 'focus')\n\n document.addEventListener('focusin', focusInListener)\n\n const focusInEvent = createEvent('focusin', { bubbles: true })\n Object.defineProperty(focusInEvent, 'target', {\n value: document.getElementById('outside')\n })\n\n document.dispatchEvent(focusInEvent)\n })\n })\n })\n\n describe('deactivate', () => {\n it('should flag itself as no longer active', () => {\n const focustrap = new FocusTrap({ trapElement: fixtureEl })\n focustrap.activate()\n expect(focustrap._isActive).toBeTrue()\n\n focustrap.deactivate()\n expect(focustrap._isActive).toBeFalse()\n })\n\n it('should remove all event listeners', () => {\n const focustrap = new FocusTrap({ trapElement: fixtureEl })\n focustrap.activate()\n\n const spy = spyOn(EventHandler, 'off')\n focustrap.deactivate()\n\n expect(spy).toHaveBeenCalled()\n })\n\n it('doesn\\'t try removing event listeners unless it needs to (in case it hasn\\'t been activated)', () => {\n const focustrap = new FocusTrap({ trapElement: fixtureEl })\n\n const spy = spyOn(EventHandler, 'off')\n focustrap.deactivate()\n\n expect(spy).not.toHaveBeenCalled()\n })\n })\n})\n" }, { "path": "js/tests/unit/util/index.spec.js", "content": "import * as Util from '../../../src/util/index.js'\nimport { noop } from '../../../src/util/index.js'\nimport { clearFixture, getFixture } from '../../helpers/fixture.js'\n\ndescribe('Util', () => {\n let fixtureEl\n\n beforeAll(() => {\n fixtureEl = getFixture()\n })\n\n afterEach(() => {\n clearFixture()\n })\n\n describe('getUID', () => {\n it('should generate uid', () => {\n const uid = Util.getUID('bs')\n const uid2 = Util.getUID('bs')\n\n expect(uid).not.toEqual(uid2)\n })\n })\n\n describe('getTransitionDurationFromElement', () => {\n it('should get transition from element', () => {\n fixtureEl.innerHTML = '
'\n\n expect(Util.getTransitionDurationFromElement(fixtureEl.querySelector('div'))).toEqual(300)\n })\n\n it('should return 0 if the element is undefined or null', () => {\n expect(Util.getTransitionDurationFromElement(null)).toEqual(0)\n expect(Util.getTransitionDurationFromElement(undefined)).toEqual(0)\n })\n\n it('should return 0 if the element do not possess transition', () => {\n fixtureEl.innerHTML = '
'\n\n expect(Util.getTransitionDurationFromElement(fixtureEl.querySelector('div'))).toEqual(0)\n })\n })\n\n describe('triggerTransitionEnd', () => {\n it('should trigger transitionend event', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = '
'\n\n const el = fixtureEl.querySelector('div')\n const spy = spyOn(el, 'dispatchEvent').and.callThrough()\n\n el.addEventListener('transitionend', () => {\n expect(spy).toHaveBeenCalled()\n resolve()\n })\n\n Util.triggerTransitionEnd(el)\n })\n })\n })\n\n describe('isElement', () => {\n it('should detect if the parameter is an element or not and return Boolean', () => {\n fixtureEl.innerHTML = [\n '
',\n '
'\n ].join('')\n\n const el = fixtureEl.querySelector('#foo')\n\n expect(Util.isElement(el)).toBeTrue()\n expect(Util.isElement({})).toBeFalse()\n expect(Util.isElement(fixtureEl.querySelectorAll('.test'))).toBeFalse()\n })\n\n it('should detect jQuery element', () => {\n fixtureEl.innerHTML = '
'\n\n const el = fixtureEl.querySelector('div')\n const fakejQuery = {\n 0: el,\n jquery: 'foo'\n }\n\n expect(Util.isElement(fakejQuery)).toBeTrue()\n })\n })\n\n describe('getElement', () => {\n it('should try to parse element', () => {\n fixtureEl.innerHTML = [\n '
',\n '
'\n ].join('')\n\n const el = fixtureEl.querySelector('div')\n\n expect(Util.getElement(el)).toEqual(el)\n expect(Util.getElement('#foo')).toEqual(el)\n expect(Util.getElement('#fail')).toBeNull()\n expect(Util.getElement({})).toBeNull()\n expect(Util.getElement([])).toBeNull()\n expect(Util.getElement()).toBeNull()\n expect(Util.getElement(null)).toBeNull()\n expect(Util.getElement(fixtureEl.querySelectorAll('.test'))).toBeNull()\n\n const fakejQueryObject = {\n 0: el,\n jquery: 'foo'\n }\n\n expect(Util.getElement(fakejQueryObject)).toEqual(el)\n })\n })\n\n describe('isVisible', () => {\n it('should return false if the element is not defined', () => {\n expect(Util.isVisible(null)).toBeFalse()\n expect(Util.isVisible(undefined)).toBeFalse()\n })\n\n it('should return false if the element provided is not a dom element', () => {\n expect(Util.isVisible({})).toBeFalse()\n })\n\n it('should return false if the element is not visible with display none', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Util.isVisible(div)).toBeFalse()\n })\n\n it('should return false if the element is not visible with visibility hidden', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n expect(Util.isVisible(div)).toBeFalse()\n })\n\n it('should return false if an ancestor element is display none', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('.content')\n\n expect(Util.isVisible(div)).toBeFalse()\n })\n\n it('should return false if an ancestor element is visibility hidden', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('.content')\n\n expect(Util.isVisible(div)).toBeFalse()\n })\n\n it('should return true if an ancestor element is visibility hidden, but reverted', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('.content')\n\n expect(Util.isVisible(div)).toBeTrue()\n })\n\n it('should return true if the element is visible', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n\n expect(Util.isVisible(div)).toBeTrue()\n })\n\n it('should return false if the element is hidden, but not via display or visibility', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n\n expect(Util.isVisible(div)).toBeFalse()\n })\n\n it('should return true if its a closed details element', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('#element')\n\n expect(Util.isVisible(div)).toBeTrue()\n })\n\n it('should return true if the element is visible inside an open details element', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n\n expect(Util.isVisible(div)).toBeTrue()\n })\n\n it('should return true if the element is a visible summary in a closed details element', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const element1 = fixtureEl.querySelector('#element-1')\n const element2 = fixtureEl.querySelector('#element-2')\n\n expect(Util.isVisible(element1)).toBeTrue()\n expect(Util.isVisible(element2)).toBeTrue()\n })\n })\n\n describe('isDisabled', () => {\n it('should return true if the element is not defined', () => {\n expect(Util.isDisabled(null)).toBeTrue()\n expect(Util.isDisabled(undefined)).toBeTrue()\n expect(Util.isDisabled()).toBeTrue()\n })\n\n it('should return true if the element provided is not a dom element', () => {\n expect(Util.isDisabled({})).toBeTrue()\n expect(Util.isDisabled('test')).toBeTrue()\n })\n\n it('should return true if the element has disabled attribute', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n const div1 = fixtureEl.querySelector('#element1')\n const div2 = fixtureEl.querySelector('#element2')\n\n expect(Util.isDisabled(div)).toBeTrue()\n expect(Util.isDisabled(div1)).toBeTrue()\n expect(Util.isDisabled(div2)).toBeTrue()\n })\n\n it('should return false if the element has disabled attribute with \"false\" value, or doesn\\'t have attribute', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n const div1 = fixtureEl.querySelector('#element1')\n\n expect(Util.isDisabled(div)).toBeFalse()\n expect(Util.isDisabled(div1)).toBeFalse()\n })\n\n it('should return false if the element is not disabled ', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const el = selector => fixtureEl.querySelector(selector)\n\n expect(Util.isDisabled(el('#button'))).toBeFalse()\n expect(Util.isDisabled(el('#select'))).toBeFalse()\n expect(Util.isDisabled(el('#input'))).toBeFalse()\n })\n\n it('should return true if the element has disabled attribute', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n ' ',\n ' ',\n ' ',\n ' ',\n ' ',\n ' ',\n '
'\n ].join('')\n\n const el = selector => fixtureEl.querySelector(selector)\n\n expect(Util.isDisabled(el('#input'))).toBeTrue()\n expect(Util.isDisabled(el('#input1'))).toBeTrue()\n expect(Util.isDisabled(el('#button'))).toBeTrue()\n expect(Util.isDisabled(el('#button1'))).toBeTrue()\n expect(Util.isDisabled(el('#button2'))).toBeTrue()\n expect(Util.isDisabled(el('#input'))).toBeTrue()\n })\n\n it('should return true if the element has class \"disabled\"', () => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#element')\n\n expect(Util.isDisabled(div)).toBeTrue()\n })\n\n it('should return true if the element has class \"disabled\" but disabled attribute is false', () => {\n fixtureEl.innerHTML = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const div = fixtureEl.querySelector('#input')\n\n expect(Util.isDisabled(div)).toBeTrue()\n })\n })\n\n describe('findShadowRoot', () => {\n it('should return null if shadow dom is not available', () => {\n // Only for newer browsers\n if (!document.documentElement.attachShadow) {\n expect().nothing()\n return\n }\n\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n\n spyOn(document.documentElement, 'attachShadow').and.returnValue(null)\n\n expect(Util.findShadowRoot(div)).toBeNull()\n })\n\n it('should return null when we do not find a shadow root', () => {\n // Only for newer browsers\n if (!document.documentElement.attachShadow) {\n expect().nothing()\n return\n }\n\n spyOn(document, 'getRootNode').and.returnValue(undefined)\n\n expect(Util.findShadowRoot(document)).toBeNull()\n })\n\n it('should return the shadow root when found', () => {\n // Only for newer browsers\n if (!document.documentElement.attachShadow) {\n expect().nothing()\n return\n }\n\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const shadowRoot = div.attachShadow({\n mode: 'open'\n })\n\n expect(Util.findShadowRoot(shadowRoot)).toEqual(shadowRoot)\n\n shadowRoot.innerHTML = ''\n\n expect(Util.findShadowRoot(shadowRoot.firstChild)).toEqual(shadowRoot)\n })\n })\n\n describe('noop', () => {\n it('should be a function', () => {\n expect(Util.noop).toEqual(jasmine.any(Function))\n })\n })\n\n describe('reflow', () => {\n it('should return element offset height to force the reflow', () => {\n fixtureEl.innerHTML = '
'\n\n const div = fixtureEl.querySelector('div')\n const spy = spyOnProperty(div, 'offsetHeight')\n Util.reflow(div)\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('getjQuery', () => {\n const fakejQuery = { trigger() {} }\n\n beforeEach(() => {\n Object.defineProperty(window, 'jQuery', {\n value: fakejQuery,\n writable: true\n })\n })\n\n afterEach(() => {\n window.jQuery = undefined\n })\n\n it('should return jQuery object when present', () => {\n expect(Util.getjQuery()).toEqual(fakejQuery)\n })\n\n it('should not return jQuery object when present if data-bs-no-jquery', () => {\n document.body.setAttribute('data-bs-no-jquery', '')\n\n expect(window.jQuery).toEqual(fakejQuery)\n expect(Util.getjQuery()).toBeNull()\n\n document.body.removeAttribute('data-bs-no-jquery')\n })\n\n it('should not return jQuery if not present', () => {\n window.jQuery = undefined\n expect(Util.getjQuery()).toBeNull()\n })\n })\n\n describe('onDOMContentLoaded', () => {\n it('should execute callbacks when DOMContentLoaded is fired and should not add more than one listener', () => {\n const spy = jasmine.createSpy()\n const spy2 = jasmine.createSpy()\n\n const spyAdd = spyOn(document, 'addEventListener').and.callThrough()\n spyOnProperty(document, 'readyState').and.returnValue('loading')\n\n Util.onDOMContentLoaded(spy)\n Util.onDOMContentLoaded(spy2)\n\n document.dispatchEvent(new Event('DOMContentLoaded', {\n bubbles: true,\n cancelable: true\n }))\n\n expect(spy).toHaveBeenCalled()\n expect(spy2).toHaveBeenCalled()\n expect(spyAdd).toHaveBeenCalledTimes(1)\n })\n\n it('should execute callback if readyState is not \"loading\"', () => {\n const spy = jasmine.createSpy()\n Util.onDOMContentLoaded(spy)\n expect(spy).toHaveBeenCalled()\n })\n })\n\n describe('defineJQueryPlugin', () => {\n const fakejQuery = { fn: {} }\n\n beforeEach(() => {\n Object.defineProperty(window, 'jQuery', {\n value: fakejQuery,\n writable: true\n })\n })\n\n afterEach(() => {\n window.jQuery = undefined\n })\n\n it('should define a plugin on the jQuery instance', () => {\n const pluginMock = Util.noop\n pluginMock.NAME = 'test'\n pluginMock.jQueryInterface = Util.noop\n\n Util.defineJQueryPlugin(pluginMock)\n expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)\n expect(fakejQuery.fn.test.Constructor).toEqual(pluginMock)\n expect(fakejQuery.fn.test.noConflict).toEqual(jasmine.any(Function))\n })\n })\n\n describe('execute', () => {\n it('should execute if arg is function', () => {\n const spy = jasmine.createSpy('spy')\n Util.execute(spy)\n expect(spy).toHaveBeenCalled()\n })\n\n it('should execute if arg is function & return the result', () => {\n const functionFoo = (num1, num2 = 10) => num1 + num2\n const resultFoo = Util.execute(functionFoo, [undefined, 4, 5])\n expect(resultFoo).toBe(9)\n\n const resultFoo1 = Util.execute(functionFoo, [undefined, 4])\n expect(resultFoo1).toBe(14)\n\n const functionBar = () => 'foo'\n const resultBar = Util.execute(functionBar)\n expect(resultBar).toBe('foo')\n })\n\n it('should not execute if arg is not function & return default argument', () => {\n const foo = 'bar'\n expect(Util.execute(foo)).toBe('bar')\n expect(Util.execute(foo, [], 4)).toBe(4)\n })\n })\n\n describe('executeAfterTransition', () => {\n it('should immediately execute a function when waitForTransition parameter is false', () => {\n const el = document.createElement('div')\n const callbackSpy = jasmine.createSpy('callback spy')\n const eventListenerSpy = spyOn(el, 'addEventListener')\n\n Util.executeAfterTransition(callbackSpy, el, false)\n\n expect(callbackSpy).toHaveBeenCalled()\n expect(eventListenerSpy).not.toHaveBeenCalled()\n })\n\n it('should execute a function when a transitionend event is dispatched', () => {\n const el = document.createElement('div')\n const callbackSpy = jasmine.createSpy('callback spy')\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.05s',\n transitionDelay: '0s'\n })\n\n Util.executeAfterTransition(callbackSpy, el)\n\n el.dispatchEvent(new TransitionEvent('transitionend'))\n\n expect(callbackSpy).toHaveBeenCalled()\n })\n\n it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', () => {\n return new Promise(resolve => {\n const el = document.createElement('div')\n const callbackSpy = jasmine.createSpy('callback spy')\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.05s',\n transitionDelay: '0s'\n })\n\n Util.executeAfterTransition(callbackSpy, el)\n\n setTimeout(() => {\n expect(callbackSpy).toHaveBeenCalled()\n resolve()\n }, 70)\n })\n })\n\n it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', () => {\n return new Promise(resolve => {\n const el = document.createElement('div')\n const callbackSpy = jasmine.createSpy('callback spy')\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.05s',\n transitionDelay: '0s'\n })\n\n Util.executeAfterTransition(callbackSpy, el)\n\n setTimeout(() => {\n el.dispatchEvent(new TransitionEvent('transitionend'))\n }, 50)\n\n setTimeout(() => {\n expect(callbackSpy).toHaveBeenCalledTimes(1)\n resolve()\n }, 70)\n })\n })\n\n it('should not trigger a transitionend event if another transitionend event had already happened', () => {\n return new Promise(resolve => {\n const el = document.createElement('div')\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.05s',\n transitionDelay: '0s'\n })\n\n Util.executeAfterTransition(noop, el)\n\n // simulate a event dispatched by the browser\n el.dispatchEvent(new TransitionEvent('transitionend'))\n\n const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()\n\n setTimeout(() => {\n // setTimeout should not have triggered another transitionend event.\n expect(dispatchSpy).not.toHaveBeenCalled()\n resolve()\n }, 70)\n })\n })\n\n it('should ignore transitionend events from nested elements', () => {\n return new Promise(resolve => {\n fixtureEl.innerHTML = [\n '
',\n '
',\n '
'\n ].join('')\n\n const outer = fixtureEl.querySelector('.outer')\n const nested = fixtureEl.querySelector('.nested')\n const callbackSpy = jasmine.createSpy('callback spy')\n\n spyOn(window, 'getComputedStyle').and.returnValue({\n transitionDuration: '0.05s',\n transitionDelay: '0s'\n })\n\n Util.executeAfterTransition(callbackSpy, outer)\n\n nested.dispatchEvent(new TransitionEvent('transitionend', {\n bubbles: true\n }))\n\n setTimeout(() => {\n expect(callbackSpy).not.toHaveBeenCalled()\n }, 20)\n\n setTimeout(() => {\n expect(callbackSpy).toHaveBeenCalled()\n resolve()\n }, 70)\n })\n })\n })\n\n describe('getNextActiveElement', () => {\n it('should return first element if active not exists or not given and shouldGetNext is either true, or false with cycling being disabled', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, '', true, true)).toEqual('a')\n expect(Util.getNextActiveElement(array, 'g', true, true)).toEqual('a')\n expect(Util.getNextActiveElement(array, '', true, false)).toEqual('a')\n expect(Util.getNextActiveElement(array, 'g', true, false)).toEqual('a')\n expect(Util.getNextActiveElement(array, '', false, false)).toEqual('a')\n expect(Util.getNextActiveElement(array, 'g', false, false)).toEqual('a')\n })\n\n it('should return last element if active not exists or not given and shouldGetNext is false but cycling is enabled', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, '', false, true)).toEqual('d')\n expect(Util.getNextActiveElement(array, 'g', false, true)).toEqual('d')\n })\n\n it('should return next element or same if is last', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, 'a', true, true)).toEqual('b')\n expect(Util.getNextActiveElement(array, 'b', true, true)).toEqual('c')\n expect(Util.getNextActiveElement(array, 'd', true, false)).toEqual('d')\n })\n\n it('should return next element or first, if is last and \"isCycleAllowed = true\"', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, 'c', true, true)).toEqual('d')\n expect(Util.getNextActiveElement(array, 'd', true, true)).toEqual('a')\n })\n\n it('should return previous element or same if is first', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, 'b', false, true)).toEqual('a')\n expect(Util.getNextActiveElement(array, 'd', false, true)).toEqual('c')\n expect(Util.getNextActiveElement(array, 'a', false, false)).toEqual('a')\n })\n\n it('should return next element or first, if is last and \"isCycleAllowed = true\"', () => {\n const array = ['a', 'b', 'c', 'd']\n\n expect(Util.getNextActiveElement(array, 'd', false, true)).toEqual('c')\n expect(Util.getNextActiveElement(array, 'a', false, true)).toEqual('d')\n })\n })\n})\n" }, { "path": "js/tests/unit/util/sanitizer.spec.js", "content": "import { DefaultAllowlist, sanitizeHtml } from '../../../src/util/sanitizer.js'\n\ndescribe('Sanitizer', () => {\n describe('sanitizeHtml', () => {\n it('should return the same on empty string', () => {\n const empty = ''\n\n const result = sanitizeHtml(empty, DefaultAllowlist, null)\n\n expect(result).toEqual(empty)\n })\n\n it('should retain tags with valid URLs', () => {\n const validUrls = [\n '',\n 'http://abc',\n 'HTTP://abc',\n 'https://abc',\n 'HTTPS://abc',\n 'ftp://abc',\n 'FTP://abc',\n 'mailto:me@example.com',\n 'MAILTO:me@example.com',\n 'tel:123-123-1234',\n 'TEL:123-123-1234',\n 'sip:me@example.com',\n 'SIP:me@example.com',\n '#anchor',\n '/page1.md',\n 'http://JavaScript/my.js',\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', // Truncated.\n 'data:video/webm;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',\n 'data:audio/opus;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',\n 'unknown-scheme:abc'\n ]\n\n for (const url of validUrls) {\n const template = [\n '
',\n ` Click me`,\n ' Some content',\n '
'\n ].join('')\n\n const result = sanitizeHtml(template, DefaultAllowlist, null)\n\n expect(result).toContain(`href=\"${url}\"`)\n }\n })\n\n it('should sanitize template by removing tags with XSS', () => {\n const invalidUrls = [\n // eslint-disable-next-line no-script-url\n 'javascript:alert(7)',\n // eslint-disable-next-line no-script-url\n 'javascript:evil()',\n // eslint-disable-next-line no-script-url\n 'JavaScript:abc',\n ' javascript:abc',\n ' \\n Java\\n Script:abc',\n 'javascript:',\n 'javascript:',\n 'j avascript:',\n 'javascript:',\n 'javascript:',\n 'jav ascript:alert();',\n 'jav\\u0000ascript:alert();'\n ]\n\n for (const url of invalidUrls) {\n const template = [\n '
',\n ` Click me`,\n ' Some content',\n '
'\n ].join('')\n\n const result = sanitizeHtml(template, DefaultAllowlist, null)\n\n expect(result).not.toContain(`href=\"${url}\"`)\n }\n })\n\n it('should sanitize template and work with multiple regex', () => {\n const template = [\n '
',\n ' Click me',\n ' Some content',\n '
'\n ].join('')\n\n const myDefaultAllowList = DefaultAllowlist\n // With the default allow list\n let result = sanitizeHtml(template, myDefaultAllowList, null)\n\n // `data-foo` won't be present\n expect(result).not.toContain('data-foo=\"bar\"')\n\n // Add the following regex too\n myDefaultAllowList['*'].push(/^data-foo/)\n\n result = sanitizeHtml(template, myDefaultAllowList, null)\n\n expect(result).not.toContain('href=\"javascript:alert(7)') // This is in the default list\n expect(result).toContain('aria-label=\"This is a link\"') // This is in the default list\n expect(result).toContain('data-foo=\"bar\"') // We explicitly allow this\n })\n\n it('should allow aria attributes and safe attributes', () => {\n const template = [\n '
',\n ' Some content',\n '
'\n ].join('')\n\n const result = sanitizeHtml(template, DefaultAllowlist, null)\n\n expect(result).toContain('aria-pressed')\n expect(result).toContain('class=\"test\"')\n })\n\n it('should remove tags not in allowlist', () => {\n const template = [\n '
',\n ' ',\n '
'\n ].join('')\n\n const result = sanitizeHtml(template, DefaultAllowlist, null)\n\n expect(result).not.toContain('\n \n\n" }, { "path": "js/tests/visual/button.html", "content": "\n\n \n \n \n \n Button\n \n \n
\n

Button Bootstrap Visual Test

\n\n \n\n

For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.

\n

Navigate to the checkboxes with the keyboard (generally, using Tab / Shift + Tab), and ensure that Space toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that Space toggles the checkbox again.

\n\n
\n \n \n \n
\n\n

Navigate to the radio button group with the keyboard (generally, using Tab / Shift + Tab). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated \"forward\" to the group with Tab or \"backwards\" using Shift + Tab). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the ← and → arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that ← and → change the selected radio button again.

\n\n
\n \n \n \n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/carousel.html", "content": "\n\n \n \n \n \n Carousel\n \n \n \n
\n

Carousel Bootstrap Visual Test

\n\n

The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.

\n\n
\n
\n \n \n \n
\n
\n
\n \"First\n
\n
\n \"Second\n
\n
\n \"Third\n
\n
\n \n \n
\n
\n\n \n \n \n\n" }, { "path": "js/tests/visual/collapse.html", "content": "\n\n \n \n \n \n Collapse\n \n \n
\n

Collapse Bootstrap Visual Test

\n\n
\n
\n \n\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n \n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n \n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n \n
\" role=\"tabpanel\" aria-labelledby=\"headingFour\">\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/dropdown.html", "content": "\n\n \n \n \n \n Dropdown\n \n \n
\n

Dropdown Bootstrap Visual Test

\n\n \n\n \n\n
\n
\n
\n \n
\n \n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n
\n\n
\n \n
\n \n \n \n
\n
\n
\n\n
\n
\n Dropup split align end\n \n
\n \n \n \n
\n
\n
\n \n
\n \n \n \n
\n
\n
\n\n
\n
\n Dropend split\n \n
\n \n \n \n
\n
\n
\n \n
\n \n \n \n
\n
\n \n
\n Dropstart split\n \n
\n \n \n \n
\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/floating-label.html", "content": "\n\n \n \n \n \n Form\n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/input.html", "content": "\n\n \n \n \n \n Form\n \n \n \n
\n

Input Bootstrap Visual Test

\n\n

No layout

\n\n
\n Text\n \n
\n
\n Email\n \n
\n
\n Number\n \n
\n
\n Date\n \n
\n\n

Flex

\n\n
\n
\n Text\n \n
\n
\n Email\n \n
\n
\n Number\n \n
\n
\n Date\n \n
\n
\n\n

Grid

\n\n
\n
\n Text\n \n
\n
\n Email\n \n
\n
\n Number\n \n
\n
\n Date\n \n
\n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/modal.html", "content": "\n\n \n \n \n \n Modal\n \n \n \n \n\n
\n

Modal Bootstrap Visual Test

\n\n
\n
\n
\n
\n

Modal title

\n \n
\n
\n

Text in a modal

\n

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

\n\n

Popover in a modal

\n

This should trigger a popover on click.

\n\n\n

Tooltips in a modal

\n

This link and that link should have tooltips on hover.

\n\n
\n
\n \n\n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n \n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n \n
\n
\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n
\n
\n
\n
\n\n
\n\n

Overflowing text to show scroll behavior

\n

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

\n

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

\n

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

\n

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

\n

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

\n

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

\n

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

\n

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

\n

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
\n
\n

Firefox Bug Test

\n \n
\n
\n
    \n
  1. Ensure you're using Firefox.
    2. \n
  2. Open a new tab and then switch back to this tab.
    3. \n
  3. Click into this input:
    4. \n
  4. Switch to the other tab and then back to this tab.
    5. \n
\n

Test result:

\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
\n
\n

Lorem slowly

\n \n
\n
\n

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

\n
\n
\n \n \n
\n
\n
\n
\n\n \n\n \n\n

\n\n \n (See Issue #18365)\n\n

\n\n \n\n

\n\n
\n Tall body content to force the page to have a scrollbar.\n
\n\n \n\n

\n\n \n
\n\n \n \n \n\n" }, { "path": "js/tests/visual/popover.html", "content": "\n\n \n \n \n \n Popover\n \n \n
\n

Popover Bootstrap Visual Test

\n\n \n\n \n\n \n\n \n\n \n
\n\n \n \n \n\n" }, { "path": "js/tests/visual/scrollspy.html", "content": "\n\n \n \n \n \n Scrollspy\n \n \n \n \n
\n

@fat

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

@mdo

\n

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

one

\n

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

two

\n

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

three

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

Présentation

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

\n
\n

Final section

\n

Ad leggings keytar, brunch id art party dolor labore.

\n
\n\n \n \n\n" }, { "path": "js/tests/visual/tab.html", "content": "\n\n \n \n \n \n Tab\n \n \n \n
\n

Tab Bootstrap Visual Test

\n\n

Tabs without fade

\n\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n
\n
\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n
\n
\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n
\n
\n\n

Tabs with fade

\n\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n
\n
\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n
\n
\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n
\n
\n\n

Tabs without fade (no initially active pane)

\n\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n
\n
\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n
\n
\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n
\n
\n\n

Tabs with fade (no initially active pane)

\n\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

\n
\n
\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n
\n
\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n
\n
\n\n

Tabs with nav and using links (with fade)

\n \n\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

\n
\n
\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

\n
\n
\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

\n
\n
\n\n

Tabs with list-group (with fade)

\n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

\n
\n
\n

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

\n
\n
\n

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

\n
\n
\n

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

\n
\n
\n
\n
\n
\n\n \n \n\n" }, { "path": "js/tests/visual/toast.html", "content": "\n\n \n \n \n \n Toast\n \n \n \n
\n

Toast Bootstrap Visual Test

\n\n
\n
\n \n \n
\n
\n
\n\n
\n
\n
\n \n Bootstrap\n 11 mins ago\n
\n
\n Hello, world! This is a toast message with autohide in 2 seconds\n
\n
\n\n
\n
\n \n Bootstrap\n 2 seconds ago\n \n
\n
\n Heads up, toasts will stack automatically\n
\n
\n
\n\n \n \n \n\n" }, { "path": "js/tests/visual/tooltip.html", "content": "\n\n \n \n \n \n Tooltip\n \n \n \n
\n

Tooltip Bootstrap Visual Test

\n\n

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin freegan cred raw denim single-origin coffee viral.

\n\n
\n\n
\n

\n \n \n \n \n \n

\n
\n
\n

\n \n \n \n \n

\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
Test Selector triggered tooltips
\n
\n
\n \n \n
\n\n
\n
\n \n
\n
\n
\n\n \n \n\n \n\n \n\n" }, { "path": "nuget/bootstrap.nuspec", "content": "\n\n \n bootstrap\n \n 5\n Bootstrap CSS\n The Bootstrap Authors\n bootstrap\n The most popular front-end framework for developing responsive, mobile first projects on the web.\n https://blog.getbootstrap.com/\n Bootstrap framework in CSS. Includes JavaScript.\n en-us\n https://getbootstrap.com/\n \n bootstrap.png\n MIT\n Copyright 2011-2026\n false\n css mobile-first responsive front-end framework web\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n\n" }, { "path": "nuget/bootstrap.sass.nuspec", "content": "\n\n \n bootstrap.sass\n \n 5\n Bootstrap Sass\n The Bootstrap Authors\n bootstrap\n The most popular front-end framework for developing responsive, mobile first projects on the web.\n https://blog.getbootstrap.com/\n Bootstrap framework in Sass. Includes JavaScript\n en-us\n https://getbootstrap.com/\n \n bootstrap.png\n MIT\n Copyright 2011-2026\n false\n css sass mobile-first responsive front-end framework web\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n\n" }, { "path": "package.js", "content": "// package metadata file for Meteor.js\n\n/* eslint-env meteor */\n\nPackage.describe({\n name: 'twbs:bootstrap', // https://atmospherejs.com/twbs/bootstrap\n summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',\n version: '5.3.8',\n git: 'https://github.com/twbs/bootstrap.git'\n})\n\nPackage.onUse(api => {\n api.versionsFrom('METEOR@1.0')\n api.addFiles([\n 'dist/css/bootstrap.css',\n 'dist/js/bootstrap.js'\n ], 'client')\n})\n" }, { "path": "package.json", "content": "{\n \"name\": \"bootstrap\",\n \"description\": \"The most popular front-end framework for developing responsive, mobile first projects on the web.\",\n \"version\": \"5.3.8\",\n \"config\": {\n \"version_short\": \"5.3\"\n },\n \"keywords\": [\n \"css\",\n \"sass\",\n \"mobile-first\",\n \"responsive\",\n \"front-end\",\n \"framework\",\n \"web\"\n ],\n \"homepage\": \"https://getbootstrap.com/\",\n \"author\": \"The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/twbs/bootstrap.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/twbs/bootstrap/issues\"\n },\n \"funding\": [\n {\n \"type\": \"github\",\n \"url\": \"https://github.com/sponsors/twbs\"\n },\n {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/bootstrap\"\n }\n ],\n \"main\": \"dist/js/bootstrap.js\",\n \"module\": \"dist/js/bootstrap.esm.js\",\n \"sass\": \"scss/bootstrap.scss\",\n \"style\": \"dist/css/bootstrap.css\",\n \"scripts\": {\n \"start\": \"npm-run-all --parallel watch docs-serve\",\n \"bundlewatch\": \"bundlewatch --config .bundlewatch.config.json\",\n \"css\": \"npm-run-all css-compile css-prefix css-rtl css-minify\",\n \"css-compile\": \"sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/\",\n \"css-rtl\": \"cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \\\"dist/css\\\" --ext \\\".rtl.css\\\" \\\"dist/css/*.css\\\" \\\"!dist/css/*.min.css\\\" \\\"!dist/css/*.rtl.css\\\"\",\n \"css-lint\": \"npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*\",\n \"css-lint-stylelint\": \"stylelint \\\"**/*.{css,scss}\\\" --cache --cache-location .cache/.stylelintcache\",\n \"css-lint-vars\": \"fusv scss/ site/src/scss/\",\n \"css-minify\": \"npm-run-all --aggregate-output --parallel css-minify-*\",\n \"css-minify-main\": \"cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \\\".min\\\" \\\"dist/css/*.css\\\" \\\"!dist/css/*.min.css\\\" \\\"!dist/css/*rtl*.css\\\"\",\n \"css-minify-rtl\": \"cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \\\".min\\\" \\\"dist/css/*rtl.css\\\" \\\"!dist/css/*.min.css\\\"\",\n \"css-prefix\": \"npm-run-all --aggregate-output --parallel css-prefix-*\",\n \"css-prefix-main\": \"postcss --config build/postcss.config.mjs --replace \\\"dist/css/*.css\\\" \\\"!dist/css/*.rtl*.css\\\" \\\"!dist/css/*.min.css\\\"\",\n \"css-prefix-examples\": \"postcss --config build/postcss.config.mjs --replace \\\"site/src/assets/examples/**/*.css\\\"\",\n \"css-prefix-examples-rtl\": \"cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \\\"site/src/assets/examples/\\\" --ext \\\".rtl.css\\\" --base \\\"site/src/assets/examples/\\\" \\\"site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\\\" \\\"!site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\\\"\",\n \"css-test\": \"jasmine --config=scss/tests/jasmine.js\",\n \"js\": \"npm-run-all js-compile js-minify\",\n \"js-compile\": \"npm-run-all --aggregate-output --parallel js-compile-*\",\n \"js-compile-standalone\": \"rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap\",\n \"js-compile-standalone-esm\": \"rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap\",\n \"js-compile-bundle\": \"rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap\",\n \"js-compile-plugins\": \"node build/build-plugins.mjs\",\n \"js-lint\": \"eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.mjs,.md .\",\n \"js-minify\": \"npm-run-all --aggregate-output --parallel js-minify-*\",\n \"js-minify-standalone\": \"terser --compress passes=2 --mangle --comments \\\"/^!/\\\" --source-map \\\"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\\\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js\",\n \"js-minify-standalone-esm\": \"terser --compress passes=2 --mangle --comments \\\"/^!/\\\" --source-map \\\"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\\\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js\",\n \"js-minify-bundle\": \"terser --compress passes=2 --mangle --comments \\\"/^!/\\\" --source-map \\\"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\\\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js\",\n \"js-test\": \"npm-run-all --aggregate-output --parallel js-test-karma js-test-jquery js-test-integration-*\",\n \"js-debug\": \"cross-env DEBUG=true npm run js-test-karma\",\n \"js-test-karma\": \"karma start js/tests/karma.conf.js\",\n \"js-test-integration-bundle\": \"rollup --config js/tests/integration/rollup.bundle.js\",\n \"js-test-integration-modularity\": \"rollup --config js/tests/integration/rollup.bundle-modularity.js\",\n \"js-test-cloud\": \"cross-env BROWSERSTACK=true npm run js-test-karma\",\n \"js-test-jquery\": \"cross-env JQUERY=true npm run js-test-karma\",\n \"lint\": \"npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint\",\n \"docs\": \"npm-run-all docs-build docs-lint\",\n \"docs-build\": \"npm run astro-build\",\n \"docs-compile\": \"npm run docs-build\",\n \"docs-vnu\": \"node build/vnu-jar.mjs\",\n \"docs-lint\": \"npm-run-all docs-prettier-check docs-vnu\",\n \"docs-prettier-check\": \"prettier --config site/.prettierrc.json -c --cache site\",\n \"docs-prettier-format\": \"prettier --config site/.prettierrc.json --write --cache site\",\n \"docs-serve\": \"npm run astro-dev\",\n \"docs-serve-only\": \"npx sirv-cli _site --port 9001\",\n \"lockfile-lint\": \"lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json\",\n \"update-deps\": \"ncu -u -x @docsearch/js,eslint,eslint-config-xo,eslint-plugin-unicorn,karma-browserstack-launcher,karma-rollup-preprocessor,sass,vnu-jar\",\n \"release\": \"npm-run-all dist release-sri docs-build release-zip*\",\n \"release-sri\": \"node build/generate-sri.mjs\",\n \"release-version\": \"node build/change-version.mjs\",\n \"release-zip\": \"cross-env-shell \\\"rm -rf bootstrap-$npm_package_version-dist bootstrap-$npm_package_version-dist.zip && cp -r dist/ bootstrap-$npm_package_version-dist && zip -qr9 bootstrap-$npm_package_version-dist.zip bootstrap-$npm_package_version-dist && rm -rf bootstrap-$npm_package_version-dist\\\"\",\n \"release-zip-examples\": \"node build/zip-examples.mjs\",\n \"dist\": \"npm-run-all --aggregate-output --parallel css js\",\n \"test\": \"npm-run-all lint dist js-test docs-build docs-lint\",\n \"netlify\": \"npm-run-all dist release-sri astro-build\",\n \"watch\": \"npm-run-all --parallel watch-*\",\n \"watch-css-main\": \"nodemon --watch scss/ --ext scss --exec \\\"npm-run-all css-lint css-compile css-prefix\\\"\",\n \"watch-css-dist\": \"nodemon --watch dist/css/ --ext css --ignore \\\"dist/css/*.rtl.*\\\" --exec \\\"npm run css-rtl\\\"\",\n \"watch-css-docs\": \"nodemon --watch site/src/scss/ --ext scss --exec \\\"npm run css-lint\\\"\",\n \"watch-css-test\": \"nodemon --watch scss/ --ext scss,js --exec \\\"npm run css-test\\\"\",\n \"watch-js-main\": \"nodemon --watch js/src/ --ext js --exec \\\"npm-run-all js-lint js-compile\\\"\",\n \"watch-js-docs\": \"nodemon --watch site/src/assets/ --ext js --exec \\\"npm run js-lint\\\"\",\n \"astro-dev\": \"astro dev --root site --port 9001\",\n \"astro-build\": \"astro build --root site && rm -rf _site && cp -r site/dist _site\",\n \"astro-preview\": \"astro preview --root site --port 9001\"\n },\n \"peerDependencies\": {\n \"@popperjs/core\": \"^2.11.8\"\n },\n \"devDependencies\": {\n \"@astrojs/check\": \"^0.9.6\",\n \"@astrojs/markdown-remark\": \"^6.3.10\",\n \"@astrojs/mdx\": \"^4.3.13\",\n \"@astrojs/prism\": \"^3.3.0\",\n \"@astrojs/sitemap\": \"^3.6.0\",\n \"@babel/cli\": \"^7.28.3\",\n \"@babel/core\": \"^7.28.5\",\n \"@babel/preset-env\": \"^7.28.5\",\n \"@docsearch/js\": \"^3.9.0\",\n \"@popperjs/core\": \"^2.11.8\",\n \"@rollup/plugin-babel\": \"^6.1.0\",\n \"@rollup/plugin-commonjs\": \"^29.0.0\",\n \"@rollup/plugin-node-resolve\": \"^16.0.3\",\n \"@rollup/plugin-replace\": \"^6.0.3\",\n \"@stackblitz/sdk\": \"^1.11.0\",\n \"@types/js-yaml\": \"^4.0.9\",\n \"@types/mime\": \"^4.0.0\",\n \"@types/prismjs\": \"^1.26.6\",\n \"astro\": \"^5.16.6\",\n \"astro-auto-import\": \"^0.4.5\",\n \"astro-broken-links-checker\": \"^1.0.7\",\n \"autoprefixer\": \"^10.4.27\",\n \"bundlewatch\": \"^0.4.1\",\n \"clean-css-cli\": \"^5.6.3\",\n \"clipboard\": \"^2.0.11\",\n \"cross-env\": \"^10.1.0\",\n \"eslint\": \"8.57.1\",\n \"eslint-config-xo\": \"0.45.0\",\n \"eslint-plugin-html\": \"^8.1.3\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-markdown\": \"^5.1.0\",\n \"eslint-plugin-unicorn\": \"56.0.1\",\n \"find-unused-sass-variables\": \"^6.1.1\",\n \"github-slugger\": \"^2.0.0\",\n \"globby\": \"^16.0.0\",\n \"hammer-simulator\": \"0.0.1\",\n \"htmlparser2\": \"^12.0.0\",\n \"image-size\": \"^2.0.2\",\n \"ip\": \"^2.0.1\",\n \"jasmine\": \"^6.1.0\",\n \"jquery\": \"^3.7.1\",\n \"js-yaml\": \"^4.1.1\",\n \"karma\": \"^6.4.4\",\n \"karma-browserstack-launcher\": \"1.4.0\",\n \"karma-chrome-launcher\": \"^3.2.0\",\n \"karma-coverage-istanbul-reporter\": \"^3.0.3\",\n \"karma-detect-browsers\": \"^2.3.3\",\n \"karma-firefox-launcher\": \"^2.1.3\",\n \"karma-jasmine\": \"^5.1.0\",\n \"karma-jasmine-html-reporter\": \"^2.2.0\",\n \"karma-rollup-preprocessor\": \"7.0.7\",\n \"lockfile-lint\": \"^5.0.0\",\n \"mime\": \"^4.1.0\",\n \"nodemon\": \"^3.1.14\",\n \"npm-run-all2\": \"^8.0.4\",\n \"postcss\": \"^8.5.8\",\n \"postcss-cli\": \"^11.0.1\",\n \"prettier\": \"^3.8.1\",\n \"prettier-plugin-astro\": \"^0.14.1\",\n \"rehype-autolink-headings\": \"^7.1.0\",\n \"remark\": \"^15.0.1\",\n \"remark-html\": \"^16.0.1\",\n \"rollup\": \"^4.54.0\",\n \"rollup-plugin-istanbul\": \"^5.0.0\",\n \"rtlcss\": \"^4.3.0\",\n \"sass\": \"1.78.0\",\n \"sass-true\": \"^10.1.0\",\n \"shelljs\": \"^0.10.0\",\n \"stylelint\": \"^16.26.1\",\n \"stylelint-config-twbs-bootstrap\": \"^16.1.0\",\n \"terser\": \"^5.44.1\",\n \"unist-util-visit\": \"^5.1.0\",\n \"vnu-jar\": \"25.11.25\",\n \"zod\": \"^4.3.6\"\n },\n \"files\": [\n \"dist/{css,js}/*.{css,js,map}\",\n \"js/{src,dist}/**/*.{js,map}\",\n \"js/index.{esm,umd}.js\",\n \"scss/**/*.scss\",\n \"!scss/tests/**\"\n ],\n \"jspm\": {\n \"registry\": \"npm\",\n \"main\": \"js/bootstrap\",\n \"directories\": {\n \"lib\": \"dist\"\n },\n \"shim\": {\n \"js/bootstrap\": {\n \"deps\": [\n \"@popperjs/core\"\n ]\n }\n },\n \"dependencies\": {},\n \"peerDependencies\": {\n \"@popperjs/core\": \"^2.11.8\"\n }\n }\n}\n" }, { "path": "scss/_accordion.scss", "content": "//\n// Base styles\n//\n\n.accordion {\n // scss-docs-start accordion-css-vars\n --#{$prefix}accordion-color: #{$accordion-color};\n --#{$prefix}accordion-bg: #{$accordion-bg};\n --#{$prefix}accordion-transition: #{$accordion-transition};\n --#{$prefix}accordion-border-color: #{$accordion-border-color};\n --#{$prefix}accordion-border-width: #{$accordion-border-width};\n --#{$prefix}accordion-border-radius: #{$accordion-border-radius};\n --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};\n --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};\n --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};\n --#{$prefix}accordion-btn-color: #{$accordion-button-color};\n --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};\n --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};\n --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};\n --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};\n --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};\n --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};\n --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};\n --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};\n --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};\n --#{$prefix}accordion-active-color: #{$accordion-button-active-color};\n --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};\n // scss-docs-end accordion-css-vars\n}\n\n.accordion-button {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);\n @include font-size($font-size-base);\n color: var(--#{$prefix}accordion-btn-color);\n text-align: left; // Reset button style\n background-color: var(--#{$prefix}accordion-btn-bg);\n border: 0;\n @include border-radius(0);\n overflow-anchor: none;\n @include transition(var(--#{$prefix}accordion-transition));\n\n &:not(.collapsed) {\n color: var(--#{$prefix}accordion-active-color);\n background-color: var(--#{$prefix}accordion-active-bg);\n box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list\n\n &::after {\n background-image: var(--#{$prefix}accordion-btn-active-icon);\n transform: var(--#{$prefix}accordion-btn-icon-transform);\n }\n }\n\n // Accordion icon\n &::after {\n flex-shrink: 0;\n width: var(--#{$prefix}accordion-btn-icon-width);\n height: var(--#{$prefix}accordion-btn-icon-width);\n margin-left: auto;\n content: \"\";\n background-image: var(--#{$prefix}accordion-btn-icon);\n background-repeat: no-repeat;\n background-size: var(--#{$prefix}accordion-btn-icon-width);\n @include transition(var(--#{$prefix}accordion-btn-icon-transition));\n }\n\n &:hover {\n z-index: 2;\n }\n\n &:focus {\n z-index: 3;\n outline: 0;\n box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);\n }\n}\n\n.accordion-header {\n margin-bottom: 0;\n}\n\n.accordion-item {\n color: var(--#{$prefix}accordion-color);\n background-color: var(--#{$prefix}accordion-bg);\n border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);\n\n &:first-of-type {\n @include border-top-radius(var(--#{$prefix}accordion-border-radius));\n\n > .accordion-header .accordion-button {\n @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));\n }\n }\n\n &:not(:first-of-type) {\n border-top: 0;\n }\n\n // Only set a border-radius on the last item if the accordion is collapsed\n &:last-of-type {\n @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));\n\n > .accordion-header .accordion-button {\n &.collapsed {\n @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));\n }\n }\n\n > .accordion-collapse {\n @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));\n }\n }\n}\n\n.accordion-body {\n padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);\n}\n\n\n// Flush accordion items\n//\n// Remove borders and border-radius to keep accordion items edge-to-edge.\n\n.accordion-flush {\n > .accordion-item {\n border-right: 0;\n border-left: 0;\n @include border-radius(0);\n\n &:first-child { border-top: 0; }\n &:last-child { border-bottom: 0; }\n\n // stylelint-disable selector-max-class\n > .accordion-collapse,\n > .accordion-header .accordion-button,\n > .accordion-header .accordion-button.collapsed {\n @include border-radius(0);\n }\n // stylelint-enable selector-max-class\n }\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark) {\n .accordion-button::after {\n --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};\n --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};\n }\n }\n}\n" }, { "path": "scss/_alert.scss", "content": "//\n// Base styles\n//\n\n.alert {\n // scss-docs-start alert-css-vars\n --#{$prefix}alert-bg: transparent;\n --#{$prefix}alert-padding-x: #{$alert-padding-x};\n --#{$prefix}alert-padding-y: #{$alert-padding-y};\n --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};\n --#{$prefix}alert-color: inherit;\n --#{$prefix}alert-border-color: transparent;\n --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);\n --#{$prefix}alert-border-radius: #{$alert-border-radius};\n --#{$prefix}alert-link-color: inherit;\n // scss-docs-end alert-css-vars\n\n position: relative;\n padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);\n margin-bottom: var(--#{$prefix}alert-margin-bottom);\n color: var(--#{$prefix}alert-color);\n background-color: var(--#{$prefix}alert-bg);\n border: var(--#{$prefix}alert-border);\n @include border-radius(var(--#{$prefix}alert-border-radius));\n}\n\n// Headings for larger alerts\n.alert-heading {\n // Specified to prevent conflicts of changing $headings-color\n color: inherit;\n}\n\n// Provide class for links that match alerts\n.alert-link {\n font-weight: $alert-link-font-weight;\n color: var(--#{$prefix}alert-link-color);\n}\n\n\n// Dismissible alerts\n//\n// Expand the right padding and account for the close button's positioning.\n\n.alert-dismissible {\n padding-right: $alert-dismissible-padding-r;\n\n // Adjust close link position\n .btn-close {\n position: absolute;\n top: 0;\n right: 0;\n z-index: $stretched-link-z-index + 1;\n padding: $alert-padding-y * 1.25 $alert-padding-x;\n }\n}\n\n\n// scss-docs-start alert-modifiers\n// Generate contextual modifier classes for colorizing the alert\n@each $state in map-keys($theme-colors) {\n .alert-#{$state} {\n --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);\n --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);\n --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);\n --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);\n }\n}\n// scss-docs-end alert-modifiers\n" }, { "path": "scss/_badge.scss", "content": "// Base class\n//\n// Requires one of the contextual, color modifier classes for `color` and\n// `background-color`.\n\n.badge {\n // scss-docs-start badge-css-vars\n --#{$prefix}badge-padding-x: #{$badge-padding-x};\n --#{$prefix}badge-padding-y: #{$badge-padding-y};\n @include rfs($badge-font-size, --#{$prefix}badge-font-size);\n --#{$prefix}badge-font-weight: #{$badge-font-weight};\n --#{$prefix}badge-color: #{$badge-color};\n --#{$prefix}badge-border-radius: #{$badge-border-radius};\n // scss-docs-end badge-css-vars\n\n display: inline-block;\n padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);\n @include font-size(var(--#{$prefix}badge-font-size));\n font-weight: var(--#{$prefix}badge-font-weight);\n line-height: 1;\n color: var(--#{$prefix}badge-color);\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n @include border-radius(var(--#{$prefix}badge-border-radius));\n @include gradient-bg();\n\n // Empty badges collapse automatically\n &:empty {\n display: none;\n }\n}\n\n// Quick fix for badges in buttons\n.btn .badge {\n position: relative;\n top: -1px;\n}\n" }, { "path": "scss/_breadcrumb.scss", "content": ".breadcrumb {\n // scss-docs-start breadcrumb-css-vars\n --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};\n --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};\n --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};\n @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);\n --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};\n --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};\n --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};\n --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};\n --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};\n // scss-docs-end breadcrumb-css-vars\n\n display: flex;\n flex-wrap: wrap;\n padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);\n margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);\n @include font-size(var(--#{$prefix}breadcrumb-font-size));\n list-style: none;\n background-color: var(--#{$prefix}breadcrumb-bg);\n @include border-radius(var(--#{$prefix}breadcrumb-border-radius));\n}\n\n.breadcrumb-item {\n // The separator between breadcrumbs (by default, a forward-slash: \"/\")\n + .breadcrumb-item {\n padding-left: var(--#{$prefix}breadcrumb-item-padding-x);\n\n &::before {\n float: left; // Suppress inline spacings and underlining of the separator\n padding-right: var(--#{$prefix}breadcrumb-item-padding-x);\n color: var(--#{$prefix}breadcrumb-divider-color);\n content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{\"/* rtl:\"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{\"*/\"};\n }\n }\n\n &.active {\n color: var(--#{$prefix}breadcrumb-item-active-color);\n }\n}\n" }, { "path": "scss/_button-group.scss", "content": "// Make the div behave like a button\n.btn-group,\n.btn-group-vertical {\n position: relative;\n display: inline-flex;\n vertical-align: middle; // match .btn alignment given font-size hack above\n\n > .btn {\n position: relative;\n flex: 1 1 auto;\n }\n\n // Bring the hover, focused, and \"active\" buttons to the front to overlay\n // the borders properly\n > .btn-check:checked + .btn,\n > .btn-check:focus + .btn,\n > .btn:hover,\n > .btn:focus,\n > .btn:active,\n > .btn.active {\n z-index: 1;\n }\n}\n\n// Optional: Group multiple button groups together for a toolbar\n.btn-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n .input-group {\n width: auto;\n }\n}\n\n.btn-group {\n @include border-radius($btn-border-radius);\n\n // Prevent double borders when buttons are next to each other\n > :not(.btn-check:first-child) + .btn,\n > .btn-group:not(:first-child) {\n margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list\n }\n\n // Reset rounded corners\n > .btn:not(:last-child):not(.dropdown-toggle),\n > .btn.dropdown-toggle-split:first-child,\n > .btn-group:not(:last-child) > .btn {\n @include border-end-radius(0);\n }\n\n // The left radius should be 0 if the button is:\n // - the \"third or more\" child\n // - the second child and the previous element isn't `.btn-check` (making it the first child visually)\n // - part of a btn-group which isn't the first child\n > .btn:nth-child(n + 3),\n > :not(.btn-check) + .btn,\n > .btn-group:not(:first-child) > .btn {\n @include border-start-radius(0);\n }\n}\n\n// Sizing\n//\n// Remix the default button sizing classes into new ones for easier manipulation.\n\n.btn-group-sm > .btn { @extend .btn-sm; }\n.btn-group-lg > .btn { @extend .btn-lg; }\n\n\n//\n// Split button dropdowns\n//\n\n.dropdown-toggle-split {\n padding-right: $btn-padding-x * .75;\n padding-left: $btn-padding-x * .75;\n\n &::after,\n .dropup &::after,\n .dropend &::after {\n margin-left: 0;\n }\n\n .dropstart &::before {\n margin-right: 0;\n }\n}\n\n.btn-sm + .dropdown-toggle-split {\n padding-right: $btn-padding-x-sm * .75;\n padding-left: $btn-padding-x-sm * .75;\n}\n\n.btn-lg + .dropdown-toggle-split {\n padding-right: $btn-padding-x-lg * .75;\n padding-left: $btn-padding-x-lg * .75;\n}\n\n\n// The clickable button for toggling the menu\n// Set the same inset shadow as the :active state\n.btn-group.show .dropdown-toggle {\n @include box-shadow($btn-active-box-shadow);\n\n // Show no shadow for `.btn-link` since it has no other button styles.\n &.btn-link {\n @include box-shadow(none);\n }\n}\n\n\n//\n// Vertical button groups\n//\n\n.btn-group-vertical {\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n\n > .btn,\n > .btn-group {\n width: 100%;\n }\n\n > .btn:not(:first-child),\n > .btn-group:not(:first-child) {\n margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list\n }\n\n // Reset rounded corners\n > .btn:not(:last-child):not(.dropdown-toggle),\n > .btn-group:not(:last-child) > .btn {\n @include border-bottom-radius(0);\n }\n\n // The top radius should be 0 if the button is:\n // - the \"third or more\" child\n // - the second child and the previous element isn't `.btn-check` (making it the first child visually)\n // - part of a btn-group which isn't the first child\n > .btn:nth-child(n + 3),\n > :not(.btn-check) + .btn,\n > .btn-group:not(:first-child) > .btn {\n @include border-top-radius(0);\n }\n}\n" }, { "path": "scss/_buttons.scss", "content": "//\n// Base styles\n//\n\n.btn {\n // scss-docs-start btn-css-vars\n --#{$prefix}btn-padding-x: #{$btn-padding-x};\n --#{$prefix}btn-padding-y: #{$btn-padding-y};\n --#{$prefix}btn-font-family: #{$btn-font-family};\n @include rfs($btn-font-size, --#{$prefix}btn-font-size);\n --#{$prefix}btn-font-weight: #{$btn-font-weight};\n --#{$prefix}btn-line-height: #{$btn-line-height};\n --#{$prefix}btn-color: #{$btn-color};\n --#{$prefix}btn-bg: transparent;\n --#{$prefix}btn-border-width: #{$btn-border-width};\n --#{$prefix}btn-border-color: transparent;\n --#{$prefix}btn-border-radius: #{$btn-border-radius};\n --#{$prefix}btn-hover-border-color: transparent;\n --#{$prefix}btn-box-shadow: #{$btn-box-shadow};\n --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};\n --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);\n // scss-docs-end btn-css-vars\n\n display: inline-block;\n padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);\n font-family: var(--#{$prefix}btn-font-family);\n @include font-size(var(--#{$prefix}btn-font-size));\n font-weight: var(--#{$prefix}btn-font-weight);\n line-height: var(--#{$prefix}btn-line-height);\n color: var(--#{$prefix}btn-color);\n text-align: center;\n text-decoration: if($link-decoration == none, null, none);\n white-space: $btn-white-space;\n vertical-align: middle;\n cursor: if($enable-button-pointers, pointer, null);\n user-select: none;\n border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);\n @include border-radius(var(--#{$prefix}btn-border-radius));\n @include gradient-bg(var(--#{$prefix}btn-bg));\n @include box-shadow(var(--#{$prefix}btn-box-shadow));\n @include transition($btn-transition);\n\n &:hover {\n color: var(--#{$prefix}btn-hover-color);\n text-decoration: if($link-hover-decoration == underline, none, null);\n background-color: var(--#{$prefix}btn-hover-bg);\n border-color: var(--#{$prefix}btn-hover-border-color);\n }\n\n .btn-check + &:hover {\n // override for the checkbox/radio buttons\n color: var(--#{$prefix}btn-color);\n background-color: var(--#{$prefix}btn-bg);\n border-color: var(--#{$prefix}btn-border-color);\n }\n\n &:focus-visible {\n color: var(--#{$prefix}btn-hover-color);\n @include gradient-bg(var(--#{$prefix}btn-hover-bg));\n border-color: var(--#{$prefix}btn-hover-border-color);\n outline: 0;\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);\n } @else {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n\n .btn-check:focus-visible + & {\n border-color: var(--#{$prefix}btn-hover-border-color);\n outline: 0;\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);\n } @else {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n\n .btn-check:checked + &,\n :not(.btn-check) + &:active,\n &:first-child:active,\n &.active,\n &.show {\n color: var(--#{$prefix}btn-active-color);\n background-color: var(--#{$prefix}btn-active-bg);\n // Remove CSS gradients if they're enabled\n background-image: if($enable-gradients, none, null);\n border-color: var(--#{$prefix}btn-active-border-color);\n @include box-shadow(var(--#{$prefix}btn-active-shadow));\n\n &:focus-visible {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);\n } @else {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n }\n\n .btn-check:checked:focus-visible + & {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);\n } @else {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--#{$prefix}btn-disabled-color);\n pointer-events: none;\n background-color: var(--#{$prefix}btn-disabled-bg);\n background-image: if($enable-gradients, none, null);\n border-color: var(--#{$prefix}btn-disabled-border-color);\n opacity: var(--#{$prefix}btn-disabled-opacity);\n @include box-shadow(none);\n }\n}\n\n\n//\n// Alternate buttons\n//\n\n// scss-docs-start btn-variant-loops\n@each $color, $value in $theme-colors {\n .btn-#{$color} {\n @if $color == \"light\" {\n @include button-variant(\n $value,\n $value,\n $hover-background: shade-color($value, $btn-hover-bg-shade-amount),\n $hover-border: shade-color($value, $btn-hover-border-shade-amount),\n $active-background: shade-color($value, $btn-active-bg-shade-amount),\n $active-border: shade-color($value, $btn-active-border-shade-amount)\n );\n } @else if $color == \"dark\" {\n @include button-variant(\n $value,\n $value,\n $hover-background: tint-color($value, $btn-hover-bg-tint-amount),\n $hover-border: tint-color($value, $btn-hover-border-tint-amount),\n $active-background: tint-color($value, $btn-active-bg-tint-amount),\n $active-border: tint-color($value, $btn-active-border-tint-amount)\n );\n } @else {\n @include button-variant($value, $value);\n }\n }\n}\n\n@each $color, $value in $theme-colors {\n .btn-outline-#{$color} {\n @include button-outline-variant($value);\n }\n}\n// scss-docs-end btn-variant-loops\n\n\n//\n// Link buttons\n//\n\n// Make a button look and behave like a link\n.btn-link {\n --#{$prefix}btn-font-weight: #{$font-weight-normal};\n --#{$prefix}btn-color: #{$btn-link-color};\n --#{$prefix}btn-bg: transparent;\n --#{$prefix}btn-border-color: transparent;\n --#{$prefix}btn-hover-color: #{$btn-link-hover-color};\n --#{$prefix}btn-hover-border-color: transparent;\n --#{$prefix}btn-active-color: #{$btn-link-hover-color};\n --#{$prefix}btn-active-border-color: transparent;\n --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};\n --#{$prefix}btn-disabled-border-color: transparent;\n --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows\n --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};\n\n text-decoration: $link-decoration;\n @if $enable-gradients {\n background-image: none;\n }\n\n &:hover,\n &:focus-visible {\n text-decoration: $link-hover-decoration;\n }\n\n &:focus-visible {\n color: var(--#{$prefix}btn-color);\n }\n\n &:hover {\n color: var(--#{$prefix}btn-hover-color);\n }\n\n // No need for an active state here\n}\n\n\n//\n// Button Sizes\n//\n\n.btn-lg {\n @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);\n}\n\n.btn-sm {\n @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);\n}\n" }, { "path": "scss/_card.scss", "content": "//\n// Base styles\n//\n\n.card {\n // scss-docs-start card-css-vars\n --#{$prefix}card-spacer-y: #{$card-spacer-y};\n --#{$prefix}card-spacer-x: #{$card-spacer-x};\n --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};\n --#{$prefix}card-title-color: #{$card-title-color};\n --#{$prefix}card-subtitle-color: #{$card-subtitle-color};\n --#{$prefix}card-border-width: #{$card-border-width};\n --#{$prefix}card-border-color: #{$card-border-color};\n --#{$prefix}card-border-radius: #{$card-border-radius};\n --#{$prefix}card-box-shadow: #{$card-box-shadow};\n --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};\n --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};\n --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};\n --#{$prefix}card-cap-bg: #{$card-cap-bg};\n --#{$prefix}card-cap-color: #{$card-cap-color};\n --#{$prefix}card-height: #{$card-height};\n --#{$prefix}card-color: #{$card-color};\n --#{$prefix}card-bg: #{$card-bg};\n --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};\n --#{$prefix}card-group-margin: #{$card-group-margin};\n // scss-docs-end card-css-vars\n\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106\n height: var(--#{$prefix}card-height);\n color: var(--#{$prefix}body-color);\n word-wrap: break-word;\n background-color: var(--#{$prefix}card-bg);\n background-clip: border-box;\n border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n @include border-radius(var(--#{$prefix}card-border-radius));\n @include box-shadow(var(--#{$prefix}card-box-shadow));\n\n > hr {\n margin-right: 0;\n margin-left: 0;\n }\n\n > .list-group {\n border-top: inherit;\n border-bottom: inherit;\n\n &:first-child {\n border-top-width: 0;\n @include border-top-radius(var(--#{$prefix}card-inner-border-radius));\n }\n\n &:last-child {\n border-bottom-width: 0;\n @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));\n }\n }\n\n // Due to specificity of the above selector (`.card > .list-group`), we must\n // use a child selector here to prevent double borders.\n > .card-header + .list-group,\n > .list-group + .card-footer {\n border-top: 0;\n }\n}\n\n.card-body {\n // Enable `flex-grow: 1` for decks and groups so that card blocks take up\n // as much space as possible, ensuring footers are aligned to the bottom.\n flex: 1 1 auto;\n padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);\n color: var(--#{$prefix}card-color);\n}\n\n.card-title {\n margin-bottom: var(--#{$prefix}card-title-spacer-y);\n color: var(--#{$prefix}card-title-color);\n}\n\n.card-subtitle {\n margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list\n margin-bottom: 0;\n color: var(--#{$prefix}card-subtitle-color);\n}\n\n.card-text:last-child {\n margin-bottom: 0;\n}\n\n.card-link {\n &:hover {\n text-decoration: if($link-hover-decoration == underline, none, null);\n }\n\n + .card-link {\n margin-left: var(--#{$prefix}card-spacer-x);\n }\n}\n\n//\n// Optional textual caps\n//\n\n.card-header {\n padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);\n margin-bottom: 0; // Removes the default margin-bottom of \n color: var(--#{$prefix}card-cap-color);\n background-color: var(--#{$prefix}card-cap-bg);\n border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n\n &:first-child {\n @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);\n }\n}\n\n.card-footer {\n padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);\n color: var(--#{$prefix}card-cap-color);\n background-color: var(--#{$prefix}card-cap-bg);\n border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);\n\n &:last-child {\n @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));\n }\n}\n\n\n//\n// Header navs\n//\n\n.card-header-tabs {\n margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list\n margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n border-bottom: 0;\n\n .nav-link.active {\n background-color: var(--#{$prefix}card-bg);\n border-bottom-color: var(--#{$prefix}card-bg);\n }\n}\n\n.card-header-pills {\n margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list\n}\n\n// Card image\n.card-img-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: var(--#{$prefix}card-img-overlay-padding);\n @include border-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n.card-img,\n.card-img-top,\n.card-img-bottom {\n width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch\n}\n\n.card-img,\n.card-img-top {\n @include border-top-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n.card-img,\n.card-img-bottom {\n @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));\n}\n\n\n//\n// Card groups\n//\n\n.card-group {\n // The child selector allows nested `.card` within `.card-group`\n // to display properly.\n > .card {\n margin-bottom: var(--#{$prefix}card-group-margin);\n }\n\n @include media-breakpoint-up(sm) {\n display: flex;\n flex-flow: row wrap;\n // The child selector allows nested `.card` within `.card-group`\n // to display properly.\n > .card {\n flex: 1 0 0;\n margin-bottom: 0;\n\n + .card {\n margin-left: 0;\n border-left: 0;\n }\n\n // Handle rounded corners\n @if $enable-rounded {\n &:not(:last-child) {\n @include border-end-radius(0);\n\n > .card-img-top,\n > .card-header {\n // stylelint-disable-next-line property-disallowed-list\n border-top-right-radius: 0;\n }\n > .card-img-bottom,\n > .card-footer {\n // stylelint-disable-next-line property-disallowed-list\n border-bottom-right-radius: 0;\n }\n }\n\n &:not(:first-child) {\n @include border-start-radius(0);\n\n > .card-img-top,\n > .card-header {\n // stylelint-disable-next-line property-disallowed-list\n border-top-left-radius: 0;\n }\n > .card-img-bottom,\n > .card-footer {\n // stylelint-disable-next-line property-disallowed-list\n border-bottom-left-radius: 0;\n }\n }\n }\n }\n }\n}\n" }, { "path": "scss/_carousel.scss", "content": "// Notes on the classes:\n//\n// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)\n// even when their scroll action started on a carousel, but for compatibility (with Firefox)\n// we're preventing all actions instead\n// 2. The .carousel-item-start and .carousel-item-end is used to indicate where\n// the active slide is heading.\n// 3. .active.carousel-item is the current slide.\n// 4. .active.carousel-item-start and .active.carousel-item-end is the current\n// slide in its in-transition state. Only one of these occurs at a time.\n// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end\n// is the upcoming slide in transition.\n\n.carousel {\n position: relative;\n}\n\n.carousel.pointer-event {\n touch-action: pan-y;\n}\n\n.carousel-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n @include clearfix();\n}\n\n.carousel-item {\n position: relative;\n display: none;\n float: left;\n width: 100%;\n margin-right: -100%;\n backface-visibility: hidden;\n @include transition($carousel-transition);\n}\n\n.carousel-item.active,\n.carousel-item-next,\n.carousel-item-prev {\n display: block;\n}\n\n.carousel-item-next:not(.carousel-item-start),\n.active.carousel-item-end {\n transform: translateX(100%);\n}\n\n.carousel-item-prev:not(.carousel-item-end),\n.active.carousel-item-start {\n transform: translateX(-100%);\n}\n\n\n//\n// Alternate transitions\n//\n\n.carousel-fade {\n .carousel-item {\n opacity: 0;\n transition-property: opacity;\n transform: none;\n }\n\n .carousel-item.active,\n .carousel-item-next.carousel-item-start,\n .carousel-item-prev.carousel-item-end {\n z-index: 1;\n opacity: 1;\n }\n\n .active.carousel-item-start,\n .active.carousel-item-end {\n z-index: 0;\n opacity: 0;\n @include transition(opacity 0s $carousel-transition-duration);\n }\n}\n\n\n//\n// Left/right controls for nav\n//\n\n.carousel-control-prev,\n.carousel-control-next {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n // Use flex for alignment (1-3)\n display: flex; // 1. allow flex styles\n align-items: center; // 2. vertically center contents\n justify-content: center; // 3. horizontally center contents\n width: $carousel-control-width;\n padding: 0;\n color: $carousel-control-color;\n text-align: center;\n background: none;\n filter: var(--#{$prefix}carousel-control-icon-filter);\n border: 0;\n opacity: $carousel-control-opacity;\n @include transition($carousel-control-transition);\n\n // Hover/focus state\n &:hover,\n &:focus {\n color: $carousel-control-color;\n text-decoration: none;\n outline: 0;\n opacity: $carousel-control-hover-opacity;\n }\n}\n.carousel-control-prev {\n left: 0;\n background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);\n}\n.carousel-control-next {\n right: 0;\n background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);\n}\n\n// Icons for within\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n display: inline-block;\n width: $carousel-control-icon-width;\n height: $carousel-control-icon-width;\n background-repeat: no-repeat;\n background-position: 50%;\n background-size: 100% 100%;\n}\n\n.carousel-control-prev-icon {\n background-image: escape-svg($carousel-control-prev-icon-bg) #{\"/*rtl:\" + escape-svg($carousel-control-next-icon-bg) + \"*/\"};\n}\n.carousel-control-next-icon {\n background-image: escape-svg($carousel-control-next-icon-bg) #{\"/*rtl:\" + escape-svg($carousel-control-prev-icon-bg) + \"*/\"};\n}\n\n// Optional indicator pips/controls\n//\n// Add a container (such as a list) with the following class and add an item (ideally a focusable control,\n// like a button) with data-bs-target for each slide your carousel holds.\n\n.carousel-indicators {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n padding: 0;\n // Use the .carousel-control's width as margin so we don't overlay those\n margin-right: $carousel-control-width;\n margin-bottom: 1rem;\n margin-left: $carousel-control-width;\n\n [data-bs-target] {\n box-sizing: content-box;\n flex: 0 1 auto;\n width: $carousel-indicator-width;\n height: $carousel-indicator-height;\n padding: 0;\n margin-right: $carousel-indicator-spacer;\n margin-left: $carousel-indicator-spacer;\n text-indent: -999px;\n cursor: pointer;\n background-color: var(--#{$prefix}carousel-indicator-active-bg);\n background-clip: padding-box;\n border: 0;\n // Use transparent borders to increase the hit area by 10px on top and bottom.\n border-top: $carousel-indicator-hit-area-height solid transparent;\n border-bottom: $carousel-indicator-hit-area-height solid transparent;\n opacity: $carousel-indicator-opacity;\n @include transition($carousel-indicator-transition);\n }\n\n .active {\n opacity: $carousel-indicator-active-opacity;\n }\n}\n\n\n// Optional captions\n//\n//\n\n.carousel-caption {\n position: absolute;\n right: (100% - $carousel-caption-width) * .5;\n bottom: $carousel-caption-spacer;\n left: (100% - $carousel-caption-width) * .5;\n padding-top: $carousel-caption-padding-y;\n padding-bottom: $carousel-caption-padding-y;\n color: var(--#{$prefix}carousel-caption-color);\n text-align: center;\n}\n\n// Dark mode carousel\n\n@mixin carousel-dark() {\n --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};\n --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};\n --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};\n}\n\n.carousel-dark {\n @include carousel-dark();\n}\n\n:root,\n[data-bs-theme=\"light\"] {\n --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};\n --#{$prefix}carousel-caption-color: #{$carousel-caption-color};\n --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark, true) {\n @include carousel-dark();\n }\n}\n" }, { "path": "scss/_close.scss", "content": "// Transparent background and border properties included for button version.\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n.btn-close {\n // scss-docs-start close-css-vars\n --#{$prefix}btn-close-color: #{$btn-close-color};\n --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };\n --#{$prefix}btn-close-opacity: #{$btn-close-opacity};\n --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};\n --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};\n --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};\n --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};\n // scss-docs-end close-css-vars\n\n box-sizing: content-box;\n width: $btn-close-width;\n height: $btn-close-height;\n padding: $btn-close-padding-y $btn-close-padding-x;\n color: var(--#{$prefix}btn-close-color);\n background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements\n filter: var(--#{$prefix}btn-close-filter);\n border: 0; // for button elements\n @include border-radius();\n opacity: var(--#{$prefix}btn-close-opacity);\n\n // Override 's hover style\n &:hover {\n color: var(--#{$prefix}btn-close-color);\n text-decoration: none;\n opacity: var(--#{$prefix}btn-close-hover-opacity);\n }\n\n &:focus {\n outline: 0;\n box-shadow: var(--#{$prefix}btn-close-focus-shadow);\n opacity: var(--#{$prefix}btn-close-focus-opacity);\n }\n\n &:disabled,\n &.disabled {\n pointer-events: none;\n user-select: none;\n opacity: var(--#{$prefix}btn-close-disabled-opacity);\n }\n}\n\n@mixin btn-close-white() {\n --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};\n}\n\n.btn-close-white {\n @include btn-close-white();\n}\n\n:root,\n[data-bs-theme=\"light\"] {\n --#{$prefix}btn-close-filter: #{$btn-close-filter};\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark, true) {\n @include btn-close-white();\n }\n}\n" }, { "path": "scss/_containers.scss", "content": "// Container widths\n//\n// Set the container width, and override it for fixed navbars in media queries.\n\n@if $enable-container-classes {\n // Single container class with breakpoint max-widths\n .container,\n // 100% wide container at all breakpoints\n .container-fluid {\n @include make-container();\n }\n\n // Responsive containers that are 100% wide until a breakpoint\n @each $breakpoint, $container-max-width in $container-max-widths {\n .container-#{$breakpoint} {\n @extend .container-fluid;\n }\n\n @include media-breakpoint-up($breakpoint, $grid-breakpoints) {\n %responsive-container-#{$breakpoint} {\n max-width: $container-max-width;\n }\n\n // Extend each breakpoint which is smaller or equal to the current breakpoint\n $extend-breakpoint: true;\n\n @each $name, $width in $grid-breakpoints {\n @if ($extend-breakpoint) {\n .container#{breakpoint-infix($name, $grid-breakpoints)} {\n @extend %responsive-container-#{$breakpoint};\n }\n\n // Once the current breakpoint is reached, stop extending\n @if ($breakpoint == $name) {\n $extend-breakpoint: false;\n }\n }\n }\n }\n }\n}\n" }, { "path": "scss/_dropdown.scss", "content": "// The dropdown wrapper (`
`)\n.dropup,\n.dropend,\n.dropdown,\n.dropstart,\n.dropup-center,\n.dropdown-center {\n position: relative;\n}\n\n.dropdown-toggle {\n white-space: nowrap;\n\n // Generate the caret automatically\n @include caret();\n}\n\n// The dropdown menu\n.dropdown-menu {\n // scss-docs-start dropdown-css-vars\n --#{$prefix}dropdown-zindex: #{$zindex-dropdown};\n --#{$prefix}dropdown-min-width: #{$dropdown-min-width};\n --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};\n --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};\n --#{$prefix}dropdown-spacer: #{$dropdown-spacer};\n @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);\n --#{$prefix}dropdown-color: #{$dropdown-color};\n --#{$prefix}dropdown-bg: #{$dropdown-bg};\n --#{$prefix}dropdown-border-color: #{$dropdown-border-color};\n --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};\n --#{$prefix}dropdown-border-width: #{$dropdown-border-width};\n --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};\n --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};\n --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};\n --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};\n --#{$prefix}dropdown-link-color: #{$dropdown-link-color};\n --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};\n --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};\n --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};\n --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};\n --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};\n --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};\n --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};\n --#{$prefix}dropdown-header-color: #{$dropdown-header-color};\n --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};\n --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};\n // scss-docs-end dropdown-css-vars\n\n position: absolute;\n z-index: var(--#{$prefix}dropdown-zindex);\n display: none; // none by default, but block on \"open\" of the menu\n min-width: var(--#{$prefix}dropdown-min-width);\n padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);\n margin: 0; // Override default margin of ul\n @include font-size(var(--#{$prefix}dropdown-font-size));\n color: var(--#{$prefix}dropdown-color);\n text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n list-style: none;\n background-color: var(--#{$prefix}dropdown-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);\n @include border-radius(var(--#{$prefix}dropdown-border-radius));\n @include box-shadow(var(--#{$prefix}dropdown-box-shadow));\n\n &[data-bs-popper] {\n top: 100%;\n left: 0;\n margin-top: var(--#{$prefix}dropdown-spacer);\n }\n\n @if $dropdown-padding-y == 0 {\n > .dropdown-item:first-child,\n > li:first-child .dropdown-item {\n @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));\n }\n > .dropdown-item:last-child,\n > li:last-child .dropdown-item {\n @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));\n }\n\n }\n}\n\n// scss-docs-start responsive-breakpoints\n// We deliberately hardcode the `bs-` prefix because we check\n// this custom property in JS to determine Popper's positioning\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n .dropdown-menu#{$infix}-start {\n --bs-position: start;\n\n &[data-bs-popper] {\n right: auto;\n left: 0;\n }\n }\n\n .dropdown-menu#{$infix}-end {\n --bs-position: end;\n\n &[data-bs-popper] {\n right: 0;\n left: auto;\n }\n }\n }\n}\n// scss-docs-end responsive-breakpoints\n\n// Allow for dropdowns to go bottom up (aka, dropup-menu)\n// Just add .dropup after the standard .dropdown class and you're set.\n.dropup {\n .dropdown-menu[data-bs-popper] {\n top: auto;\n bottom: 100%;\n margin-top: 0;\n margin-bottom: var(--#{$prefix}dropdown-spacer);\n }\n\n .dropdown-toggle {\n @include caret(up);\n }\n}\n\n.dropend {\n .dropdown-menu[data-bs-popper] {\n top: 0;\n right: auto;\n left: 100%;\n margin-top: 0;\n margin-left: var(--#{$prefix}dropdown-spacer);\n }\n\n .dropdown-toggle {\n @include caret(end);\n &::after {\n vertical-align: 0;\n }\n }\n}\n\n.dropstart {\n .dropdown-menu[data-bs-popper] {\n top: 0;\n right: 100%;\n left: auto;\n margin-top: 0;\n margin-right: var(--#{$prefix}dropdown-spacer);\n }\n\n .dropdown-toggle {\n @include caret(start);\n &::before {\n vertical-align: 0;\n }\n }\n}\n\n\n// Dividers (basically an `
`) within the dropdown\n.dropdown-divider {\n height: 0;\n margin: var(--#{$prefix}dropdown-divider-margin-y) 0;\n overflow: hidden;\n border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);\n opacity: 1; // Revisit in v6 to de-dupe styles that conflict with
element\n}\n\n// Links, buttons, and more within the dropdown menu\n//\n// `\n
\n
\n\n\n
\n\n
\n
\n
\n

Album example

\n

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.

\n

\n Main call to action\n Secondary action\n

\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n \n
\n

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

\n
\n
\n \n \n
\n 9 mins\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n\n" }, { "path": "site/src/assets/examples/album-rtl/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\nimport Placeholder from '@shortcodes/Placeholder.astro'\n\nexport const title = 'مثال الألبوم'\nexport const direction = 'rtl'\n---\n\n
\n
\n
\n
\n
\n

حول

\n

أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.

\n
\n
\n

تواصل معي

\n \n
\n
\n
\n
\n
\n
\n \n \n الألبوم\n \n \n
\n
\n
\n\n
\n\n
\n
\n
\n

مثال الألبوم

\n

وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.

\n

\n الدعوة الرئيسية للعمل\n عمل ثانوي\n

\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n \n
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

\n
\n
\n \n \n
\n 9 دقائق\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n\n" }, { "path": "site/src/assets/examples/badges/badges.css", "content": ".badge > a {\n color: inherit;\n}\n" }, { "path": "site/src/assets/examples/badges/index.astro", "content": "---\nexport const title = 'Badges'\nexport const extra_css = ['badges.css']\n---\n\n\n \n \n \n\n\n
\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n
\n\n
\n\n
\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n
\n\n
\n\n
\n Primary\n Secondary\n Success\n Danger\n Warning\n Info\n Light\n Dark\n
\n\n
\n\n
\n \n \"\"Primary\n \n \n \"\"Secondary\n \n \n \"\"Success\n \n \n \"\"Danger\n \n \n \"\"Warning\n \n \n \"\"Info\n \n \n \"\"Light\n \n \n \"\"Dark\n \n
\n\n
\n\n
\n \n Primary 1\n \n \n \n Primary 2\n \n \n \n Primary 3\n \n \n
\n\n
\n\n
\n \n \"\"\n Primary\n \n \n \n \n \"\"\n Secondary\n \n \n \n \n \"\"\n Success\n \n \n \n \n \"\"\n Danger\n \n \n \n \n \"\"\n Warning\n \n \n \n \n \"\"\n Info\n \n \n \n \n \"\"\n Light\n \n \n \n \n \"\"\n Dark\n \n \n \n
\n" }, { "path": "site/src/assets/examples/blog/blog.css", "content": "/* stylelint-disable @stylistic/selector-list-comma-newline-after */\n\n.blog-header-logo {\n font-family: \"Playfair Display\", Georgia, \"Times New Roman\", serif/*rtl:Amiri, Georgia, \"Times New Roman\", serif*/;\n font-size: 2.25rem;\n}\n\n.blog-header-logo:hover {\n text-decoration: none;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: \"Playfair Display\", Georgia, \"Times New Roman\", serif/*rtl:Amiri, Georgia, \"Times New Roman\", serif*/;\n}\n\n.flex-auto {\n flex: 0 0 auto;\n}\n\n.h-250 { height: 250px; }\n@media (min-width: 768px) {\n .h-md-250 { height: 250px; }\n}\n\n/* Pagination */\n.blog-pagination {\n margin-bottom: 4rem;\n}\n\n/*\n * Blog posts\n */\n.blog-post {\n margin-bottom: 4rem;\n}\n.blog-post-meta {\n margin-bottom: 1.25rem;\n color: #727272;\n}\n" }, { "path": "site/src/assets/examples/blog/blog.rtl.css", "content": "/* stylelint-disable @stylistic/selector-list-comma-newline-after */\n\n.blog-header-logo {\n font-family: Amiri, Georgia, \"Times New Roman\", serif;\n font-size: 2.25rem;\n}\n\n.blog-header-logo:hover {\n text-decoration: none;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: Amiri, Georgia, \"Times New Roman\", serif;\n}\n\n.flex-auto {\n flex: 0 0 auto;\n}\n\n.h-250 { height: 250px; }\n@media (min-width: 768px) {\n .h-md-250 { height: 250px; }\n}\n\n/* Pagination */\n.blog-pagination {\n margin-bottom: 4rem;\n}\n\n/*\n * Blog posts\n */\n.blog-post {\n margin-bottom: 4rem;\n}\n.blog-post-meta {\n margin-bottom: 1.25rem;\n color: #727272;\n}\n" }, { "path": "site/src/assets/examples/blog/index.astro", "content": "---\nexport const title = 'Blog Template'\nexport const extra_css = ['https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap', 'blog.css']\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n
\n
\n
\n
\n Subscribe\n
\n
\n \n
\n
\n \n Search\n \n Sign up\n
\n
\n
\n\n
\n \n
\n
\n\n
\n
\n
\n

Title of a longer featured blog post

\n

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

\n

Continue reading...

\n
\n
\n\n
\n
\n
\n
\n World\n

Featured post

\n
Nov 12
\n

This is a wider card with supporting text below as a natural lead-in to additional content.

\n \n Continue reading\n \n \n
\n
\n \n
\n
\n
\n
\n
\n
\n Design\n

Post title

\n
Nov 11
\n

This is a wider card with supporting text below as a natural lead-in to additional content.

\n \n Continue reading\n \n \n
\n
\n \n
\n
\n
\n
\n\n
\n
\n

\n From the Firehose\n

\n\n
\n

Sample blog post

\n

January 1, 2021 by Mark

\n\n

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

\n
\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n

Blockquotes

\n

This is an example blockquote in action:

\n
\n

Quoted text goes here.

\n
\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n

Example lists

\n

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

\n
    \n
  • First list item
    • \n
  • Second list item with a longer description
    • \n
  • Third list item to close it out
    • \n
\n

And this is an ordered list:

\n
    \n
  1. First list item
    2. \n
  2. Second list item with a longer description
    3. \n
  3. Third list item to close it out
    4. \n
\n

And this is a definition list:

\n
\n
HyperText Markup Language (HTML)
\n
The language used to describe and define the content of a Web page
\n
Cascading Style Sheets (CSS)
\n
Used to describe the appearance of Web content
\n
JavaScript (JS)
\n
The programming language used to build advanced Web sites and applications
\n
\n

Inline HTML elements

\n

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

\n
    \n
  • To bold text, use <strong>.
    • \n
  • To italicize text, use <em>.
    • \n
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
    • \n
  • Citations, like — Mark Otto, should use <cite>.
    • \n
  • Deleted text should use <del> and inserted text should use <ins>.
    • \n
  • Superscript text uses <sup> and subscript text uses <sub>.
    • \n
\n

Most of these elements are styled by browsers with few modifications on our part.

\n

Heading

\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n

Sub-heading

\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n 
Example code block
\n

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

\n
\n\n
\n

Another blog post

\n

December 23, 2020 by Jacob

\n\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n
\n

Longer quote goes here, maybe with some emphasized text in the middle of it.

\n
\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n

Example table

\n

And don't forget about tables in these posts:

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameUpvotesDownvotes
Alice1011
Bob43
Charlie79
Totals2123
\n\n

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

\n
\n\n
\n

New feature

\n

December 14, 2020 by Chris

\n\n

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

\n
    \n
  • First list item
    • \n
  • Second list item with a longer description
    • \n
  • Third list item to close it out
    • \n
\n

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

\n
\n\n \n\n
\n\n
\n
\n
\n

About

\n

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

\n
\n\n \n\n
\n

Archives

\n
    \n
  1. March 2021
    2. \n
  2. February 2021
    3. \n
  3. January 2021
    4. \n
  4. December 2020
    5. \n
  5. November 2020
    6. \n
  6. October 2020
    7. \n
  7. September 2020
    8. \n
  8. August 2020
    9. \n
  9. July 2020
    10. \n
  10. June 2020
    11. \n
  11. May 2020
    12. \n
  12. April 2020
    13. \n
\n
\n\n
\n

Elsewhere

\n
    \n
  1. GitHub
    2. \n
  2. Social
    3. \n
  3. Facebook
    4. \n
\n
\n
\n
\n
\n\n
\n\n\n" }, { "path": "site/src/assets/examples/blog-rtl/index.astro", "content": "---\nexport const title = 'قالب المدونة'\nexport const direction = 'rtl'\nexport const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css']\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n
\n
\n
\n
\n الإشتراك في النشرة البريدية\n
\n
\n \n
\n
\n \n بحث\n \n إنشاء حساب\n
\n
\n
\n\n
\n \n
\n
\n\n
\n
\n
\n

عنوان تدوينة مميزة أطول

\n

عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.

\n

أكمل القراءة...

\n
\n
\n\n
\n
\n
\n
\n العالم\n

مشاركة مميزة

\n
نوفمبر 12
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

\n \n أكمل القراءة\n \n \n
\n
\n \n
\n
\n
\n
\n
\n
\n التصميم\n

عنوان الوظيفة

\n
نوفمبر 11
\n

هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.

\n \n أكمل القراءة\n \n \n
\n
\n \n
\n
\n
\n
\n\n
\n
\n

\n من Firehose\n

\n\n
\n

مثال على تدوينة

\n

1 يناير 2021 بواسطة Mark

\n\n

تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.

\n
\n

يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.

\n
\n

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية

\n
\n

تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.

\n

عنوان

\n

تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في \"البلاستيدات الخضراء\". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!

\n

عنوان فرعي

\n

ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.

\n 
Example code block
\n

وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا \"هيدروجينوتروف\" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.

\n

عنوان فرعي

\n

بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.

\n

يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:

\n
    \n
  • البروتينات
    • \n
  • الكربوهيدرات
    • \n
  • الدهون
    • \n
\n

وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:

\n
    \n
  1. الكربون
    2. \n
  2. الهيدروجين
    3. \n
  3. الأكسجين
    4. \n
  4. النيتروجين
    5. \n
\n

ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.

\n
\n\n
\n

تدوينة أخرى

\n

23 ديسمبر 2020 بواسطة Jacob

\n\n

في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.

\n
\n

تم تصنيع اللحوم بأنواع عديدة

\n
\n

إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.

\n

وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.

\n
\n\n
\n

ميزة جديدة

\n

14 ديسمبر 2020 بواسطة Jacob

\n\n

كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم \"سولين\" (Solein).

\n

وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.

\n

وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:

\n
    \n
  • توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
    • \n
  • تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة
    • \n
  • تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م
    • \n
\n

فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!

\n
\n\n \n\n
\n\n
\n
\n
\n

حول

\n

أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.

\n
\n\n \n\n
\n

الأرشيف

\n
    \n
  1. مارس 2021
    2. \n
  2. شباط 2021
    3. \n
  3. يناير 2021
    4. \n
  4. ديسمبر 2020
    5. \n
  5. نوفمبر 2020
    6. \n
  6. أكتوبر 2020
    7. \n
  7. سبتمبر 2020
    8. \n
  8. اغسطس 2020
    9. \n
  9. يوليو 2020
    10. \n
  10. يونيو 2020
    11. \n
  11. مايو 2020
    12. \n
  12. ابريل 2020
    13. \n
\n
\n\n
\n

في مكان آخر

\n
    \n
  1. GitHub
    2. \n
  2. Social
    3. \n
  3. Facebook
    4. \n
\n
\n
\n
\n
\n\n
\n\n\n" }, { "path": "site/src/assets/examples/breadcrumbs/breadcrumbs.css", "content": ".breadcrumb-chevron {\n --bs-breadcrumb-divider: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\");\n gap: .5rem;\n}\n.breadcrumb-chevron .breadcrumb-item {\n display: flex;\n gap: inherit;\n align-items: center;\n padding-left: 0;\n line-height: 1;\n}\n.breadcrumb-chevron .breadcrumb-item::before {\n gap: inherit;\n float: none;\n width: 1rem;\n height: 1rem;\n}\n\n.breadcrumb-custom .breadcrumb-item {\n position: relative;\n flex-grow: 1;\n padding: .75rem 3rem;\n}\n.breadcrumb-custom .breadcrumb-item::before {\n display: none;\n}\n.breadcrumb-custom .breadcrumb-item::after {\n position: absolute;\n top: 50%;\n right: -25px;\n z-index: 1;\n display: inline-block;\n width: 50px;\n height: 50px;\n margin-top: -25px;\n content: \"\";\n background-color: var(--bs-tertiary-bg);\n border-top-right-radius: .5rem;\n box-shadow: 1px -1px var(--bs-border-color);\n transform: scale(.707) rotate(45deg);\n}\n.breadcrumb-custom .breadcrumb-item:first-child {\n padding-left: 1.5rem;\n}\n.breadcrumb-custom .breadcrumb-item:last-child {\n padding-right: 1.5rem;\n}\n.breadcrumb-custom .breadcrumb-item:last-child::after {\n display: none;\n}\n" }, { "path": "site/src/assets/examples/breadcrumbs/index.astro", "content": "---\nexport const title = 'Breadcrumbs'\nexport const extra_css = ['breadcrumbs.css']\n---\n\n\n \n \n \n\n\n
\n \n
\n\n
\n\n
\n \n
\n\n
\n\n
\n \n
\n\n
\n\n
\n \n
\n\n
\n" }, { "path": "site/src/assets/examples/buttons/index.astro", "content": "---\nexport const title = 'Buttons'\n---\n\n\n \n \n \n \n \n \n \n\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n\n
\n
\n \n \n
\n
\n\n
\n\n
\n \n \n
\n\n
\n\n
\n \n \n
\n\n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n" }, { "path": "site/src/assets/examples/carousel/carousel.css", "content": "/* GLOBAL STYLES\n-------------------------------------------------- */\n/* Padding below the footer and lighter body text */\n\nbody {\n padding-top: 3rem;\n padding-bottom: 3rem;\n color: rgb(var(--bs-tertiary-color-rgb));\n}\n\n\n/* CUSTOMIZE THE CAROUSEL\n-------------------------------------------------- */\n\n/* Carousel base class */\n.carousel {\n margin-bottom: 4rem;\n}\n/* Since positioning the image, we need to help out the caption */\n.carousel-caption {\n bottom: 3rem;\n z-index: 10;\n}\n\n/* Declare heights because of positioning of img element */\n.carousel-item {\n height: 32rem;\n}\n\n\n/* MARKETING CONTENT\n-------------------------------------------------- */\n\n/* Center align the text within the three columns below the carousel */\n.marketing .col-lg-4 {\n margin-bottom: 1.5rem;\n text-align: center;\n}\n/* rtl:begin:ignore */\n.marketing .col-lg-4 p {\n margin-right: .75rem;\n margin-left: .75rem;\n}\n/* rtl:end:ignore */\n\n\n/* Featurettes\n------------------------- */\n\n.featurette-divider {\n margin: 5rem 0; /* Space out the Bootstrap
more */\n}\n\n/* Thin out the marketing headings */\n/* rtl:begin:remove */\n.featurette-heading {\n letter-spacing: -.05rem;\n}\n\n/* rtl:end:remove */\n\n/* RESPONSIVE CSS\n-------------------------------------------------- */\n\n@media (min-width: 40em) {\n /* Bump up size of carousel content */\n .carousel-caption p {\n margin-bottom: 1.25rem;\n font-size: 1.25rem;\n line-height: 1.4;\n }\n\n .featurette-heading {\n font-size: 50px;\n }\n}\n\n@media (min-width: 62em) {\n .featurette-heading {\n margin-top: 7rem;\n }\n}\n" }, { "path": "site/src/assets/examples/carousel/carousel.rtl.css", "content": "/* GLOBAL STYLES\n-------------------------------------------------- */\n/* Padding below the footer and lighter body text */\n\nbody {\n padding-top: 3rem;\n padding-bottom: 3rem;\n color: rgb(var(--bs-tertiary-color-rgb));\n}\n\n\n/* CUSTOMIZE THE CAROUSEL\n-------------------------------------------------- */\n\n/* Carousel base class */\n.carousel {\n margin-bottom: 4rem;\n}\n/* Since positioning the image, we need to help out the caption */\n.carousel-caption {\n bottom: 3rem;\n z-index: 10;\n}\n\n/* Declare heights because of positioning of img element */\n.carousel-item {\n height: 32rem;\n}\n\n\n/* MARKETING CONTENT\n-------------------------------------------------- */\n\n/* Center align the text within the three columns below the carousel */\n.marketing .col-lg-4 {\n margin-bottom: 1.5rem;\n text-align: center;\n}\n.marketing .col-lg-4 p {\n margin-right: .75rem;\n margin-left: .75rem;\n}\n\n\n/* Featurettes\n------------------------- */\n\n.featurette-divider {\n margin: 5rem 0; /* Space out the Bootstrap
more */\n}\n\n/* Thin out the marketing headings */\n\n/* RESPONSIVE CSS\n-------------------------------------------------- */\n\n@media (min-width: 40em) {\n /* Bump up size of carousel content */\n .carousel-caption p {\n margin-bottom: 1.25rem;\n font-size: 1.25rem;\n line-height: 1.4;\n }\n\n .featurette-heading {\n font-size: 50px;\n }\n}\n\n@media (min-width: 62em) {\n .featurette-heading {\n margin-top: 7rem;\n }\n}\n" }, { "path": "site/src/assets/examples/carousel/index.astro", "content": "---\nexport const title = 'Carousel Template'\nexport const extra_css = ['carousel.css']\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n
\n \n
\n\n
\n\n
\n
\n \n \n \n
\n
\n
\n \n
\n
\n

Example headline.

\n

Some representative placeholder content for the first slide of the carousel.

\n

Sign up today

\n
\n
\n
\n
\n \n
\n
\n

Another example headline.

\n

Some representative placeholder content for the second slide of the carousel.

\n

Learn more

\n
\n
\n
\n
\n \n
\n
\n

One more for good measure.

\n

Some representative placeholder content for the third slide of this carousel.

\n

Browse gallery

\n
\n
\n
\n
\n \n \n
\n\n\n \n \n\n
\n\n \n
\n
\n \n

Heading

\n

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

\n

View details »

\n
\n
\n \n

Heading

\n

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

\n

View details »

\n
\n
\n \n

Heading

\n

And lastly this, the third column of representative placeholder content.

\n

View details »

\n
\n
\n\n\n \n\n
\n\n
\n
\n

First featurette heading. It’ll blow your mind.

\n

Some great placeholder content for the first featurette here. Imagine some exciting prose here.

\n
\n
\n \n
\n
\n\n
\n\n
\n
\n

Oh yeah, it’s that good. See for yourself.

\n

Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.

\n
\n
\n \n
\n
\n\n
\n\n
\n
\n

And lastly, this one. Checkmate.

\n

And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.

\n
\n
\n \n
\n
\n\n
\n\n \n\n
\n\n\n \n \n
\n" }, { "path": "site/src/assets/examples/carousel-rtl/index.astro", "content": "---\nexport const title = 'قالب شرائح العرض'\nexport const direction = 'rtl'\nexport const extra_css = ['../carousel/carousel.rtl.css']\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n
\n \n
\n\n
\n\n
\n
\n \n \n \n
\n
\n
\n \n
\n
\n

عنوان المثال.

\n

تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.

\n

سجل اليوم

\n
\n
\n
\n
\n \n
\n
\n

عنوان مثال آخر.

\n

حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.

\n

أعرف أكثر

\n
\n
\n
\n
\n \n
\n
\n

واحد أكثر لقياس جيد.

\n

الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.

\n

تصفح المعرض

\n
\n
\n
\n
\n \n \n
\n\n\n \n \n\n
\n\n \n
\n
\n \n

عنوان

\n

تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.

\n

عرض التفاصيل

\n
\n
\n \n

عنوان آخر

\n

إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.

\n

عرض التفاصيل

\n
\n
\n \n

عنوان ثالث لتأكيد المعلومة

\n

بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.

\n

عرض التفاصيل

\n
\n
\n\n\n \n\n
\n\n
\n
\n

العنوان الأول المميز. سيذهل عقلك.

\n

وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.

\n
\n
\n \n
\n
\n\n
\n\n
\n
\n

أوه نعم، هذا جيد. شاهد بنفسك.

\n

عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء \"قراءة\" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.

\n
\n
\n \n
\n
\n\n
\n\n
\n
\n

وأخيرًا، هذا. كش ملك.

\n

إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ

\n
\n
\n \n
\n
\n\n
\n\n \n\n
\n\n\n \n \n
\n" }, { "path": "site/src/assets/examples/cheatsheet/cheatsheet.css", "content": "body {\n scroll-behavior: smooth;\n}\n\n/**\n * Bootstrap \"Journal code\" icon\n * @link https://icons.getbootstrap.com/icons/journal-code/\n */\n.bd-heading a::before {\n display: inline-block;\n width: 1em;\n height: 1em;\n margin-right: .25rem;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E\");\n background-size: 1em;\n}\n\n/* stylelint-disable-next-line selector-max-universal */\n.bd-heading + div > * + * {\n margin-top: 3rem;\n}\n\n/* Table of contents */\n.bd-aside a {\n padding: .1875rem .5rem;\n margin-top: .125rem;\n margin-left: .3125rem;\n color: var(--bs-body-color);\n}\n\n.bd-aside a:hover,\n.bd-aside a:focus {\n color: var(--bs-body-color);\n background-color: rgba(121, 82, 179, .1);\n}\n\n.bd-aside .active {\n font-weight: 600;\n color: var(--bs-body-color);\n}\n\n.bd-aside .btn {\n padding: .25rem .5rem;\n font-weight: 600;\n color: var(--bs-body-color);\n}\n\n.bd-aside .btn:hover,\n.bd-aside .btn:focus {\n color: var(--bs-body-color);\n background-color: rgba(121, 82, 179, .1);\n}\n\n.bd-aside .btn:focus {\n box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);\n}\n\n.bd-aside .btn::before {\n width: 1.25em;\n line-height: 0;\n content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n transition: transform .35s ease;\n\n /* rtl:raw:\n transform: rotate(180deg) translateX(-2px);\n */\n transform-origin: .5em 50%;\n}\n\n.bd-aside .btn[aria-expanded=\"true\"]::before {\n transform: rotate(90deg)/* rtl:ignore */;\n}\n\n\n/* Examples */\n.scrollspy-example {\n height: 200px;\n}\n\n[id=\"modal\"] .bd-example .btn,\n[id=\"buttons\"] .bd-example .btn,\n[id=\"tooltips\"] .bd-example .btn,\n[id=\"popovers\"] .bd-example .btn,\n[id=\"dropdowns\"] .bd-example .btn-group,\n[id=\"dropdowns\"] .bd-example .dropdown,\n[id=\"dropdowns\"] .bd-example .dropup,\n[id=\"dropdowns\"] .bd-example .dropend,\n[id=\"dropdowns\"] .bd-example .dropstart {\n margin: 0 1rem 1rem 0;\n}\n\n/* Layout */\n@media (min-width: 1200px) {\n body {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: 1fr 4fr 1fr;\n gap: 1rem;\n }\n\n .bd-header {\n position: fixed;\n top: 0;\n /* rtl:begin:ignore */\n right: 0;\n left: 0;\n /* rtl:end:ignore */\n z-index: 1030;\n grid-column: 1 / span 3;\n }\n\n .bd-aside,\n .bd-cheatsheet {\n padding-top: 4rem;\n }\n\n /**\n * 1. Too bad only Firefox supports subgrids ATM\n */\n .bd-cheatsheet,\n .bd-cheatsheet section,\n .bd-cheatsheet article {\n display: inherit; /* 1 */\n grid-template-rows: auto;\n grid-template-columns: 1fr 4fr;\n grid-column: 1 / span 2;\n gap: inherit; /* 1 */\n }\n\n .bd-aside {\n grid-area: 1 / 3;\n scroll-margin-top: 4rem;\n }\n\n .bd-cheatsheet section,\n .bd-cheatsheet section > h2 {\n top: 2rem;\n scroll-margin-top: 2rem;\n }\n\n .bd-cheatsheet section > h2::before {\n position: absolute;\n /* rtl:begin:ignore */\n top: 0;\n right: 0;\n bottom: -2rem;\n left: 0;\n /* rtl:end:ignore */\n z-index: -1;\n content: \"\";\n }\n\n .bd-cheatsheet article,\n .bd-cheatsheet .bd-heading {\n top: 8rem;\n scroll-margin-top: 8rem;\n }\n\n .bd-cheatsheet .bd-heading {\n z-index: 1;\n }\n}\n" }, { "path": "site/src/assets/examples/cheatsheet/cheatsheet.js", "content": "/* global bootstrap: false */\n\n(() => {\n 'use strict'\n\n // Tooltip and popover demos\n document.querySelectorAll('.tooltip-demo')\n .forEach(tooltip => {\n new bootstrap.Tooltip(tooltip, {\n selector: '[data-bs-toggle=\"tooltip\"]'\n })\n })\n\n document.querySelectorAll('[data-bs-toggle=\"popover\"]')\n .forEach(popover => {\n new bootstrap.Popover(popover)\n })\n\n document.querySelectorAll('.toast')\n .forEach(toastNode => {\n const toast = new bootstrap.Toast(toastNode, {\n autohide: false\n })\n\n toast.show()\n })\n\n // Disable empty links and submit buttons\n document.querySelectorAll('[href=\"#\"], [type=\"submit\"]')\n .forEach(link => {\n link.addEventListener('click', event => {\n event.preventDefault()\n })\n })\n\n function setActiveItem() {\n const { hash } = window.location\n\n if (hash === '') {\n return\n }\n\n const link = document.querySelector(`.bd-aside a[href=\"${hash}\"]`)\n\n if (!link) {\n return\n }\n\n const active = document.querySelector('.bd-aside .active')\n const parent = link.parentNode.parentNode.previousElementSibling\n\n link.classList.add('active')\n\n if (parent.classList.contains('collapsed')) {\n parent.click()\n }\n\n if (!active) {\n return\n }\n\n const expanded = active.parentNode.parentNode.previousElementSibling\n\n active.classList.remove('active')\n\n if (expanded && parent !== expanded) {\n expanded.click()\n }\n }\n\n setActiveItem()\n window.addEventListener('hashchange', setActiveItem)\n})()\n" }, { "path": "site/src/assets/examples/cheatsheet/cheatsheet.rtl.css", "content": "body {\n scroll-behavior: smooth;\n}\n\n/**\n * Bootstrap \"Journal code\" icon\n * @link https://icons.getbootstrap.com/icons/journal-code/\n */\n.bd-heading a::before {\n display: inline-block;\n width: 1em;\n height: 1em;\n margin-left: .25rem;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E\");\n background-size: 1em;\n}\n\n/* stylelint-disable-next-line selector-max-universal */\n.bd-heading + div > * + * {\n margin-top: 3rem;\n}\n\n/* Table of contents */\n.bd-aside a {\n padding: .1875rem .5rem;\n margin-top: .125rem;\n margin-right: .3125rem;\n color: var(--bs-body-color);\n}\n\n.bd-aside a:hover,\n.bd-aside a:focus {\n color: var(--bs-body-color);\n background-color: rgba(121, 82, 179, .1);\n}\n\n.bd-aside .active {\n font-weight: 600;\n color: var(--bs-body-color);\n}\n\n.bd-aside .btn {\n padding: .25rem .5rem;\n font-weight: 600;\n color: var(--bs-body-color);\n}\n\n.bd-aside .btn:hover,\n.bd-aside .btn:focus {\n color: var(--bs-body-color);\n background-color: rgba(121, 82, 179, .1);\n}\n\n.bd-aside .btn:focus {\n box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);\n}\n\n.bd-aside .btn::before {\n width: 1.25em;\n line-height: 0;\n content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n transition: transform .35s ease;\n transform: rotate(180deg) translateX(-2px);\n transform-origin: .5em 50%;\n}\n\n.bd-aside .btn[aria-expanded=\"true\"]::before {\n transform: rotate(90deg);\n}\n\n\n/* Examples */\n.scrollspy-example {\n height: 200px;\n}\n\n[id=\"modal\"] .bd-example .btn,\n[id=\"buttons\"] .bd-example .btn,\n[id=\"tooltips\"] .bd-example .btn,\n[id=\"popovers\"] .bd-example .btn,\n[id=\"dropdowns\"] .bd-example .btn-group,\n[id=\"dropdowns\"] .bd-example .dropdown,\n[id=\"dropdowns\"] .bd-example .dropup,\n[id=\"dropdowns\"] .bd-example .dropend,\n[id=\"dropdowns\"] .bd-example .dropstart {\n margin: 0 0 1rem 1rem;\n}\n\n/* Layout */\n@media (min-width: 1200px) {\n body {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: 1fr 4fr 1fr;\n gap: 1rem;\n }\n\n .bd-header {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1030;\n grid-column: 1 / span 3;\n }\n\n .bd-aside,\n .bd-cheatsheet {\n padding-top: 4rem;\n }\n\n /**\n * 1. Too bad only Firefox supports subgrids ATM\n */\n .bd-cheatsheet,\n .bd-cheatsheet section,\n .bd-cheatsheet article {\n display: inherit; /* 1 */\n grid-template-rows: auto;\n grid-template-columns: 1fr 4fr;\n grid-column: 1 / span 2;\n gap: inherit; /* 1 */\n }\n\n .bd-aside {\n grid-area: 1 / 3;\n scroll-margin-top: 4rem;\n }\n\n .bd-cheatsheet section,\n .bd-cheatsheet section > h2 {\n top: 2rem;\n scroll-margin-top: 2rem;\n }\n\n .bd-cheatsheet section > h2::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: -2rem;\n left: 0;\n z-index: -1;\n content: \"\";\n }\n\n .bd-cheatsheet article,\n .bd-cheatsheet .bd-heading {\n top: 8rem;\n scroll-margin-top: 8rem;\n }\n\n .bd-cheatsheet .bd-heading {\n z-index: 1;\n }\n}\n" }, { "path": "site/src/assets/examples/cheatsheet/index.astro", "content": "---\nimport { getData } from '@libs/data'\nimport { getVersionedDocsPath } from '@libs/path'\nimport Example from '@shortcodes/Example.astro'\nimport Placeholder from '@shortcodes/Placeholder.astro'\n\nexport const title = 'Cheatsheet'\nexport const extra_css = ['cheatsheet.css']\nexport const extra_js = [{ src: 'cheatsheet.js' }]\nexport const body_class = 'bg-body-tertiary'\n---\n\n
\n
\n

\n \"Bootstrap\"\n Cheatsheet\n

\n RTL cheatsheet\n
\n
\n\n
\n
\n

Contents

\n\n
\n
\n

Typography

\n Documentation\n
\n\n
\n Display 1

\n

Display 2

\n

Display 3

\n

Display 4

\n

Display 5

\n

Display 6

`} />\n\n Heading 1

\n

Heading 2

\n

Heading 3

\n

Heading 4

\n

Heading 5

\n

Heading 6

`} />\n\n \n This is a lead paragraph. It stands out from regular paragraphs.\n

`} />\n\n You can use the mark tag to highlight text.

\n

This line of text is meant to be treated as deleted text.

\n

This line of text is meant to be treated as no longer accurate.

\n

This line of text is meant to be treated as an addition to the document.

\n

This line of text will render as underlined.

\n

This line of text is meant to be treated as fine print.

\n

This line rendered as bold text.

\n

This line rendered as italicized text.

`} />\n\n `} />\n\n \n

A well-known quote, contained in a blockquote element.

\n
Someone famous in Source Title
\n `} />\n\n \n
  • This is a list.
    • \n
  • It appears completely unstyled.
    • \n
  • Structurally, it's still a list.
    • \n
  • However, this style only applies to immediate child elements.
    • \n
  • Nested lists:\n
      \n
    • are unaffected by this style
      • \n
    • will still show a bullet
      • \n
    • and have appropriate left margin
      • \n
    \n
    • \n
  • This may still come in handy in some situations.
    • \n `} />\n\n \n
  • This is a list item.
    • \n
  • And another one.
    • \n
  • But they're displayed inline.
    • \n `} />\n
    \n
    \n \n
    \n
    \n

    Tables

    \n Documentation\n
    \n
    \n \n \n \n #\n First\n Last\n Handle\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n `} />\n\n \n \n \n #\n First\n Last\n Handle\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n `} />\n\n \n \n \n Class\n Heading\n Heading\n \n \n \n \n Default\n Cell\n Cell\n `,\n ...getData('theme-colors').map((themeColor) => `\n ${themeColor.title}\n Cell\n Cell\n `),\n `\n `]} />\n\n \n \n \n #\n First\n Last\n Handle\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n `} />\n
    \n
    \n\n
    \n
    \n

    Figures

    \n Documentation\n
    \n\n
    \n \n \n
    A caption for the above image.
    \n `} />\n
    \n
    \n
    \n\n
    \n

    Forms

    \n\n
    \n
    \n

    Overview

    \n Documentation\n
    \n\n
    \n \n
    \n \n \n
    We'll never share your email with anyone else.
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n Radios buttons\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n `} />\n
    \n
    \n
    \n
    \n

    Disabled forms

    \n Documentation\n
    \n\n
    \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n Disabled radios buttons\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n
    \n `} />\n
    \n
    \n
    \n
    \n

    Sizing

    \n Documentation\n
    \n\n
    \n \n \n
    \n
    \n \n
    \n
    \n \n
    `} />\n\n \n \n \n
    \n \n
    \n
    \n \n
    \n `} />\n \n
    \n
    \n
    \n

    Input group

    \n Documentation\n
    \n\n
    \n \n @\n \n
    \n
    \n \n @example.com\n
    \n \n
    \n https://example.com/users/\n \n
    \n
    \n $\n \n .00\n
    \n
    \n With textarea\n \n
    \n `} />\n \n
    \n
    \n
    \n

    Floating labels

    \n Documentation\n
    \n\n
    \n \n
    \n \n \n
    \n
    \n \n \n
    \n \n `} />\n
    \n
    \n
    \n
    \n

    Validation

    \n Documentation\n
    \n\n
    \n \n
    \n \n \n
    \n Looks good!\n
    \n
    \n
    \n \n \n
    \n Looks good!\n
    \n
    \n
    \n \n
    \n @\n \n
    \n Please choose a username.\n
    \n
    \n
    \n
    \n \n \n
    \n Please provide a valid city.\n
    \n
    \n
    \n \n \n
    \n Please select a valid state.\n
    \n
    \n
    \n \n \n
    \n Please provide a valid zip.\n
    \n
    \n
    \n
    \n \n \n
    \n You must agree before submitting.\n
    \n
    \n
    \n
    \n \n
    \n \n `} />\n
    \n
    \n
    \n\n
    \n

    Components

    \n\n
    \n
    \n

    Accordion

    \n Documentation\n
    \n\n
    \n \n
    \n

    \n \n

    \n
    \n
    \n This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    Alerts

    \n Documentation\n
    \n\n
    \n `\n
    \n A simple ${themeColor.name} alert with an example link. Give it a click if you like.\n \n
    \n `)} />\n\n \n

    Well done!

    \n

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    \n
    \n

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    \n
    \n `} />\n \n
    \n
    \n
    \n

    Badge

    \n Documentation\n
    \n\n
    \n Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n `} />\n\n `\n ${themeColor.title}\n `)} />\n
    \n
    \n \n
    \n
    \n

    Buttons

    \n Documentation\n
    \n
    \n `\n \n `),\n ``]} />\n\n `\n \n `)} />\n\n Small button\n \n \n `} />\n
    \n
    \n
    \n
    \n

    Button group

    \n Documentation\n
    \n\n
    \n \n
    \n \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    Card

    \n Documentation\n
    \n\n
    \n \n
    \n
    \n \n
    \n
    Card title
    \n

    Some quick example text to build on the card title and make up the bulk of the card's content.

    \n Go somewhere\n
    \n
    \n
    \n
    \n
    \n
    \n Featured\n
    \n
    \n
    Card title
    \n

    Some quick example text to build on the card title and make up the bulk of the card's content.

    \n Go somewhere\n
    \n
    \n 2 days ago\n
    \n
    \n
    \n
    \n
    \n
    \n
    Card title
    \n

    Some quick example text to build on the card title and make up the bulk of the card's content.

    \n
    \n
      \n
    • An item
      • \n
    • A second item
      • \n
    • A third item
      • \n
    \n
    \n Card link\n Another link\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    Card title
    \n

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    \n

    Last updated 3 mins ago

    \n
    \n
    \n
    \n
    \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    Carousel

    \n Documentation\n
    \n\n
    \n \n
    \n \n \n \n
    \n
    \n
    \n \n
    \n
    First slide label
    \n

    Some representative placeholder content for the first slide.

    \n
    \n
    \n
    \n \n
    \n
    Second slide label
    \n

    Some representative placeholder content for the second slide.

    \n
    \n
    \n
    \n \n
    \n
    Third slide label
    \n

    Some representative placeholder content for the third slide.

    \n
    \n
    \n
    \n \n \n
    \n `} />\n \n
    \n
    \n
    \n

    Dropdowns

    \n Documentation\n
    \n
    \n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n `} />\n\n \n \n \n \n \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n `} />\n\n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n `} />\n\n \n
    \n \n \n
    \n \n `} />\n \n
    \n \n
    \n
    \n

    Modal

    \n Documentation\n
    \n\n
    \n \n \n \n \n \n
    \n `} />\n \n
    \n
    \n
    \n

    Navs

    \n Documentation\n
    \n\n
    \n \n Active\n Link\n Link\n Disabled\n \n `} />\n\n \n
    \n \n \n \n
    \n \n
    \n
    \n

    This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

    \n
    \n
    \n

    This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

    \n
    \n
    \n

    This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

    \n
    \n
    \n `} />\n\n \n
  • \n Active\n
    • \n
  • \n Link\n
    • \n
  • \n Link\n
    • \n
  • \n Disabled\n
    • \n \n `} />\n
    \n
    \n \n \n
    \n
    \n

    Popovers

    \n Documentation\n
    \n\n
    \n Click to toggle popover\n `} />\n\n \n Popover on top\n \n \n \n \n `} />\n
    \n
    \n
    \n
    \n

    Progress

    \n Documentation\n
    \n\n
    \n \n
    0%
    \n
    \n
    \n
    25%
    \n
    \n
    \n
    50%
    \n
    \n
    \n
    75%
    \n
    \n
    \n
    100%
    \n
    \n `} />\n\n \n
    \n
    \n
    \n
    \n
    \n
    \n \n `} />\n \n
    \n
    \n
    \n

    Scrollspy

    \n Documentation\n
    \n\n
    \n \n Navbar\n \n \n
    \n

    First heading

    \n

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    \n

    Second heading

    \n

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    \n

    Third heading

    \n

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    \n

    Fourth heading

    \n

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    \n

    Fifth heading

    \n

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    \n
    \n `} />\n
    \n
    \n
    \n
    \n

    Spinners

    \n Documentation\n
    \n\n
    \n `\n \n `)} />\n\n `\n \n `)} />\n
    \n
    \n
    \n
    \n

    Toasts

    \n Documentation\n
    \n\n
    \n \n
    \n \n Bootstrap\n 11 mins ago\n \n
    \n
    \n Hello, world! This is a toast message.\n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    Tooltips

    \n Documentation\n
    \n\n
    \n Tooltip on top\n \n \n \n \n `} />\n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n
    \n

    Modal title

    \n \n
    \n
    \n ...\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Modal title

    \n \n
    \n
    \n

    I will not close if you click outside me. Don't even try to press escape key.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Modal title

    \n \n
    \n
    \n

    This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

    \n







































    \n

    This content should appear at the bottom after you scroll.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Full screen modal

    \n \n
    \n
    \n ...\n
    \n
    \n \n
    \n
    \n
    \n
    \n\n" }, { "path": "site/src/assets/examples/cheatsheet-rtl/index.astro", "content": "---\nimport { getData } from '@libs/data'\nimport { getVersionedDocsPath } from '@libs/path'\nimport Example from '@shortcodes/Example.astro'\n\nexport const title = 'ورقة الغش'\nexport const extra_css = ['../cheatsheet/cheatsheet.rtl.css']\nexport const extra_js = [{src: '../cheatsheet/cheatsheet.js'}]\nexport const body_class = 'bg-body-tertiary'\nexport const direction = 'rtl'\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n
    \n
    \n

    \n \"Bootstrap\"\n ورقة الغش\n

    \n جدول بيانات LTR\n
    \n
    \n\n
    \n
    \n

    المحتوى

    \n\n
    \n
    \n

    النصوص

    \n دليل الإستخدام\n
    \n\n
    \n العرض 1

    \n

    العرض 2

    \n

    العرض 3

    \n

    العرض 4

    \n

    العرض 5

    \n

    العرض 6

    \n `} />\n\n عنوان 1

    \n

    عنوان 2

    \n

    عنوان 3

    \n

    عنوان 4

    \n

    عنوان 5

    \n

    عنوان 6

    \n `} />\n\n \n هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.\n

    \n `} />\n\n يمكنك استخدام تصنيف mark لتحديد نص.

    \n

    من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.

    \n

    من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.

    \n

    من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.

    \n

    سيتم عرض النص في هذا السطر كما وتحته خط.

    \n

    من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.

    \n

    هذا السطر يحوي نص عريض.

    \n

    هذا السطر يحوي نص مائل.

    \n `} />\n\n \n `} />\n\n \n

    إقتباس مبهر، موضوع في عنصر blockquote

    \n
    شخص مشهور في عنوان المصدر
    \n \n `} />\n\n \n
  • هذه قائمة عناصر.
    • \n
  • بالرغم من أنها مصممة كي لا تظهر كذلك.
    • \n
  • إلا أنها مجهزة كـ قائمة خلف الكواليس
    • \n
  • هذا التصميم ينطبق فقد على القائمة الرئيسية
    • \n
  • القوائم الفرعية\n
      \n
    • لا تتأثر بهذا التصميم
      • \n
    • فهي تظهر عليها علامات الترقيم
      • \n
    • وتحتوي على مساحة فارغة بجوارها
      • \n
    \n
    • \n
  • قد يكون هذا التصميم مفيدًا في بعض الأحيان.
    • \n \n `} />\n\n \n
  • هذا عنصر في قائمة.
    • \n
  • وهذا أيضًا.
    • \n
  • لكنهم يظهرون متجاورين.
    • \n \n `} />\n
    \n
    \n \n
    \n
    \n

    الجداول

    \n دليل الإستخدام\n
    \n\n
    \n \n \n \n #\n الاسم الاول\n الكنية\n الاسم المستعار\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n \n `} />\n\n \n \n \n #\n الاسم الاول\n الكنية\n الاسم المستعار\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n \n `} />\n\n \n \n \n Class\n عنوان\n عنوان\n \n \n \n \n Default\n خلية\n خلية\n `,\n ...getData('theme-colors').map((themeColor) => `\n ${themeColor.title}\n خلية\n خلية\n `),\n `\n \n `]} />\n\n \n \n \n #\n الاسم الاول\n الكنية\n الاسم المستعار\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n \n `} />\n
    \n
    \n \n
    \n\n
    \n

    النماذج

    \n\n
    \n
    \n

    نظرة عامة

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n
    لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n أزرار الاختيار الأحادي\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n \n `} />\n
    \n
    \n
    \n
    \n

    الحقول المعطلة

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n أزرار اختيار أحادي معطلين\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n
    \n \n `} />\n
    \n
    \n
    \n
    \n

    الأحجام

    \n دليل الإستخدام\n
    \n\n
    \n \n \n
    \n
    \n \n
    \n
    \n \n
    \n `} />\n\n \n \n \n
    \n \n
    \n
    \n \n
    \n `} />\n \n
    \n
    \n
    \n

    مجموعة الإدخال

    \n دليل الإستخدام\n
    \n\n
    \n \n أنا اسمي\n \n
    \n
    \n \n وغيرها\n
    \n \n
    \n \n https://example.com/users/\n
    \n
    \n .00\n \n $\n
    \n
    \n مع textarea\n \n
    \n `} />\n \n
    \n
    \n
    \n

    الحقول ذوي العناوين العائمة

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n
    \n
    \n \n \n
    \n \n `} />\n
    \n
    \n
    \n
    \n

    التحقق

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n
    \n يبدو صحيحًا!\n
    \n
    \n
    \n \n \n
    \n يبدو صحيحًا!\n
    \n
    \n
    \n \n
    \n \n @\n
    \n يرجى اختيار اسم مستخدم.\n
    \n
    \n
    \n
    \n \n \n
    \n يرجى إدخال مدينة صحيحة.\n
    \n
    \n
    \n \n \n
    \n يرجى اختيار ولاية صحيحة.\n
    \n
    \n
    \n \n \n
    \n يرجى إدخال رمز بريدي صحيح.\n
    \n
    \n
    \n
    \n \n \n
    \n تجب الموافقة قبل إرسال النموذج.\n
    \n
    \n
    \n
    \n \n
    \n \n `} />\n
    \n
    \n
    \n\n
    \n

    العناصر

    \n\n
    \n
    \n

    المطوية

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n

    \n \n

    \n
    \n
    \n هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.\n
    \n
    \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    الإنذارات

    \n دليل الإستخدام\n
    \n\n
    \n `\n
    \n تنبيه ${themeColor.name} بسيط مع رابط مثال. أعطها نقرة إذا أردت.\n \n
    \n `)} />\n\n \n

    أحسنت!

    \n

    لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.

    \n
    \n

    كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.

    \n
    \n `} />\n \n
    \n
    \n
    \n

    الشارة

    \n دليل الإستخدام\n
    \n\n
    \n مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n

    مثال على عنوان جديد

    \n `} />\n\n `\n ${themeColor.title}\n `)} />\n
    \n
    \n \n
    \n
    \n

    الأزرار

    \n دليل الإستخدام\n
    \n\n
    \n `\n \n `),\n ``]} />\n\n `\n \n `)} />\n\n زر صغير\n \n \n `} />\n
    \n
    \n
    \n
    \n

    مجموعة الأزرار

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    البطاقة

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n
    \n \n
    \n
    عنوان البطاقة
    \n

    بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    \n اذهب لمكان ما\n
    \n
    \n
    \n
    \n
    \n
    \n متميز\n
    \n
    \n
    عنوان البطاقة
    \n

    بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    \n اذهب لمكان ما\n
    \n
    \n منذ يومان\n
    \n
    \n
    \n
    \n
    \n
    \n
    عنوان البطاقة
    \n

    بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    \n
    \n
      \n
    • عنصر
      • \n
    • عنصر آخر
      • \n
    • عنصر ثالث
      • \n
    \n
    \n رابط البطاقة\n رابط آخر\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    عنوان البطاقة
    \n

    هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    \n

    آخر تحديث منذ 3 دقائق

    \n
    \n
    \n
    \n
    \n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    شرائح العرض

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n \n
    \n
    \n
    \n \n
    \n
    عنوان الشريحة الأولى
    \n

    محتوى وصفي يعبئ فراغ الشريحة الأولى.

    \n
    \n
    \n
    \n \n
    \n
    عنوان الشريحة الثانية
    \n

    محتوى وصفي يعبئ فراغ الشريحة الأولى.

    \n
    \n
    \n
    \n \n
    \n
    عنوان الشريحة الثالثة
    \n

    محتوى وصفي يعبئ فراغ الشريحة الأولى.

    \n
    \n
    \n
    \n \n \n
    \n `} />\n \n
    \n
    \n
    \n

    القوائم المنسدلة

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n `} />\n\n \n \n \n \n \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n `} />\n\n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n `} />\n\n \n
    \n \n \n
    \n \n `} />\n \n
    \n
    \n
    \n

    مجموعة العناصر

    \n دليل الإستخدام\n
    \n\n
    \n \n
  • عنصر معطل
    • \n
  • عنصر ثاني
    • \n
  • عنصر ثالث
    • \n
  • عنصر رابع
    • \n
  • وعنصر خامس أيضًا
    • \n \n `} />\n\n \n
  • عنصر
    • \n
  • عنصر ثاني
    • \n
  • عنصر ثالث
    • \n
  • عنصر رابع
    • \n
  • وعنصر خامس أيضًا
    • \n \n `} />\n\n \n عنصر مجموعة قائمة default بسيط`,\n ...getData('theme-colors').map((themeColor) => `\n عنصر مجموعة قائمة ${themeColor.name} بسيط\n `),\n `
    \n `]} />\n \n
    \n
    \n
    \n

    الصندوق العائم

    \n دليل الإستخدام\n
    \n\n
    \n \n \n \n \n \n
    \n `} />\n \n
    \n
    \n
    \n

    التنقل

    \n دليل الإستخدام\n
    \n\n
    \n \n نشط\n رابط\n رابط\n معطل\n \n `} />\n\n \n
    \n \n \n \n
    \n \n
    \n
    \n

    محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.

    \n
    \n
    \n

    محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.

    \n
    \n
    \n

    محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.

    \n
    \n
    \n `} />\n\n \n
  • \n نشط\n
    • \n
  • \n رابط\n
    • \n
  • \n رابط\n
    • \n
  • \n معطل\n
    • \n \n `} />\n
    \n
    \n
    \n
    \n

    شريط التنقل

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n \"Bootstrap\"\n \n \n
    \n \n
    \n \n \n
    \n
    \n
    \n \n\n \n `} />\n
    \n
    \n \n
    \n
    \n

    الصناديق المنبثقة

    \n دليل الإستخدام\n
    \n\n
    \n \n انقر لعرض/إخفاء الصندوق المنبثق\n \n `} />\n\n \n انبثاق إلى الأعلى\n \n \n \n \n `} />\n
    \n
    \n
    \n
    \n

    شريط التقدم

    \n دليل الإستخدام\n
    \n\n
    \n \n
    0%
    \n
    \n
    \n
    25%
    \n
    \n
    \n
    50%
    \n
    \n
    \n
    75%
    \n
    \n
    \n
    100%
    \n
    \n `} />\n\n \n
    \n
    \n
    \n
    \n
    \n
    \n \n `} />\n \n
    \n
    \n
    \n

    المخطوطة

    \n دليل الإستخدام\n
    \n\n
    \n \n شريط التنقل\n \n \n
    \n

    @fat

    \n

    محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

    \n

    @mdo

    \n

    بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

    \n

    واحد

    \n

    وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

    \n

    اثنان

    \n

    مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

    \n

    ثلاثة

    \n

    وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

    \n

    ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

    \n
    \n `} />\n
    \n
    \n
    \n
    \n

    الدوائر المتحركة

    \n دليل الإستخدام\n
    \n\n
    \n `\n \n `)} />\n\n `\n \n `)} />\n
    \n
    \n
    \n
    \n

    الإشعارات

    \n دليل الإستخدام\n
    \n\n
    \n \n
    \n \n Bootstrap\n قبل 11 دقيقة\n \n
    \n
    \n مرحبًا بالعالم! هذه رسالة إشعار.\n
    \n
    \n `} />\n \n
    \n
    \n
    \n

    التلميحات

    \n دليل الإستخدام\n
    \n\n
    \n تلميح يظهر في الأعلى\n \n \n \n \n `} />\n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n
    \n

    عنوان الصندوق العائم

    \n \n
    \n
    \n ...\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    عنوان الصندوق العائم

    \n \n
    \n
    \n

    لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    عنوان الصندوق العائم

    \n \n
    \n
    \n

    نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير

    \n

    في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.

    \n

    يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.

    \n

    وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته \"ديلي ميل\" البريطانية.

    \n

    وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.

    \n

    وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.

    \n

    كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    صندوق عائم يملأ الشاشة

    \n \n
    \n
    \n

    في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.

    \n

    تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين\"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.

    \n

    التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى \"إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات\".

    \n

    وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها \"كليّة ت. هـ. تشان\" للصحة العامة في جامعة هارفرد، نشرتها \"بلوس ميديسين\" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.

    \n

    يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب \"المركز السعودي لكفاءة الطاقة\". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان \"مستقبل التبريد\"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.

    \n

    ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة \"نيويورك تايمز\"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.

    \n

    ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.

    \n

    وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.

    \n

    وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.

    \n
    \n
    \n \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/checkout/checkout.css", "content": ".container {\n max-width: 960px;\n}\n" }, { "path": "site/src/assets/examples/checkout/checkout.js", "content": "// Example starter JavaScript for disabling form submissions if there are invalid fields\n(() => {\n 'use strict'\n\n // Fetch all the forms we want to apply custom Bootstrap validation styles to\n const forms = document.querySelectorAll('.needs-validation')\n\n // Loop over them and prevent submission\n Array.from(forms).forEach(form => {\n form.addEventListener('submit', event => {\n if (!form.checkValidity()) {\n event.preventDefault()\n event.stopPropagation()\n }\n\n form.classList.add('was-validated')\n }, false)\n })\n})()\n" }, { "path": "site/src/assets/examples/checkout/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Checkout example'\nexport const extra_css = ['checkout.css']\nexport const extra_js = [{ src: 'checkout.js' }]\nexport const body_class = 'bg-body-tertiary'\n---\n\n
    \n
    \n
    \n \"\"\n

    Checkout form

    \n

    Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

    \n
    \n\n
    \n
    \n

    \n Your cart\n 3\n

    \n
      \n
    • \n
      \n
      Product name
      \n Brief description\n
      \n $12\n
      • \n
    • \n
      \n
      Second product
      \n Brief description\n
      \n $8\n
      • \n
    • \n
      \n
      Third item
      \n Brief description\n
      \n $5\n
      • \n
    • \n
      \n
      Promo code
      \n EXAMPLECODE\n
      \n −$5\n
      • \n
    • \n Total (USD)\n $20\n
      • \n
    \n\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n

    Billing address

    \n
    \n
    \n
    \n \n \n
    \n Valid first name is required.\n
    \n
    \n\n
    \n \n \n
    \n Valid last name is required.\n
    \n
    \n\n
    \n \n
    \n @\n \n
    \n Your username is required.\n
    \n
    \n
    \n\n
    \n \n \n
    \n Please enter a valid email address for shipping updates.\n
    \n
    \n\n
    \n \n \n
    \n Please enter your shipping address.\n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n Please select a valid country.\n
    \n
    \n\n
    \n \n \n
    \n Please provide a valid state.\n
    \n
    \n\n
    \n \n \n
    \n Zip code required.\n
    \n
    \n
    \n\n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n\n

    Payment

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n
    \n \n \n Full name as displayed on card\n
    \n Name on card is required\n
    \n
    \n\n
    \n \n \n
    \n Credit card number is required\n
    \n
    \n\n
    \n \n \n
    \n Expiration date required\n
    \n
    \n\n
    \n \n \n
    \n Security code required\n
    \n
    \n
    \n\n
    \n\n \n
    \n
    \n
    \n
    \n\n \n
    \n" }, { "path": "site/src/assets/examples/checkout-rtl/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'مثال إتمام الشراء'\nexport const direction = 'rtl'\nexport const extra_css = ['../checkout/checkout.css']\nexport const extra_js = [{ src: '../checkout/checkout.js' }]\nexport const body_class = 'bg-body-tertiary'\n---\n\n
    \n
    \n
    \n \"\"\n

    نموذج إتمام الشراء

    \n

    فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.

    \n
    \n\n
    \n
    \n

    \n عربة التسوق\n 3\n

    \n
      \n
    • \n
      \n
      اسم المنتج
      \n وصف مختصر\n
      \n $12\n
      • \n
    • \n
      \n
      المنتج الثاني
      \n وصف مختصر\n
      \n $8\n
      • \n
    • \n
      \n
      البند الثالث
      \n وصف مختصر\n
      \n $5\n
      • \n
    • \n
      \n
      رمز ترويجي
      \n EXAMPLECODE\n
      \n -$5\n
      • \n
    • \n مجموع (USD)\n $20\n
      • \n
    \n\n
    \n
    \n \n \n
    \n
    \n
    \n
    \n

    عنوان الفوترة

    \n
    \n
    \n
    \n \n \n
    \n يرجى إدخال اسم أول صحيح.\n
    \n
    \n\n
    \n \n \n
    \n يرجى إدخال اسم عائلة صحيح.\n
    \n
    \n\n
    \n \n
    \n @\n \n
    \n اسم المستخدم الخاص بك مطلوب.\n
    \n
    \n
    \n\n
    \n \n \n
    \n يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.\n
    \n
    \n\n
    \n \n \n
    \n يرجى إدخال عنوان الشحن الخاص بك.\n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n يرجى اختيار بلد صحيح.\n
    \n
    \n\n
    \n \n \n
    \n يرجى اختيار اسم منطقة صحيح.\n
    \n
    \n\n
    \n \n \n
    \n الرمز البريدي مطلوب.\n
    \n
    \n
    \n\n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n\n

    طريقة الدفع

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n
    \n \n \n الاسم الكامل كما هو معروض على البطاقة\n
    \n الاسم على البطاقة مطلوب\n
    \n
    \n\n
    \n \n \n
    \n رقم بطاقة الائتمان مطلوب\n
    \n
    \n\n
    \n \n \n
    \n تاريخ انتهاء الصلاحية مطلوب\n
    \n
    \n\n
    \n \n \n
    \n رمز الحماية مطلوب\n
    \n
    \n
    \n\n
    \n\n \n
    \n
    \n
    \n
    \n \n
    \n" }, { "path": "site/src/assets/examples/cover/cover.css", "content": "/*\n * Globals\n */\n\n\n/* Custom default button */\n.btn-light,\n.btn-light:hover,\n.btn-light:focus {\n color: #333;\n text-shadow: none; /* Prevent inheritance from `body` */\n}\n\n\n/*\n * Base structure\n */\n\nbody {\n text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);\n box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);\n}\n\n.cover-container {\n max-width: 42em;\n}\n\n\n/*\n * Header\n */\n\n.nav-masthead .nav-link {\n color: rgba(255, 255, 255, .5);\n border-bottom: .25rem solid transparent;\n}\n\n.nav-masthead .nav-link:hover,\n.nav-masthead .nav-link:focus {\n border-bottom-color: rgba(255, 255, 255, .25);\n}\n\n.nav-masthead .nav-link + .nav-link {\n margin-left: 1rem;\n}\n\n.nav-masthead .active {\n color: #fff;\n border-bottom-color: #fff;\n}\n" }, { "path": "site/src/assets/examples/cover/index.astro", "content": "---\nexport const title = 'Cover Template'\nexport const extra_css = ['cover.css']\nexport const html_class = 'h-100'\nexport const body_class = 'd-flex h-100 text-center text-bg-dark'\n---\n\n
    \n
    \n
    \n

    Cover

    \n \n
    \n
    \n\n
    \n

    Cover your page.

    \n

    Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

    \n

    \n Learn more\n

    \n
    \n\n \n
    \n" }, { "path": "site/src/assets/examples/dashboard/dashboard.css", "content": ".bi {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n}\n\n/*\n * Sidebar\n */\n\n@media (min-width: 768px) {\n .sidebar .offcanvas-lg {\n position: -webkit-sticky;\n position: sticky;\n top: 48px;\n }\n .navbar-search {\n display: block;\n }\n}\n\n.sidebar .nav-link {\n font-size: .875rem;\n font-weight: 500;\n}\n\n.sidebar .nav-link.active {\n color: #2470dc;\n}\n\n.sidebar-heading {\n font-size: .75rem;\n}\n\n/*\n * Navbar\n */\n\n.navbar-brand {\n padding-top: .75rem;\n padding-bottom: .75rem;\n background-color: rgba(0, 0, 0, .25);\n box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);\n}\n\n.navbar .form-control {\n padding: .75rem 1rem;\n}\n" }, { "path": "site/src/assets/examples/dashboard/dashboard.js", "content": "/* globals Chart:false */\n\n(() => {\n 'use strict'\n\n // Graphs\n const ctx = document.getElementById('myChart')\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: [\n 'Sunday',\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday'\n ],\n datasets: [{\n data: [\n 15339,\n 21345,\n 18483,\n 24003,\n 23489,\n 24092,\n 12034\n ],\n lineTension: 0,\n backgroundColor: 'transparent',\n borderColor: '#007bff',\n borderWidth: 4,\n pointBackgroundColor: '#007bff'\n }]\n },\n options: {\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n boxPadding: 3\n }\n }\n }\n })\n})()\n" }, { "path": "site/src/assets/examples/dashboard/dashboard.rtl.css", "content": ".bi {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n}\n\n/*\n * Sidebar\n */\n\n@media (min-width: 768px) {\n .sidebar .offcanvas-lg {\n position: -webkit-sticky;\n position: sticky;\n top: 48px;\n }\n .navbar-search {\n display: block;\n }\n}\n\n.sidebar .nav-link {\n font-size: .875rem;\n font-weight: 500;\n}\n\n.sidebar .nav-link.active {\n color: #2470dc;\n}\n\n.sidebar-heading {\n font-size: .75rem;\n}\n\n/*\n * Navbar\n */\n\n.navbar-brand {\n padding-top: .75rem;\n padding-bottom: .75rem;\n background-color: rgba(0, 0, 0, .25);\n box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);\n}\n\n.navbar .form-control {\n padding: .75rem 1rem;\n}\n" }, { "path": "site/src/assets/examples/dashboard/index.astro", "content": "---\nexport const title = 'Dashboard Template'\nexport const extra_css = ['dashboard.css']\nexport const extra_js = [\n { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},\n { src: 'dashboard.js'}\n]\n---\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
    \n Company name\n\n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n\n \n
    \n\n
    \n
    \n
    \n
    \n
    \n
    Company name
    \n \n
    \n
    \n \n\n
    \n Saved reports\n \n \n \n
    \n \n\n
    \n\n \n
    \n
    \n
    \n\n
    \n
    \n

    Dashboard

    \n
    \n
    \n \n \n
    \n \n
    \n
    \n\n \n\n

    Section title

    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    #HeaderHeaderHeaderHeader
    1,001randomdataplaceholdertext
    1,002placeholderirrelevantvisuallayout
    1,003datarichdashboardtabular
    1,003informationplaceholderillustrativedata
    1,004textrandomlayoutdashboard
    1,005dashboardirrelevanttextplaceholder
    1,006dashboardillustrativerichdata
    1,007placeholdertabularinformationirrelevant
    1,008randomdataplaceholdertext
    1,009placeholderirrelevantvisuallayout
    1,010datarichdashboardtabular
    1,011informationplaceholderillustrativedata
    1,012textplaceholderlayoutdashboard
    1,013dashboardirrelevanttextvisual
    1,014dashboardillustrativerichdata
    1,015randomtabularinformationtext
    \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/dashboard-rtl/dashboard.js", "content": "/* globals Chart:false */\n\n(() => {\n 'use strict'\n\n // Graphs\n const ctx = document.getElementById('myChart')\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: [\n 'الأحد',\n 'الإثنين',\n 'الثلاثاء',\n 'الأربعاء',\n 'الخميس',\n 'الجمعة',\n 'السبت'\n ],\n datasets: [{\n data: [\n 15339,\n 21345,\n 18483,\n 24003,\n 23489,\n 24092,\n 12034\n ],\n lineTension: 0,\n backgroundColor: 'transparent',\n borderColor: '#007bff',\n borderWidth: 4,\n pointBackgroundColor: '#007bff'\n }]\n },\n options: {\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n boxPadding: 3\n }\n }\n }\n })\n})()\n" }, { "path": "site/src/assets/examples/dashboard-rtl/index.astro", "content": "---\nexport const title = 'قالب لوحة القيادة'\nexport const direction = 'rtl'\nexport const extra_css = ['../dashboard/dashboard.rtl.css']\nexport const extra_js = [\n { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},\n { src: 'dashboard.js'}\n]\n---\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
    \n اسم الشركة\n\n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n\n \n
    \n\n
    \n
    \n
    \n \n
    \n\n
    \n
    \n

    لوحة القيادة

    \n
    \n
    \n \n \n
    \n \n
    \n
    \n\n \n\n

    عنوان القسم

    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    #عنوانعنوانعنوانعنوان
    1,001بياناتعشوائيةتثريالجدول
    1,002تثريمبهةتصميمتنسيق
    1,003عشوائيةغنيةقيمةمفيدة
    1,003معلوماتتثريتوضيحيةعشوائية
    1,004الجدولبياناتتنسيققيمة
    1,005قيمةمبهةالجدولتثري
    1,006قيمةتوضيحيةغنيةعشوائية
    1,007تثريمفيدةمعلوماتمبهة
    1,008بياناتعشوائيةتثريالجدول
    1,009تثريمبهةتصميمتنسيق
    1,010عشوائيةغنيةقيمةمفيدة
    1,011معلوماتتثريتوضيحيةعشوائية
    1,012الجدولتثريتنسيققيمة
    1,013قيمةمبهةالجدولتصميم
    1,014قيمةتوضيحيةغنيةعشوائية
    1,015بياناتمفيدةمعلوماتالجدول
    \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/dropdowns/dropdowns.css", "content": ".dropdown-item-danger {\n color: var(--bs-red);\n}\n.dropdown-item-danger:hover,\n.dropdown-item-danger:focus {\n color: #fff;\n background-color: var(--bs-red);\n}\n.dropdown-item-danger.active {\n background-color: var(--bs-red);\n}\n\n.btn-hover-light {\n color: var(--bs-body-color);\n background-color: var(--bs-body-bg);\n}\n.btn-hover-light:hover,\n.btn-hover-light:focus {\n color: var(--bs-link-hover-color);\n background-color: var(--bs-tertiary-bg);\n}\n\n.cal-month,\n.cal-days,\n.cal-weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n align-items: center;\n}\n.cal-month-name {\n grid-column-start: 2;\n grid-column-end: 7;\n text-align: center;\n}\n.cal-weekday,\n.cal-btn {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n height: 3rem;\n padding: 0;\n}\n.cal-btn:not([disabled]) {\n font-weight: 500;\n color: var(--bs-emphasis-color);\n}\n.cal-btn:hover,\n.cal-btn:focus {\n background-color: var(--bs-secondary-bg);\n}\n.cal-btn[disabled] {\n border: 0;\n opacity: .5;\n}\n\n.w-220px {\n width: 220px;\n}\n\n.w-280px {\n width: 280px;\n}\n\n.w-340px {\n width: 340px;\n}\n\n.opacity-10 {\n opacity: .1;\n}\n" }, { "path": "site/src/assets/examples/dropdowns/index.astro", "content": "---\nexport const title = 'Dropdowns'\nexport const extra_css = ['dropdowns.css']\n---\n\n\n \n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n\n
    \n \n \n
    \n\n
    \n\n
    \n
    \n
    \n \n
    \n \n
    \n\n
    \n
    \n \n
    \n \n
    \n
    \n\n
    \n\n
    \n \n \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n
    \n \n June\n \n \n
    \n
    \n
    Sun
    \n
    Mon
    \n
    Tue
    \n
    Wed
    \n
    Thu
    \n
    Fri
    \n
    Sat
    \n
    \n
    \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n
    \n \n June\n \n \n
    \n
    \n
    Sun
    \n
    Mon
    \n
    Tue
    \n
    Wed
    \n
    Thu
    \n
    Fri
    \n
    Sat
    \n
    \n
    \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
    \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n \n
     
    \n
    \n
    \n \n
    \n
    \n\n
    \n \n
     
    \n
    \n
    \n \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/features/features.css", "content": ".feature-icon {\n width: 4rem;\n height: 4rem;\n border-radius: .75rem;\n}\n\n.icon-square {\n width: 3rem;\n height: 3rem;\n border-radius: .75rem;\n}\n\n.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }\n.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }\n.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }\n\n.card-cover {\n background-repeat: no-repeat;\n background-position: center center;\n background-size: cover;\n}\n\n.feature-icon-small {\n width: 3rem;\n height: 3rem;\n}\n" }, { "path": "site/src/assets/examples/features/index.astro", "content": "---\nexport const title = 'Features'\nexport const extra_css = ['features.css']\n---\n\n\n \n Bootstrap\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
    \n

    Features examples

    \n\n
    \n

    Columns with icons

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Call to action\n \n \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Call to action\n \n \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Call to action\n \n \n
    \n
    \n
    \n\n
    \n\n
    \n

    Hanging icons

    \n
    \n
    \n
    \n \n
    \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Primary button\n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Primary button\n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n \n Primary button\n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n

    Custom cards

    \n\n
    \n
    \n
    \n
    \n

    Short title, long jacket

    \n
      \n
    • \n \"Bootstrap\"\n
      • \n
    • \n \n Earth\n
      • \n
    • \n \n 3d\n
      • \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Much longer title that wraps to multiple lines

    \n
      \n
    • \n \"Bootstrap\"\n
      • \n
    • \n \n Pakistan\n
      • \n
    • \n \n 4d\n
      • \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Another longer title belongs here

    \n
      \n
    • \n \"Bootstrap\"\n
      • \n
    • \n \n California\n
      • \n
    • \n \n 5d\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n

    Icon grid

    \n\n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n

    Features with title

    \n\n
    \n
    \n

    Left-aligned title explaining these awesome features

    \n

    Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

    \n Primary button\n
    \n\n
    \n
    \n
    \n
    \n \n \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n\n
    \n
    \n \n \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n\n
    \n
    \n \n \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n\n
    \n
    \n \n \n \n
    \n

    Featured title

    \n

    Paragraph of text beneath the heading to explain the heading.

    \n
    \n
    \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/footers/index.astro", "content": "---\nexport const title = 'Footers'\n---\n\n\n \n Bootstrap\n \n \n \n \n \n \n \n \n\n\n
    \n \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n \n © {new Date().getFullYear()} Company, Inc\n
    \n\n
      \n
      • \n
      • \n
    \n
    \n
    \n\n
    \n\n
    \n \n
    \n\n
    \n\n
    \n \n
    \n\n
    \n\n\n
    \n
    \n
    \n
    \n
    Section
    \n \n
    \n\n
    \n
    Section
    \n \n
    \n\n
    \n
    Section
    \n \n
    \n\n
    \n
    \n
    Subscribe to our newsletter
    \n

    Monthly digest of what's new and exciting from us.

    \n
    \n \n \n \n
    \n
    \n
    \n
    \n\n
    \n

    © {new Date().getFullYear()} Company, Inc. All rights reserved.

    \n
      \n
      • \n
      • \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/grid/grid.css", "content": ".themed-grid-col {\n padding-top: .75rem;\n padding-bottom: .75rem;\n background-color: rgba(112.520718, 44.062154, 249.437846, .15);\n border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);\n}\n\n.themed-container {\n padding: .75rem;\n margin-bottom: 1.5rem;\n background-color: rgba(112.520718, 44.062154, 249.437846, .15);\n border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);\n}\n" }, { "path": "site/src/assets/examples/grid/index.astro", "content": "---\nexport const title = 'Grid Template'\nexport const extra_css = ['grid.css']\nexport const body_class = 'py-4'\n---\n\n
    \n
    \n\n

    Bootstrap grid examples

    \n

    Basic grid layouts to get you familiar with building within the Bootstrap grid system.

    \n

    In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

    \n\n

    Five grid tiers

    \n

    There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

    \n\n
    \n
    .col-4
    \n
    .col-4
    \n
    .col-4
    \n
    \n\n
    \n
    .col-sm-4
    \n
    .col-sm-4
    \n
    .col-sm-4
    \n
    \n\n
    \n
    .col-md-4
    \n
    .col-md-4
    \n
    .col-md-4
    \n
    \n\n
    \n
    .col-lg-4
    \n
    .col-lg-4
    \n
    .col-lg-4
    \n
    \n\n
    \n
    .col-xl-4
    \n
    .col-xl-4
    \n
    .col-xl-4
    \n
    \n\n
    \n
    .col-xxl-4
    \n
    .col-xxl-4
    \n
    .col-xxl-4
    \n
    \n\n

    Three equal columns

    \n

    Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

    \n
    \n
    .col-md-4
    \n
    .col-md-4
    \n
    .col-md-4
    \n
    \n\n

    Three equal columns alternative

    \n

    By using the .row-cols-* classes, you can easily create a grid with equal columns.

    \n
    \n
    .col child of .row-cols-md-3
    \n
    .col child of .row-cols-md-3
    \n
    .col child of .row-cols-md-3
    \n
    \n\n

    Three unequal columns

    \n

    Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

    \n
    \n
    .col-md-3
    \n
    .col-md-6
    \n
    .col-md-3
    \n
    \n\n

    Two columns

    \n

    Get two columns starting at desktops and scaling to large desktops.

    \n
    \n
    .col-md-8
    \n
    .col-md-4
    \n
    \n\n

    Full width, single column

    \n

    \n No grid classes are necessary for full-width elements.\n

    \n\n
    \n\n

    Two columns with two nested columns

    \n

    Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

    \n

    At mobile device sizes, tablets and down, these columns and their nested columns will stack.

    \n
    \n
    \n
    \n .col-md-8\n
    \n
    \n
    .col-md-6
    \n
    .col-md-6
    \n
    \n
    \n
    .col-md-4
    \n
    \n\n
    \n\n

    Mixed: mobile and desktop

    \n

    The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

    \n

    Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.

    \n
    \n
    .col-md-8
    \n
    .col-6 .col-md-4
    \n
    \n
    \n
    .col-6 .col-md-4
    \n
    .col-6 .col-md-4
    \n
    .col-6 .col-md-4
    \n
    \n
    \n
    .col-6
    \n
    .col-6
    \n
    \n\n
    \n\n

    Mixed: mobile, tablet, and desktop

    \n
    \n
    .col-sm-6 .col-lg-8
    \n
    .col-6 .col-lg-4
    \n
    \n
    \n
    .col-6 .col-sm-4
    \n
    .col-6 .col-sm-4
    \n
    .col-6 .col-sm-4
    \n
    \n\n
    \n\n

    Gutters

    \n

    With .gx-* classes, the horizontal gutters can be adjusted.

    \n
    \n
    .col with .gx-4 gutters
    \n
    .col with .gx-4 gutters
    \n
    .col with .gx-4 gutters
    \n
    .col with .gx-4 gutters
    \n
    .col with .gx-4 gutters
    \n
    .col with .gx-4 gutters
    \n
    \n

    Use the .gy-* classes to control the vertical gutters.

    \n
    \n
    .col with .gy-4 gutters
    \n
    .col with .gy-4 gutters
    \n
    .col with .gy-4 gutters
    \n
    .col with .gy-4 gutters
    \n
    .col with .gy-4 gutters
    \n
    .col with .gy-4 gutters
    \n
    \n

    With .g-* classes, the gutters in both directions can be adjusted.

    \n
    \n
    .col with .g-3 gutters
    \n
    .col with .g-3 gutters
    \n
    .col with .g-3 gutters
    \n
    .col with .g-3 gutters
    \n
    .col with .g-3 gutters
    \n
    .col with .g-3 gutters
    \n
    \n
    \n\n
    \n
    \n\n

    Containers

    \n

    Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

    \n
    \n\n
    .container
    \n
    .container-sm
    \n
    .container-md
    \n
    .container-lg
    \n
    .container-xl
    \n
    .container-xxl
    \n
    .container-fluid
    \n
    \n" }, { "path": "site/src/assets/examples/headers/headers.css", "content": ".form-control-dark {\n border-color: var(--bs-gray);\n}\n.form-control-dark:focus {\n border-color: #fff;\n box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);\n}\n\n.text-small {\n font-size: 85%;\n}\n\n.dropdown-toggle:not(:focus) {\n outline: 0;\n}\n" }, { "path": "site/src/assets/examples/headers/index.astro", "content": "---\nexport const title = 'Headers'\nexport const extra_css = ['headers.css']\n---\n\n\n \n Bootstrap\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
    \n

    Headers examples

    \n\n
    \n
    \n \n \n Simple header\n \n\n \n
    \n
    \n\n
    \n\n
    \n
    \n \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n \n
    \n\n \n\n
    \n \n \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n \n\n \n\n
    \n \n
    \n\n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n \n\n \n\n
    \n \n
    \n\n
    \n \n \"mdo\"\n \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n \n \n
    \n\n
    \n
    \n \n
    \n\n
    \n \n \"mdo\"\n \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n









    \n
    \n
    \n









    \n
    \n
    \n
    \n\n
    \n\n \n
    \n
    \n \n \n Double header\n \n
    \n \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n \n \n \n\n \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n\n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n" }, { "path": "site/src/assets/examples/heroes/heroes.css", "content": "@media (min-width: 992px) {\n .rounded-lg-3 { border-radius: .3rem; }\n}\n" }, { "path": "site/src/assets/examples/heroes/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Heroes'\nexport const extra_css = ['heroes.css']\n---\n\n
    \n

    Heroes examples

    \n\n
    \n \"\"\n

    Centered hero

    \n
    \n

    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

    \n
    \n \n \n
    \n
    \n
    \n\n
    \n\n
    \n

    Centered screenshot

    \n
    \n

    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

    \n
    \n \n \n
    \n
    \n
    \n
    \n \"Example\n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \"Bootstrap\n
    \n
    \n

    Responsive left-aligned hero with image

    \n

    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n

    Vertically centered hero sign-up form

    \n

    Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

    \n
    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n
    \n \n
    \n By clicking Sign up, you agree to the terms of use.\n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n

    Border hero with cropped image and shadows

    \n

    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

    \n
    \n \n \n
    \n
    \n
    \n \"\"\n
    \n
    \n
    \n\n
    \n\n
    \n
    \n

    Dark color hero

    \n
    \n

    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n" }, { "path": "site/src/assets/examples/jumbotron/index.astro", "content": "---\nexport const title = 'Jumbotron example'\n---\n\n
    \n
    \n
    \n \n Bootstrap\n Jumbotron example\n \n
    \n\n
    \n
    \n

    Custom jumbotron

    \n

    Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

    \n \n
    \n
    \n\n
    \n
    \n
    \n

    Change the background

    \n

    Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

    \n \n
    \n
    \n
    \n
    \n

    Add borders

    \n

    Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

    \n \n
    \n
    \n
    \n\n
    \n © {new Date().getFullYear()}\n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/jumbotrons/index.astro", "content": "---\nexport const title = 'Jumbotrons'\nexport const extra_css = ['jumbotrons.css']\n---\n\n\n \n Bootstrap\n \n \n \n \n \n \n \n \n \n\n\n
    \n
    \n \n

    Jumbotron with icon

    \n

    \n This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action.\n

    \n
    \n \n \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n \n \n

    Placeholder jumbotron

    \n

    \n This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.\n

    \n \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n

    Full-width jumbotron

    \n

    \n This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.\n

    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n

    Basic jumbotron

    \n

    \n This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes.\n

    \n
    \n
    \n\n
    \n" }, { "path": "site/src/assets/examples/jumbotrons/jumbotrons.css", "content": ".border-dashed { --bs-border-style: dashed; }\n" }, { "path": "site/src/assets/examples/list-groups/index.astro", "content": "---\nexport const title = 'List groups'\nexport const extra_css = ['list-groups.css']\n---\n\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n\n
    \n
    \n \n \"\"\n
    \n
    \n
    List group item heading
    \n

    Some placeholder content in a paragraph.

    \n
    \n now\n
    \n     \n \n \"\"\n
    \n
    \n
    Another title here
    \n

    Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.

    \n
    \n 3d\n
    \n     \n \n \"\"\n
    \n
    \n
    Third heading
    \n

    Some placeholder content in a paragraph.

    \n
    \n 1w\n
    \n     \n
    \n
    \n\n
    \n\n
    \n
    \n \n \n \n
    \n\n
    \n \n \n \n
    \n
    \n\n
    \n\n
    \n
    \n \n \n \n \n
    \n
    \n\n
    \n\n
    \n
    \n \n \n\n \n \n\n \n \n\n \n \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/list-groups/list-groups.css", "content": ".list-group {\n width: 100%;\n max-width: 460px;\n margin-inline: 1.5rem;\n}\n\n.form-check-input:checked + .form-checked-content {\n opacity: .5;\n}\n\n.form-check-input-placeholder {\n border-style: dashed;\n}\n[contenteditable]:focus {\n outline: 0;\n}\n\n.list-group-checkable .list-group-item {\n cursor: pointer;\n}\n.list-group-item-check {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n}\n.list-group-item-check:hover + .list-group-item {\n background-color: var(--bs-secondary-bg);\n}\n.list-group-item-check:checked + .list-group-item {\n color: #fff;\n background-color: var(--bs-primary);\n border-color: var(--bs-primary);\n}\n.list-group-item-check[disabled] + .list-group-item,\n.list-group-item-check:disabled + .list-group-item {\n pointer-events: none;\n filter: none;\n opacity: .5;\n}\n\n.list-group-radio .list-group-item {\n cursor: pointer;\n border-radius: .5rem;\n}\n.list-group-radio .form-check-input {\n z-index: 2;\n margin-top: -.5em;\n}\n.list-group-radio .list-group-item:hover,\n.list-group-radio .list-group-item:focus {\n background-color: var(--bs-secondary-bg);\n}\n\n.list-group-radio .form-check-input:checked + .list-group-item {\n background-color: var(--bs-body);\n border-color: var(--bs-primary);\n box-shadow: 0 0 0 2px var(--bs-primary);\n}\n.list-group-radio .form-check-input[disabled] + .list-group-item,\n.list-group-radio .form-check-input:disabled + .list-group-item {\n pointer-events: none;\n filter: none;\n opacity: .5;\n}\n" }, { "path": "site/src/assets/examples/masonry/index.astro", "content": "---\nexport const title = 'Masonry example'\nexport const extra_js = [{\n src: 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js',\n integrity: 'sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D',\n async: true\n}]\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n
    \n

    Bootstrap and Masonry

    \n

    Integrate Masonry with the Bootstrap grid system and cards component.

    \n\n

    Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:

    \n\n 
    \n<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>\n
    \n\n

    By adding data-masonry='{\"percentPosition\": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

    \n\n
    \n\n
    \n
    \n
    \n \n
    \n
    Card title that wraps to a new line
    \n

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    A well-known quote, contained in a blockquote element.

    \n
    \n
    \n Someone famous in Source Title\n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    Card title
    \n

    This card has supporting text below as a natural lead-in to additional content.

    \n

    Last updated 3 mins ago

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    A well-known quote, contained in a blockquote element.

    \n
    \n
    \n Someone famous in Source Title\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Card title
    \n

    This card has a regular title and short paragraph of text below it.

    \n

    Last updated 3 mins ago

    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n

    A well-known quote, contained in a blockquote element.

    \n
    \n
    \n Someone famous in Source Title\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    Card title
    \n

    This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

    \n

    Last updated 3 mins ago

    \n
    \n
    \n
    \n
    \n\n
    \n" }, { "path": "site/src/assets/examples/modals/index.astro", "content": "---\nexport const title = 'Modals'\nexport const extra_css = ['modals.css']\n---\n\n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n
    \n
    \n
    \n
    \n

    Modal title

    \n \n
    \n
    \n

    This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n
    Enable this setting?
    \n

    You can always change your mind in your account settings.

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n

    What's new

    \n\n
      \n
    • \n \n
      \n
      Grid view
      \n Not into lists? Try the new grid view.\n
      \n
      • \n
    • \n \n
      \n
      Bookmarks
      \n Save items you love for easy access later.\n
      \n
      • \n
    • \n \n
      \n
      Video embeds
      \n Share videos wherever you go.\n
      \n
      • \n
    \n \n
    \n
    \n
    \n
    \n\n
    \n\n
    \n
    \n
    \n
    \n

    Sign up for free

    \n \n
    \n\n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n By clicking Sign up, you agree to the terms of use.\n
    \n

    Or use a third-party

    \n \n \n \n
    \n
    \n
    \n
    \n
    \n\n
    \n" }, { "path": "site/src/assets/examples/modals/modals.css", "content": ".modal-sheet .modal-dialog {\n width: 380px;\n transition: bottom .75s ease-in-out;\n}\n.modal-sheet .modal-footer {\n padding-bottom: 2rem;\n}\n" }, { "path": "site/src/assets/examples/navbar-bottom/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Bottom navbar example'\n---\n\n
    \n
    \n

    Bottom Navbar example

    \n

    This example is a quick exercise to illustrate how the bottom navbar works.

    \n View navbar docs »\n
    \n
    \n\n" }, { "path": "site/src/assets/examples/navbar-fixed/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Fixed top navbar example'\nexport const extra_css = ['navbar-fixed.css']\n---\n\n\n\n
    \n
    \n

    Navbar example

    \n

    This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.

    \n View navbar docs »\n
    \n
    \n" }, { "path": "site/src/assets/examples/navbar-fixed/navbar-fixed.css", "content": "/* Show it is fixed to the top */\nbody {\n min-height: 75rem;\n padding-top: 4.5rem;\n}\n" }, { "path": "site/src/assets/examples/navbar-static/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Top navbar example'\nexport const extra_css = ['navbar-static.css']\n---\n\n\n\n
    \n
    \n

    Navbar example

    \n

    This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

    \n View navbar docs »\n
    \n
    \n" }, { "path": "site/src/assets/examples/navbar-static/navbar-static.css", "content": "/* Show it's not fixed to the top */\nbody {\n min-height: 75rem;\n}\n" }, { "path": "site/src/assets/examples/navbars/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Navbar Template'\nexport const extra_css = ['navbars.css']\n---\n\n
    \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n
    \n

    Matching .container-xl...

    \n
    \n\n \n\n
    \n \n\n \n\n \n\n
    \n
    \n
    \n

    Navbar examples

    \n

    This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the top and fixed top examples.

    \n

    At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

    \n

    \n View navbar docs »\n

    \n
    \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/navbars/navbars.css", "content": "body {\n padding-bottom: 20px;\n}\n\n.navbar {\n margin-bottom: 20px;\n}\n" }, { "path": "site/src/assets/examples/navbars-offcanvas/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Navbar Template'\nexport const extra_css = ['navbars-offcanvas.css']\n---\n\n
    \n \n\n \n\n \n\n
    \n
    \n
    \n

    Navbar with offcanvas examples

    \n

    This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the top and fixed top examples.

    \n

    From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.

    \n

    \n Learn more about offcanvas navbars »\n

    \n
    \n
    \n
    \n
    \n" }, { "path": "site/src/assets/examples/navbars-offcanvas/navbars-offcanvas.css", "content": "body {\n padding-bottom: 20px;\n}\n\n.navbar {\n margin-bottom: 20px;\n}\n" }, { "path": "site/src/assets/examples/offcanvas-navbar/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Offcanvas navbar template'\nexport const extra_css = ['offcanvas-navbar.css']\nexport const extra_js = [{ src: 'offcanvas-navbar.js' }]\nexport const body_class = 'bg-body-tertiary'\nexport const aliases = '/docs/[[config:docs_version]]/examples/offcanvas/'\nimport Placeholder from \"@shortcodes/Placeholder.astro\"\n---\n\n\n\n
    \n \n
    \n\n
    \n
    \n \"\"\n
    \n

    Bootstrap

    \n Since 2011\n
    \n
    \n\n
    \n
    Recent updates
    \n
    \n \n

    \n @username\n Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?\n

    \n
    \n
    \n \n

    \n @username\n Some more representative placeholder content, related to this other user. Another status update, perhaps.\n

    \n
    \n
    \n \n

    \n @username\n This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.\n

    \n
    \n \n All updates\n \n
    \n\n
    \n
    Suggestions
    \n
    \n \n
    \n
    \n Full Name\n Follow\n
    \n @username\n
    \n
    \n
    \n \n
    \n
    \n Full Name\n Follow\n
    \n @username\n
    \n
    \n
    \n \n
    \n
    \n Full Name\n Follow\n
    \n @username\n
    \n
    \n \n All suggestions\n \n
    \n
    \n" }, { "path": "site/src/assets/examples/offcanvas-navbar/offcanvas-navbar.css", "content": "html,\nbody {\n overflow-x: hidden; /* Prevent scroll on narrow devices */\n}\n\nbody {\n padding-top: 56px;\n}\n\n@media (max-width: 991.98px) {\n .offcanvas-collapse {\n position: fixed;\n top: 56px; /* Height of navbar */\n bottom: 0;\n left: 100%;\n width: 100%;\n padding-right: 1rem;\n padding-left: 1rem;\n overflow-y: auto;\n visibility: hidden;\n background-color: #343a40;\n transition: transform .3s ease-in-out, visibility .3s ease-in-out;\n }\n .offcanvas-collapse.open {\n visibility: visible;\n transform: translateX(-100%);\n }\n}\n\n.nav-scroller .nav {\n color: rgba(255, 255, 255, .75);\n}\n\n.nav-scroller .nav-link {\n padding-top: .75rem;\n padding-bottom: .75rem;\n font-size: .875rem;\n color: #6c757d;\n}\n\n.nav-scroller .nav-link:hover {\n color: #007bff;\n}\n\n.nav-scroller .active {\n font-weight: 500;\n color: #343a40;\n}\n\n.bg-purple {\n background-color: #6f42c1;\n}\n" }, { "path": "site/src/assets/examples/offcanvas-navbar/offcanvas-navbar.js", "content": "(() => {\n 'use strict'\n\n document.querySelector('#navbarSideCollapse').addEventListener('click', () => {\n document.querySelector('.offcanvas-collapse').classList.toggle('open')\n })\n})()\n" }, { "path": "site/src/assets/examples/pricing/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Pricing example'\nexport const extra_css = ['pricing.css']\n---\n\n\n \n Check\n \n \n\n\n
    \n
    \n
    \n \n Bootstrap\n Pricing example\n \n\n \n
    \n\n
    \n

    Pricing

    \n

    Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

    \n
    \n
    \n\n
    \n
    \n
    \n
    \n
    \n

    Free

    \n
    \n
    \n

    $0/mo

    \n
      \n
    • 10 users included
      • \n
    • 2 GB of storage
      • \n
    • Email support
      • \n
    • Help center access
      • \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n

    Pro

    \n
    \n
    \n

    $15/mo

    \n
      \n
    • 20 users included
      • \n
    • 10 GB of storage
      • \n
    • Priority email support
      • \n
    • Help center access
      • \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n

    Enterprise

    \n
    \n
    \n

    $29/mo

    \n
      \n
    • 30 users included
      • \n
    • 15 GB of storage
      • \n
    • Phone and email support
      • \n
    • Help center access
      • \n
    \n \n
    \n
    \n
    \n
    \n\n

    Compare plans

    \n\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    FreeProEnterprise
    Public
    Private
    Permissions
    Sharing
    Unlimited members
    Extra security
    \n
    \n
    \n\n \n
    \n" }, { "path": "site/src/assets/examples/pricing/pricing.css", "content": "body {\n background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));\n}\n\n.container {\n max-width: 960px;\n}\n\n.pricing-header {\n max-width: 700px;\n}\n" }, { "path": "site/src/assets/examples/product/index.astro", "content": "---\nexport const title = 'Product example'\nexport const extra_css = ['product.css']\n---\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n\n\n
    \n
    \n
    \n

    Designed for engineers

    \n

    Build anything you want with Aperture

    \n
    \n \n Learn more\n \n \n \n Buy\n \n \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n
    \n

    Another headline

    \n

    And an even wittier subheading.

    \n
    \n
    \n
    \n
    \n
    \n\n\n" }, { "path": "site/src/assets/examples/product/product.css", "content": ".container {\n max-width: 960px;\n}\n\n.icon-link > .bi {\n width: .75em;\n height: .75em;\n}\n\n/*\n * Custom translucent site header\n */\n\n.site-header {\n background-color: rgba(0, 0, 0, .85);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n}\n.site-header a {\n color: #8e8e8e;\n transition: color .15s ease-in-out;\n}\n.site-header a:hover {\n color: #fff;\n text-decoration: none;\n}\n\n/*\n * Dummy devices (replace them with your own or something else entirely!)\n */\n\n.product-device {\n position: absolute;\n right: 10%;\n bottom: -30%;\n width: 300px;\n height: 540px;\n background-color: #333;\n border-radius: 21px;\n transform: rotate(30deg);\n}\n\n.product-device::before {\n position: absolute;\n top: 10%;\n right: 10px;\n bottom: 10%;\n left: 10px;\n content: \"\";\n background-color: rgba(255, 255, 255, .1);\n border-radius: 5px;\n}\n\n.product-device-2 {\n top: -25%;\n right: auto;\n bottom: 0;\n left: 5%;\n background-color: #e5e5e5;\n}\n\n\n/*\n * Extra utilities\n */\n\n.flex-equal > * {\n flex: 1;\n}\n@media (min-width: 768px) {\n .flex-md-equal > * {\n flex: 1;\n }\n}\n" }, { "path": "site/src/assets/examples/sidebars/index.astro", "content": "---\nexport const title = 'Sidebars'\nexport const extra_css = ['sidebars.css']\nexport const extra_js = [{src: 'sidebars.js'}]\n---\n\n\n \n Bootstrap\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
    \n

    Sidebars examples

    \n\n
    \n \n \n Sidebar\n \n
    \n \n
    \n
    \n \n \"\"\n mdo\n \n \n
    \n
    \n\n
    \n\n
    \n \n \n Sidebar\n \n
    \n \n
    \n
    \n \n \"\"\n mdo\n \n \n
    \n
    \n\n
    \n\n
    \n \n \n Icon-only\n \n \n
    \n \n \"mdo\"\n \n \n
    \n
    \n\n
    \n\n
    \n \n \n Collapsible\n \n \n
    \n\n
    \n\n
    \n \n \n List group\n \n
    \n \n
    \n List group item heading\n Wed\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Tues\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Mon\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n\n \n
    \n List group item heading\n Wed\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Tues\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Mon\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Wed\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Tues\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Mon\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Wed\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Tues\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n \n
    \n List group item heading\n Mon\n
    \n
    Some placeholder content in a paragraph below the heading and date.
    \n     \n
    \n
    \n\n
    \n
    \n" }, { "path": "site/src/assets/examples/sidebars/sidebars.css", "content": "body {\n min-height: 100vh;\n min-height: -webkit-fill-available;\n}\n\nhtml {\n height: -webkit-fill-available;\n}\n\nmain {\n height: 100vh;\n height: -webkit-fill-available;\n max-height: 100vh;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n.dropdown-toggle { outline: 0; }\n\n.btn-toggle {\n padding: .25rem .5rem;\n font-weight: 600;\n color: var(--bs-emphasis-color);\n background-color: transparent;\n}\n.btn-toggle:hover,\n.btn-toggle:focus {\n color: rgba(var(--bs-emphasis-color-rgb), .85);\n background-color: var(--bs-tertiary-bg);\n}\n\n.btn-toggle::before {\n width: 1.25em;\n line-height: 0;\n content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n transition: transform .35s ease;\n transform-origin: .5em 50%;\n}\n\n[data-bs-theme=\"dark\"] .btn-toggle::before {\n content: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");\n}\n\n.btn-toggle[aria-expanded=\"true\"] {\n color: rgba(var(--bs-emphasis-color-rgb), .85);\n}\n.btn-toggle[aria-expanded=\"true\"]::before {\n transform: rotate(90deg);\n}\n\n.btn-toggle-nav a {\n padding: .1875rem .5rem;\n margin-top: .125rem;\n margin-left: 1.25rem;\n}\n.btn-toggle-nav a:hover,\n.btn-toggle-nav a:focus {\n background-color: var(--bs-tertiary-bg);\n}\n\n.scrollarea {\n overflow-y: auto;\n}\n" }, { "path": "site/src/assets/examples/sidebars/sidebars.js", "content": "/* global bootstrap: false */\n(() => {\n 'use strict'\n const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle=\"tooltip\"]'))\n tooltipTriggerList.forEach(tooltipTriggerEl => {\n new bootstrap.Tooltip(tooltipTriggerEl)\n })\n})()\n" }, { "path": "site/src/assets/examples/sign-in/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Signin Template'\nexport const extra_css = ['sign-in.css']\nexport const body_class = 'd-flex align-items-center py-4 bg-body-tertiary'\n---\n\n
    \n
    \n \"\"\n

    Please sign in

    \n\n
    \n \n \n
    \n
    \n \n \n
    \n\n
    \n \n \n
    \n \n

    © 2017–{new Date().getFullYear()}

    \n
    \n
    \n" }, { "path": "site/src/assets/examples/sign-in/sign-in.css", "content": "html,\nbody {\n height: 100%;\n}\n\n.form-signin {\n max-width: 330px;\n padding: 1rem;\n}\n\n.form-signin .form-floating:focus-within {\n z-index: 2;\n}\n\n.form-signin input[type=\"email\"] {\n margin-bottom: -1px;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.form-signin input[type=\"password\"] {\n margin-bottom: 10px;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n" }, { "path": "site/src/assets/examples/starter-template/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Starter Template'\n---\n\n\n \n \n \n \n Bootstrap\n \n \n\n\n
    \n
    \n \n \n Starter template\n \n
    \n\n
    \n

    Get started with Bootstrap

    \n

    Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

    \n\n
    \n Download examples\n
    \n\n
    \n\n
    \n
    \n

    Starter projects

    \n

    Ready to go beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

    \n \n
    \n\n
    \n

    Guides

    \n

    Read more detailed instructions and documentation on using or contributing to Bootstrap.

    \n \n
    \n
    \n
    \n
    \n Created by the Bootstrap team · © {new Date().getFullYear()}\n
    \n
    \n" }, { "path": "site/src/assets/examples/sticky-footer/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Sticky Footer Template'\nexport const extra_css = ['sticky-footer.css']\nexport const html_class = 'h-100'\nexport const body_class = 'd-flex flex-column h-100'\n---\n\n\n
    \n
    \n

    Sticky footer

    \n

    Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

    \n

    Use the sticky footer with a fixed navbar if need be, too.

    \n
    \n
    \n\n
    \n
    \n Place sticky footer content here.\n
    \n
    \n" }, { "path": "site/src/assets/examples/sticky-footer/sticky-footer.css", "content": "/* Custom page CSS\n-------------------------------------------------- */\n/* Not required for template or sticky footer method. */\n\n.container {\n width: auto;\n max-width: 680px;\n padding: 0 15px;\n}\n" }, { "path": "site/src/assets/examples/sticky-footer-navbar/index.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n\nexport const title = 'Sticky Footer Navbar Template'\nexport const extra_css = ['sticky-footer-navbar.css']\nexport const html_class = 'h-100'\nexport const body_class = 'd-flex flex-column h-100'\n---\n\n
    \n \n \n
    \n\n\n
    \n
    \n

    Sticky footer with fixed navbar

    \n

    Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

    \n

    Back to the default sticky footer minus the navbar.

    \n
    \n
    \n\n
    \n
    \n Place sticky footer content here.\n
    \n
    \n" }, { "path": "site/src/assets/examples/sticky-footer-navbar/sticky-footer-navbar.css", "content": "/* Custom page CSS\n-------------------------------------------------- */\n/* Not required for template or sticky footer method. */\n\nmain > .container {\n padding: 60px 15px 0;\n}\n" }, { "path": "site/src/assets/partials/sidebar.js", "content": "// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT\n// IT'S ALL JUST JUNK FOR OUR DOCS!\n// ++++++++++++++++++++++++++++++++++++++++++\n\n/*\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2011-2026 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\nexport default () => {\n // Scroll the active sidebar link into view\n const sidenav = document.querySelector('.bd-sidebar')\n const sidenavActiveLink = document.querySelector('.bd-links-nav .active')\n\n if (!sidenav || !sidenavActiveLink) {\n return\n }\n\n const sidenavHeight = sidenav.clientHeight\n const sidenavActiveLinkTop = sidenavActiveLink.offsetTop\n const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight\n const viewportTop = sidenavActiveLinkTop\n const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight\n\n if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {\n sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)\n }\n}\n" }, { "path": "site/src/assets/partials/snippets.js", "content": "// NOTICE!!! Initially embedded in our docs this JavaScript\n// file contains elements that can help you create reproducible\n// use cases in StackBlitz for instance.\n// In a real project please adapt this content to your needs.\n// ++++++++++++++++++++++++++++++++++++++++++\n\n/*\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2011-2026 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\n/* global bootstrap: false */\n\nexport default () => {\n // --------\n // Tooltips\n // --------\n // Instantiate all tooltips in a docs or StackBlitz\n document.querySelectorAll('[data-bs-toggle=\"tooltip\"]')\n .forEach(tooltip => {\n new bootstrap.Tooltip(tooltip)\n })\n\n // --------\n // Popovers\n // --------\n // Instantiate all popovers in docs or StackBlitz\n document.querySelectorAll('[data-bs-toggle=\"popover\"]')\n .forEach(popover => {\n new bootstrap.Popover(popover)\n })\n\n // -------------------------------\n // Toasts\n // -------------------------------\n // Used by 'Placement' example in docs or StackBlitz\n const toastPlacement = document.getElementById('toastPlacement')\n if (toastPlacement) {\n document.getElementById('selectToastPlacement').addEventListener('change', function () {\n if (!toastPlacement.dataset.originalClass) {\n toastPlacement.dataset.originalClass = toastPlacement.className\n }\n\n toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`\n })\n }\n\n // Instantiate all toasts in docs pages only\n document.querySelectorAll('.bd-example .toast')\n .forEach(toastNode => {\n const toast = new bootstrap.Toast(toastNode, {\n autohide: false\n })\n\n toast.show()\n })\n\n // Instantiate all toasts in docs pages only\n // js-docs-start live-toast\n const toastTrigger = document.getElementById('liveToastBtn')\n const toastLiveExample = document.getElementById('liveToast')\n\n if (toastTrigger) {\n const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)\n toastTrigger.addEventListener('click', () => {\n toastBootstrap.show()\n })\n }\n // js-docs-end live-toast\n\n // -------------------------------\n // Alerts\n // -------------------------------\n // Used in 'Show live alert' example in docs or StackBlitz\n\n // js-docs-start live-alert\n const alertPlaceholder = document.getElementById('liveAlertPlaceholder')\n const appendAlert = (message, type) => {\n const wrapper = document.createElement('div')\n wrapper.innerHTML = [\n `
    `,\n `
    ${message}
    `,\n ' ',\n '
    '\n ].join('')\n\n alertPlaceholder.append(wrapper)\n }\n\n const alertTrigger = document.getElementById('liveAlertBtn')\n if (alertTrigger) {\n alertTrigger.addEventListener('click', () => {\n appendAlert('Nice, you triggered this alert message!', 'success')\n })\n }\n // js-docs-end live-alert\n\n // --------\n // Carousels\n // --------\n // Instantiate all non-autoplaying carousels in docs or StackBlitz\n document.querySelectorAll('.carousel:not([data-bs-ride=\"carousel\"])')\n .forEach(carousel => {\n bootstrap.Carousel.getOrCreateInstance(carousel)\n })\n\n // -------------------------------\n // Checks & Radios\n // -------------------------------\n // Indeterminate checkbox example in docs and StackBlitz\n document.querySelectorAll('.bd-example-indeterminate [type=\"checkbox\"]')\n .forEach(checkbox => {\n if (checkbox.id.includes('Indeterminate')) {\n checkbox.indeterminate = true\n }\n })\n\n // -------------------------------\n // Links\n // -------------------------------\n // Disable empty links in docs examples only\n document.querySelectorAll('.bd-content [href=\"#\"]')\n .forEach(link => {\n link.addEventListener('click', event => {\n event.preventDefault()\n })\n })\n\n // -------------------------------\n // Modal\n // -------------------------------\n // Modal 'Varying modal content' example in docs and StackBlitz\n // js-docs-start varying-modal-content\n const exampleModal = document.getElementById('exampleModal')\n if (exampleModal) {\n exampleModal.addEventListener('show.bs.modal', event => {\n // Button that triggered the modal\n const button = event.relatedTarget\n // Extract info from data-bs-* attributes\n const recipient = button.getAttribute('data-bs-whatever')\n // If necessary, you could initiate an Ajax request here\n // and then do the updating in a callback.\n\n // Update the modal's content.\n const modalTitle = exampleModal.querySelector('.modal-title')\n const modalBodyInput = exampleModal.querySelector('.modal-body input')\n\n modalTitle.textContent = `New message to ${recipient}`\n modalBodyInput.value = recipient\n })\n }\n // js-docs-end varying-modal-content\n\n // -------------------------------\n // Offcanvas\n // -------------------------------\n // 'Offcanvas components' example in docs only\n const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')\n if (myOffcanvas) {\n myOffcanvas.forEach(offcanvas => {\n offcanvas.addEventListener('show.bs.offcanvas', event => {\n event.preventDefault()\n }, false)\n })\n }\n}\n" }, { "path": "site/src/assets/search.js", "content": "// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT\n// IT'S ALL JUST JUNK FOR OUR DOCS!\n// ++++++++++++++++++++++++++++++++++++++++++\n\n/*!\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2024-2026 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\nimport docsearch from '@docsearch/js'\n\n(() => {\n // These values will be replaced by Astro's Vite plugin\n const CONFIG = {\n apiKey: '__API_KEY__',\n indexName: '__INDEX_NAME__',\n appId: '__APP_ID__'\n }\n\n const searchElement = document.getElementById('docsearch')\n\n if (!searchElement) {\n return\n }\n\n const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')\n\n docsearch({\n apiKey: CONFIG.apiKey,\n indexName: CONFIG.indexName,\n appId: CONFIG.appId,\n container: searchElement,\n searchParameters: {\n facetFilters: [`version:${siteDocsVersion}`]\n },\n transformItems(items) {\n return items.map(item => {\n const liveUrl = 'https://getbootstrap.com/'\n\n item.url = window.location.origin.startsWith(liveUrl) ?\n // On production, return the result as is\n item.url :\n // On development or Netlify, replace `item.url` with a trailing slash,\n // so that the result link is relative to the server root\n item.url.replace(liveUrl, '/')\n\n // Prevent jumping to first header\n if (item.anchor === 'content') {\n item.url = item.url.replace(/#content$/, '')\n item.anchor = null\n }\n\n return item\n })\n }\n })\n})()\n" }, { "path": "site/src/assets/snippets.js", "content": "/*\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2011-2026 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\n// Note that this file is not published; we only include it in scripts.html\n// for StackBlitz to work\n\n/* eslint-disable import/no-unresolved */\nimport snippets from 'js/partials/snippets.js'\n/* eslint-enable import/no-unresolved */\n\nsnippets()\n" }, { "path": "site/src/assets/stackblitz.js", "content": "// NOTICE!!! Initially embedded in our docs this JavaScript\n// file contains elements that can help you create reproducible\n// use cases in StackBlitz for instance.\n// In a real project please adapt this content to your needs.\n// ++++++++++++++++++++++++++++++++++++++++++\n\n/*!\n * JavaScript for Bootstrap's docs (https://getbootstrap.com/)\n * Copyright 2024-2026 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https://creativecommons.org/licenses/by/3.0/.\n */\n\nimport sdk from '@stackblitz/sdk'\n// eslint-disable-next-line import/no-unresolved\nimport snippetsContent from './partials/snippets.js?raw'\n\n// These values will be replaced by Astro's Vite plugin\nconst CONFIG = {\n cssCdn: '__CSS_CDN__',\n jsBundleCdn: '__JS_BUNDLE_CDN__',\n docsVersion: '__DOCS_VERSION__'\n}\n\n// Open in StackBlitz logic\ndocument.querySelectorAll('.btn-edit').forEach(btn => {\n btn.addEventListener('click', event => {\n const codeSnippet = event.target.closest('.bd-code-snippet')\n const exampleEl = codeSnippet.querySelector('.bd-example')\n\n const htmlSnippet = exampleEl.innerHTML\n const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')\n // Get extra classes for this example\n const classes = Array.from(exampleEl.classList).join(' ')\n\n openBootstrapSnippet(htmlSnippet, jsSnippet, classes)\n })\n})\n\nconst openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {\n const indexHtml = `\n\n \n \n \n \n \n Bootstrap Example\n \n \n \n \n${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()}\n \n \n`\n\n // Modify the snippets content to convert export default to a variable and invoke it\n let modifiedSnippetsContent = ''\n\n if (jsSnippet) {\n // Replace export default with a variable assignment\n modifiedSnippetsContent = snippetsContent.replace(\n 'export default () => {',\n 'const snippets_default = () => {'\n )\n\n // Add IIFE wrapper and execution\n modifiedSnippetsContent = `(() => {\n ${modifiedSnippetsContent}\n\n // \n snippets_default();\n})();`\n }\n\n const project = {\n files: {\n 'index.html': indexHtml,\n ...(jsSnippet && { 'index.js': modifiedSnippetsContent })\n },\n title: 'Bootstrap Example',\n description: `Official example from ${window.location.href}`,\n template: jsSnippet ? 'javascript' : 'html',\n tags: ['bootstrap']\n }\n\n sdk.openProject(project, { openFile: 'index.html' })\n}\n" }, { "path": "site/src/components/Ads.astro", "content": "---\n---\n\n\n" }, { "path": "site/src/components/DocsScripts.astro", "content": "---\n---\n\n\n" }, { "path": "site/src/components/DocsSidebar.astro", "content": "---\nimport { getData } from '@libs/data'\nimport { getConfig } from '@libs/config'\nimport { docsPages } from '@libs/content'\nimport { getSlug } from '@libs/utils'\n\nconst sidebar = getData('sidebar')\n---\n\n\n" }, { "path": "site/src/components/Scripts.astro", "content": "---\nimport { getVersionedBsJsProps } from '@libs/bootstrap'\nimport type { Layout } from '@libs/layout'\nimport DocsScripts from './DocsScripts.astro'\n\ninterface Props {\n layout: Layout\n}\n\nconst { layout } = Astro.props\n---\n\n\n\n\n\n\n{layout === 'docs' && }\n" }, { "path": "site/src/components/TableOfContents.astro", "content": "---\nimport type { MarkdownHeading } from 'astro'\nimport { generateToc, type TocEntry } from '@libs/toc'\n\ninterface Props {\n headings?: MarkdownHeading[]\n entries?: TocEntry[]\n}\n\nconst { entries, headings } = Astro.props\n\nconst toc = entries ? entries : generateToc(headings ?? [])\n---\n\n
      \n {\n toc.map(({ children, slug, text }) => {\n return (\n
    • \n {text}\n {children.length > 0 && }\n
      • \n )\n })\n }\n
    \n" }, { "path": "site/src/components/footer/Footer.astro", "content": "---\nimport BootstrapWhiteFillIcon from '@components/icons/BootstrapWhiteFillIcon.astro'\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\n---\n\n\n" }, { "path": "site/src/components/head/Analytics.astro", "content": "---\nimport { getConfig } from '@libs/config'\n---\n\n\n" }, { "path": "site/src/components/head/Favicons.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\n---\n\n\n\n\n\n\n\n\n" }, { "path": "site/src/components/head/Head.astro", "content": "---\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\nimport type { Layout } from '@libs/layout'\nimport Stylesheet from '@components/head/Stylesheet.astro'\nimport Favicons from '@components/head/Favicons.astro'\nimport Social from '@components/head/Social.astro'\nimport Analytics from '@components/head/Analytics.astro'\n\ninterface Props {\n description: string\n direction?: 'rtl'\n layout: Layout\n robots: string | undefined\n thumbnail: string\n title: string\n}\n\nconst { description, direction, layout, robots, thumbnail, title } = Astro.props\n\nconst canonicalUrl = new URL(Astro.url.pathname, Astro.site)\n\nconst isHome = Astro.url.pathname === '/'\nconst pageTitle = isHome\n ? `${getConfig().title} · ${getConfig().subtitle}`\n : `${title} · ${getConfig().title} v${getConfig().docs_version}`\n\n// Dynamic imports to avoid build-time processing\nconst Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro')\nconst ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null\n---\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n{pageTitle}\n\n{robots && }\n\n\n\n{import.meta.env.PROD && ScssProd && (\n \n \n)}\n\n{!import.meta.env.PROD && Scss && (\n \n)}\n\n\n\n\n" }, { "path": "site/src/components/head/Scss.astro", "content": "---\n---\n\n\n" }, { "path": "site/src/components/head/ScssProd.astro", "content": "---\n---\n\n\n" }, { "path": "site/src/components/head/Social.astro", "content": "---\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\nimport { getStaticImageSize } from '@libs/image'\nimport type { Layout } from '@libs/layout'\n\ninterface Props {\n description: string\n layout: Layout\n thumbnail: string\n title: string\n}\n\nconst { description, layout, thumbnail, title } = Astro.props\n\nconst socialImageUrl = new URL(getVersionedDocsPath(`assets/${thumbnail}`), Astro.site)\nconst socialImageSize = await getStaticImageSize(`/docs/[version]/assets/${thumbnail}`)\n---\n\n\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "site/src/components/head/Stylesheet.astro", "content": "---\nimport { getVersionedBsCssProps } from '@libs/bootstrap'\nimport type { Layout } from '@libs/layout'\n\ninterface Props {\n direction?: 'rtl'\n layout: Layout\n}\n\nconst { direction } = Astro.props\n---\n\n\n" }, { "path": "site/src/components/header/Header.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport type { Layout } from '@libs/layout'\nimport Skippy from '@components/header/Skippy.astro'\nimport Symbols from '@components/icons/Symbols.astro'\nimport Navigation from '@components/header/Navigation.astro'\n\ninterface Props {\n addedIn?: CollectionEntry<'docs'>['data']['added']\n layout: Layout\n title: string\n}\n\nconst { addedIn, layout, title } = Astro.props\n---\n\n\n\n\n\n" }, { "path": "site/src/components/header/LinkItem.astro", "content": "---\ninterface Props {\n active?: boolean\n class?: string\n href: string\n rel?: HTMLAnchorElement['rel']\n target?: HTMLAnchorElement['target']\n track?: boolean\n}\n\nconst { active, class: className, track, ...props } = Astro.props\n\nconst content = await Astro.slots.render('default')\n---\n\n
  • \n \n \n \n
    • \n" }, { "path": "site/src/components/header/Navigation.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\nimport type { Layout } from '@libs/layout'\nimport BootstrapWhiteFillIcon from '@components/icons/BootstrapWhiteFillIcon.astro'\nimport GitHubIcon from '@components/icons/GitHubIcon.astro'\nimport HamburgerIcon from '@components/icons/HamburgerIcon.astro'\nimport LinkItem from '@components/header/LinkItem.astro'\nimport OpenCollectiveIcon from '@components/icons/OpenCollectiveIcon.astro'\nimport XIcon from '@components/icons/XIcon.astro'\nimport Versions from '@components/header/Versions.astro'\nimport ThemeToggler from '@layouts/partials/ThemeToggler.astro'\n\ninterface Props {\n addedIn?: CollectionEntry<'docs'>['data']['added']\n layout: Layout\n title: string\n}\n\nconst { addedIn, layout, title } = Astro.props\n---\n\n
    \n \n
    \n" }, { "path": "site/src/components/header/Skippy.astro", "content": "---\nimport type { Layout } from '@libs/layout'\n\ninterface Props {\n layout: Layout\n}\n\nconst { layout } = Astro.props\n---\n\n
    \n
    \n Skip to main content\n {\n layout === 'docs' && (\n \n Skip to docs navigation\n \n )\n }\n
    \n
    \n" }, { "path": "site/src/components/header/Versions.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport { getConfig } from '@libs/config'\nimport type { Layout } from '@libs/layout'\nimport { getVersionedDocsPath } from '@libs/path'\n\ninterface Props {\n addedIn?: CollectionEntry<'docs'>['data']['added']\n layout: Layout\n}\n\nconst { addedIn, layout } = Astro.props\nconst { slug, version } = Astro.params\n\nconst isHome = Astro.url.pathname === '/'\n\nlet versionsLink = ''\n\nif (layout === 'docs' && version === getConfig().docs_version) {\n versionsLink = `${slug}/`\n} else if (layout === 'single' && Astro.url.pathname.startsWith(getVersionedDocsPath(''))) {\n versionsLink = Astro.url.pathname.replace(getVersionedDocsPath(''), '')\n}\n\nconst addedIn51 = addedIn?.version === '5.1'\nconst addedIn52 = addedIn?.version === '5.2'\nconst addedIn53 = addedIn?.version === '5.3'\n---\n\n
  • \n \n BootstrapBootstrap  v{\n getConfig().docs_version\n }\n (switch to other versions)\n \n
      \n
    • v5 releases
      • \n
    • \n \n Latest ({getConfig().docs_version}.x)\n \n \n
      • \n
    • \n {\n addedIn53 ? (\n
      v5.2.3
      \n ) : (\n \n v5.2.3\n \n )\n }\n
      • \n
    • \n {\n addedIn52 || addedIn53 ? (\n
      v5.1.3
      \n ) : (\n \n v5.1.3\n \n )\n }\n
      • \n
    • \n {\n addedIn51 || addedIn52 || addedIn53 ? (\n
      v5.0.2
      \n ) : (\n \n v5.0.2\n \n )\n }\n
      • \n
      • \n
    • Previous releases
      • \n
    • v4.6.x
      • \n
    • v3.4.1
      • \n
    • v2.3.2
      • \n
      • \n
    • All versions
      • \n
    \n
    • \n" }, { "path": "site/src/components/home/CSSVariables.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\nimport Code from '@shortcodes/Code.astro'\n---\n\n
    \n
    \n
    \n \n
    \n

    Build and extend in real-time with CSS variables

    \n

    \n Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual\n components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily\n be modified.\n

    \n

    \n \n Learn more about CSS variables\n \n \n

    \n
    \n
    \n
    \n

    Using CSS variables

    \n

    \n Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children\n elements.\n

    \n \n
    \n
    \n

    Customizing via CSS variables

    \n

    \n Override global, component, or utility class variables to customize Bootstrap just how you like. No need to\n redeclare each rule, just a new variable value.\n

    \n \n
    \n
    \n
    \n" }, { "path": "site/src/components/home/ComponentUtilities.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\nimport Code from '@shortcodes/Code.astro'\n---\n\n
    \n
    \n
    \n \n
    \n \n
    \n \n
    \n

    Components, meet the Utility API

    \n

    \n New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to\n add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them\n custom names.\n

    \n
    \n
    \n
    \n

    Quickly customize components

    \n

    \n Apply any of our included utility classes to our components to customize their appearance, like the navigation\n example below. There are hundreds of classes available—from positioning and sizing to colors and effects. Mix them with CSS variable overrides for\n even more control.\n

    \n
    \n
      \n
    • \n Home\n
      • \n
    • \n Profile\n
      • \n
    • \n Contact\n
      • \n
    \n \n
  • \n Home\n
    • \n
  • \n Profile\n
    • \n
  • \n Contact\n
    • \n \n
    \n \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n`}\n lang=\"html\"\n />\n

    \n \n Explore customized components\n \n \n

    \n
    \n
    \n

    Create and extend utilities

    \n

    \n Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any\n project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.\n

    \n \n

    \n \n Explore the utility API\n \n \n

    \n
    \n
    \n
    \n" }, { "path": "site/src/components/home/Customize.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\nimport Code from '@shortcodes/Code.astro'\n---\n\n
    \n
    \n \n
    \n

    Customize everything with Sass

    \n

    \n Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable\n global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.\n

    \n

    \n \n Learn more about customizing\n \n \n

    \n
    \n\n
    \n
    \n

    Include all of Bootstrap’s Sass

    \n

    Import one stylesheet and you're off to the races with every feature of our CSS.

    \n \n

    Learn more about our global Sass options.

    \n
    \n
    \n

    Include what you need

    \n

    The easiest way to customize Bootstrap—include only the CSS you need.

    \n \n

    Learn more about using Bootstrap with Sass.

    \n
    \n
    \n" }, { "path": "site/src/components/home/GetStarted.astro", "content": "---\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\nimport Code from '@shortcodes/Code.astro'\n---\n\n
    \n
    \n \n
    \n

    Get started any way you want

    \n

    \n Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.\n

    \n

    \n \n Read installation docs\n \n \n

    \n
    \n\n
    \n
    \n \n

    Install via package manager

    \n

    \n Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed\n installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects.\n

    \n \n \n

    \n Read our installation docs for more info and additional\n package managers.\n

    \n
    \n
    \n \n

    Include via CDN

    \n

    \n When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also\n choose to include Popper and our JS separately.\n

    \n `}\n lang=\"html\"\n />\n `}\n lang=\"html\"\n />\n
    \n\n
    \n

    Read our getting started guides

    \n

    Get a jump on including Bootstrap's source files in a new project with our official guides.

    \n
    \n \n \n Webpack\n \n \n \n Parcel\n \n \n \n Vite\n \n
    \n
    \n
    \n" }, { "path": "site/src/components/home/Icons.astro", "content": "---\nimport { getConfig } from '@libs/config'\nimport CircleSquareIcon from '@components/icons/CircleSquareIcon.astro'\nimport ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'\n---\n\n
    \n
    \n
    \n \n
    \n

    Personalize it with Bootstrap Icons

    \n

    \n Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with\n more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them\n as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.\n

    \n

    \n \n Get Bootstrap Icons\n \n \n

    \n
    \n
    \n \n
    \n
    \n" }, { "path": "site/src/components/home/MastHead.astro", "content": "---\nimport { getConfig } from '@libs/config'\nimport { getVersionedDocsPath } from '@libs/path'\nimport Ads from '@components/Ads.astro'\nimport Code from '@components/shortcodes/Code.astro'\nimport ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'\n---\n\n
    \n
    \n
    \n \n \n Get Security Updates for Bootstrap 3 & 4\n \n \n \n \n

    Build fast, responsive sites with Bootstrap

    \n

    \n Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid\n system and components, and bring projects to life with powerful JavaScript plugins.\n

    \n
    \n
    \n \n
    \n \n \n Read the docs\n \n
    \n

    \n Currently v{getConfig().current_version}\n ·\n Download\n ·\n All releases\n

    \n \n
    \n
    \n
    \n" }, { "path": "site/src/components/home/Plugins.astro", "content": "---\nimport { getVersionedDocsPath } from '@libs/path'\nimport { getData } from '@libs/data'\nimport Code from '@shortcodes/Code.astro'\n\nconst plugins = getData('plugins')\n---\n\n
    \n
    \n
    \n \n
    \n

    Powerful JavaScript plugins without jQuery

    \n

    \n Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without\n jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your\n HTML. Need more control? Include individual plugins programmatically.\n

    \n

    \n \n Learn more about Bootstrap JavaScript\n \n \n

    \n
    \n
    \n
    \n

    Data attribute API

    \n

    \n Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a\n first-class data API, allowing you to use JavaScript just by adding data attributes.\n

    \n
    \n
    \n \n
      \n
      • \n
      • \n
      • \n
    \n
    \n
    \n \n \n
      \n
      • \n
      • \n
      • \n
    \n
    `}\n lang=\"html\"\n />\n

    \n Learn more about our JavaScript as modules and using the programmatic API.\n

    \n
    \n
    \n

    Comprehensive set of plugins

    \n

    \n Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just\n the ones you need.\n

    \n
    \n
    \n {\n plugins.map((plugin) => {\n return (\n
    \n \n

    {plugin.name}

    \n {plugin.description}\n     \n
    \n )\n })\n }\n
    \n
    \n \n
    \n" }, { "path": "site/src/components/icons/BootstrapWhiteFillIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n Bootstrap\n \n \n\n" }, { "path": "site/src/components/icons/CircleSquareIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n \n \n \n\n" }, { "path": "site/src/components/icons/DropletFillIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n \n \n\n" }, { "path": "site/src/components/icons/GitHubIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n GitHub\n \n \n\n" }, { "path": "site/src/components/icons/HamburgerIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n \n \n\n" }, { "path": "site/src/components/icons/OpenCollectiveIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n Open Collective\n \n \n \n\n" }, { "path": "site/src/components/icons/Symbols.astro", "content": "---\n---\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "site/src/components/icons/XIcon.astro", "content": "---\nimport type { SvgIconProps } from '@libs/icon'\n\ntype Props = SvgIconProps\n\nconst { class: className, height, width } = Astro.props\n---\n\n\n X\n \n \n\n" }, { "path": "site/src/components/shortcodes/AddedIn.astro", "content": "---\n/*\n * Outputs badge to identify the first version something was added\n */\n\ninterface Props {\n version: string\n}\n\nconst { version } = Astro.props\n---\n\nAdded in v{version}\n" }, { "path": "site/src/components/shortcodes/BsTable.astro", "content": "---\ninterface Props {\n /**\n * The CSS class to apply to the table.\n * Note that the prop is not used in this component, but in a rehype plugin applying the classes to the table element\n * directly on the HTML AST (HAST) generated by Astro.\n * @default \"table\"\n * @see src/libs/rehype.ts\n */\n class?: string\n}\n---\n\n
    \n \n
    \n" }, { "path": "site/src/components/shortcodes/Callout.astro", "content": "---\nimport { getCalloutByName } from '@libs/content'\nimport type { MarkdownInstance } from 'astro'\n\ninterface Props {\n /**\n * The name of an existing callout to display located in `src/content/callouts`.\n * This will override any content passed in via the default slot.\n */\n name?:\n | 'danger-async-methods'\n | 'info-mediaqueries-breakpoints'\n | 'info-npm-starter'\n | 'info-prefersreducedmotion'\n | 'info-sanitizer'\n | 'warning-color-assistive-technologies'\n | 'warning-data-bs-title-vs-title'\n | 'warning-input-support'\n /**\n * The type of callout to display. One of `info`, `danger`, or `warning`.\n * @default 'info'\n */\n type?: 'danger' | 'info' | 'warning'\n}\n\nconst { name, type = 'info' } = Astro.props\n\nlet Content: MarkdownInstance<{}>['Content'] | undefined\n\nif (name) {\n const callout = await getCalloutByName(name)\n\n if (!callout) {\n throw new Error(`Could not find callout with name '${name}'.`)\n }\n\n const namedCallout = await callout.render()\n Content = namedCallout.Content\n}\n---\n\n
    \n {Content ? : }\n
    \n" }, { "path": "site/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro", "content": "---\n/*\n * Outputs message about dark mode component variants being deprecated in v5.3.\n */\n\ninterface Props {\n component: string\n}\n\nconst { component } = Astro.props\n---\n\n
    \n

    \n Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes.\n Instead of adding .{component}-dark, set data-bs-theme=\"dark\" on the root element, a parent\n wrapper, or the component itself.\n

    \n
    \n" }, { "path": "site/src/components/shortcodes/Code.astro", "content": "---\nimport fs from 'node:fs'\nimport path from 'node:path'\nimport { Prism } from '@astrojs/prism'\n\ninterface Props {\n /**\n * The CSS class(es) to be added to the `pre` HTML element when rendering code blocks in Markdown.\n * Note that this prop is not used when the component is invoked directly.\n */\n class?: string\n /**\n * The code to highlight.\n * If an array is passed, elements will be joined with a new line.\n */\n code?: string | string[]\n /**\n * The CSS class(es) to be added to the `div` wrapper HTML element.\n */\n containerClass?: string\n /**\n * The language to use for highlighting.\n * @see https://prismjs.com/#supported-languages\n */\n lang?: string\n /**\n * If the `filePath` prop is defined, this prop can be used to specify a regex containing a match group to extract\n * only a part of the file.\n */\n fileMatch?: string\n /**\n * A path to the file containing the code to highlight relative to the root of the repository.\n * This takes precedence over the `code` prop.\n */\n filePath?: string\n /**\n * Defines if the `` component is nested inside an `` component or not.\n * @default false\n */\n nestedInExample?: boolean\n}\n\nconst { class: className, code, containerClass, fileMatch, filePath, lang, nestedInExample = false } = Astro.props\n\nlet codeToDisplay = filePath\n ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')\n : Array.isArray(code)\n ? code.join('\\n')\n : code\n\nif (filePath && fileMatch && codeToDisplay) {\n const match = codeToDisplay.match(new RegExp(fileMatch))\n\n if (!match || !match[0]) {\n throw new Error(`The file at ${filePath} does not contains a match for the regex '${fileMatch}'.`)\n }\n\n codeToDisplay = match[0]\n}\n---\n\n\n\n
    \n {\n nestedInExample\n ? (<>)\n : Astro.slots.has('pre')\n ? (\n \n )\n : (\n
    \n \n
    \n )\n }\n
    \n {\n codeToDisplay && lang ? (\n \n ) : (\n /* prettier-ignore */
    \n )\n }\n
    \n
    \n" }, { "path": "site/src/components/shortcodes/DeprecatedIn.astro", "content": "---\n/*\n * Outputs badge to identify the version something was deprecated\n */\n\ninterface Props {\n version: string\n}\n\nconst { version } = Astro.props\n---\n\n\n Deprecated in v{version}\n\n" }, { "path": "site/src/components/shortcodes/Example.astro", "content": "---\nimport { replacePlaceholdersInHtml } from '@libs/placeholder'\nimport Code from '@components/shortcodes/Code.astro'\n\ninterface Props {\n /**\n * Defines if extra JS snippet should be added to StackBlitz or not.\n * @default false\n */\n addStackblitzJs?: boolean\n /**\n * The example code.\n * If an array is passed, elements will be joined with a new line.\n */\n code: string | string[]\n /**\n * The CSS class(es) to be added to the preview wrapping `div` element.\n */\n class?: string\n /**\n * The preview wrapping `div` element ID.\n */\n id?: string\n /**\n * Language used to display the code.\n * @default 'html'\n */\n lang?: string\n /**\n * Defines if the markup should be visible or not.\n * @default true\n */\n showMarkup?: boolean\n /**\n * Defines if the preview should be visible or not.\n * @default true\n */\n showPreview?: boolean\n}\n\nconst {\n addStackblitzJs = false,\n code,\n class: className,\n id,\n lang = 'html',\n showMarkup = true,\n showPreview = true\n} = Astro.props\n\nlet markup = Array.isArray(code) ? code.join('\\n') : code\nmarkup = replacePlaceholdersInHtml(markup)\n\nconst simplifiedMarkup = markup\n .replace(\n //g,\n (match, classes) => `\"...\"`\n )\n .replace(\n //g,\n (match, classes) => `\"...\"`\n )\n---\n\n
    \n {\n showPreview && (\n
    \n \n
    \n )\n }\n\n {\n showMarkup && (\n <>\n {showPreview && (\n
    \n {lang}\n
    \n \n \n \n \n \n \n
    \n
    \n )}\n \n \n )\n }\n
    \n" }, { "path": "site/src/components/shortcodes/GuideFooter.mdx", "content": "
    \n\n_See something wrong or out of date here? Please [open an issue on GitHub]([[config:repo]]/issues/new/choose). Need help troubleshooting? [Search or start a discussion]([[config:repo]]/discussions) on GitHub._\n" }, { "path": "site/src/components/shortcodes/JsDataAttributes.mdx", "content": "As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation=\"{value}\"`. Make sure to change the case type of the option name from “_camelCase_” to “_kebab-case_” when passing the options via data attributes. For example, use `data-bs-custom-class=\"beautifier\"` instead of `data-bs-customClass=\"beautifier\"`.\n\nAs of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{\"delay\":0, \"title\":123}'` and `data-bs-title=\"456\"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{\"show\":0,\"hide\":150}'`.\n\nThe final configuration object is the merged result of `data-bs-config`, `data-bs-`, and `js object` where the latest given key-value overrides the others.\n" }, { "path": "site/src/components/shortcodes/JsDismiss.astro", "content": "---\nimport Code from '@shortcodes/Code.astro'\n\ninterface Props {\n name: string\n}\n\nconst { name } = Astro.props\n---\n\n

    \n Dismissal can be achieved with the data-bs-dismiss attribute on a button within the {name} as demonstrated below:\n

    \n\n`}\n lang=\"html\"\n/>\n\n

    \n or on a button outside the {name} using the additional data-bs-target as demonstrated below:\n

    \n\n`}\n lang=\"html\"\n/>\n" }, { "path": "site/src/components/shortcodes/JsDocs.astro", "content": "---\nimport fs from 'node:fs'\nimport { getConfig } from '@libs/config'\nimport Code from '@shortcodes/Code.astro'\n\n// Prints everything between `// js-docs-start \"name\"` and `// js-docs-end \"name\"`\n// comments in the docs.\n\ninterface Props {\n /**\n * Reference name used to find the content to display within the content of the `file` prop.\n */\n name: string\n /**\n * File path that contains the content to display relative to the root of the repository.\n */\n file: string\n}\n\nconst { name, file } = Astro.props\n\nif (!name || !file) {\n throw new Error(\n `Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.`\n )\n}\n\nlet content: string\n\ntry {\n const fileContent = fs.readFileSync(file, 'utf8')\n\n const matches = fileContent.match(new RegExp(`\\/\\/ js-docs-start ${name}\\n((?:.|\\n)*)\\/\\/ js-docs-end ${name}`, 'm'))\n\n if (!matches || !matches[1]) {\n throw new Error(\n `Failed to find the content named '${name}', make sure that '// js-docs-start ${name}' and '// js-docs-end ${name}' are defined.`\n )\n }\n\n content = matches[1]\n\n // Fix the indentation by removing extra spaces at the beginning of each line\n const lines = content.split('\\n')\n const spaceCounts = lines.filter((line) => line.trim().length > 0).map((line) => line.match(/^ */)[0].length)\n const minSpaces = spaceCounts.length ? Math.min(...spaceCounts) : 0\n content = lines.map((line) => line.slice(minSpaces)).join('\\n')\n} catch (error) {\n throw new Error(`Failed to find the content to render in the '' component at '${file}'.`, {\n cause: error\n })\n}\n---\n\n\n
    \n \n {file}\n \n
    \n \n
    \n
    \n    \n" }, { "path": "site/src/components/shortcodes/Placeholder.astro", "content": "---\nimport { getPlaceholder, type PlaceholderOptions } from '@libs/placeholder'\n\ntype Props = Partial\n\nconst {\n options: { background, color, showText, showTitle, text, title },\n props,\n type\n} = getPlaceholder(Astro.props)\n---\n\n{\n type === 'img' ? (\n \n ) : (\n \n {showTitle && {title}}\n \n {showText && (\n \n {text}\n \n )}\n \n )\n}\n" }, { "path": "site/src/components/shortcodes/ScssDocs.astro", "content": "---\nimport fs from 'node:fs'\nimport { getConfig } from '@libs/config'\nimport Code from '@shortcodes/Code.astro'\n\n// Prints everything between `// scss-docs-start \"name\"` and `// scss-docs-end \"name\"`\n// comments in the docs.\n\ninterface Props {\n /**\n * Reference name used to find the content to display within the content of the `file` prop.\n */\n name: string\n /**\n * File path that contains the content to display relative to the root of the repository.\n */\n file: string\n}\n\nconst { name, file } = Astro.props\n\nif (!name || !file) {\n throw new Error(\n `Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.`\n )\n}\n\nlet content: string\n\ntry {\n const fileContent = fs.readFileSync(file, 'utf8')\n\n const matches = fileContent.match(\n new RegExp(`\\/\\/ scss-docs-start ${name}\\n((?:.|\\n)*)\\/\\/ scss-docs-end ${name}`, 'm')\n )\n\n if (!matches || !matches[1]) {\n throw new Error(\n `Failed to find the content named '${name}', make sure that '// scss-docs-start ${name}' and '// scss-docs-end ${name}' are defined.`\n )\n }\n\n content = matches[1].replaceAll(' !default', '')\n\n // Fix the indentation by removing extra spaces at the beginning of each line\n const lines = content.split('\\n')\n const spaceCounts = lines.filter((line) => line.trim().length > 0).map((line) => line.match(/^ */)[0].length)\n const minSpaces = spaceCounts.length ? Math.min(...spaceCounts) : 0\n content = lines.map((line) => line.slice(minSpaces)).join('\\n')\n} catch (error) {\n throw new Error(`Failed to find the content to render in the '' component at '${file}'.`, {\n cause: error\n })\n}\n---\n\n\n
    \n \n {file}\n \n
    \n \n
    \n
    \n    \n" }, { "path": "site/src/components/shortcodes/Table.astro", "content": "---\nimport Code from '@shortcodes/Code.astro'\nimport Example from '@shortcodes/Example.astro'\nimport * as tableContent from '@shortcodes/TableContent.md'\n\ninterface Props {\n /**\n * Any class(es) to be added to the `` element (both in the example and code snippet).\n */\n class?: string\n /**\n * Show a simplified version in the example code snippet by replacing the table content inside `
    ` & `
    `\n * with `...`.\n * @default true\n */\n simplified?: boolean\n}\n\nconst { class: className, simplified = true } = Astro.props\n\nconst tableCode = `\n${simplified ? ' ...' : await tableContent.compiledContent()}\n`\n\nconst exampleCode = `\n${await tableContent.compiledContent()}\n`\n---\n\n\n\n\n" }, { "path": "site/src/components/shortcodes/TableContent.md", "content": " \n \n #\n First\n Last\n Handle\n \n \n \n \n 1\n Mark\n Otto\n @mdo\n \n \n 2\n Jacob\n Thornton\n @fat\n \n \n 3\n John\n Doe\n @social\n \n \n" }, { "path": "site/src/content/callouts/danger-async-methods.md", "content": "**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/[[config:docs_version]]/getting-started/javascript/#asynchronous-functions-and-transitions)\n" }, { "path": "site/src/content/callouts/info-mediaqueries-breakpoints.md", "content": "**Why subtract .02px?** Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.\n" }, { "path": "site/src/content/callouts/info-npm-starter.md", "content": "**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.\n" }, { "path": "site/src/content/callouts/info-prefersreducedmotion.md", "content": "The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/[[config:docs_version]]/getting-started/accessibility/#reduced-motion).\n" }, { "path": "site/src/content/callouts/info-sanitizer.md", "content": "By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/[[config:docs_version]]/getting-started/javascript/#sanitizer) for more details.\n" }, { "path": "site/src/content/callouts/warning-color-assistive-technologies.md", "content": "**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [_sufficient_ color contrast](/docs/[[config:docs_version]]/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.\n" }, { "path": "site/src/content/callouts/warning-data-bs-title-vs-title.md", "content": "Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.\n" }, { "path": "site/src/content/callouts/warning-input-support.md", "content": "Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox.\n" }, { "path": "site/src/content/config.ts", "content": "import { z, defineCollection } from 'astro:content'\n\nconst docsSchema = z.object({\n added: z\n .object({\n show_badge: z.boolean().optional(),\n version: z.string()\n })\n .optional(),\n aliases: z.string().or(z.string().array()).optional(),\n description: z.string(),\n direction: z.literal('rtl').optional(),\n extra_js: z\n .object({\n async: z.boolean().optional(),\n src: z.string()\n })\n .array()\n .optional(),\n sections: z\n .object({\n description: z.string(),\n title: z.string()\n })\n .array()\n .optional(),\n thumbnail: z.string().optional(),\n title: z.string(),\n toc: z.boolean().optional()\n})\n\nconst docsCollection = defineCollection({\n schema: docsSchema\n})\n\nconst calloutsSchema = z.object({})\n\nconst calloutsCollection = defineCollection({\n schema: calloutsSchema\n})\n\nexport const collections = {\n docs: docsCollection,\n callouts: calloutsCollection\n}\n" }, { "path": "site/src/content/docs/about/brand.mdx", "content": "---\ntitle: Brand guidelines\ndescription: Documentation and examples for Bootstrap’s logo and brand usage guidelines.\ntoc: true\n---\n\nHave a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.\n\n## Logo\n\nWhen referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects.\n\n
    \n \"Bootstrap\"\n
    \n\nOur logo mark is also available in black and white. All rules for our primary logo apply to these as well.\n\n
    \n
    \n \"Bootstrap\"\n
    \n
    \n \"Bootstrap\"\n
    \n
    \n\n## Name\n\nBootstrap should always be referred to as just **Bootstrap**. No capital _s_.\n\n
    \n
    \n
    Bootstrap
    \n Correct\n
    \n
    \n
    BootStrap
    \n Incorrect\n
    \n
    \n" }, { "path": "site/src/content/docs/about/license.mdx", "content": "---\ntitle: License FAQs\ndescription: Commonly asked questions about Bootstrap’s open source license.\n---\n\nBootstrap is released under the MIT license and is copyright {new Date().getFullYear()}. Boiled down to smaller chunks, it can be described with the following conditions.\n\n## It requires you to:\n\n- Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works\n\n## It permits you to:\n\n- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes\n- Use Bootstrap in packages or distributions that you create\n- Modify the source code\n- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license\n\n## It forbids you to:\n\n- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty\n- Hold the creators or copyright holders of Bootstrap liable\n- Redistribute any piece of Bootstrap without proper attribution\n- Use any marks owned by Bootstrap in any way that might state or imply that Bootstrap endorses your distribution\n- Use any marks owned by Bootstrap in any way that might state or imply that you created the Bootstrap software in question\n\n## It does not require you to:\n\n- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it\n- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)\n\nThe full Bootstrap license is located [in the project repository]([[config:repo]]/blob/v[[config:current_version]]/LICENSE) for more information.\n" }, { "path": "site/src/content/docs/about/overview.mdx", "content": "---\ntitle: About Bootstrap\ndescription: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.\naliases:\n - \"/about/\"\n - \"/docs/[[config:docs_version]]/about/\"\n---\n\n## Team\n\nBootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.\n\n## History\n\nOriginally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.\n\nBootstrap was created at Twitter in mid-2010 by [@mdo](https://x.com/mdo) and [@fat](https://x.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.x.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.\n\nOriginally [released](https://blog.x.com/developer/en_us/a/2011/bootstrap-twitter) on , we’ve since had over [twenty releases]([[config:repo]]/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.\n\nWith Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.\n\nOur latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.\n\n## Get involved\n\nGet involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop.\n" }, { "path": "site/src/content/docs/about/team.mdx", "content": "---\ntitle: Team\ndescription: An overview of the founding team and core contributors to Bootstrap.\n---\n\nimport { getData } from '@libs/data'\n\nBootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.\n\n
    \n {getData('core-team').map((member) => {\n return (\n \n {`@${member.user}`}\n \n {member.name} @{member.user}\n \n \n )\n })}\n
    \n\nGet involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop.\n" }, { "path": "site/src/content/docs/about/translations.mdx", "content": "---\ntitle: Translations\ndescription: Links to community-translated Bootstrap documentation sites.\n---\n\nimport { getData } from '@libs/data'\n\nCommunity members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up-to-date.\n\n\n\n**We don’t help organize or host translations, we just link to them.**\n\nFinished a new or better translation? Open a pull request to add it to our list.\n" }, { "path": "site/src/content/docs/components/accordion.mdx", "content": "---\ntitle: Accordion\ndescription: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.\naliases:\n - \"/components/\"\n - \"/docs/[[config:docs_version]]/components/\"\ntoc: true\n---\n\n## How it works\n\nThe accordion uses [collapse]([[docsref:/components/collapse]]) internally to make it collapsible.\n\n\n\n## Example\n\nClick the accordions below to expand/collapse the accordion content.\n\nTo render an accordion that’s expanded by default:\n- add the `.show` class on the `.accordion-collapse` element.\n- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.\n\n\n
    \n

    \n \n

    \n
    \n
    \n This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n `} />\n\n### Flush\n\nAdd `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.\n\n\n
    \n

    \n \n

    \n
    \n
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item’s accordion body.
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
    \n
    \n
    \n `} />\n\n### Always open\n\nOmit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened.\n\n\n
    \n

    \n \n

    \n
    \n
    \n This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n
    \n

    \n \n

    \n
    \n
    \n This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
    \n
    \n
    \n `} />\n\n## Accessibility\n\nPlease read the [collapse accessibility section]([[docsref:/components/collapse#accessibility]]) for more information.\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n\n## Usage\n\nThe collapse plugin utilizes a few classes to handle the heavy lifting:\n\n- `.collapse` hides the content\n- `.collapse.show` shows the content\n- `.collapsing` is added when the transition starts, and removed when it finishes\n\nThese classes can be found in `_transitions.scss`.\n\n### Via data attributes\n\nJust add `data-bs-toggle=\"collapse\"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you’d like it to default open, add the additional class `show`.\n\nTo add accordion group management to a collapsible area, add the data attribute `data-bs-parent=\"#selector\"`.\n\n### Via JavaScript\n\nEnable manually with:\n\n```js\nconst accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')\nconst accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))\n```\n\n### Options\n\n\n\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n`parent` | selector, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |\n`toggle` | boolean | `true` | Toggles the collapsible element on invocation. |\n\n\n### Methods\n\n\n\nActivates your content as a collapsible element. Accepts an optional options `object`.\n\nYou can create a collapse instance with the constructor, for example:\n\n```js\nconst bsCollapse = new bootstrap.Collapse('#myCollapse', {\n toggle: false\n})\n```\n\n\n| Method | Description |\n| --- | --- |\n| `dispose` | Destroys an element’s collapse. (Removes stored data on the DOM element) |\n| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)`. |\n| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)`. |\n| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). |\n| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). |\n| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |\n\n\n### Events\n\nBootstrap’s collapse class exposes a few events for hooking into collapse functionality.\n\n\n| Event type | Description |\n| --- | --- |\n| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. |\n| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |\n| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. |\n| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |\n\n\n```js\nconst myCollapsible = document.getElementById('myCollapsible')\nmyCollapsible.addEventListener('hidden.bs.collapse', event => {\n // do something...\n})\n```\n" }, { "path": "site/src/content/docs/components/alerts.mdx", "content": "---\ntitle: Alerts\ndescription: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.\ntoc: true\n---\n\nimport { getData } from '@libs/data'\n\n## Examples\n\nAlerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).\n\n\n**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).\n\n\n `
    \n A simple ${themeColor.name} alert—check it out!\n
    `)} />\n\n\n\n### Live example\n\nClick the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.\n\n\n`} />\n\nWe use the following JavaScript to trigger our live alert demo:\n\n\n\n### Link color\n\nUse the `.alert-link` utility class to quickly provide matching colored links within any alert.\n\n `
    \n A simple ${themeColor.name} alert with an example link. Give it a click if you like.\n
    `)} />\n\n### Additional content\n\nAlerts can also contain additional HTML elements like headings, paragraphs and dividers.\n\n\n

    Well done!

    \n

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    \n
    \n

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    \n `} />\n\n### Icons\n\nSimilarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.\n\n\n \n \n \n
    \n An example alert with an icon\n
    \n `} />\n\nNeed more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.\n\n\n \n \n \n \n \n \n \n \n \n \n\n
    \n \n
    \n An example alert with an icon\n
    \n
    \n
    \n \n
    \n An example success alert with an icon\n
    \n
    \n
    \n \n
    \n An example warning alert with an icon\n
    \n
    \n
    \n \n
    \n An example danger alert with an icon\n
    \n
    `} />\n\n### Dismissing\n\nUsing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:\n\n- Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.\n- Add a [close button]([[docsref:/components/close-button]]) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.\n- On the close button, add the `data-bs-dismiss=\"alert\"` attribute, which triggers the JavaScript functionality. Be sure to use the `\n `} />\n\n\nWhen an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex=\"-1\"` to the element.\n\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n\n### Sass mixins\n\n\n\n\n\n### Sass loops\n\nLoop that generates the modifier classes with an overriding of CSS variables.\n\n\n\n## JavaScript behavior\n\n### Initialize\n\nInitialize elements as alerts\n\n```js\nconst alertList = document.querySelectorAll('.alert')\nconst alerts = [...alertList].map(element => new bootstrap.Alert(element))\n```\n\n\nFor the sole purpose of dismissing an alert, it isn’t necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss=\"alert\"`, the component will be initialized automatically and properly dismissed.\n\nSee the [triggers](#triggers) section for more details.\n\n\n### Triggers\n\n\n\n**Note that closing an alert will remove it from the DOM.**\n\n### Methods\n\nYou can create an alert instance with the alert constructor, for example:\n\n```js\nconst bsAlert = new bootstrap.Alert('#myAlert')\n```\n\nThis makes an alert listen for click events on descendant elements which have the `data-bs-dismiss=\"alert\"` attribute. (Not necessary when using the data-api’s auto-initialization.)\n\n\n| Method | Description |\n| --- | --- |\n| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |\n| `dispose` | Destroys an element’s alert. (Removes stored data on the DOM element) |\n| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |\n| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`. |\n\n\nBasic usage:\n\n```js\nconst alert = bootstrap.Alert.getOrCreateInstance('#myAlert')\nalert.close()\n```\n\n### Events\n\nBootstrap’s alert plugin exposes a few events for hooking into alert functionality.\n\n\n| Event | Description |\n| --- | --- |\n| `close.bs.alert` | Fires immediately when the `close` instance method is called. |\n| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |\n\n\n```js\nconst myAlert = document.getElementById('myAlert')\nmyAlert.addEventListener('closed.bs.alert', event => {\n // do something, for instance, explicitly move focus to the most appropriate element,\n // so it doesn’t get lost/reset to the start of the page\n // document.getElementById('...').focus()\n})\n```\n" }, { "path": "site/src/content/docs/components/badge.mdx", "content": "---\ntitle: Badges\ndescription: Documentation and examples for badges, our small count and labeling component.\ntoc: true\n---\n\nimport { getData } from '@libs/data'\n\n## Examples\n\nBadges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.\n\n### Headings\n\nExample heading New\n

    Example heading New

    \n

    Example heading New

    \n

    Example heading New

    \n
    Example heading New
    \n
    Example heading New
    `} />\n\n### Buttons\n\nBadges can be used as part of links or buttons to provide a counter.\n\n\n Notifications 4\n `} />\n\nNote that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.\n\nUnless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.\n\n### Positioned\n\nUse utilities to modify a `.badge` and position it in the corner of a link or button.\n\n\n Inbox\n \n 99+\n unread messages\n \n `} />\n\nYou can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.\n\n\n Profile\n \n New alerts\n \n `} />\n\n## Background colors\n\n\n\nSet a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.\n\n `${themeColor.title}`)} />\n\n\n\n## Pill badges\n\nUse the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.\n\n `${themeColor.title}`)} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n" }, { "path": "site/src/content/docs/components/breadcrumb.mdx", "content": "---\ntitle: Breadcrumb\ndescription: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.\ntoc: true\n---\n\n## Example\n\nUse an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.\n\n\n
      \n
    1. Home
      2. \n
    \n \n\n \n\n `} />\n\n## Dividers\n\nDividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.\n\n';\" aria-label=\"breadcrumb\">\n
      \n
    1. Home
      2. \n
    2. Library
      3. \n
    \n `} />\n\nWhen modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:\n\n```scss\n$breadcrumb-divider: quote(\">\");\n```\n\nIt’s also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.\n\n\n**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]([[docsref:/customize/sass#escape-svg]]). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber’s explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.\n\n\n\n
      \n
    1. Home
      2. \n
    2. Library
      3. \n
    \n `} />\n\n```scss\n$breadcrumb-divider: url(\"data:image/svg+xml,\");\n```\n\nYou can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.\n\n\n
      \n
    1. Home
      2. \n
    2. Library
      3. \n
    \n `} />\n\n\n```scss\n$breadcrumb-divider: none;\n```\n\n## Accessibility\n\nSince breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as `aria-label=\"breadcrumb\"` to describe the type of navigation provided in the ``} />\n\n## Directions\n\n\n**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.\n\n\n### Centered\n\nMake the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.\n\n\n \n \n `} />\n\n### Dropup\n\nTrigger dropdown menus above elements by adding `.dropup` to the parent element.\n\n\n \n \n \n
    \n \n \n \n
    `} />\n\n```html\n\n
    \n \n
      \n \n
    \n
    \n\n\n
    \n \n \n
      \n \n
    \n
    \n```\n\n### Dropup centered\n\nMake the dropup menu centered above the toggle with `.dropup-center` on the parent element.\n\n\n \n \n `} />\n\n### Dropend\n\nTrigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.\n\n\n \n \n \n
    \n \n \n \n
    `} />\n\n```html\n\n
    \n \n
      \n \n
    \n
    \n\n\n
    \n \n \n
      \n \n
    \n
    \n```\n\n### Dropstart\n\nTrigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element.\n\n\n \n \n \n
    \n \n \n \n
    `} />\n\n```html\n\n
    \n \n
      \n \n
    \n
    \n\n\n
    \n \n
      \n \n
    \n \n
    \n```\n\n## Menu items\n\nYou can use `` or `\n
      \n
      • \n
      • \n
      • \n
    \n `} />\n\nYou can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.\n\n\n
  • Dropdown item text
    • \n
  • Action
    • \n
  • Another action
    • \n
  • Something else here
    • \n `} />\n\n### Active\n\nAdd `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set.\n\n\n
  • Regular link
    • \n
  • Active link
    • \n
  • Another link
    • \n `} />\n\n### Disabled\n\nAdd `.disabled` to items in the dropdown to **style them as disabled**.\n\n\n
  • Regular link
    • \n
  • Disabled link
    • \n
  • Another link
    • \n `} />\n\n## Menu alignment\n\nBy default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes.\n\nAdd `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side.\n\n\n**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar.\n\n\n\n \n
      \n
      • \n
      • \n
      • \n
    \n `} />\n\n### Responsive alignment\n\nIf you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display=\"static\"` attribute and use the responsive variation classes.\n\nTo align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.\n\n\n \n
      \n
      • \n
      • \n
      • \n
    \n `} />\n\nTo align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.\n\n\n \n
      \n
      • \n
      • \n
      • \n
    \n `} />\n\nNote that you don’t need to add a `data-bs-display=\"static\"` attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.\n\n### Alignment options\n\nTaking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.\n\n\n \n \n \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    `} />\n\n## Menu content\n\n### Headers\n\nAdd a header to label sections of actions in any dropdown menu.\n\n\n
  • Dropdown header
    • \n
  • Action
    • \n
  • Another action
    • \n `} />\n\n### Dividers\n\nSeparate groups of related menu items with a divider.\n\n\n
  • Action
    • \n
  • Another action
    • \n
  • Something else here
    • \n
    • \n
  • Separated link
    • \n `} />\n\n### Text\n\nPlace any freeform text within a dropdown menu with text and use [spacing utilities]([[docsref:/utilities/spacing]]). Note that you’ll likely need additional sizing styles to constrain the menu width.\n\n\n

    \n Some example text that’s free-flowing within the dropdown menu.\n

    \n

    \n And this is more example text.\n

    \n `} />\n\n### Forms\n\nPut a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]([[docsref:/utilities/spacing]]) to give it the negative space you require.\n\n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n
    \n
    \n New around here? Sign up\n Forgot password?\n `} />\n\n\n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n
    \n `} />\n\n## Dropdown options\n\nUse `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.\n\n\n
    \n \n \n
    \n
    \n \n \n \n
    \n `} />\n\n### Auto close behavior\n\nBy default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.\n\n\n \n \n \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    `} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n\nDropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.\n\n- `--bs-dropdown-item-border-radius`\n\n\nCustomization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.\n\n\n\n### Sass variables\n\nVariables for all dropdowns:\n\n\n\nVariables for the [dark dropdown](#dark-dropdowns):\n\n\n\nVariables for the CSS-based carets that indicate a dropdown’s interactivity:\n\n\n\n### Sass mixins\n\nMixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.\n\n\n\n## Usage\n\nVia data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle=\"dropdown\"` attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.\n\n\nOn touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOs’ event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed.\n\n\n### Via data attributes\n\nAdd `data-bs-toggle=\"dropdown\"` to a link or button to toggle a dropdown.\n\n```html\n
    \n \n
      \n ...\n
    \n
    \n```\n\n### Via JavaScript\n\n\nDropdowns must have `data-bs-toggle=\"dropdown\"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api.\n\n\nCall the dropdowns via JavaScript:\n\n```js\nconst dropdownElementList = document.querySelectorAll('.dropdown-toggle')\nconst dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))\n```\n\n### Options\n\n\n\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
    • `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
    • `false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing Esc key)
    • `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
    • `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
    Note: the dropdown can always be closed with the Esc key. |\n| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper’s preventOverflow modifier). By default it’s `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |\n| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |\n| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset=\"10,20\"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper’s [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |\n| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |\n| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper’s [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |\n    \n\n#### Using function with `popperConfig`\n\n```js\nconst dropdown = new bootstrap.Dropdown(element, {\n popperConfig(defaultBsPopperConfig) {\n // const newPopperConfig = {...}\n // use defaultBsPopperConfig if needed...\n // return newPopperConfig\n }\n})\n```\n\n### Methods\n\n\n| Method | Description |\n| --- | --- |\n| `dispose` | Destroys an element’s dropdown. (Removes stored data on the DOM element) |\n| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. |\n| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. |\n| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |\n| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |\n| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |\n| `update` | Updates the position of an element’s dropdown. |\n\n\n### Events\n\nAll dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`’s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.\n\n\n| Event type | Description |\n| --- | --- |\n| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. |\n| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |\n| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. |\n| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |\n\n\n```js\nconst myDropdown = document.getElementById('myDropdown')\nmyDropdown.addEventListener('show.bs.dropdown', event => {\n // do something...\n})\n```\n" }, { "path": "site/src/content/docs/components/list-group.mdx", "content": "---\ntitle: List group\ndescription: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.\ntoc: true\n---\n\nimport { getData } from '@libs/data'\n\n## Basic example\n\nThe most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.\n\n\n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
  • A fourth item
    • \n
  • And a fifth one
    • \n `} />\n\n## Active items\n\nAdd `.active` to a `.list-group-item` to indicate the current active selection.\n\n\n
  • An active item
    • \n
  • A second item
    • \n
  • A third item
    • \n
  • A fourth item
    • \n
  • And a fifth one
    • \n `} />\n\n## Links and buttons\n\nUse ``s or `\n \n \n \n \n `} />\n\n## Flush\n\nAdd `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).\n\n\n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
  • A fourth item
    • \n
  • And a fifth one
    • \n `} />\n\n## Numbered\n\nAdd the `.list-group-numbered` modifier class (and optionally use an `
      ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
        `s default browser styling) for better placement inside list group items and to allow for better customization.\n\nNumbers are generated by `counter-reset` on the `
          `, and then styled and placed with a `::before` pseudo-element on the `
        1. ` with `counter-increment` and `content`.\n\n\n
        2. A list item
          3. \n
        3. A list item
          4. \n
        4. A list item
          5. \n
        `} />\n\nThese work great with custom content as well.\n\n\n
      1. \n
        \n
        Subheading
        \n Content for list item\n
        \n 14\n
        2. \n
      2. \n
        \n
        Subheading
        \n Content for list item\n
        \n 14\n
        3. \n
      3. \n
        \n
        Subheading
        \n Content for list item\n
        \n 14\n
        4. \n
      `} />\n\n## Horizontal\n\nAdd `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**\n\n**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.\n\n `
        \n
      • An item
        • \n
      • A second item
        • \n
      • A third item
        • \n
      `)} />\n\n## Variants\n\n\n**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops).\n\n\nUse contextual classes to style list items with a stateful background and color.\n\n\n
    1. A simple default list group item
      2. \n `,\n ...getData('theme-colors').map((themeColor) => `
    2. A simple ${themeColor.name} list group item
      3. `),\n ``\n ]} />\n\n### For links and buttons\n\nContextual classes also work with `.list-group-item-action` for `      ` and `\n \n
      \n

      Modal body text goes here.

      \n
      \n
      \n \n \n
      \n \n \n \n\n\n```html\n
      \n
      \n
      \n
      \n
      Modal title
      \n \n
      \n
      \n

      Modal body text goes here.

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n```\n\n\nIn the above static example, we use `
      `, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `

      `. If necessary, you can use the [font size utilities]([[docsref:/utilities/text#font-size]]) to control the heading’s appearance. All the following live examples use this approach.\n\n\n### Live demo\n\nToggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      Woo-hoo, you’re reading this text in a modal!

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\nLaunch demo modal\n`} />\n\n```html\n\n\n\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n ...\n
      \n
      \n \n \n
      \n
      \n
      \n
      \n```\n\n### Static backdrop\n\nWhen backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      I will not close if you click outside of me. Don’t even try to press escape key.

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\nLaunch static backdrop modal\n`} />\n\n```html\n\n\n\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n ...\n
      \n
      \n \n \n
      \n
      \n
      \n
      \n```\n\n### Scrolling long content\n\nWhen modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\nLaunch demo modal\n`} />\n\nYou can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.\n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

      \n







































      \n

      This content should appear at the bottom after you scroll.

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\nLaunch demo modal\n`} />\n\n```html\n\n
      \n ...\n
      \n```\n\n### Vertically centered\n\nAdd `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.\n\n\n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      This is a vertically centered modal.

      \n
      \n
      \n \n \n
      \n
      \n
      \n \n\n
      \n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      This is some placeholder content to show a vertically centered modal. We’ve added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

      \n









      \n

      Just like that.

      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\n \n `} />\n\n```html\n\n
      \n ...\n
      \n\n\n
      \n ...\n
      \n```\n\n### Tooltips and popovers\n\n[Tooltips]([[docsref:/components/tooltips]]) and [popovers]([[docsref:/components/popovers]]) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.\n\n\n
      \n
      \n
      \n

      Modal title

      \n \n
      \n
      \n

      Popover in a modal

      \n

      This triggers a popover on click.

      \n
      \n

      Tooltips in a modal

      \n

      This link and that link have tooltips on hover.

      \n
      \n
      \n \n \n
      \n
      \n
      \n \n\n `} />\n\n```html\n
      \n

      Popover in a modal

      \n

      This triggers a popover on click.

      \n
      \n

      Tooltips in a modal

      \n

      This link and that link have tooltips on hover.

      \n
      \n```\n\n### Using the grid\n\nUtilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.\n\n
      \n
      \n
      \n
      \n

      Grids in modals

      \n \n
      \n
      \n
      \n
      \n
      .col-md-4
      \n
      .col-md-4 .ms-auto
      \n
      \n
      \n
      .col-md-3 .ms-auto
      \n
      .col-md-2 .ms-auto
      \n
      \n
      \n
      .col-md-6 .ms-auto
      \n
      \n
      \n
      \n Level 1: .col-sm-9\n
      \n
      \n Level 2: .col-8 .col-sm-6\n
      \n
      \n Level 2: .col-4 .col-sm-6\n
      \n
      \n
      \n
      \n
      \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n\nLaunch demo modal\n`} />\n\n```html\n
      \n
      \n
      \n
      .col-md-4
      \n
      .col-md-4 .ms-auto
      \n
      \n
      \n
      .col-md-3 .ms-auto
      \n
      .col-md-2 .ms-auto
      \n
      \n
      \n
      .col-md-6 .ms-auto
      \n
      \n
      \n
      \n Level 1: .col-sm-9\n
      \n
      \n Level 2: .col-8 .col-sm-6\n
      \n
      \n Level 2: .col-4 .col-sm-6\n
      \n
      \n
      \n
      \n
      \n
      \n```\n\n### Varying modal content\n\nHave a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-bs-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked.\n\nBelow is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.\n\nOpen modal for @mdo\n \n \n\n
      \n
      \n
      \n
      \n

      New message

      \n \n
      \n
      \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n \n \n
      \n
      \n
      \n
      `} />\n\n\n\n### Toggle between modals\n\nToggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.\n\n\n
      \n
      \n
      \n

      Modal 1

      \n \n
      \n
      \n Show a second modal and hide this one with the button below.\n
      \n
      \n \n
      \n
      \n
      \n \n
      \n
      \n
      \n
      \n

      Modal 2

      \n \n
      \n
      \n Hide this modal and show the first with the button below.\n
      \n
      \n \n
      \n
      \n
      \n
      \n `} />\n\n### Change animation\n\nThe `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.\n\nIf you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.\n\n### Remove animation\n\nFor modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.\n\n```html\n
      \n ...\n
      \n```\n\n### Dynamic heights\n\nIf the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal’s position in case a scrollbar appears.\n\n### Accessibility\n\nBe sure to add `aria-labelledby=\"...\"`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don’t need to add `role=\"dialog\"` since we already add it via JavaScript.\n\n### Embedding YouTube videos\n\nEmbedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.\n\n## Optional sizes\n\nModals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.\n\n\n| Size | Class | Modal max-width\n| --- | --- | --- |\n| Small | `.modal-sm` | `300px` |\n| Default | None | `500px` |\n| Large | `.modal-lg` | `800px` |\n| Extra large | `.modal-xl` | `1140px` |\n\n\nOur default modal without modifier class constitutes the “medium” size modal.\n\nExtra large modal\n \n `} />\n\n```html\n
      ...
      \n
      ...
      \n
      ...
      \n```\n\n
      \n
      \n
      \n
      \n

      Extra large modal

      \n \n
      \n
      \n ...\n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Large modal

      \n \n
      \n
      \n ...\n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Small modal

      \n \n
      \n
      \n ...\n
      \n
      \n
      \n
      \n\n## Fullscreen Modal\n\nAnother override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.\n\n\n| Class | Availability |\n| --- | --- |\n| `.modal-fullscreen` | Always |\n| `.modal-fullscreen-sm-down` | `576px` |\n| `.modal-fullscreen-md-down` | `768px` |\n| `.modal-fullscreen-lg-down` | `992px` |\n| `.modal-fullscreen-xl-down` | `1200px` |\n| `.modal-fullscreen-xxl-down` | `1400px` |\n\n\nFull screen\n \n \n \n \n `} />\n\n```html\n\n
      \n ...\n
      \n```\n\n
      \n
      \n
      \n
      \n

      Full screen modal

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Full screen below sm

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Full screen below md

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Full screen below lg

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Full screen below xl

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n
      \n
      \n
      \n
      \n

      Full screen below xxl

      \n \n
      \n
      \n ...\n
      \n
      \n \n
      \n
      \n
      \n
      \n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n\n\n### Sass variables\n\n\n\n### Sass loops\n\n[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.\n\n\n\n## Usage\n\nThe modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.\n\n### Via data attributes\n\n#### Toggle\n\nActivate a modal without writing JavaScript. Set `data-bs-toggle=\"modal\"` on a controller element, like a button, along with a `data-bs-target=\"#foo\"` or `href=\"#foo\"` to target a specific modal to toggle.\n\n```html\n\n```\n\n#### Dismiss\n\n\n\n\nWhile both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk.\n\n\n### Via JavaScript\n\nCreate a modal with a single line of JavaScript:\n\n```js\nconst myModal = new bootstrap.Modal(document.getElementById('myModal'), options)\n// or\nconst myModalAlternative = new bootstrap.Modal('#myModal', options)\n```\n\n### Options\n\n\n\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `backdrop` | boolean, `’static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn’t close the modal when clicked. |\n| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |\n| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |\n\n\n### Methods\n\n\n\n#### Passing options\n\nActivates your content as a modal. Accepts an optional options `object`.\n\n```js\nconst myModal = new bootstrap.Modal('#myModal', {\n keyboard: false\n})\n```\n\n\n| Method | Description |\n| --- | --- |\n| `dispose` | Destroys an element’s modal. (Removes stored data on the DOM element) |\n| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. |\n| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized. |\n| `handleUpdate` | Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |\n| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |\n| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. |\n| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |\n\n\n### Events\n\nBootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
      `).\n\n\n| Event | Description |\n| --- | --- |\n| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]([[docsref:/getting-started/javascript#events]]) for more details on event prevention. |\n| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |\n| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |\n| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |\n| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |\n\n\n```js\nconst myModalEl = document.getElementById('myModal')\nmyModalEl.addEventListener('hidden.bs.modal', event => {\n // do something...\n})\n```\n" }, { "path": "site/src/content/docs/components/navbar.mdx", "content": "---\ntitle: Navbar\ndescription: Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.\ntoc: true\n---\n\nimport { getConfig } from '@libs/config'\n\n## How it works\n\nHere’s what you need to know before getting started with the navbar:\n\n- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.\n- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.\n- Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.\n- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.\n- Ensure accessibility by using a ``} />\n\nThis example uses [background]([[docsref:/utilities/background]]) (`bg-body-tertiary`) and [spacing]([[docsref:/utilities/spacing]]) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.\n\n### Brand\n\nThe `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.\n\n#### Text\n\nAdd your text within an element with the `.navbar-brand` class.\n\n\n \n\n \n `} />\n\n#### Image\n\nYou can replace the text within the `.navbar-brand` with an ``.\n\n\n
      \n \n \"Bootstrap\"\n \n
      \n `} />\n\n#### Image and text\n\nYou can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the ``.\n\n\n
      \n \n \"Logo\"\n Bootstrap\n \n
      \n `} />\n\n### Nav\n\nNavbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.\n\nAdd the `.active` class on `.nav-link` to indicate the current page.\n\nPlease note that you should also add the `aria-current` attribute on the active `.nav-link`.\n\n\n
      \n Navbar\n \n
      \n \n
      \n
      \n `} />\n\nAnd because we use classes for our navs, you can avoid the list-based approach entirely if you like.\n\n\n
      \n Navbar\n \n
      \n
      \n Home\n Features\n Pricing\n Disabled\n
      \n
      \n
      \n `} />\n\nYou can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.\n\n\n
      \n Navbar\n \n
      \n \n
      \n
      \n `} />\n\n### Forms\n\nPlace various form controls and components within a navbar:\n\n\n
      \n
      \n \n \n
      \n
      \n `} />\n\nImmediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]([[docsref:/utilities/flex]]) as needed to adjust this behavior.\n\n\n
      \n Navbar\n
      \n \n \n
      \n
      \n `} />\n\nInput groups work, too. If your navbar is an entire form, or mostly a form, you can use the `
      ` element as the container and save some HTML.\n\n\n \n
      \n @\n \n
      \n \n `} />\n\nVarious buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.\n\n\n
      \n \n \n
      \n `} />\n\n### Text\n\nNavbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.\n\n\n
      \n \n Navbar text with an inline element\n \n
      \n `} />\n\nMix and match with other components and utilities as needed.\n\n\n
      \n Navbar w/ text\n \n
      \n \n \n Navbar text with an inline element\n \n
      \n
      \n `} />\n\n## Color schemes\n\n\n**New dark navbars in v5.3.0 —** We’ve deprecated `.navbar-dark` in favor of the new `data-bs-theme=\"dark\"`. Add `data-bs-theme=\"dark\"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]([[docsref:/customize/color-modes]])\n\n---\n\n**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the “light” appearance, and can be overridden with `.navbar-dark`.\n\n\nNavbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply `data-bs-theme=\"dark\"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.\n\n\n
      \n Navbar\n \n
      \n \n
      \n \n \n
      \n
      \n
      \n\n\n\n\n\n`} />\n\n```html\n\n\n\n\n\n```\n\n## Containers\n\nAlthough it’s not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).\n\n\n \n
      `} />\n\nUse any of the responsive containers to change how wide the content in your navbar is presented.\n\n\n
      \n Navbar\n
      \n `} />\n\n## Placement\n\nUse our [position utilities]([[docsref:/utilities/position]]) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).\n\nFixed navbars use `position: fixed`, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements.\n\n\n
      \n Default\n
      \n `} />\n\n\n
      \n Fixed top\n
      \n `} />\n\n\n
      \n Fixed bottom\n
      \n `} />\n\n\n
      \n Sticky top\n
      \n `} />\n\n\n
      \n Sticky bottom\n
      \n `} />\n\n## Scrolling\n\nAdd `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.\n\nPlease note that this behavior comes with a potential drawback of `overflow`—when setting `overflow-y: auto` (required to scroll the content here), `overflow-x` is the equivalent of `auto`, which will crop some horizontal content.\n\nHere’s an example navbar using `.navbar-nav-scroll` with `style=\"--bs-scroll-height: 100px;\"`, with some extra margin utilities for optimum spacing.\n\n\n
      \n Navbar scroll\n \n
      \n \n
      \n \n \n
      \n
      \n
      \n `} />\n\n## Responsive behaviors\n\nNavbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.\n\nFor navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don’t add any `.navbar-expand` class.\n\n### Toggler\n\nNavbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.\n\nWith no `.navbar-brand` shown at the smallest breakpoint:\n\n\n
      \n \n
      \n Hidden brand\n \n
      \n \n \n
      \n
      \n
      \n `} />\n\nWith a brand name shown on the left and toggler on the right:\n\n\n
      \n Navbar\n \n
      \n \n
      \n \n \n
      \n
      \n
      \n `} />\n\nWith a toggler on the left and brand name on the right:\n\n\n
      \n \n Navbar\n
      \n \n
      \n \n \n
      \n
      \n
      \n `} />\n\n### External content\n\nSometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that’s easily done!\n\n\n
      \n
      Collapsed content
      \n Toggleable via the navbar brand.\n
      \n \n `} />\n\nWhen you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document’s structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.\n\n### Offcanvas\n\nTransform your expanding and collapsing navbar into an offcanvas drawer with the [offcanvas component]([[docsref:/components/offcanvas]]). We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.\n\nIn the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.\n\n\n
      \n Offcanvas navbar\n \n
      \n
      \n
      Offcanvas
      \n \n
      \n
      \n \n
      \n \n \n
      \n
      \n
      \n
      \n `} />\n\nTo create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.\n\n```html\n\n```\n\nWhen using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.\n\n\n
      \n Offcanvas dark navbar\n \n
      \n
      \n
      Dark offcanvas
      \n \n
      \n
      \n \n
      \n \n \n
      \n
      \n
      \n
      \n `} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\nSome additional CSS variables are also present on `.navbar-nav`:\n\n\n\nCustomization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.\n\n\n\n### Sass variables\n\nVariables for all navbars:\n\n\n\nVariables for the [dark navbar](#color-schemes):\n\n\n\n### Sass loops\n\n[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.\n\n\n" }, { "path": "site/src/content/docs/components/navs-tabs.mdx", "content": "---\ntitle: Navs and tabs\ndescription: Documentation and examples for how to use Bootstrap’s included navigation components.\naliases: \"/docs/[[config:docs_version]]/components/navs/\"\ntoc: true\n---\n\n## Base nav\n\nNavigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.\n\nThe base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.\n\n\nThe base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.\n\nTo convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.\n\n\n\n
    3. \n Active\n
      4. \n
    4. \n Link\n
      5. \n
    5. \n Link\n
      6. \n
    6. \n Disabled\n
      7. \n `} />\n\nClasses are used throughout, so your markup can be super flexible. Use `
        `s like above, `
          ` if the order of your items is important, or roll your own with a ``} />\n\n## Available styles\n\nChange the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own.\n\n### Horizontal alignment\n\nChange the horizontal alignment of your nav with [flexbox utilities]([[docsref:/utilities/flex#justify-content]]). By default, navs are left-aligned, but you can easily change them to center or right-aligned.\n\nCentered with `.justify-content-center`:\n\n\n
        1. \n Active\n
          2. \n
        2. \n Link\n
          3. \n
        3. \n Link\n
          4. \n
        4. \n Disabled\n
          5. \n
      `} />\n\nRight-aligned with `.justify-content-end`:\n\n\n
    7. \n Active\n
      8. \n
    8. \n Link\n
      9. \n
    9. \n Link\n
      10. \n
    10. \n Disabled\n
      11. \n `} />\n\n### Vertical\n\nStack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).\n\n\n
    11. \n Active\n
      12. \n
    12. \n Link\n
      13. \n
    13. \n Link\n
      14. \n
    14. \n Disabled\n
      15. \n `} />\n\nAs always, vertical navigation is possible without `
        `s, too.\n\n\n Active\n Link\n Link\n Disabled\n `} />\n\n### Tabs\n\nTakes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).\n\n\n
      • \n Active\n
        • \n
      • \n Link\n
        • \n
      • \n Link\n
        • \n
      • \n Disabled\n
        • \n
      `} />\n\n### Pills\n\nTake that same HTML, but use `.nav-pills` instead:\n\n\n
    15. \n Active\n
      16. \n
    16. \n Link\n
      17. \n
    17. \n Link\n
      18. \n
    18. \n Disabled\n
      19. \n `} />\n\n### Underline\n\nTake that same HTML, but use `.nav-underline` instead:\n\n\n
    19. \n Active\n
      20. \n
    20. \n Link\n
      21. \n
    21. \n Link\n
      22. \n
    22. \n Disabled\n
      23. \n `} />\n\n### Fill and justify\n\nForce your `.nav`’s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.\n\n\n
    23. \n Active\n
      24. \n
    24. \n Much longer nav link\n
      25. \n
    25. \n Link\n
      26. \n
    26. \n Disabled\n
      27. \n `} />\n\nWhen using a ``} />\n\nFor equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.\n\n\n
    27. \n Active\n
      28. \n
    28. \n Much longer nav link\n
      29. \n
    29. \n Link\n
      30. \n
    30. \n Disabled\n
      31. \n `} />\n\nSimilar to the `.nav-fill` example using a ``} />\n\n## Working with flex utilities\n\nIf you need responsive nav variations, consider using a series of [flexbox utilities]([[docsref:/utilities/flex]]). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.\n\n\n Active\n Longer nav link\n Link\n Disabled\n `} />\n\n## Regarding accessibility\n\nIf you’re using navs to provide a navigation bar, be sure to add a `role=\"navigation\"` to the most logical parent container of the `
        `, or wrap a `
      `} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\nOn the `.nav` base class:\n\n\n\nOn the `.nav-tabs` modifier class:\n\n\n\nOn the `.nav-pills` modifier class:\n\n\n\n\n\nOn the `.nav-underline` modifier class:\n\n\n\n### Sass variables\n\n\n\n## JavaScript behavior\n\nUse the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.\n\n\n
    31. \n \n
      32. \n
    32. \n \n
      33. \n
    33. \n \n
      34. \n
    34. \n \n
      35. \n\n
      \n
      \n

      This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Disabled tab’s associated content.

      \n
      \n
      \n`} />\n\n```html\n
        \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      \n
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      \n```\n\nTo help fit your needs, this works with `
        `-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using `
      \n
      \n
      \n

      This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Disabled tab’s associated content.

      \n
      \n
      \n`} />\n\n```html\n
        \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      • \n \n
        • \n
      \n
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      \n```\n\nAnd with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation=\"vertical\"` to the tab list container.\n\n\n
      \n \n \n \n \n \n
      \n
      \n
      \n

      This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Disabled tab’s associated content.

      \n
      \n
      \n

      This is some placeholder content the Messages tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n

      This is some placeholder content the Settings tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

      \n
      \n
      \n\n`} />\n\n```html\n
      \n
      \n \n \n \n \n \n
      \n
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      \n
      \n```\n\n### Accessibility\n\nDynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role=\"tablist\"`, `role=\"tab\"`, `role=\"tabpanel\"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `\n \n
    35. \n \n
      36. \n
    36. \n \n
      37. \n
    37. \n \n
      38. \n\n\n\n
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      \n```\n\n### Via JavaScript\n\nEnable tabbable tabs via JavaScript (each tab needs to be activated individually):\n\n```js\nconst triggerTabList = document.querySelectorAll('#myTab button')\ntriggerTabList.forEach(triggerEl => {\n const tabTrigger = new bootstrap.Tab(triggerEl)\n\n triggerEl.addEventListener('click', event => {\n event.preventDefault()\n tabTrigger.show()\n })\n})\n```\n\nYou can activate individual tabs in several ways:\n\n```js\nconst triggerEl = document.querySelector('#myTab button[data-bs-target=\"#profile\"]')\nbootstrap.Tab.getInstance(triggerEl).show() // Select tab by name\n\nconst triggerFirstTabEl = document.querySelector('#myTab li:first-child button')\nbootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab\n```\n\n### Fade effect\n\nTo make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.\n\n```html\n
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      ...
      \n
      \n```\n\n### Methods\n\n\n\nActivates your content as a tab element.\n\nYou can create a tab instance with the constructor, for example:\n\n```js\nconst bsTab = new bootstrap.Tab('#myTab')\n```\n\n\n| Method | Description |\n| --- | --- |\n| `dispose` | Destroys an element’s tab. |\n| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. |\n| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. |\n| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). |\n\n\n### Events\n\nWhen showing a new tab, the events fire in the following order:\n\n1. `hide.bs.tab` (on the current active tab)\n2. `show.bs.tab` (on the to-be-shown tab)\n3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)\n4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)\n\nIf no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.\n\n\n| Event type | Description |\n| --- | --- |\n| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |\n| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |\n| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |\n| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |\n\n\n```js\nconst tabEl = document.querySelector('button[data-bs-toggle=\"tab\"]')\ntabEl.addEventListener('shown.bs.tab', event => {\n event.target // newly activated tab\n event.relatedTarget // previous active tab\n})\n```\n" }, { "path": "site/src/content/docs/components/offcanvas.mdx", "content": "---\ntitle: Offcanvas\ndescription: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.\ntoc: true\n---\n\n## How it works\n\nOffcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.\n\n- Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.\n- Similarly, some [source Sass](#sass-variables) variables for offcanvas’s styles and dimensions are inherited from the modal’s variables.\n- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.\n- Similar to modals, only one offcanvas can be shown at a time.\n\n**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.\n\n\n\n## Examples\n\n### Offcanvas components\n\nBelow is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.\n\n\n
      \n
      Offcanvas
      \n \n
      \n
      \n Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.\n
      \n `} />\n\n### Live demo\n\nUse the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.\n\n- `.offcanvas` hides content (default)\n- `.offcanvas.show` shows content\n\nYou can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle=\"offcanvas\"` is required.\n\n\n Link with href\n \n \n\n
      \n
      \n
      Offcanvas
      \n \n
      \n
      \n
      \n Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.\n
      \n
      \n \n \n
      \n
      \n
      `} />\n\n### Body scrolling\n\nScrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `` scrolling.\n\nEnable body scrolling\n\n
      \n
      \n
      Offcanvas with body scrolling
      \n \n
      \n
      \n

      Try scrolling the rest of the page to see this option in action.

      \n
      \n
      `} />\n\n### Body scrolling and backdrop\n\nYou can also enable `` scrolling with a visible backdrop.\n\nEnable both scrolling & backdrop\n\n
      \n
      \n
      Backdrop with scrolling
      \n \n
      \n
      \n

      Try scrolling the rest of the page to see this option in action.

      \n
      \n
      `} />\n\n### Static backdrop\n\nWhen backdrop is set to static, the offcanvas will not close when clicking outside of it.\n\n\n Toggle static offcanvas\n \n\n
      \n
      \n
      Offcanvas
      \n \n
      \n
      \n
      \n I will not close if you click outside of me.\n
      \n
      \n
      `} />\n\n## Dark offcanvas\n\n \n\nChange the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.\n\n\n**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme=\"dark\"` on the root element, a parent wrapper, or the component itself.\n\n\n\n
      \n
      Offcanvas
      \n \n
      \n
      \n

      Place offcanvas content here.

      \n
      \n `} />\n\n## Responsive\n\n\n\nResponsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive offcanvas classes are available for each breakpoint.\n\n- `.offcanvas`\n- `.offcanvas-sm`\n- `.offcanvas-md`\n- `.offcanvas-lg`\n- `.offcanvas-xl`\n- `.offcanvas-xxl`\n\nTo make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.\n\nToggle offcanvas\n\n
      Resize your browser to show the responsive offcanvas toggle.
      \n\n
      \n
      \n
      Responsive offcanvas
      \n \n
      \n
      \n

      This is content within an .offcanvas-lg.

      \n
      \n
      `} />\n\n## Placement\n\nThere’s no default placement for offcanvas components, so you must add one of the modifier classes below.\n\n- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)\n- `.offcanvas-end` places offcanvas on the right of the viewport\n- `.offcanvas-top` places offcanvas on the top of the viewport\n- `.offcanvas-bottom` places offcanvas on the bottom of the viewport\n\nTry the top, right, and bottom examples out below.\n\nToggle top offcanvas\n\n
      \n
      \n
      Offcanvas top
      \n \n
      \n
      \n ...\n
      \n
      `} />\n\nToggle right offcanvas\n\n
      \n
      \n
      Offcanvas right
      \n \n
      \n
      \n ...\n
      \n
      `} />\n\nToggle bottom offcanvas\n\n
      \n
      \n
      Offcanvas bottom
      \n \n
      \n
      \n ...\n
      \n
      `} />\n\n## Accessibility\n\nSince the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby=\"...\"`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role=\"dialog\"` since we already add it via JavaScript.\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n\n## Usage\n\nThe offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:\n\n- `.offcanvas` hides the content\n- `.offcanvas.show` shows the content\n- `.offcanvas-start` hides the offcanvas on the left\n- `.offcanvas-end` hides the offcanvas on the right\n- `.offcanvas-top` hides the offcanvas on the top\n- `.offcanvas-bottom` hides the offcanvas on the bottom\n\nAdd a dismiss button with the `data-bs-dismiss=\"offcanvas\"` attribute, which triggers the JavaScript functionality. Be sure to use the ``} />\n\n### Four directions\n\nFour options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.\n\n\n Popover on top\n \n \n \n `} />\n\n### Custom `container`\n\nWhen you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom `container` so that the popover’s HTML appears within that element instead. This is common in responsive tables, input groups, and the like.\n\n```js\nconst popover = new bootstrap.Popover('.example-popover', {\n container: 'body'\n})\n```\n\nAnother situation where you’ll want to set an explicit custom `container` are popovers inside a [modal dialog]([[docsref:/components/modal]]), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won’t be able to focus or activate these interactive elements.\n\n```js\nconst popover = new bootstrap.Popover('.example-popover', {\n container: '.modal-body'\n})\n```\n\n### Custom popovers\n\n\n\nYou can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class=\"custom-popover\"` to scope our custom appearance and use it to override some of the local CSS variables.\n\n\n\n\n Custom popover\n `} />\n\n### Dismiss on next click\n\nUse the `focus` trigger to dismiss popovers on the user’s next click of an element other than the toggle element.\n\n\n**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `` elements, not `\n `} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n\n## Usage\n\nEnable popovers via JavaScript:\n\n```js\nconst exampleEl = document.getElementById('example')\nconst popover = new bootstrap.Popover(exampleEl, options)\n```\n\n\n**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex=\"0\"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.\n\nAvoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover’s content to be announced to assistive technology users as one long, uninterrupted stream.\n\nPopovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead.\n\n\n### Options\n\n\n\n\nNote that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.\n\n\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `allowList` | object | [Default value]([[docsref:/getting-started/javascript#sanitizer]]) | An object containing allowed tags and attributes. Those not explicitly allowed will be removed by [the content sanitizer]([[docsref:/getting-started/javascript#sanitizer]]). **Exercise caution when adding to this list.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. |\n| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |\n| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper’s preventOverflow modifier). By default, it’s `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |\n| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |\n| `content` | string, element, function | `''` | The popover’s text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |\n| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |\n| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn’t apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { \"show\": 500, \"hide\": 100 }`. |\n| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |\n| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover’s `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Prefer text when dealing with user-generated input to [prevent XSS attacks](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html). |\n| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset=\"10,20\"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper’s [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |\n| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |\n| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |\n| `sanitize` | boolean | `true` | Enable [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]). If true, the `template`, `content` and `title` options will be sanitized. **Exercise caution when disabling content sanitization.** Refer to [OWASP’s Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for more information. Vulnerabilities caused solely by disabling content sanitization are not considered within scope for Bootstrap’s security model. |\n| `sanitizeFn` | null, function | `null` | Provide an alternative [content sanitization]([[docsref:/getting-started/javascript#sanitizer]]) function. This can be useful if you prefer to use a dedicated library to perform sanitization. |\n| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]([[config:repo]]/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |\n| `template` | string | `'

      '` | Base HTML to use when creating the popover. The popover’s `title` will be injected into the `.popover-header`. The popover’s `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover’s arrow. The outermost wrapper element should have the `.popover` class and `role=\"tooltip\"`. |\n| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |\n| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |\n      \n\n\n#### Data attributes for individual popovers\n\nOptions for individual popovers can alternatively be specified through the use of data attributes, as explained above.\n\n\n#### Using function with `popperConfig`\n\n```js\nconst popover = new bootstrap.Popover(element, {\n popperConfig(defaultBsPopperConfig) {\n // const newPopperConfig = {...}\n // use defaultBsPopperConfig if needed...\n // return newPopperConfig\n }\n})\n```\n\n### Methods\n\n\n\n\n| Method | Description |\n| --- | --- |\n| `disable` | Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled. |\n| `dispose` | Hides and destroys an element’s popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |\n| `enable` | Gives an element’s popover the ability to be shown. **Popovers are enabled by default.** |\n| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |\n| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized. |\n| `hide` | Hides an element’s popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a “manual” triggering of the popover. |\n| `setContent` | Gives a way to change the popover’s content after its initialization. |\n| `show` | Reveals an element’s popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |\n| `toggle` | Toggles an element’s popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a “manual” triggering of the popover. |\n| `toggleEnabled` | Toggles the ability for an element’s popover to be shown or hidden. |\n| `update` | Updates the position of an element’s popover. |\n\n\n\n```js\n// getOrCreateInstance example\nconst popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance\n\n// setContent example\npopover.setContent({\n '.popover-header': 'another title',\n '.popover-body': 'another content'\n})\n```\n\n\nThe `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`\n\n\n### Events\n\n\n| Event | Description |\n| --- | --- |\n| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |\n| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |\n| `inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the popover template has been added to the DOM. |\n| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |\n| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |\n\n\n```js\nconst myPopoverTrigger = document.getElementById('myPopover')\nmyPopoverTrigger.addEventListener('hidden.bs.popover', () => {\n // do something...\n})\n```\n" }, { "path": "site/src/content/docs/components/progress.mdx", "content": "---\ntitle: Progress\ndescription: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.\ntoc: true\n---\n\n\n**New markup in v5.3.0 —** We’ve deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what’s changed in our migration guide.]([[docsref:/migration#improved-markup-for-progress-bars]])\n\n\n## How it works\n\nProgress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.\n\n- We use the `.progress` as a wrapper to indicate the max value of the progress bar.\n- The `.progress` wrapper also requires a `role=\"progressbar\"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).\n- We use the inner `.progress-bar` purely for the visual bar and label.\n- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.\n- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.\n\nPut that all together, and you have the following examples.\n\n\n
      \n \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      `} />\n\n## Bar sizing\n\n### Width\n\nBootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/sizing]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.\n\n\n
      \n `} />\n\n### Height\n\nYou only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.\n\n\n
      \n \n
      \n
      \n
      `} />\n\n## Labels\n\nAdd labels to your progress bars by placing text within the `.progress-bar`.\n\n\n
      25%
      \n `} />\n\n### Long labels\n\nNote that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn’t bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]([[docsref:/utilities/overflow]]).\n\n\nLabels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.\n\nIf the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.\n\n\n## Backgrounds\n\nUse background utility classes to change the appearance of individual progress bars.\n\n\n
      \n \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      `} />\n\n\n\nIf you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]([[docsref:/helpers/color-background]]) helper classes.\n\n\n
      25%
      \n \n
      \n
      50%
      \n
      \n
      \n
      75%
      \n
      \n
      \n
      100%
      \n
      `} />\n\n## Multiple bars\n\nYou can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.\n\n\n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n `} />\n\n## Striped\n\nAdd `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color.\n\n\n
      \n \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      `} />\n\n## Animated stripes\n\nThe striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.\n\n\n
      \n `} />\n\n## CSS\n\n### Variables\n\n\n\nAs part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.\n\n\n\n### Sass variables\n\n\n\n### Keyframes\n\nUsed for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.\n\n\n" }, { "path": "site/src/content/docs/components/scrollspy.mdx", "content": "---\ntitle: Scrollspy\ndescription: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.\ntoc: true\n---\n\n## How it works\n\nScrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor’s `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]([[docsref:/components/navs-tabs]]) or [list group]([[docsref:/components/list-group]]), but it will also work with any anchor elements in the current page. Here’s how it works.\n\n- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `` or a custom element with a set `height` and `overflow-y: scroll`.\n\n- On the scrollable container, add `data-bs-spy=\"scroll\"` and `data-bs-target=\"#navId\"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex=\"0\"` to ensure keyboard access.\n\n- As you scroll the “spied” container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they’re ignored. For example, a `home` must correspond to something in the DOM like `
      `\n\n- Target elements that are not visible will be ignored. See the [Non-visible elements](#non-visible-elements) section below.\n\n## Examples\n\n### Navbar\n\nScroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.\n\n\n Navbar\n \n \n
      \n

      First heading

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Second heading

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Third heading

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Fourth heading

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Fifth heading

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n
      `} />\n\n```html\n\n
      \n

      First heading

      \n

      ...

      \n

      Second heading

      \n

      ...

      \n

      Third heading

      \n

      ...

      \n

      Fourth heading

      \n

      ...

      \n

      Fifth heading

      \n

      ...

      \n
      \n```\n\n### Nested nav\n\nScrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.\n\n\n
      \n \n
      \n
      \n
      \n
      \n

      Item 1

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n
      Item 1-1
      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n
      Item 1-2
      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n

      Item 2

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n

      Item 3

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n
      Item 3-1
      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n
      Item 3-2
      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

      \n
      \n
      \n
      \n\n`} />\n\n```html\n
      \n
      \n \n
      \n\n
      \n
      \n
      \n

      Item 1

      \n

      ...

      \n
      \n
      \n
      Item 1-1
      \n

      ...

      \n
      \n
      \n
      Item 1-2
      \n

      ...

      \n
      \n
      \n

      Item 2

      \n

      ...

      \n
      \n
      \n

      Item 3

      \n

      ...

      \n
      \n
      \n
      Item 3-1
      \n

      ...

      \n
      \n
      \n
      Item 3-2
      \n

      ...

      \n
      \n
      \n
      \n
      \n```\n\n### List group\n\nScrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.\n\n\n
      \n \n
      \n
      \n
      \n

      Item 1

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 2

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 3

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 4

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n
      \n
      \n\n`} />\n\n```html\n
      \n
      \n \n
      \n
      \n
      \n

      Item 1

      \n

      ...

      \n

      Item 2

      \n

      ...

      \n

      Item 3

      \n

      ...

      \n

      Item 4

      \n

      ...

      \n
      \n
      \n
      \n```\n\n### Simple anchors\n\nScrollspy is not limited to nav components and list groups, so it will work on any `` anchor elements in the current document. Scroll the area and watch the `.active` class change.\n\n\n
      \n \n
      \n
      \n
      \n

      Item 1

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 2

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 3

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 4

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n

      Item 5

      \n

      This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

      \n
      \n
      \n\n`} />\n\n```html\n
      \n
      \n \n
      \n
      \n
      \n

      Item 1

      \n

      ...

      \n

      Item 2

      \n

      ...

      \n

      Item 3

      \n

      ...

      \n

      Item 4

      \n

      ...

      \n

      Item 5

      \n

      ...

      \n
      \n
      \n
      \n```\n\n## Non-visible elements\n\nTarget elements that aren’t visible will be ignored and their corresponding nav items won’t receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.\n\n```js\ndocument.querySelectorAll('#nav-tab>[data-bs-toggle=\"tab\"]').forEach(el => {\n el.addEventListener('shown.bs.tab', () => {\n const target = el.getAttribute('data-bs-target')\n const scrollElem = document.querySelector(`${target} [data-bs-spy=\"scroll\"]`)\n bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()\n })\n})\n```\n\n## Usage\n\n### Via data attributes\n\nTo easily add scrollspy behavior to your topbar navigation, add `data-bs-spy=\"scroll\"` to the element you want to spy on (most typically this would be the ``). Then add the `data-bs-target` attribute with the `id` or class name of the parent element of any Bootstrap `.nav` component.\n\n```html\n\n ...\n
      \n
        \n ...\n
      \n
      \n ...\n\n```\n\n### Via JavaScript\n\n```js\nconst scrollSpy = new bootstrap.ScrollSpy(document.body, {\n target: '#navbar-example'\n})\n```\n\n### Options\n\n\n\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |\n| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |\n| `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. |\n| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position. |\n\n\n\n\n**Deprecated Options**\n\nUp until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`.\nTo keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**.\n\n\n### Methods\n\n\n| Method | Description |\n| --- | --- |\n| `dispose` | Destroys an element’s scrollspy. (Removes stored data on the DOM element) |\n| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element. |\n| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn’t initialized. |\n| `refresh` | When adding or removing elements in the DOM, you’ll need to call the refresh method. |\n\n\nHere’s an example using the refresh method:\n\n```js\nconst dataSpyList = document.querySelectorAll('[data-bs-spy=\"scroll\"]')\ndataSpyList.forEach(dataSpyEl => {\n bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()\n})\n```\n\n### Events\n\n\n| Event | Description |\n| --- | --- |\n| `activate.bs.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. |\n\n\n```js\nconst firstScrollSpyEl = document.querySelector('[data-bs-spy=\"scroll\"]')\nfirstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {\n // do something...\n})\n```\n" }, { "path": "site/src/content/docs/components/spinners.mdx", "content": "---\ntitle: Spinners\ndescription: Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.\ntoc: true\n---\n\nimport { getData } from '@libs/data'\n\n## About\n\nBootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.\n\nFor accessibility purposes, each loader here includes `role=\"status\"` and a nested `Loading...`.\n\n\n\n## Border spinner\n\nUse the border spinners for a lightweight loading indicator.\n\n

      `} />\n\n## Display headings\n\nTraditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.\n\nDisplay 1\n
      Display 2
      \n
      Display 3
      \n
      Display 4
      \n
      Display 5
      \n
      Display 6
      \n`} />\n\n```html\n

      Display 1

      \n

      Display 2

      \n

      Display 3

      \n

      Display 4

      \n

      Display 5

      \n

      Display 6

      \n```\n\nDisplay headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.\n\nDisplay headings are customizable via two variables, `$display-font-family` and `$display-font-style`.\n\n\n\n## Lead\n\nMake a paragraph stand out by adding `.lead`.\n\n\n This is a lead paragraph. It stands out from regular paragraphs.\n

      `} />\n\n## Inline text elements\n\nStyling for common inline HTML5 elements.\n\nYou can use the mark tag to highlight text.

      \n

      This line of text is meant to be treated as deleted text.

      \n

      This line of text is meant to be treated as no longer accurate.

      \n

      This line of text is meant to be treated as an addition to the document.

      \n

      This line of text will render as underlined.

      \n

      This line of text is meant to be treated as fine print.

      \n

      This line rendered as bold text.

      \n

      This line rendered as italicized text.

      `} />\n\nBeware that those tags should be used for semantic purpose:\n\n- `` represents text which is marked or highlighted for reference or notation purposes.\n- `` represents side-comments and small print, like copyright and legal text.\n- `` represents element that are no longer relevant or no longer accurate.\n- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.\n\nIf you want to style your text, you should use the following classes instead:\n\n- `.mark` will apply the same styles as ``.\n- `.small` will apply the same styles as ``.\n- `.text-decoration-underline` will apply the same styles as ``.\n- `.text-decoration-line-through` will apply the same styles as ``.\n\nWhile not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc.\n\n## Text utilities\n\nChange text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]([[docsref:/utilities/text]]) and [color utilities]([[docsref:/utilities/colors]]).\n\n## Abbreviations\n\nStylized implementation of HTML’s `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.\n\nAdd `.initialism` to an abbreviation for a slightly smaller font-size.\n\nattr

      \n

      HTML

      `} />\n\n## Blockquotes\n\nFor quoting blocks of content from another source within your document. Wrap `
      ` around any HTML as the quote.\n\n\n

      A well-known quote, contained in a blockquote element.

      \n
      `} />\n\n### Naming a source\n\nThe HTML spec requires that blockquote attribution be placed outside the `
      `. When providing attribution, wrap your `
      ` in a `
      ` and use a `
      ` or a block level element (e.g., `

      `) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well.\n\n\n

      \n

      A well-known quote, contained in a blockquote element.

      \n
      \n
      \n Someone famous in Source Title\n
      \n
      `} />\n\n### Alignment\n\nUse text utilities as needed to change the alignment of your blockquote.\n\n\n
      \n

      A well-known quote, contained in a blockquote element.

      \n
      \n
      \n Someone famous in Source Title\n
      \n `} />\n\n\n
      \n

      A well-known quote, contained in a blockquote element.

      \n
      \n
      \n Someone famous in Source Title\n
      \n `} />\n\n## Lists\n\n### Unstyled\n\nRemove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.\n\n\n
    38. This is a list.
      39. \n
    39. It appears completely unstyled.
      40. \n
    40. Structurally, it’s still a list.
      41. \n
    41. However, this style only applies to immediate child elements.
      42. \n
    42. Nested lists:\n
        \n
      • are unaffected by this style
        • \n
      • will still show a bullet
        • \n
      • and have appropriate left margin
        • \n
      \n
      43. \n
    43. This may still come in handy in some situations.
      44. \n `} />\n\n### Inline\n\nRemove a list’s bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.\n\n\n
    44. This is a list item.
      45. \n
    45. And another one.
      46. \n
    46. But they’re displayed inline.
      47. \n `} />\n\n### Description list alignment\n\nAlign terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.\n\n\n
      Description lists
      \n
      A description list is perfect for defining terms.
      \n\n
      Term
      \n
      \n

      Definition for the term.

      \n

      And some more placeholder definition text.

      \n
      \n\n
      Another term
      \n
      This definition is short, so no extra paragraphs or anything.
      \n\n
      Truncated term is truncated
      \n
      This can be useful when space is tight. Adds an ellipsis at the end.
      \n\n
      Nesting
      \n
      \n
      \n
      Nested definition list
      \n
      I heard you like definition lists. Let me put a definition list inside your definition list.
      \n
      \n
      \n `} />\n\n## Responsive font sizes\n\nIn Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]([[docsref:/getting-started/rfs]]) to find out how this works.\n\n## CSS\n\n### Sass variables\n\nHeadings have some dedicated variables for sizing and spacing.\n\n\n\nMiscellaneous typography elements covered here and in [Reboot]([[docsref:/content/reboot]]) also have dedicated variables.\n\n\n\n### Sass mixins\n\nThere are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]([[docsref:/getting-started/rfs]]).\n" }, { "path": "site/src/content/docs/customize/color-modes.mdx", "content": "---\ntitle: Color modes\ndescription: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.\ntoc: true\nadded:\n version: \"5.3\"\n---\n\nimport { getDocsRelativePath } from '@libs/path'\n\n\n**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).\n\n\n## Dark mode\n\n**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap’s docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.\n\nAlternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.\n\n## Example\n\nFor example, to change the color mode of a dropdown menu, add `data-bs-theme=\"light\"` or `data-bs-theme=\"dark\"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.\n\n\n \n \n \n\n
      \n \n \n
      `} />\n\n## How it works\n\n- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `` element, or to any other element or Bootstrap component. If applied to the `` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.\n\n- For each color mode you wish to support, you’ll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:\n\n ```scss\n // Color mode variables in _root.scss\n @include color-mode(dark) {\n // CSS variable overrides here...\n }\n ```\n\n- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn’t required for your own custom color modes, but it’s required for our dark mode for two reasons. First, it’s better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.\n\n## Usage\n\n### Enable dark mode\n\nEnable the built in dark color mode across your entire project by adding the `data-bs-theme=\"dark\"` attribute to the `` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]([[docsref:/getting-started/introduction#quick-start]]):\n\n```html\n\n\n \n \n \n Bootstrap demo\n \n \n \n

      Hello, world!

      \n \n \n\n```\n\nBootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)\n\n### Building with Sass\n\nOur new dark mode option is available to use for all users of Bootstrap, but it’s controlled via data attributes instead of media queries and does not automatically toggle your project’s color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.\n\nWe use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.\n\nIn case you want to use media queries and only make color modes automatic, you can change the mixin’s default type via Sass variable. Consider the following snippet and its compiled CSS output.\n\n```scss\n$color-mode-type: data;\n\n@include color-mode(dark) {\n .element {\n color: var(--bs-primary-text-emphasis);\n background-color: var(--bs-primary-bg-subtle);\n }\n}\n```\n\nOutputs to:\n\n```css\n[data-bs-theme=dark] .element {\n color: var(--bs-primary-text-emphasis);\n background-color: var(--bs-primary-bg-subtle);\n}\n```\n\nAnd when setting to `media-query`:\n\n```scss\n$color-mode-type: media-query;\n\n@include color-mode(dark) {\n .element {\n color: var(--bs-primary-text-emphasis);\n background-color: var(--bs-primary-bg-subtle);\n }\n}\n```\n\nOutputs to:\n\n```css\n@media (prefers-color-scheme: dark) {\n .element {\n color: var(--bs-primary-text-emphasis);\n background-color: var(--bs-primary-bg-subtle);\n }\n}\n```\n\n## Custom color modes\n\nWhile the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.\n\nFor example, you can create a “blue theme” with the selector `data-bs-theme=\"blue\"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.\n\n\n\n\n
      Example blue theme
      \n

      Some paragraph text to show how the blue theme might look with written copy.

      \n\n
      \n\n
      \n \n \n
      \n`} />\n\n```html\n
      \n ...\n
      \n```\n\n## JavaScript\n\nTo allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the `data-bs-theme` attribute on the root element, ``. We’ve built a toggler in our documentation that initially defers to a user’s current system color mode, but provides an option to override that and pick a specific color mode.\n\nHere’s a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it’s implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.\n\n\n\n## Adding theme colors\n\nAdding a new color in `$theme-colors` is not enough for some of our components like [alerts]([[docsref:/components/alerts]]) and [list groups]([[docsref:/components/list-group]]). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.\n\nThis is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.\n\n```scss\n// Required\n@import \"functions\";\n@import \"variables\";\n@import \"variables-dark\";\n\n// Add a custom color to $theme-colors\n$custom-colors: (\n \"custom-color\": #712cf9\n);\n$theme-colors: map-merge($theme-colors, $custom-colors);\n\n@import \"maps\";\n@import \"mixins\";\n@import \"utilities\";\n\n// Add a custom color to new theme maps\n\n// Light mode\n$custom-colors-text: (\"custom-color\": #712cf9);\n$custom-colors-bg-subtle: (\"custom-color\": #e1d2fe);\n$custom-colors-border-subtle: (\"custom-color\": #bfa1fc);\n\n$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);\n$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);\n$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);\n\n// Dark mode\n$custom-colors-text-dark: (\"custom-color\": #e1d2f2);\n$custom-colors-bg-subtle-dark: (\"custom-color\": #8951fa);\n$custom-colors-border-subtle-dark: (\"custom-color\": #e1d2f2);\n\n$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);\n$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);\n$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);\n\n// Remainder of Bootstrap imports\n@import \"root\";\n@import \"reboot\";\n// etc\n```\n\n## CSS\n\n### Variables\n\nDozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.\n\n\n\n### Sass variables\n\nCSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.\n\n\n\n### Sass mixins\n\nStyles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.\n\n\n" }, { "path": "site/src/content/docs/customize/color.mdx", "content": "---\ntitle: Color\ndescription: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.\ntoc: true\n---\n\nimport { getData } from '@libs/data'\nimport { getSequence } from '@libs/utils'\n\n## Colors\n\n\n\nBootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.\n\nColors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.\n\n\n**Heads up!** There’s some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.\n\n\n
      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      DescriptionSwatchVariables
      \n **Body —** Default foreground (color) and background, including components.\n \n
       
      \n       		\n `--bs-body-color`
      `--bs-body-color-rgb`\n
      \n
       
      \n       		\n `--bs-body-bg`
      `--bs-body-bg-rgb`\n
      \n **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.\n \n
       
      \n       		\n `--bs-secondary-color`
      `--bs-secondary-color-rgb`\n
      \n
       
      \n       		\n `--bs-secondary-bg`
      `--bs-secondary-bg-rgb`\n
      \n **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.\n \n
       
      \n       		\n `--bs-tertiary-color`
      `--bs-tertiary-color-rgb`\n
      \n
       
      \n       		\n `--bs-tertiary-bg`
      `--bs-tertiary-bg-rgb`\n
      \n **Emphasis —** For higher contrast text. Not applicable for backgrounds.\n \n
       
      \n       		\n `--bs-emphasis-color`
      `--bs-emphasis-color-rgb`\n
      \n **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.\n \n
       
      \n       		\n `--bs-border-color`
      `--bs-border-color-rgb`\n
      \n **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.\n \n
       
      \n       		\n `--bs-primary`
      `--bs-primary-rgb`\n
      \n
       
      \n       		\n `--bs-primary-bg-subtle`\n
      \n
       
      \n       		\n `--bs-primary-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-primary-text-emphasis`\n
      \n **Success —** Theme color used for positive or successful actions and information.\n \n
       
      \n       		\n `--bs-success`
      `--bs-success-rgb`\n
      \n
       
      \n       		\n `--bs-success-bg-subtle`\n
      \n
       
      \n       		\n `--bs-success-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-success-text-emphasis`\n
      \n **Danger —** Theme color used for errors and dangerous actions.\n \n
       
      \n       		\n `--bs-danger`
      `--bs-danger-rgb`\n
      \n
       
      \n       		\n `--bs-danger-bg-subtle`\n
      \n
       
      \n       		\n `--bs-danger-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-danger-text-emphasis`\n
      \n **Warning —** Theme color used for non-destructive warning messages.\n \n
       
      \n       		\n `--bs-warning`
      `--bs-warning-rgb`\n
      \n
       
      \n       		\n `--bs-warning-bg-subtle`\n
      \n
       
      \n       		\n `--bs-warning-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-warning-text-emphasis`\n
      \n **Info —** Theme color used for neutral and informative content.\n \n
       
      \n       		\n `--bs-info`
      `--bs-info-rgb`\n
      \n
       
      \n       		\n `--bs-info-bg-subtle`\n
      \n
       
      \n       		\n `--bs-info-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-info-text-emphasis`\n
      \n **Light —** Additional theme option for less contrasting colors.\n \n
       
      \n       		\n `--bs-light`
      `--bs-light-rgb`\n
      \n
       
      \n       		\n `--bs-light-bg-subtle`\n
      \n
       
      \n       		\n `--bs-light-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-light-text-emphasis`\n
      \n **Dark —** Additional theme option for higher contrasting colors.\n \n
       
      \n       		\n `--bs-dark`
      `--bs-dark-rgb`\n
      \n
       
      \n       		\n `--bs-dark-bg-subtle`\n
      \n
       
      \n       		\n `--bs-dark-border-subtle`\n
      \n
      Text
      \n       		\n `--bs-dark-text-emphasis`\n
      \n
      \n\n### Using the new colors\n\nThese new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.\n\n\n Example element with utilities\n `} />\n\n### Theme colors\n\nWe use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s `scss/_variables.scss` file.\n\n
      \n {getData('theme-colors').map((themeColor) => {\n return (\n
      \n
      {themeColor.title}
      \n
      \n )\n })}\n
      \n\nAll these colors are available as a Sass map, `$theme-colors`.\n\n\n\nCheck out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.\n\n### All colors\n\nAll Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).\n\nBe sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.\n\n
      \n {getData('colors').map((color) => {\n if ((color.name !== \"white\") && (color.name !== \"gray\") && (color.name !== \"gray-dark\")) {\n return (\n
      \n
      \n ${color.name}\n {color.hex}\n
      \n\n {getSequence(100, 900, 100).map((value) => {\n return (\n
      ${color.name}-{value}
      \n )\n })}\n
      \n )\n }\n })}\n\n
      \n
      $gray-500#adb5bd
      \n {getData('grays').map((gray) => {\n return (\n
      $gray-{gray.name}
      \n )\n })}\n
      \n\n
      \n
      \n $black\n #000\n
      \n
      \n $white\n #fff\n
      \n
      \n
      \n\n### Notes on Sass\n\nSass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.\n\nUsing `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).\n\nOur `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.\n\n## Color Sass maps\n\nBootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.\n\n- `$colors` lists all our available base (`500`) colors\n- `$theme-colors` lists all semantically named theme colors (shown below)\n- `$grays` lists all tints and shades of gray\n\nWithin `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:\n\n\n\nAdd, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.\n\n### Example\n\nHere’s how you can use these in your Sass:\n\n```scss\n.alpha { color: $purple; }\n.beta {\n color: $yellow-300;\n background-color: $indigo-900;\n}\n```\n\n[Color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utility classes are also available for setting `color` and `background-color` using the `500` color values.\n\n## Generating utilities\n\n\n\nBootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.\n\n1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.\n2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.\n3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.\n\nHere’s an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.\n\n```scss\n@import \"bootstrap/scss/functions\";\n@import \"bootstrap/scss/variables\";\n@import \"bootstrap/scss/variables-dark\";\n@import \"bootstrap/scss/maps\";\n@import \"bootstrap/scss/mixins\";\n@import \"bootstrap/scss/utilities\";\n\n$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);\n\n$utilities: map-merge(\n $utilities,\n (\n \"color\": map-merge(\n map-get($utilities, \"color\"),\n (\n values: map-merge(\n map-get(map-get($utilities, \"color\"), \"values\"),\n (\n $all-colors\n ),\n ),\n ),\n ),\n )\n);\n\n@import \"bootstrap/scss/utilities/api\";\n```\n\nThis will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.\n" }, { "path": "site/src/content/docs/customize/components.mdx", "content": "---\ntitle: Components\ndescription: Learn how and why we build nearly all our components responsively and with base and modifier classes.\ntoc: true\n---\n\n## Base classes\n\nBootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like `.btn`, and then group individual styles for each variant into modifier classes, like `.btn-primary` or `.btn-success`.\n\nTo build our modifier classes, we use Sass’s `@each` loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.\n\nCheck out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to customize these loops and extend Bootstrap’s base-modifier approach to your own code.\n\n## Modifiers\n\nMany of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes.\n\nHere are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components.\n\n\n\n\n\n## Responsive\n\nThese Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.\n\n\n\nShould you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.\n\n\n\nFor more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).\n\n## Creating your own\n\nWe encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.\n\n\n This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.\n\n`} />\n\n```html\n
      ...
      \n```\n\nIn your CSS, you’d have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class.\n\n```scss\n// Base class\n.callout {}\n\n// Modifier classes\n.callout-info {}\n.callout-warning {}\n.callout-danger {}\n```\n\nFor the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family:\n\n\n**This is an info callout.** Example text to show it in action.\n\n\n\n**This is a warning callout.** Example text to show it in action.\n\n\n\n**This is a danger callout.** Example text to show it in action.\n\n" }, { "path": "site/src/content/docs/customize/css-variables.mdx", "content": "---\ntitle: CSS variables\ndescription: Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.\ntoc: true\n---\n\nBootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.\n\n**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.\n\n## Root variables\n\nHere are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap’s CSS is loaded. They’re located in our `_root.scss` file and included in our compiled dist files.\n\n### Default\n\nThese CSS variables are available everywhere, regardless of color mode.\n\n\n\n### Dark mode\n\nThese variables are scoped to our built-in dark mode.\n\n\n\n## Component variables\n\nBootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.\n\nHave a look at our table documentation for some [insight into how we’re using CSS variables]([[docsref:/content/tables#how-do-the-variants-and-accented-tables-work]]). Our [navbars also use CSS variables]([[docsref:/components/navbar#css]]) as of v5.2.0. We’re also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]([[docsref:/layout/css-grid]])—with more component usage coming in the future.\n\nWhenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.\n\n## Prefix\n\nMost CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that’s required on every CSS variable.\n\nCustomize the prefix via the `$prefix` Sass variable. By default, it’s set to `bs-` (note the trailing dash).\n\n## Examples\n\nCSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.\n\n```css\nbody {\n font: 1rem/1.5 var(--bs-font-sans-serif);\n}\na {\n color: var(--bs-blue);\n}\n```\n\n## Focus variables\n\n\n\nBootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.\n\nIn our Sass, we set default values that can be customized before compiling.\n\n\n\nThose variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).\n\n\n\n## Grid breakpoints\n\nWhile we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.\n" }, { "path": "site/src/content/docs/customize/optimize.mdx", "content": "---\ntitle: Optimize\ndescription: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.\ntoc: true\n---\n\n## Lean Sass imports\n\nWhen using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`.\n\n\n\n\nIf you’re not using a component, comment it out or delete it entirely. For example, if you’re not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.\n\n## Lean JavaScript\n\nBootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript.\n\nFor instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:\n\n```js\n// Import just what we need\n\n// import 'bootstrap/js/dist/alert';\n// import 'bootstrap/js/dist/button';\n// import 'bootstrap/js/dist/carousel';\n// import 'bootstrap/js/dist/collapse';\n// import 'bootstrap/js/dist/dropdown';\nimport 'bootstrap/js/dist/modal';\n// import 'bootstrap/js/dist/offcanvas';\n// import 'bootstrap/js/dist/popover';\n// import 'bootstrap/js/dist/scrollspy';\n// import 'bootstrap/js/dist/tab';\n// import 'bootstrap/js/dist/toast';\n// import 'bootstrap/js/dist/tooltip';\n```\n\nThis way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.\n\n\n**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:\n\n```js\nimport Modal from 'bootstrap/js/dist/modal'\nconst modal = new Modal(document.getElementById('myModal'))\n```\n\n\n## Autoprefixer .browserslistrc\n\nBootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.\n\n## Unused CSS\n\n_Help wanted with this section, please consider opening a PR. Thanks!_\n\nWhile we don’t have a prebuilt example for using [PurgeCSS](https://github.com/FullHuman/purgecss) with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:\n\n- https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772\n- https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/\n\nLastly, this [CSS Tricks article on unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) shows how to use PurgeCSS and other similar tools.\n\n## Minify and gzip\n\nWhenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.\n\n## Non-blocking files\n\nWhile minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.\n\nIf you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/fcp) metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.\n\nYou can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with `async` or `defer` attributes.\n\nThis ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.\n\nIf you want to learn more about this, there are already a lot of great articles about it:\n\n- https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/\n- https://web.dev/articles/defer-non-critical-css\n\n## Always use HTTPS\n\nYour website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and [there is no such thing as non-sensitive web traffic](https://https.cio.gov/everything/). The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.\n\nSites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users [mixed active content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content), leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.\n" }, { "path": "site/src/content/docs/customize/options.mdx", "content": "---\ntitle: Options\ndescription: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.\n---\n\nCustomize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable’s value and recompile with `npm run test` as needed.\n\nYou can find and customize these variables for key global options in Bootstrap’s `scss/_variables.scss` file.\n\n\n| Variable | Values | Description |\n| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |\n| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]([[docsref:/utilities/spacing]]). |\n| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]([[docsref:/customize/color-modes#dark-mode]]) across the project and its components. |\n| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |\n| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |\n| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |\n| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |\n| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]), which suppresses certain animations/transitions based on the users’ browser/operating system preferences. |\n| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |\n| `$enable-cssgrid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |\n| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |\n| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |\n| `$enable-button-pointers` | `true` (default) or `false` | Add “hand” cursor to non-disabled button elements. |\n| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |\n| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |\n| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/spacing#negative-margin]]). |\n| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |\n| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |\n| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) |\n\n" }, { "path": "site/src/content/docs/customize/overview.mdx", "content": "---\ntitle: Customize\ndescription: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.\ntoc: false\naliases: \"/docs/[[config:docs_version]]/customize/\"\nsections:\n - title: Sass\n description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.\n - title: Options\n description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.\n - title: Color\n description: Learn about and customize the color systems that support the entire toolkit.\n - title: Color modes\n description: Explore our default light mode and the new dark mode, or create custom color modes yourself.\n - title: Components\n description: Learn how we build nearly all our components responsively and with base and modifier classes.\n - title: CSS variables\n description: Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.\n - title: Optimize\n description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience.\n---\n\n## Overview\n\nThere are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.\n\nOur two preferred methods are:\n\n1. Using Bootstrap [via package manager]([[docsref:/getting-started/download#package-managers]]) so you can use and extend our source files.\n2. Using Bootstrap’s compiled distribution files or [jsDelivr]([[docsref:/getting-started/download#cdn-via-jsdelivr]]) so you can add onto or override Bootstrap’s styles.\n\nWhile we cannot go into details here on how to use every package manager, we can give some guidance on [using Bootstrap with your own Sass compiler]([[docsref:/customize/sass]]).\n\nFor those who want to use the distribution files, review the [getting started page]([[docsref:/getting-started/introduction]]) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you’d like to use.\n\nAs you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.\n\n## CSPs and embedded SVGs\n\nSeveral Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict CSP configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.\n\n- [Accordion]([[docsref:/components/accordion]])\n- [Carousel controls]([[docsref:/components/carousel#with-controls]])\n- [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)\n- [Form checkboxes and radio buttons]([[docsref:/forms/checks-radios]])\n- [Form switches]([[docsref:/forms/checks-radios#switches]])\n- [Form validation icons]([[docsref:/forms/validation#server-side]])\n- [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])\n- [Select menus]([[docsref:/forms/select]])\n\nBased on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/getting-started/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.\n" }, { "path": "site/src/content/docs/customize/sass.mdx", "content": "---\ntitle: Sass\ndescription: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.\ntoc: true\n---\n\nUtilize our source Sass files to take advantage of variables, maps, mixins, and more.\n\n\nSass deprecation warnings are shown when compiling source Sass files with the latest versions of Dart Sass. This does not prevent compilation or usage of Bootstrap. We’re [working on a long-term fix]([[config:repo]]/issues/40962), but in the meantime these deprecation notices can be ignored.\n\n\n## File structure\n\nWhenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:\n\n```text\nyour-project/\n├── scss/\n│ └── custom.scss\n└── node_modules/\n│ └── bootstrap/\n│ ├── js/\n│ └── scss/\n└── index.html\n```\n\nIf you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually create something similar to that structure, keeping Bootstrap’s source files separate from your own.\n\n```text\nyour-project/\n├── scss/\n│ └── custom.scss\n├── bootstrap/\n│ ├── js/\n│ └── scss/\n└── index.html\n```\n\n## Importing\n\nIn your `custom.scss`, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.\n\n```scss\n// Custom.scss\n// Option A: Include all of Bootstrap\n\n// Include any default variable overrides here (though functions won’t be available)\n\n@import \"../node_modules/bootstrap/scss/bootstrap\";\n\n// Then add additional custom code here\n```\n\n```scss\n// Custom.scss\n// Option B: Include parts of Bootstrap\n\n// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)\n@import \"../node_modules/bootstrap/scss/functions\";\n\n// 2. Include any default variable overrides here\n\n// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)\n@import \"../node_modules/bootstrap/scss/variables\";\n@import \"../node_modules/bootstrap/scss/variables-dark\";\n\n// 4. Include any default map overrides here\n\n// 5. Include remainder of required parts\n@import \"../node_modules/bootstrap/scss/maps\";\n@import \"../node_modules/bootstrap/scss/mixins\";\n@import \"../node_modules/bootstrap/scss/root\";\n\n// 6. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets\n@import \"../node_modules/bootstrap/scss/utilities\";\n@import \"../node_modules/bootstrap/scss/reboot\";\n@import \"../node_modules/bootstrap/scss/type\";\n@import \"../node_modules/bootstrap/scss/images\";\n@import \"../node_modules/bootstrap/scss/containers\";\n@import \"../node_modules/bootstrap/scss/grid\";\n@import \"../node_modules/bootstrap/scss/helpers\";\n// ...\n\n// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`\n@import \"../node_modules/bootstrap/scss/utilities/api\";\n\n// 8. Add additional custom code here\n```\n\nWith that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.\n\n## Compiling\n\nIn order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.\n\nWe like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:\n\n```sh\n# Install Sass globally\nnpm install -g sass\n\n# Watch your custom Sass for changes and compile it to CSS\nsass --watch ./scss/custom.scss ./css/custom.css\n```\n\nLearn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).\n\n\n**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]([[docsref:/getting-started/webpack]]), [Parcel]([[docsref:/getting-started/parcel]]), or [Vite]([[docsref:/getting-started/vite]]). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).\n\n\n## Including\n\nOnce your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you’ll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you’ve changed it.\n\n```html\n\n\n \n \n \n Custom Bootstrap\n \n \n \n

      Hello, world!

      \n \n\n```\n\n## Variable defaults\n\nEvery Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.\n\nYou will find the complete list of Bootstrap’s variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don’t output the property unless they are overridden in your configuration.\n\nVariable overrides must come after our functions are imported, but before the rest of the imports.\n\nHere’s an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm:\n\n```scss\n// Required\n@import \"../node_modules/bootstrap/scss/functions\";\n\n// Default variable overrides\n$body-bg: #000;\n$body-color: #111;\n\n// Required\n@import \"../node_modules/bootstrap/scss/variables\";\n@import \"../node_modules/bootstrap/scss/variables-dark\";\n@import \"../node_modules/bootstrap/scss/maps\";\n@import \"../node_modules/bootstrap/scss/mixins\";\n@import \"../node_modules/bootstrap/scss/root\";\n\n// Optional Bootstrap components here\n@import \"../node_modules/bootstrap/scss/reboot\";\n@import \"../node_modules/bootstrap/scss/type\";\n// etc\n```\n\nRepeat as necessary for any variable in Bootstrap, including the global options below.\n\n\n\n## Maps and loops\n\nBootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.\n\nSome of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.\n\n### Modify map\n\nAll variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:\n\n```scss\n$primary: #0074d9;\n$danger: #ff4136;\n```\n\nLater on, these variables are set in Bootstrap’s `$theme-colors` map:\n\n```scss\n$theme-colors: (\n \"primary\": $primary,\n \"danger\": $danger\n);\n```\n\n### Add to map\n\nAdd new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.\n\n```scss\n// Create your own map\n$custom-colors: (\n \"custom-color\": #900\n);\n\n// Merge the maps\n$theme-colors: map-merge($theme-colors, $custom-colors);\n```\n\n### Remove from map\n\nTo remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert `$theme-colors` between our requirements just after its definition in `variables` and before its usage in `maps`:\n\n```scss\n// Required\n@import \"../node_modules/bootstrap/scss/functions\";\n@import \"../node_modules/bootstrap/scss/variables\";\n@import \"../node_modules/bootstrap/scss/variables-dark\";\n\n$theme-colors: map-remove($theme-colors, \"info\", \"light\", \"dark\");\n\n@import \"../node_modules/bootstrap/scss/maps\";\n@import \"../node_modules/bootstrap/scss/mixins\";\n@import \"../node_modules/bootstrap/scss/root\";\n\n// Optional\n@import \"../node_modules/bootstrap/scss/reboot\";\n@import \"../node_modules/bootstrap/scss/type\";\n// etc\n```\n\n## Required keys\n\nBootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.\n\nFor example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.\n\n## Functions\n\n### Colors\n\nNext to the [Sass maps]([[docsref:/customize/color#color-sass-maps]]) we have, theme colors can also be used as standalone variables, like `$primary`.\n\n```scss\n.custom-element {\n color: $gray-100;\n background-color: $dark;\n}\n```\n\nYou can lighten or darken colors with Bootstrap’s `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass’ native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.\n\n`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.\n\n\n\nIn practice, you’d call the function and pass in the color and weight parameters.\n\n```scss\n.custom-element {\n color: tint-color($primary, 10%);\n}\n\n.custom-element-2 {\n color: shade-color($danger, 30%);\n}\n\n.custom-element-3 {\n color: shift-color($success, 40%);\n background-color: shift-color($success, -60%);\n}\n```\n\n### Color contrast\n\nIn order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.\n\nTo help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.\n\nFor example, to generate color swatches from our `$theme-colors` map:\n\n```scss\n@each $color, $value in $theme-colors {\n .swatch-#{$color} {\n color: color-contrast($value);\n }\n}\n```\n\nIt can also be used for one-off contrast needs:\n\n```scss\n.custom-element {\n color: color-contrast(#000); // returns `color: #fff`\n}\n```\n\nYou can also specify a base color with our color map functions:\n\n```scss\n.custom-element {\n color: color-contrast($dark); // returns `color: #fff`\n}\n```\n\n### Escape SVG\n\nWe use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted.\n\n### Add and Subtract functions\n\nWe use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a “unitless” `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct.\n\nExample where the calc is valid:\n\n```scss\n$border-radius: .25rem;\n$border-width: 1px;\n\n.element {\n // Output calc(.25rem - 1px) is valid\n border-radius: calc($border-radius - $border-width);\n}\n\n.element {\n // Output the same calc(.25rem - 1px) as above\n border-radius: subtract($border-radius, $border-width);\n}\n```\n\nExample where the calc is invalid:\n\n```scss\n$border-radius: .25rem;\n$border-width: 0;\n\n.element {\n // Output calc(.25rem - 0) is invalid\n border-radius: calc($border-radius - $border-width);\n}\n\n.element {\n // Output .25rem\n border-radius: subtract($border-radius, $border-width);\n}\n```\n\n## Mixins\n\nOur `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.\n\n### Color schemes\n\nA shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]([[docsref:/customize/color-modes]]) for information on our color mode mixin.\n\n\n\n```scss\n.custom-element {\n @include color-scheme(light) {\n // Insert light mode styles here\n }\n\n @include color-scheme(dark) {\n // Insert dark mode styles here\n }\n}\n```\n" }, { "path": "site/src/content/docs/docsref.mdx", "content": "---\ntitle: Docs reference\ndescription: Examples of Bootstrap’s documentation-specific components and styles.\naliases: \"/docsref/\"\ntoc: true\nrobots: noindex,follow\n---\n\n## Buttons\n\n\n\n\n\n## Callouts\n\n\n Default callout\n\n\n\n Warning callout\n\n\n\n Danger callout\n\n\n## Code example\n\n```scss\n.test {\n --color: blue;\n}\n```\n\nHTML abbreviation element.`} />\n\nThis is a test.`} />\n\n\n\n\n" }, { "path": "site/src/content/docs/extend/approach.mdx", "content": "---\ntitle: Approach\ndescription: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.\naliases:\n - \"/docs/[[config:docs_version]]/extend/\"\n---\n\nWhile the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.\n\nSee something that doesn’t sound right, or perhaps could be done better? [Open an issue]([[config:repo]]/issues/new/choose)—we’d love to discuss it with you.\n\n## Summary\n\nWe'll dive into each of these more throughout, but at a high level, here’s what guides our approach.\n\n- Components should be responsive and mobile-first\n- Components should be built with a base class and extended via modifier classes\n- Component states should obey a common z-index scale\n- Whenever possible, prefer an HTML and CSS implementation over JavaScript\n- Whenever possible, use utilities over custom styles\n- Whenever possible, avoid enforcing strict HTML requirements (children selectors)\n\n## Responsive\n\nBootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.\n\nAcross Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.\n\nAt times we'll use `max-width` when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.\n\n## Classes\n\nAside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type=\"text\"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override.\n\nAs such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc.\n\nModifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.\n\n## z-index scales\n\nThere are two `z-index` scales in Bootstrap—elements within a component and overlay components.\n\n### Component elements\n\n- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination.\n- These components share a standard `z-index` scale of `0` through `3`.\n- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`.\n- This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered.\n\n### Overlay components\n\nBootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.\n\nEach overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.\n\nLearn more about this in our [`z-index` layout page]([[docsref:/layout/z-index]]).\n\n## HTML and CSS over JS\n\nWhenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.\n\nThis principle is our first-class JavaScript API using `data` attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]([[docsref:/getting-started/javascript#data-attributes]]).\n\nLastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use `\n \n `} />\n\n## File input\n\n\n \n \n \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n \n \n
      `} />\n\n## Color\n\nSet the `type=\"color\"` and add `.form-control-color` to the ``. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.\n\nColor picker\n`} />\n\n## Datalists\n\nDatalists allow you to create a group of `