用途
该技能用于说明如何正确组合 fundamental-styles 组件，包括必需的包装元素、嵌套规则以及常见组合模式。当用户询问如何将组件 A 与组件 B 组合、需要理解组件结构与嵌套、询问必需的包装元素、组件因组合不当而无法工作、询问为何需要某个包装元素，或想理解组件之间的父子关系时，可使用本技能。
核心组合原则
-
始终包含必需的包装元素。许多组件需要特定包装元素才能正常工作，例如表单字段需要 .fd-form-item 包装。
-
遵循组件层级。每个组件有特定结构，不要跳过层级，例如表格需要 .fd-table__row。
-
理解块独立性。每个组件（块）是独立的，嵌套块不会创建层级关系，例如 .fd-button 与 .sap-icon--edit 是两个独立块共存，而非父子 BEM 关系。
常见组合模式
- 表单项组合：Form Item + Form Label + Input + Form Message，.fd-form-item 提供间距与布局结构。
- 输入组组合：Input Group + Input + Button，.fd-input-group 建立弹性布局，__addon 定位附加元素。
- 弹出框 + 菜单：Popover + Button + Menu，.fd-popover 管理定位与可见性，__control 包装触发元素，__body 包含内容。
- 对话框组合：Dialog + Bar + Title + Button，.fd-dialog 为覆盖容器，__content 包含全部内容，__header/__footer 使用 .fd-bar 保持布局一致。
- 按钮 + 图标 + 文本：仅图标按钮需 aria-label；图标加文本时图标为装饰性，.fd-button__text 包装允许正确间距。
- 表格 + 工具栏 + 分页：各自为独立块，工具栏提供操作，表格显示数据，分页控制导航，分离以支持灵活定位。
- 复选框/单选按钮 + 标签：输入元素在前（:checked CSS 选择器需要），标签包装视觉元素。
- 面板 + 内容：Panel + Panel Header + Panel Body，--expandable 修饰符启用折叠/展开。
- 列表 + 列表项：List + List Item + List Title + List Text，__content 分组标题与副标题。
- 卡片结构：Card + Card Header + Card Content，__footer 可选包含操作。
- 面包屑组合：Breadcrumb + Breadcrumb Item + Link，当前页使用 aria-current="page"，分隔符修饰符有 --backslash、--double-greater-than。
- 消息条组合：Message Strip + Message Strip Text，role="alert" 向屏幕阅读器宣告，__close 可选允许关闭。
必需与可选包装元素
始终必需的包装元素包括：表单字段的 .fd-form-item（布局与间距）、输入组的 .fd-input-group（附加元素的弹性布局）、弹出框的 .fd-popover__control 与 .fd-popover__body（定位逻辑）、对话框的 .fd-dialog__content（居中与尺寸）、表格单元格的 .fd-table__row（表格结构）、列表项的 .fd-list__item（列表样式）、菜单项的 .fd-menu__item（菜单结构）。
可选包装元素包括：面板的 .fd-panel__header（结构化头部区域）、卡片的 .fd-card__header（组织标题区域）、按钮的 .fd-button__text（图标与文本间距）、复选框的 .fd-checkbox__label-container（文本换行）。
常见组合错误
- 缺少基础类与修饰符：应使用 class="fd-button fd-button--emphasized"，而非仅 fd-button--emphasized。
- 跳过必需包装元素：表单字段缺少 .fd-form-item 包装。
- 元素顺序错误：复选框标签在输入之前会破坏 :checked 选择器。
适用场景与限制
适用于使用 fundamental-styles 构建界面时理解组件组合方式、排查因结构错误导致的问题。资料未提供该技能的安装方式、收费信息、平台限制或具体使用步骤。