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

package/public/packages/atom/0.24.0/guides/layer-selection.txt

@@ -0,0 +1,807 @@
+# Atom layer selection
+
+Source: @flowstack-ui/atom@0.24.0
+Kind: guide
+ID: layer-selection
+
+# Atom layer selection
+
+## Purpose
+
+Decide whether reusable headless behavior belongs in Atom, an existing native element, Brick, a higher composition layer, or the application before composing a primitive.
+
+## Decision order
+
+1. Start from the semantic and interaction job, not the desired appearance.
+2. Use an existing native element when it already provides the complete reusable behavior contract.
+3. Use an Atom primitive when reusable semantics, state, focus, keyboard, pointer, touch, portal, positioning, or compound composition are required.
+4. Use Brick instead when the consumer needs a finished visual component; ordinary Brick applications should not import Atom directly.
+5. Keep product workflows, page layout, content, routing, persistence, and analytics in higher layers.
+
+## Selection map
+
+- **native action:** use Button. Choose Link for ordinary navigation and Pressable only for custom interactive surfaces.
+- **application header structure:** use AppBar. Compose Toolbar only when grouped controls require toolbar keyboard behavior.
+- **site or application navigation:** use NavList, NavigationMenu, Breadcrumb, BottomNavigation, Tabs, or Pagination. Select by the navigation relationship, not by visual resemblance.
+- **temporary commands or settings:** use DropdownMenu from a visible button, ContextMenu from a contextual gesture, Menubar for persistent application command groups, or Menu as the shared direct/custom foundation. Use Select or Listbox when choosing a form value and keep important contextual actions discoverable elsewhere.
+- **supplemental floating disclosure:** use Tooltip for a brief hint or HoverCard for a richer passive preview. Choose Popover when the content is interactive and visible native content when the information is essential.
+- **choice or persistent control state:** use CheckboxGroup for independent form choices, RadioGroup for one visible form answer, Switch for an immediately applied on/off setting, Toggle for one pressed command, or ToggleGroup for related pressed commands. Choose by semantics and application timing rather than visual shape.
+- **spatial numeric input:** use Slider for a general scalar or range adjusted by feel, or Rating for a short ordered score. Choose NumberInput when exact typed entry matters and Progress when the value is read-only.
+- **option selection presentation:** use Listbox for a visible composite list, Select for one collapsed fixed value, MultiSelect for several collapsed fixed values, or Combobox for editable filtering and optional valid free-form entry. Choose RadioGroup or CheckboxGroup when short form choices should remain separate visible controls.
+- **specialized text entry:** use NumberInput for exact numeric entry with stepping, OTPField for a short one-time code split across cells, or PasswordToggleField for a revealable reusable secret. Keep ordinary text and digit-like identifiers in Input.
+- **local file selection and drop:** use FileUpload. Use a native file input when custom picker, drop, validation feedback, and selected-item behavior are unnecessary; always validate uploads again on the server.
+- **copy known text with status:** use Clipboard. Choose Button when asynchronous copy state and authored feedback are unnecessary.
+- **short non-blocking update:** use Toast. Use inline content for contextual or durable feedback and AlertDialog when a response is required.
+- **gesture-enhanced row actions:** use SwipeableItem. Keep an obvious tap or click path and choose Menu when many actions or discovery make swipe unsuitable.
+- **one inline disclosure region:** use Collapsible. Choose Accordion for several coordinated sections or Dialog for a modal task.
+- **row and column data:** use Table for read-oriented comparison, DataGrid for flat two-dimensional keyboard navigation or row selection, or TreeGrid for hierarchical interactive rows. Keep sorting, editing, filtering, resizing, and virtualization application-composed and preserve full logical indexes when windowing.
+- **hierarchical item navigation:** use Tree for one primary item column or TreeGrid for several navigable columns. Choose Accordion when branches contain general disclosure content rather than selectable items.
+- **dynamic article stream:** use Feed. Choose List for a static set and add virtualization only when scale justifies its focus and accessibility cost.
+- **stable media geometry:** use AspectRatio. Use Image when loading fallback is also required and keep all media semantics on the child.
+- **compact identity or contextual status:** use Avatar for a named entity or Badge for a short contextual count or status. Keep essential identity visible and use Progress for ongoing completion rather than status text.
+- **form control labeling:** use Label for one standalone native control or Field.Label for coordinated control, description, error, and state wiring. Use Fieldset for a group of controls.
+- **ongoing work status:** use Progress for determinate or indeterminate completion. Choose the native meter element for a stable measurement, Slider for user adjustment, or Toast for a short nonblocking update.
+- **assistive-only text:** use VisuallyHidden. Prefer visible text when it benefits everyone and use aria-hidden rather than VisuallyHidden for decorative content.
+- **direction-aware Atom subtree:** use Direction together with the matching native dir attribute. Provider mirrors Atom behavior but never replaces browser text-direction semantics; prefer a component's local dir prop only for an intentional nested override.
+- **ordinary blocking task, form, or information surface:** use Dialog. Choose AlertDialog for an urgent consequential choice, Drawer for a side sheet, or Popover for a compact attached panel.
+- **custom modal-family primitive foundation:** use Modal. Application work should prefer the purpose-built modal-family components.
+- **scrollable viewport with owned scrollbar behavior:** use ScrollArea. Keep ordinary document scrolling native.
+- **resilient media loading:** use Image. Use a native img when loading state and fallback composition are unnecessary.
+- **grouped disclosure sections:** use Accordion. Choose Collapsible for one independent disclosure and Tabs for one shared switching panel.
+- **static ordered or unordered content:** use List. Choose NavList or an interactive collection primitive when items navigate, select, or activate.
+
+## Rules
+
+- **MUST:** Keep Atom guidance and compositions headless; do not add visual recipes, color, theme, product copy, or application layout policy.
+- **MUST:** Preserve native semantics and behavior unless Atom explicitly owns the added reusable contract.
+- **MUST:** Do not rebuild focus, keyboard, pointer, touch, portal, positioning, or controlled-state behavior already owned by an Atom primitive.
+- **SHOULD:** When building with Brick, consume Brick public components and let Brick consume Atom rather than importing both layers directly.
+
+## Native fallback
+
+1. Search Atom's manifest, public exports, and related component guides for the required behavior before using a native fallback.
+2. Use the narrowest semantic native element only when no Atom primitive owns the behavior and no reusable state or interaction contract is being recreated.
+3. Record the missing primitive or intentional native choice so repeated gaps can be evaluated by Atom maintainers.
+
+## Validation checklist
+
+- Name the selected semantic and interaction job and its owning layer.
+- Confirm no visual or application policy entered the Atom composition.
+- Confirm the rendered elements, accessible names, state, focus, keyboard, pointer, touch, and RTL behavior that apply.
+- Record any native fallback and the Atom capability searched first.
+
+## Related guidance
+
+- `behavior-composition`
+- `button`
+- `link`
+- `pressable`
+- `app-bar`
+- `navigation-menu`
+- `menu`
+- `dropdown-menu`
+- `context-menu`
+- `menubar`
+- `tooltip`
+- `hover-card`
+- `checkbox-group`
+- `radio-group`
+- `switch`
+- `toggle`
+- `toggle-group`
+- `slider`
+- `rating`
+- `listbox`
+- `select`
+- `multi-select`
+- `combobox`
+- `number-input`
+- `otp-field`
+- `password-toggle-field`
+- `file-upload`
+- `clipboard`
+- `toast`
+- `swipeable-item`
+- `collapsible`
+- `table`
+- `data-grid`
+- `tree`
+- `tree-grid`
+- `feed`
+- `aspect-ratio`
+- `avatar`
+- `badge`
+- `label`
+- `progress`
+- `visually-hidden`
+- `direction`
+- `modal`
+- `dialog`
+- `alert-dialog`
+- `drawer`
+- `popover`
+- `accordion`
+- `list`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-guide.v1",
+  "id": "layer-selection",
+  "name": "Atom layer selection",
+  "package": "@flowstack-ui/atom",
+  "layer": "atom",
+  "kind": "guide",
+  "purpose": "Decide whether reusable headless behavior belongs in Atom, an existing native element, Brick, a higher composition layer, or the application before composing a primitive.",
+  "decisionOrder": [
+    "Start from the semantic and interaction job, not the desired appearance.",
+    "Use an existing native element when it already provides the complete reusable behavior contract.",
+    "Use an Atom primitive when reusable semantics, state, focus, keyboard, pointer, touch, portal, positioning, or compound composition are required.",
+    "Use Brick instead when the consumer needs a finished visual component; ordinary Brick applications should not import Atom directly.",
+    "Keep product workflows, page layout, content, routing, persistence, and analytics in higher layers."
+  ],
+  "selection": [
+    {
+      "intent": "native action",
+      "use": "Button",
+      "note": "Choose Link for ordinary navigation and Pressable only for custom interactive surfaces.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "button"
+        },
+        {
+          "kind": "component",
+          "id": "link"
+        },
+        {
+          "kind": "component",
+          "id": "pressable"
+        }
+      ]
+    },
+    {
+      "intent": "application header structure",
+      "use": "AppBar",
+      "note": "Compose Toolbar only when grouped controls require toolbar keyboard behavior.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "app-bar"
+        },
+        {
+          "kind": "component",
+          "id": "toolbar"
+        }
+      ]
+    },
+    {
+      "intent": "site or application navigation",
+      "use": "NavList, NavigationMenu, Breadcrumb, BottomNavigation, Tabs, or Pagination",
+      "note": "Select by the navigation relationship, not by visual resemblance.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "nav-list"
+        },
+        {
+          "kind": "component",
+          "id": "navigation-menu"
+        },
+        {
+          "kind": "component",
+          "id": "breadcrumb"
+        },
+        {
+          "kind": "component",
+          "id": "bottom-navigation"
+        },
+        {
+          "kind": "component",
+          "id": "tabs"
+        },
+        {
+          "kind": "component",
+          "id": "pagination"
+        }
+      ]
+    },
+    {
+      "intent": "temporary commands or settings",
+      "use": "DropdownMenu from a visible button, ContextMenu from a contextual gesture, Menubar for persistent application command groups, or Menu as the shared direct/custom foundation",
+      "note": "Use Select or Listbox when choosing a form value and keep important contextual actions discoverable elsewhere.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "dropdown-menu"
+        },
+        {
+          "kind": "component",
+          "id": "context-menu"
+        },
+        {
+          "kind": "component",
+          "id": "menubar"
+        },
+        {
+          "kind": "component",
+          "id": "menu"
+        },
+        {
+          "kind": "component",
+          "id": "select"
+        },
+        {
+          "kind": "component",
+          "id": "listbox"
+        }
+      ]
+    },
+    {
+      "intent": "supplemental floating disclosure",
+      "use": "Tooltip for a brief hint or HoverCard for a richer passive preview",
+      "note": "Choose Popover when the content is interactive and visible native content when the information is essential.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "tooltip"
+        },
+        {
+          "kind": "component",
+          "id": "hover-card"
+        },
+        {
+          "kind": "component",
+          "id": "popover"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "choice or persistent control state",
+      "use": "CheckboxGroup for independent form choices, RadioGroup for one visible form answer, Switch for an immediately applied on/off setting, Toggle for one pressed command, or ToggleGroup for related pressed commands",
+      "note": "Choose by semantics and application timing rather than visual shape.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "checkbox-group"
+        },
+        {
+          "kind": "component",
+          "id": "radio-group"
+        },
+        {
+          "kind": "component",
+          "id": "switch"
+        },
+        {
+          "kind": "component",
+          "id": "toggle"
+        },
+        {
+          "kind": "component",
+          "id": "toggle-group"
+        }
+      ]
+    },
+    {
+      "intent": "spatial numeric input",
+      "use": "Slider for a general scalar or range adjusted by feel, or Rating for a short ordered score",
+      "note": "Choose NumberInput when exact typed entry matters and Progress when the value is read-only.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "slider"
+        },
+        {
+          "kind": "component",
+          "id": "rating"
+        },
+        {
+          "kind": "component",
+          "id": "number-input"
+        },
+        {
+          "kind": "component",
+          "id": "progress"
+        }
+      ]
+    },
+    {
+      "intent": "option selection presentation",
+      "use": "Listbox for a visible composite list, Select for one collapsed fixed value, MultiSelect for several collapsed fixed values, or Combobox for editable filtering and optional valid free-form entry",
+      "note": "Choose RadioGroup or CheckboxGroup when short form choices should remain separate visible controls.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "listbox"
+        },
+        {
+          "kind": "component",
+          "id": "select"
+        },
+        {
+          "kind": "component",
+          "id": "multi-select"
+        },
+        {
+          "kind": "component",
+          "id": "combobox"
+        },
+        {
+          "kind": "component",
+          "id": "radio-group"
+        },
+        {
+          "kind": "component",
+          "id": "checkbox-group"
+        }
+      ]
+    },
+    {
+      "intent": "specialized text entry",
+      "use": "NumberInput for exact numeric entry with stepping, OTPField for a short one-time code split across cells, or PasswordToggleField for a revealable reusable secret",
+      "note": "Keep ordinary text and digit-like identifiers in Input.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "number-input"
+        },
+        {
+          "kind": "component",
+          "id": "otp-field"
+        },
+        {
+          "kind": "component",
+          "id": "password-toggle-field"
+        },
+        {
+          "kind": "component",
+          "id": "input"
+        }
+      ]
+    },
+    {
+      "intent": "local file selection and drop",
+      "use": "FileUpload",
+      "note": "Use a native file input when custom picker, drop, validation feedback, and selected-item behavior are unnecessary; always validate uploads again on the server.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "file-upload"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "copy known text with status",
+      "use": "Clipboard",
+      "note": "Choose Button when asynchronous copy state and authored feedback are unnecessary.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "clipboard"
+        },
+        {
+          "kind": "component",
+          "id": "button"
+        }
+      ]
+    },
+    {
+      "intent": "short non-blocking update",
+      "use": "Toast",
+      "note": "Use inline content for contextual or durable feedback and AlertDialog when a response is required.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "toast"
+        },
+        {
+          "kind": "component",
+          "id": "alert-dialog"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "gesture-enhanced row actions",
+      "use": "SwipeableItem",
+      "note": "Keep an obvious tap or click path and choose Menu when many actions or discovery make swipe unsuitable.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "swipeable-item"
+        },
+        {
+          "kind": "component",
+          "id": "menu"
+        }
+      ]
+    },
+    {
+      "intent": "one inline disclosure region",
+      "use": "Collapsible",
+      "note": "Choose Accordion for several coordinated sections or Dialog for a modal task.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "collapsible"
+        },
+        {
+          "kind": "component",
+          "id": "accordion"
+        },
+        {
+          "kind": "component",
+          "id": "dialog"
+        }
+      ]
+    },
+    {
+      "intent": "row and column data",
+      "use": "Table for read-oriented comparison, DataGrid for flat two-dimensional keyboard navigation or row selection, or TreeGrid for hierarchical interactive rows",
+      "note": "Keep sorting, editing, filtering, resizing, and virtualization application-composed and preserve full logical indexes when windowing.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "table"
+        },
+        {
+          "kind": "component",
+          "id": "data-grid"
+        },
+        {
+          "kind": "component",
+          "id": "tree-grid"
+        }
+      ]
+    },
+    {
+      "intent": "hierarchical item navigation",
+      "use": "Tree for one primary item column or TreeGrid for several navigable columns",
+      "note": "Choose Accordion when branches contain general disclosure content rather than selectable items.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "tree"
+        },
+        {
+          "kind": "component",
+          "id": "tree-grid"
+        },
+        {
+          "kind": "component",
+          "id": "accordion"
+        }
+      ]
+    },
+    {
+      "intent": "dynamic article stream",
+      "use": "Feed",
+      "note": "Choose List for a static set and add virtualization only when scale justifies its focus and accessibility cost.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "feed"
+        },
+        {
+          "kind": "component",
+          "id": "list"
+        }
+      ]
+    },
+    {
+      "intent": "stable media geometry",
+      "use": "AspectRatio",
+      "note": "Use Image when loading fallback is also required and keep all media semantics on the child.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "aspect-ratio"
+        },
+        {
+          "kind": "component",
+          "id": "image"
+        }
+      ]
+    },
+    {
+      "intent": "compact identity or contextual status",
+      "use": "Avatar for a named entity or Badge for a short contextual count or status",
+      "note": "Keep essential identity visible and use Progress for ongoing completion rather than status text.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "avatar"
+        },
+        {
+          "kind": "component",
+          "id": "badge"
+        },
+        {
+          "kind": "component",
+          "id": "progress"
+        }
+      ]
+    },
+    {
+      "intent": "form control labeling",
+      "use": "Label for one standalone native control or Field.Label for coordinated control, description, error, and state wiring",
+      "note": "Use Fieldset for a group of controls.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "label"
+        },
+        {
+          "kind": "component",
+          "id": "field"
+        },
+        {
+          "kind": "component",
+          "id": "fieldset"
+        }
+      ]
+    },
+    {
+      "intent": "ongoing work status",
+      "use": "Progress for determinate or indeterminate completion",
+      "note": "Choose the native meter element for a stable measurement, Slider for user adjustment, or Toast for a short nonblocking update.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "progress"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        },
+        {
+          "kind": "component",
+          "id": "slider"
+        },
+        {
+          "kind": "component",
+          "id": "toast"
+        }
+      ]
+    },
+    {
+      "intent": "assistive-only text",
+      "use": "VisuallyHidden",
+      "note": "Prefer visible text when it benefits everyone and use aria-hidden rather than VisuallyHidden for decorative content.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "visually-hidden"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "direction-aware Atom subtree",
+      "use": "Direction together with the matching native dir attribute",
+      "note": "Provider mirrors Atom behavior but never replaces browser text-direction semantics; prefer a component's local dir prop only for an intentional nested override.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "direction"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "ordinary blocking task, form, or information surface",
+      "use": "Dialog",
+      "note": "Choose AlertDialog for an urgent consequential choice, Drawer for a side sheet, or Popover for a compact attached panel.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "dialog"
+        },
+        {
+          "kind": "component",
+          "id": "alert-dialog"
+        },
+        {
+          "kind": "component",
+          "id": "drawer"
+        },
+        {
+          "kind": "component",
+          "id": "popover"
+        }
+      ]
+    },
+    {
+      "intent": "custom modal-family primitive foundation",
+      "use": "Modal",
+      "note": "Application work should prefer the purpose-built modal-family components.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "modal"
+        },
+        {
+          "kind": "component",
+          "id": "dialog"
+        },
+        {
+          "kind": "component",
+          "id": "alert-dialog"
+        },
+        {
+          "kind": "component",
+          "id": "drawer"
+        }
+      ]
+    },
+    {
+      "intent": "scrollable viewport with owned scrollbar behavior",
+      "use": "ScrollArea",
+      "note": "Keep ordinary document scrolling native.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "scroll-area"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "resilient media loading",
+      "use": "Image",
+      "note": "Use a native img when loading state and fallback composition are unnecessary.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "image"
+        },
+        {
+          "kind": "native-application",
+          "id": "native-element"
+        }
+      ]
+    },
+    {
+      "intent": "grouped disclosure sections",
+      "use": "Accordion",
+      "note": "Choose Collapsible for one independent disclosure and Tabs for one shared switching panel.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "accordion"
+        },
+        {
+          "kind": "component",
+          "id": "collapsible"
+        },
+        {
+          "kind": "component",
+          "id": "tabs"
+        }
+      ]
+    },
+    {
+      "intent": "static ordered or unordered content",
+      "use": "List",
+      "note": "Choose NavList or an interactive collection primitive when items navigate, select, or activate.",
+      "destinations": [
+        {
+          "kind": "component",
+          "id": "list"
+        },
+        {
+          "kind": "component",
+          "id": "nav-list"
+        }
+      ]
+    }
+  ],
+  "rules": [
+    {
+      "id": "atom-behavior-only",
+      "level": "must",
+      "statement": "Keep Atom guidance and compositions headless; do not add visual recipes, color, theme, product copy, or application layout policy."
+    },
+    {
+      "id": "atom-native-first",
+      "level": "must",
+      "statement": "Preserve native semantics and behavior unless Atom explicitly owns the added reusable contract."
+    },
+    {
+      "id": "atom-no-duplicate-behavior",
+      "level": "must",
+      "statement": "Do not rebuild focus, keyboard, pointer, touch, portal, positioning, or controlled-state behavior already owned by an Atom primitive."
+    },
+    {
+      "id": "atom-brick-boundary",
+      "level": "should",
+      "statement": "When building with Brick, consume Brick public components and let Brick consume Atom rather than importing both layers directly."
+    }
+  ],
+  "nativeFallback": {
+    "check": "Search Atom's manifest, public exports, and related component guides for the required behavior before using a native fallback.",
+    "use": "Use the narrowest semantic native element only when no Atom primitive owns the behavior and no reusable state or interaction contract is being recreated.",
+    "report": "Record the missing primitive or intentional native choice so repeated gaps can be evaluated by Atom maintainers."
+  },
+  "validation": [
+    "Name the selected semantic and interaction job and its owning layer.",
+    "Confirm no visual or application policy entered the Atom composition.",
+    "Confirm the rendered elements, accessible names, state, focus, keyboard, pointer, touch, and RTL behavior that apply.",
+    "Record any native fallback and the Atom capability searched first."
+  ],
+  "related": [
+    "behavior-composition",
+    "button",
+    "link",
+    "pressable",
+    "app-bar",
+    "navigation-menu",
+    "menu",
+    "dropdown-menu",
+    "context-menu",
+    "menubar",
+    "tooltip",
+    "hover-card",
+    "checkbox-group",
+    "radio-group",
+    "switch",
+    "toggle",
+    "toggle-group",
+    "slider",
+    "rating",
+    "listbox",
+    "select",
+    "multi-select",
+    "combobox",
+    "number-input",
+    "otp-field",
+    "password-toggle-field",
+    "file-upload",
+    "clipboard",
+    "toast",
+    "swipeable-item",
+    "collapsible",
+    "table",
+    "data-grid",
+    "tree",
+    "tree-grid",
+    "feed",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "label",
+    "progress",
+    "visually-hidden",
+    "direction",
+    "modal",
+    "dialog",
+    "alert-dialog",
+    "drawer",
+    "popover",
+    "accordion",
+    "list"
+  ]
+}
+```