用途：指导在 Bootstrap 6 中编写组件的非 JavaScript 部分，即样式与标记。适用于新建组件、添加修饰符或变体类、编写组件样式。交互行为另见 bootstrap-component-js，调色板与主题色另见 bootstrap-color-system。
主要能力与工作流：共九步。1）规划组件，选单数 kebab-case 名称，决定只需令牌、需要变体还是变体加尺寸，并先检查是否已有组件可扩展。2）创建 scss/_<name>.scss 分部与令牌映射，先声明空映射再用 defaults() 填充，令牌名按组件命名空间书写且不带前缀。3）编写基类，声明放入级联层，用 @include tokens() 输出令牌，声明读取 var(--<name>-) 而非 Sass 映射。4）添加修饰符、变体与尺寸，修饰符只覆盖令牌；变体由可覆盖映射驱动并循环生成，映射到主题子键而非字面颜色。5）接入主题色，组件通过读取 --theme- 变量并带中性回退自动获得主题支持。6）标记与无障碍，从语义元素出发，仅在必要时加 ARIA，保证键盘可达与可见焦点环，图标按钮需可访问名称，不单靠颜色传达状态，保持 RTL 安全。7）在 scss/bootstrap.scss 的 components 块中 @forward 分部；子目录组件经该目录 index.scss 桶文件转发。8）编写文档页并加入侧边栏条目，用 <Example>、<CSSVariables>、<ScssDocs> 渲染。9）验证：运行 npm run css-lint、npm run css、npm run docs-build，并在浏览器中检查主题类、颜色模式、RTL 与减少动效。
限制与注意：不要编辑 dist/、js/dist/ 或 _site/ 中的生成产物，源码位于 scss/ 与 js/src/。不要使用 lighten()/darken()，改用 color-mix()、相对 oklch() 或 light-dark()；不要用 border: none/outline: none，用 0。使用逻辑属性以支持 RTL。scss-docs 标记缺失会导致构建失败。在自有项目中可沿用相同模式，使用 custom 层。资料未提供具体版本发布时间、收费或平台信息。