diff --git a/package-lock.json b/package-lock.json index 8eded94340..599300c814 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "bundlewatch": "^0.3.3", "clean-css-cli": "^5.6.1", "cross-env": "^7.0.3", - "eslint": "^8.30.0", + "eslint": "^8.31.0", "eslint-config-xo": "^0.43.1", "eslint-plugin-html": "^7.1.0", "eslint-plugin-import": "^2.26.0", @@ -66,7 +66,7 @@ "pa11y-ci-reporter-html": "^5.0.4", "postcss": "^8.4.20", "postcss-cli": "^10.1.0", - "rollup": "^3.9.0", + "rollup": "^3.9.1", "rollup-plugin-istanbul": "^4.0.0", "rtlcss": "^4.0.0", "sass": "^1.57.1", @@ -74,7 +74,7 @@ "sass-true": "^7.0.0", "shelljs": "^0.8.5", "sirv-cli": "^2.0.2", - "stylelint": "^14.16.0", + "stylelint": "^14.16.1", "stylelint-config-twbs-bootstrap": "^7.0.0", "tarteaucitronjs": "^1.10.0", "terser": "5.16.0", @@ -11152,12 +11152,12 @@ } }, "node_modules/eslint": { - "version": "8.30.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.30.0.tgz", - "integrity": "sha512-MGADB39QqYuzEGov+F/qb18r4i7DohCDOfatHaxI2iGlPuC65bwG2gxgO+7DkyL38dRFaRH7RaRAgU6JKL9rMQ==", + "version": "8.31.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz", + "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==", "dev": true, "dependencies": { - "@eslint/eslintrc": "^1.4.0", + "@eslint/eslintrc": "^1.4.1", "@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -20765,9 +20765,9 @@ } }, "node_modules/rollup": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.9.0.tgz", - "integrity": "sha512-nGGylpmblyjTpF4lEUPgmOw6OVxRvnI6Iuuh6Lz4O/X66cVOX1XJSsqP1YamxQ+mPuFE7qJxLFDSCk8rNv5dDw==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.9.1.tgz", + "integrity": "sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -22671,9 +22671,9 @@ } }, "node_modules/stylelint": { - "version": "14.16.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.0.tgz", - "integrity": "sha512-X6uTi9DcxjzLV8ZUAjit1vsRtSwcls0nl07c9rqOPzvpA8IvTX/xWEkBRowS0ffevRrqkHa/ThDEu86u73FQDg==", + "version": "14.16.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz", + "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==", "dev": true, "dependencies": { "@csstools/selector-specificity": "^2.0.2", @@ -33918,12 +33918,12 @@ "dev": true }, "eslint": { - "version": "8.30.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.30.0.tgz", - "integrity": "sha512-MGADB39QqYuzEGov+F/qb18r4i7DohCDOfatHaxI2iGlPuC65bwG2gxgO+7DkyL38dRFaRH7RaRAgU6JKL9rMQ==", + "version": "8.31.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz", + "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==", "dev": true, "requires": { - "@eslint/eslintrc": "^1.4.0", + "@eslint/eslintrc": "^1.4.1", "@humanwhocodes/config-array": "^0.11.8", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -41223,9 +41223,9 @@ } }, "rollup": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.9.0.tgz", - "integrity": "sha512-nGGylpmblyjTpF4lEUPgmOw6OVxRvnI6Iuuh6Lz4O/X66cVOX1XJSsqP1YamxQ+mPuFE7qJxLFDSCk8rNv5dDw==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.9.1.tgz", + "integrity": "sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -42728,9 +42728,9 @@ } }, "stylelint": { - "version": "14.16.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.0.tgz", - "integrity": "sha512-X6uTi9DcxjzLV8ZUAjit1vsRtSwcls0nl07c9rqOPzvpA8IvTX/xWEkBRowS0ffevRrqkHa/ThDEu86u73FQDg==", + "version": "14.16.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz", + "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.2", diff --git a/package.json b/package.json index 8a2b58cef6..3022d38628 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "bundlewatch": "^0.3.3", "clean-css-cli": "^5.6.1", "cross-env": "^7.0.3", - "eslint": "^8.30.0", + "eslint": "^8.31.0", "eslint-config-xo": "^0.43.1", "eslint-plugin-html": "^7.1.0", "eslint-plugin-import": "^2.26.0", @@ -161,7 +161,7 @@ "pa11y-ci-reporter-html": "^5.0.4", "postcss": "^8.4.20", "postcss-cli": "^10.1.0", - "rollup": "^3.9.0", + "rollup": "^3.9.1", "rollup-plugin-istanbul": "^4.0.0", "rtlcss": "^4.0.0", "sass": "^1.57.1", @@ -169,7 +169,7 @@ "sass-true": "^7.0.0", "shelljs": "^0.8.5", "sirv-cli": "^2.0.2", - "stylelint": "^14.16.0", + "stylelint": "^14.16.1", "stylelint-config-twbs-bootstrap": "^7.0.0", "tarteaucitronjs": "^1.10.0", "terser": "5.16.0", diff --git a/scss/_root.scss b/scss/_root.scss index 2f67d634b3..74367f38bd 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -242,7 +242,9 @@ --#{$prefix}light-border-subtle: #{$light-border-subtle-dark}; --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark}; - --#{$prefix}heading-color: #{$headings-color-dark}; + @if $headings-color-dark != null { + --#{$prefix}heading-color: #{$headings-color-dark}; + } --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 7c4b9740b9..c56015635f 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -44,7 +44,7 @@ $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; $emphasis-color-dark: $white !default; $border-color-dark: $gray-700 !default; $border-color-translucent-dark: rgba($white, .15) !default; -$headings-color-dark: #fff !default; +$headings-color-dark: null !default; $link-color-dark: $blue-300 !default; $link-hover-color-dark: $blue-200 !default; $code-color-dark: $pink-300 !default; diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss index 7e9a6c7a8a..c7dcc52c89 100644 --- a/scss/vendor/_rfs.scss +++ b/scss/vendor/_rfs.scss @@ -1,4 +1,4 @@ -// stylelint-disable property-blacklist, scss/dollar-variable-default +// stylelint-disable property-disallowed-list, scss/dollar-variable-default // SCSS RFS mixin // diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 5d5f601aae..29cd6220e0 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -9,6 +9,12 @@ margin-top: -5rem; } + > h2, + > h3, + > h4 { + --#{$prefix}heading-color: #fff; + } + > h2:not(:first-child) { margin-top: 3rem; } @@ -74,6 +80,7 @@ } .bd-title { + --#{$prefix}heading-color: #fff; @include font-size(3rem); } diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 45a206f268..0f372aa92e 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -56,11 +56,8 @@ $breadcrumb-divider: quote(">"); It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. - {{< callout info >}} -### Using embedded SVG - -Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape. +**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. {{< /callout >}} {{< example >}} diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md index 959263ec07..1e34cb19b1 100644 --- a/site/content/docs/5.3/components/button-group.md +++ b/site/content/docs/5.3/components/button-group.md @@ -20,12 +20,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`. {{< /example >}} -{{< callout warning >}} -##### Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{{< callout info >}} +Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them. {{< /callout >}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}). diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 099c73ce62..decec621b6 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -266,8 +266,7 @@ And putting it to use in a navbar: ## Directions {{< callout info >}} -#### RTL -Directions are mirrored when using Boosted in RTL, meaning `.dropstart` will appear on the right side. +**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side. {{< /callout >}} ### Centered @@ -951,6 +950,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ### Via JavaScript +{{< callout warning >}} +Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of using the Data API or JavaScript. +{{< /callout >}} + Call the dropdowns via JavaScript: ```js @@ -958,12 +961,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle') const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new boosted.Dropdown(dropdownToggleEl)) ``` -{{< callout info >}} -##### `data-bs-toggle="dropdown"` still required - -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} - ### Options {{< markdown >}} diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index b5f047e908..6929b6c1d5 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -116,12 +116,10 @@ You can customize the appearance of popovers using [CSS variables](#variables). ### Dismiss on next click -Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. +Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element. {{< callout danger >}} -#### Specific markup required for dismiss-on-next-click - -For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `