Align selectpicker styles with native Bootstrap 5.3 and refresh deps - #16
Merged
Conversation
Styles: - Use Bootstrap's --bs-secondary-color for the placeholder so it matches native .form-control/.form-select placeholders in light and dark modes. - Replace the toggle's triangle caret with the Bootstrap 5.3 form-select chevron, rendered via a CSS mask so it inherits currentColor. It shows chevron-down when closed and rotates to chevron-up when open. - Draw the default checkmark and the checkbox selection indicator from the same masked SVG so they share the chevron's stroke width and rounded caps, and inherit the option's text color. - Add a standalone comparison page (docs/static/examples/comparison.html) showing the native select next to the selectpicker. Dependencies: - Update devDependencies to their latest compatible versions (Docusaurus 3.10.2, Playwright 1.62.1, sass 1.102.0, webpack 5.109.2, rollup 4.62.3, postcss 8.5.25, react 19.2.8, etc.) and bump the safe majors @rollup/plugin-terser 1.0.0 and cssnano 8.0.2. - This clears the previously flagged exploitable advisories (undici, webpack-dev-server, brace-expansion, js-yaml, shell-quote, svgo, ...). - ESLint is kept on ^9 because the flat config relies on core formatting rules removed in ESLint 10. - The only remaining audit findings are the build/docs-only transitive packages nanoid (<3.3.17 fix is ESM-only, incompatible with postcss) and image-size (<=2.0.2, no patched release). The published package is dependency-free, so consumers are unaffected. Verified: npm run build, npm run docs:build, and all 24 Playwright e2e tests pass. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Refresh package-lock to the latest in-range versions used by the docs toolchain and build (rollup 4.62.4, caniuse-api dedupe). All Docusaurus and docs dependencies were already updated to their latest compatible versions in the previous commit. Verified: npm run build, npm run docs:build, and the running docs dev server all succeed. The live /docs/examples page renders 50 selectpickers with no console errors, and the updated chevron/placeholder styles are served correctly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…variables - Render the dropdown chevron at exactly 16px x 12px (mask-size 16px 12px) to mirror Bootstrap's `.form-select` `background-size`, instead of a 0.875rem `contain` box that scaled the icon slightly too large. - Parameterize the `bs-mask-icon` mixin with a mask-size argument so the chevron uses 16px 12px while selection ticks keep `contain`. - Convert remaining hardcoded colors to Bootstrap CSS variables so theme changes propagate: validation borders now use `--bs-form-invalid/valid-border-color` (falling back to danger/success), create-option/selected-item/focus states use `--bs-primary-rgb`, and the disabled option color uses `--bs-dropdown-link-disabled-color`. - Expand the comparison example with optgroups, a disabled option, and a divider to verify parity with native Bootstrap. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace the comparison example's "toggle dark mode" button with a proper
color mode selector (Light / Dark / Auto). "Auto" follows the OS
`prefers-color-scheme` and updates live when the system theme changes.
- Make the comparison discoverable from the docs:
- Add a "Comparison" navbar entry that opens the standalone page in a new
tab (uses `pathname://` so it isn't rewritten with a trailing slash).
- Add a "Native Bootstrap comparison" subsection under Styling and layout
with a live native-vs-selectpicker example and a new-tab link to the
full standalone page.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…on and tick The remove control on selected tags used a bold "×" text character inside a gray circular chip, which didn't match the stroke weight or feel of the chevron and selection checkmark. - Add a shared `$bs-x-svg` stroke-based X icon that reuses the same `$bs-icon-stroke-width` and rounded caps/joins as the chevron and tick. - Render `.bs-selected-item-remove` through the `bs-mask-icon` mixin so the X inherits `currentColor` (muted `--bs-secondary-color` by default, darkening to `--bs-body-color` on hover/focus) and stays theme-aware in light and dark. - Drop the now-unused `\u00d7` text node from the rendered markup. - Give the list-style remove an explicit icon size so the mask renders. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Styles:
Dependencies:
Verified: npm run build, npm run docs:build, and all 24 Playwright e2e tests pass.
Make sure to target the
devbranch!