## Summary Create \`<pf-v6-input-group>\` to implement the PatternFly v6 [Input group](https://www.patternfly.org/components/input-group) component. Groups form inputs with addons (buttons, text, selects) into a visually connected unit. ## Prior Art | Source | Element | Status | |--------|---------|--------| | PFE v4 | -- | -- | | cem | -- | -- | | cockpit | -- | -- | | chickadee | -- | -- | ## Sub-components - \`<pf-v6-input-group-item>\` - Individual item within the group ## Requirements - MUST implement PFv6 visual designs - MUST provide end-user feature parity with \`@patternfly/react-core\` InputGroup - MAY adjust element API to leverage web platform strengths - SHOULD maintain CSS custom property theming compatibility - SHOULD expose useful CSS shadow parts ## Element-specific considerations - React \`InputGroupText\`: \`variant\`: \`plain\` or \`box\` - label/addon text beside inputs - React \`InputGroupItem\`: \`isFill\` (grows to fill), \`isBox\`, \`isPlain\`, \`isDisabled\` - Pure layout element; connects child elements visually with shared border and no gap - CSS approach: flex container; inner items share border-radius only at outer edges (use \`:first-child\`/\`:last-child\` selectors) - No interactive behavior on the group itself; children handle their own interaction ## Checklist ### Implementation - [ ] API per \`.claude/ADVICE.md\` - [ ] CSS uses v6 tokens, logical properties, nesting - [ ] \`@summary\` and JSDoc on element class ### Demos - [ ] Demos match patternfly.org naming/structure - [ ] CSS custom properties match computed styles from patternfly.org (Chrome MCP) - [ ] Visual parity verified via Chrome MCP ### Tests - [ ] Public API covered (attributes, properties, events, slots) - [ ] \`a11ySnapshot\` assertions ### Reviews - [ ] \`/review-api\` passes - [ ] \`/review-demos\` passes - [ ] \`/review-a11y\` passes - [ ] \`eslint\` and \`stylelint\` pass ### Ship - [ ] Add changeset - [ ] PR targets \`staging/pfv6\` (NOT \`main\`)
Activity