@flowstack-ui/agent-tools 0.1.0-bootstrap.0

package/public/packages/brick/0.1.11/components/collapsible.txt

@@ -0,0 +1,179 @@
+# Collapsible
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: collapsible
+
+# Collapsible agent guide
+
+## Purpose
+
+Reveal one independent in-flow region while Atom owns disclosure state, relationships, keyboard behavior, and measured mount lifecycle.
+
+## Use when
+
+- One control should progressively reveal one related region without creating an overlay or modal interaction.
+
+## Choose something else when
+
+- Several named peer sections form one coordinated set. Use Accordion.
+- The temporary content must layer, dismiss outside, lock scroll, or contain focus. Use Dialog, Drawer, Popover, or Menu according to the interaction.
+
+## Required composition
+
+- Compose Root with one Trigger and one Content; put ContentInner inside Content so visible padding does not corrupt measured animation geometry.
+- Use Indicator inside Trigger for the canonical decorative state cue; the default points down while closed and up while open, and normal Brick layout and content components belong inside ContentInner.
+- Use Trigger iconOnly for a square, centered disclosure control; give it a complete accessible name and let the Root size own its target.
+
+## Rules
+
+- **MUST:** Use Root, Trigger, Content, and ContentInner rather than rebuilding disclosure state, ARIA relationships, measurement, or animation lifecycle.
+- **MUST:** Let Collapsible Trigger own its finished control recipe; do not compose Button or Icon Button into Trigger because competing visual recipes would own one element.
+- **MUST:** Keep visible padding in ContentInner rather than Content so Atom can measure and animate the region accurately.
+- **MUST:** Use Collapsible for in-flow disclosure, not as a substitute for modal Drawer behavior or responsive Show/Hide policy.
+- **MUST:** Leave keepMounted false unless retained DOM or exit animation is required; when enabled, preserve Atom's closed hidden state and never expose retained descendants to interaction.
+- **MUST:** Consume Atom's live content width and height variables for Brick motion across responsive reflow and intrinsic content changes; never hard-code a stale measured dimension or animate a competing wrapper.
+- **MUST:** Load styles.css or core.css plus collapsible.css.
+- **MUST:** Keep the default Indicator pointing down while closed and up while open in both LTR and RTL; use custom decorative artwork only for a deliberate alternate state language.
+- **MUST:** Use Trigger iconOnly instead of sizing a general Trigger with layout wrappers when the disclosure control contains only artwork.
+
+## Common mistakes
+
+- **Avoid:** Using Collapsible Trigger asChild around a finished Button or Icon Button. **Instead:** Use Trigger as the only visual control owner and author its label, icon, and optional Indicator directly.
+- **Avoid:** Forcing a normal Trigger into a square with Frame or local alignment CSS. **Instead:** Use Trigger iconOnly so its Root size supplies square geometry and centered artwork.
+- **Avoid:** Putting padding on Content or animating an application wrapper independently. **Instead:** Keep Content as the measured motion boundary and put visible spacing in ContentInner.
+- **Avoid:** Choosing Collapsible when the page must be inert behind the open panel. **Instead:** Use Drawer or Dialog so Atom can own modal isolation, focus, dismissal, and scroll locking.
+
+## Validation checklist
+
+- Test the accessible Trigger name, aria-expanded/aria-controls relationship, Enter and Space, controlled and uncontrolled state, disabled behavior, focus retention, the default down/up Indicator state, and icon-only centering.
+- Test default unmount, keepMounted hidden descendants, initial-open state, open/close measurement, dynamic and responsive width/height changes, exit presence, reduced motion, long labels, narrow widths, RTL, and horizontal overflow without unintended page-load entrance motion.
+- When adapting Collapsible inside another surface, report any Root geometry override instead of silently treating plain as a behavior-only recipe.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/collapsible`
+- `accordion`
+- `drawer`
+- `app-bar`
+- `nav-list`
+- `show`
+- `hide`
+- `stack`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "collapsible",
+  "name": "Collapsible",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Reveal one independent in-flow region while Atom owns disclosure state, relationships, keyboard behavior, and measured mount lifecycle.",
+  "useWhen": [
+    "One control should progressively reveal one related region without creating an overlay or modal interaction."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Several named peer sections form one coordinated set.",
+      "useInstead": "Accordion"
+    },
+    {
+      "condition": "The temporary content must layer, dismiss outside, lock scroll, or contain focus.",
+      "useInstead": "Dialog, Drawer, Popover, or Menu according to the interaction"
+    }
+  ],
+  "composition": [
+    "Compose Root with one Trigger and one Content; put ContentInner inside Content so visible padding does not corrupt measured animation geometry.",
+    "Use Indicator inside Trigger for the canonical decorative state cue; the default points down while closed and up while open, and normal Brick layout and content components belong inside ContentInner.",
+    "Use Trigger iconOnly for a square, centered disclosure control; give it a complete accessible name and let the Root size own its target."
+  ],
+  "rules": [
+    {
+      "id": "collapsible-anatomy",
+      "level": "must",
+      "statement": "Use Root, Trigger, Content, and ContentInner rather than rebuilding disclosure state, ARIA relationships, measurement, or animation lifecycle."
+    },
+    {
+      "id": "collapsible-single-owner-trigger",
+      "level": "must",
+      "statement": "Let Collapsible Trigger own its finished control recipe; do not compose Button or Icon Button into Trigger because competing visual recipes would own one element."
+    },
+    {
+      "id": "collapsible-content-padding",
+      "level": "must",
+      "statement": "Keep visible padding in ContentInner rather than Content so Atom can measure and animate the region accurately."
+    },
+    {
+      "id": "collapsible-layout-role",
+      "level": "must",
+      "statement": "Use Collapsible for in-flow disclosure, not as a substitute for modal Drawer behavior or responsive Show/Hide policy."
+    },
+    {
+      "id": "collapsible-presence",
+      "level": "must",
+      "statement": "Leave keepMounted false unless retained DOM or exit animation is required; when enabled, preserve Atom's closed hidden state and never expose retained descendants to interaction."
+    },
+    {
+      "id": "collapsible-live-measurement",
+      "level": "must",
+      "statement": "Consume Atom's live content width and height variables for Brick motion across responsive reflow and intrinsic content changes; never hard-code a stale measured dimension or animate a competing wrapper."
+    },
+    {
+      "id": "collapsible-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus collapsible.css."
+    },
+    {
+      "id": "collapsible-indicator-direction",
+      "level": "must",
+      "statement": "Keep the default Indicator pointing down while closed and up while open in both LTR and RTL; use custom decorative artwork only for a deliberate alternate state language."
+    },
+    {
+      "id": "collapsible-icon-only",
+      "level": "must",
+      "statement": "Use Trigger iconOnly instead of sizing a general Trigger with layout wrappers when the disclosure control contains only artwork."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Collapsible Trigger asChild around a finished Button or Icon Button.",
+      "correction": "Use Trigger as the only visual control owner and author its label, icon, and optional Indicator directly."
+    },
+    {
+      "mistake": "Forcing a normal Trigger into a square with Frame or local alignment CSS.",
+      "correction": "Use Trigger iconOnly so its Root size supplies square geometry and centered artwork."
+    },
+    {
+      "mistake": "Putting padding on Content or animating an application wrapper independently.",
+      "correction": "Keep Content as the measured motion boundary and put visible spacing in ContentInner."
+    },
+    {
+      "mistake": "Choosing Collapsible when the page must be inert behind the open panel.",
+      "correction": "Use Drawer or Dialog so Atom can own modal isolation, focus, dismissal, and scroll locking."
+    }
+  ],
+  "validation": [
+    "Test the accessible Trigger name, aria-expanded/aria-controls relationship, Enter and Space, controlled and uncontrolled state, disabled behavior, focus retention, the default down/up Indicator state, and icon-only centering.",
+    "Test default unmount, keepMounted hidden descendants, initial-open state, open/close measurement, dynamic and responsive width/height changes, exit presence, reduced motion, long labels, narrow widths, RTL, and horizontal overflow without unintended page-load entrance motion.",
+    "When adapting Collapsible inside another surface, report any Root geometry override instead of silently treating plain as a behavior-only recipe."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "collapsible",
+      "versionPolicy": "installed-exact"
+    },
+    "accordion",
+    "drawer",
+    "app-bar",
+    "nav-list",
+    "show",
+    "hide",
+    "stack"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/color-picker.txt

@@ -0,0 +1,135 @@
+# Color Picker
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: color-picker
+
+# Color Picker agent guide
+
+## Purpose
+
+Edit, choose, and submit an opaque hexadecimal color through a finished text, native chooser, preset, or optional floating composition.
+
+## Use when
+
+- A form needs one #rrggbb color value selected through editable text, the browser chooser, named presets, or a popover that combines them.
+
+## Choose something else when
+
+- The interface only previews a color. Use Color Swatch.
+- The task requires alpha, gradients, color-space conversion, channels, an eyedropper, or contrast analysis. Use an application-owned specialist until Atom releases that behavior.
+
+## Required composition
+
+- Place Label and Control inside Root; include HiddenInput when the value participates in native form submission.
+- Compose Trigger with Content for a floating picker, or omit both for inline editing.
+- Put ColorSwatch.Root inside Trigger and SwatchTrigger for finished previews while the surrounding control carries the accessible name and selected state.
+
+## Rules
+
+- **MUST:** Give Input and NativeInput accessible names through Label or explicit aria-label values.
+- **MUST:** Provide name to Root and render exactly one HiddenInput when the color must submit.
+- **MUST:** Use #rgb or #rrggbb; this release intentionally supports opaque hexadecimal values only.
+- **MUST:** Load styles.css, or core.css plus both color-picker.css and color-swatch.css when swatches are composed.
+- **SHOULD:** Give presets human-readable names; do not rely on color alone or a raw hex string when a product name exists.
+
+## Common mistakes
+
+- **Avoid:** Reimplementing color parsing, picker state, or Popover behavior in Brick or application code. **Instead:** Use the Atom-backed ColorPicker parts and controlled props.
+- **Avoid:** Naming both Input and HiddenInput for form submission. **Instead:** Put name on Root and render one HiddenInput.
+- **Avoid:** Assuming Chakra's area, alpha, channel, format, or eyedropper parts exist. **Instead:** Stay within the released Brick anatomy and treat richer behavior as Atom-first future work.
+
+## Validation checklist
+
+- Test text, native, preset, controlled, disabled, read-only, invalid, form submit/reset, Escape/focus restoration, light/dark, forced-colors, narrow/zoom, RTL, and non-color selection cues.
+
+## Related guidance
+
+- `color-swatch`
+- `field`
+- `form`
+- `input`
+- `popover`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "color-picker",
+  "name": "Color Picker",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Edit, choose, and submit an opaque hexadecimal color through a finished text, native chooser, preset, or optional floating composition.",
+  "useWhen": [
+    "A form needs one #rrggbb color value selected through editable text, the browser chooser, named presets, or a popover that combines them."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The interface only previews a color.",
+      "useInstead": "Color Swatch"
+    },
+    {
+      "condition": "The task requires alpha, gradients, color-space conversion, channels, an eyedropper, or contrast analysis.",
+      "useInstead": "an application-owned specialist until Atom releases that behavior"
+    }
+  ],
+  "composition": [
+    "Place Label and Control inside Root; include HiddenInput when the value participates in native form submission.",
+    "Compose Trigger with Content for a floating picker, or omit both for inline editing.",
+    "Put ColorSwatch.Root inside Trigger and SwatchTrigger for finished previews while the surrounding control carries the accessible name and selected state."
+  ],
+  "rules": [
+    {
+      "id": "color-picker-label",
+      "level": "must",
+      "statement": "Give Input and NativeInput accessible names through Label or explicit aria-label values."
+    },
+    {
+      "id": "color-picker-form",
+      "level": "must",
+      "statement": "Provide name to Root and render exactly one HiddenInput when the color must submit."
+    },
+    {
+      "id": "color-picker-hex",
+      "level": "must",
+      "statement": "Use #rgb or #rrggbb; this release intentionally supports opaque hexadecimal values only."
+    },
+    {
+      "id": "color-picker-css",
+      "level": "must",
+      "statement": "Load styles.css, or core.css plus both color-picker.css and color-swatch.css when swatches are composed."
+    },
+    {
+      "id": "color-picker-preset-name",
+      "level": "should",
+      "statement": "Give presets human-readable names; do not rely on color alone or a raw hex string when a product name exists."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Reimplementing color parsing, picker state, or Popover behavior in Brick or application code.",
+      "correction": "Use the Atom-backed ColorPicker parts and controlled props."
+    },
+    {
+      "mistake": "Naming both Input and HiddenInput for form submission.",
+      "correction": "Put name on Root and render one HiddenInput."
+    },
+    {
+      "mistake": "Assuming Chakra's area, alpha, channel, format, or eyedropper parts exist.",
+      "correction": "Stay within the released Brick anatomy and treat richer behavior as Atom-first future work."
+    }
+  ],
+  "validation": [
+    "Test text, native, preset, controlled, disabled, read-only, invalid, form submit/reset, Escape/focus restoration, light/dark, forced-colors, narrow/zoom, RTL, and non-color selection cues."
+  ],
+  "related": [
+    "color-swatch",
+    "field",
+    "form",
+    "input",
+    "popover"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/color-swatch.txt

@@ -0,0 +1,98 @@
+# Color Swatch
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: color-swatch
+
+# Color Swatch agent guide
+
+## Purpose
+
+Preview one color or a compact mix of colors with a finished alpha-aware visual treatment.
+
+## Use when
+
+- A selected, available, saved, or documented color needs a compact visual preview.
+
+## Choose something else when
+
+- The user must choose or edit a color. Use Color Picker.
+
+## Required composition
+
+- Render Root for one color and Mix for two or more colors; place the swatch inside the owning control when it represents a selectable option.
+
+## Rules
+
+- **MUST:** Do not use the swatch as the only carrier of a color name, selection state, validation state, or action.
+- **MUST:** Leave decorative swatches unlabeled, or provide label when the swatch itself must be exposed as an image.
+- **MUST:** Load styles.css or core.css plus color-swatch.css.
+
+## Common mistakes
+
+- **Avoid:** Adding click handlers directly to ColorSwatch. **Instead:** Place the passive swatch inside Button, Color Picker preset behavior, or another semantic control.
+
+## Validation checklist
+
+- Check solid, alpha, mixed, size, light/dark, forced-color, zoom, RTL, and decorative versus labeled semantics.
+
+## Related guidance
+
+- `badge`
+- `input`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "color-swatch",
+  "name": "Color Swatch",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Preview one color or a compact mix of colors with a finished alpha-aware visual treatment.",
+  "useWhen": [
+    "A selected, available, saved, or documented color needs a compact visual preview."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The user must choose or edit a color.",
+      "useInstead": "Color Picker"
+    }
+  ],
+  "composition": [
+    "Render Root for one color and Mix for two or more colors; place the swatch inside the owning control when it represents a selectable option."
+  ],
+  "rules": [
+    {
+      "id": "color-swatch-meaning",
+      "level": "must",
+      "statement": "Do not use the swatch as the only carrier of a color name, selection state, validation state, or action."
+    },
+    {
+      "id": "color-swatch-semantics",
+      "level": "must",
+      "statement": "Leave decorative swatches unlabeled, or provide label when the swatch itself must be exposed as an image."
+    },
+    {
+      "id": "color-swatch-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus color-swatch.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Adding click handlers directly to ColorSwatch.",
+      "correction": "Place the passive swatch inside Button, Color Picker preset behavior, or another semantic control."
+    }
+  ],
+  "validation": [
+    "Check solid, alpha, mixed, size, light/dark, forced-color, zoom, RTL, and decorative versus labeled semantics."
+  ],
+  "related": [
+    "badge",
+    "input"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/combobox.txt

@@ -0,0 +1,157 @@
+# Combobox
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: combobox
+
+# Combobox agent guide
+
+## Purpose
+
+Present finished editable filtering and single-value selection while Atom owns committed value, input text, open state, listbox focus, positioning, dismissal, validation, and form participation.
+
+## Use when
+
+- A predefined option set benefits from editable filtering, including search-and-navigate interfaces whose selected result triggers an application-owned effect.
+
+## Choose something else when
+
+- Any text is valid without options, one predefined value needs no filtering, several values must be selected, or the popup contains commands. Use Input, Select or RadioGroup, MultiSelect, or DropdownMenu.
+
+## Required composition
+
+- Compose a persistent Field.Label, then Combobox.Root with the complete options -> Combobox.Control with Input and optional Clear and Trigger -> optional Portal -> Content -> Listbox -> one Item per available option, plus Empty, Loading, groups, and labels when required.
+- Keep committed value, inputValue, and open as independent state axes. Keep rendered Items aligned with Root options and put noninteractive complete labels inside each Item.
+
+## Rules
+
+- **MUST:** Keep committed value, editable input text, and popup open state independent and pair each controlled prop with its matching callback.
+- **MUST:** Keep Root options, rendered Items, stable values, labels, disabled state, grouping, and custom filtering aligned as one authoritative collection.
+- **MUST:** Keep Input as the named editable combobox focus owner, Content as positioning and dismissal owner, and Listbox as semantic option owner; never hand-position a Surface or put listbox role on Content.
+- **MUST:** Preserve active-descendant focus, Arrow/Home/End, Enter, Escape close-then-clear, Tab, openOnFocus, pointer selection, disabled skipping, required committed-value validity, named hidden submission, external form, and reset.
+- **MUST:** Enable freeSolo only when values outside the predefined collection are valid; display text alone must not satisfy required validity for a closed vocabulary.
+- **MUST:** Keep routing, remote loading, analytics, persistence, and destination policy in application callbacks while Empty and Loading accurately reflect the current collection state.
+- **MUST:** Load styles.css or core.css plus combobox.css and Field CSS when composed.
+
+## Common mistakes
+
+- **Avoid:** Conflating input text with committed value, enabling freeSolo for closed vocabulary, omitting rendered Items, or putting listbox role on Content. **Instead:** Manage all three states, restrict freeSolo, align options with Items, and preserve Atom's compound semantic owners.
+- **Avoid:** Putting Link, Button, or other controls inside Item or closing a hand-positioned result Surface with custom document listeners. **Instead:** Use noninteractive option labels and perform the selected value's application effect from onValueChange inside the complete Combobox popup anatomy.
+
+## Validation checklist
+
+- Verify controlled and uncontrolled committed value, input text, and open state; default label initialization; filtering and grouping; disabled options; typing; Arrow/Home/End; Enter option and freeSolo commits; Escape; Tab; openOnFocus; Empty; Loading; Clear; Trigger; pointer selection; and clearOnSelect.
+- Verify visible Field naming, required committed-value validity, inline/native validation focus, hidden named value, external form, reset, Control-sized collision positioning, Portal, outside dismissal and cancellation, and highlighted-item scrolling.
+- Verify recipes and sizes, long labels, narrow widths, zoom, RTL, mobile focus, light and dark appearance, forced colors, and application-owned search-and-navigate effects.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/combobox`
+- `@flowstack-ui/atom/agents/listbox`
+- `field`
+- `input`
+- `select`
+- `radio-group`
+- `multi-select`
+- `dropdown-menu`
+- `popover`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "combobox",
+  "name": "Combobox",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present finished editable filtering and single-value selection while Atom owns committed value, input text, open state, listbox focus, positioning, dismissal, validation, and form participation.",
+  "useWhen": [
+    "A predefined option set benefits from editable filtering, including search-and-navigate interfaces whose selected result triggers an application-owned effect."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Any text is valid without options, one predefined value needs no filtering, several values must be selected, or the popup contains commands.",
+      "useInstead": "Input, Select or RadioGroup, MultiSelect, or DropdownMenu"
+    }
+  ],
+  "composition": [
+    "Compose a persistent Field.Label, then Combobox.Root with the complete options -> Combobox.Control with Input and optional Clear and Trigger -> optional Portal -> Content -> Listbox -> one Item per available option, plus Empty, Loading, groups, and labels when required.",
+    "Keep committed value, inputValue, and open as independent state axes. Keep rendered Items aligned with Root options and put noninteractive complete labels inside each Item."
+  ],
+  "rules": [
+    {
+      "id": "combobox-three-states",
+      "level": "must",
+      "statement": "Keep committed value, editable input text, and popup open state independent and pair each controlled prop with its matching callback."
+    },
+    {
+      "id": "combobox-one-collection",
+      "level": "must",
+      "statement": "Keep Root options, rendered Items, stable values, labels, disabled state, grouping, and custom filtering aligned as one authoritative collection."
+    },
+    {
+      "id": "combobox-semantic-owners",
+      "level": "must",
+      "statement": "Keep Input as the named editable combobox focus owner, Content as positioning and dismissal owner, and Listbox as semantic option owner; never hand-position a Surface or put listbox role on Content."
+    },
+    {
+      "id": "combobox-keyboard-form",
+      "level": "must",
+      "statement": "Preserve active-descendant focus, Arrow/Home/End, Enter, Escape close-then-clear, Tab, openOnFocus, pointer selection, disabled skipping, required committed-value validity, named hidden submission, external form, and reset."
+    },
+    {
+      "id": "combobox-free-solo",
+      "level": "must",
+      "statement": "Enable freeSolo only when values outside the predefined collection are valid; display text alone must not satisfy required validity for a closed vocabulary."
+    },
+    {
+      "id": "combobox-application-effect",
+      "level": "must",
+      "statement": "Keep routing, remote loading, analytics, persistence, and destination policy in application callbacks while Empty and Loading accurately reflect the current collection state."
+    },
+    {
+      "id": "combobox-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus combobox.css and Field CSS when composed."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Conflating input text with committed value, enabling freeSolo for closed vocabulary, omitting rendered Items, or putting listbox role on Content.",
+      "correction": "Manage all three states, restrict freeSolo, align options with Items, and preserve Atom's compound semantic owners."
+    },
+    {
+      "mistake": "Putting Link, Button, or other controls inside Item or closing a hand-positioned result Surface with custom document listeners.",
+      "correction": "Use noninteractive option labels and perform the selected value's application effect from onValueChange inside the complete Combobox popup anatomy."
+    }
+  ],
+  "validation": [
+    "Verify controlled and uncontrolled committed value, input text, and open state; default label initialization; filtering and grouping; disabled options; typing; Arrow/Home/End; Enter option and freeSolo commits; Escape; Tab; openOnFocus; Empty; Loading; Clear; Trigger; pointer selection; and clearOnSelect.",
+    "Verify visible Field naming, required committed-value validity, inline/native validation focus, hidden named value, external form, reset, Control-sized collision positioning, Portal, outside dismissal and cancellation, and highlighted-item scrolling.",
+    "Verify recipes and sizes, long labels, narrow widths, zoom, RTL, mobile focus, light and dark appearance, forced colors, and application-owned search-and-navigate effects."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "combobox",
+      "versionPolicy": "installed-exact"
+    },
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "listbox",
+      "versionPolicy": "installed-exact"
+    },
+    "field",
+    "input",
+    "select",
+    "radio-group",
+    "multi-select",
+    "dropdown-menu",
+    "popover"
+  ]
+}
+```