@flowstack-ui/brick 0.1.6 → 0.1.11

package/dist/agents/layer-selection.md

@@ -14,14 +14,57 @@ Choose the correct FLOWSTACK layer and require Brick-first composition when buil
 
 ## Selection map
 
-- **text with Brick typography:** use Text. Choose the semantic rendered element through its public API.
+- **headings, paragraphs, captions, and eyebrows:** use Heading, Paragraph, Caption, or Eyebrow. Give Heading an explicit semantic level and choose its visual variant independently.
+- **other text with Brick typography:** use Text. Choose the semantic rendered element through its public API and author the intended letter case in content.
+- **extended quotation with visible attribution:** use native blockquote with Brick text content. Keep attribution outside blockquote; when the quotation and attribution form one self-contained unit, use native figure with direct blockquote and figcaption children. Cite names a referenced work, not the person quoted.
 - **one-dimensional alignment:** use Stack, HStack, or VStack. Use Grid for two-dimensional track relationships.
 - **bounded page width:** use Container. Use Surface or Card when the region also needs a visual boundary.
 - **top application or page bar:** use AppBar. Compose navigation and action components inside its sections.
 - **responsive presence:** use Show or Hide. Use CSS media visibility rather than rendering two JavaScript-controlled trees.
 - **image with resilient loading:** use Image. Use an adapter only when a framework image optimizer provides a measured capability Brick lacks.
+- **stable media or embed geometry before its content loads:** use AspectRatio. Choose Image when the asset owns resilient loading, Surface for a general visual boundary, and Skeleton for a temporary loading placeholder.
+- **preserved multi-line technical source:** use Code Block. Keep syntax tokenization in a consumer adapter and pass the exact plain source separately for copy behavior.
 - **navigation destination:** use Link or Button with href. Use Link for ordinary navigation and Button only for an emphasized destination.
 - **grouped disclosure sections:** use Accordion. Choose Collapsible for one independent disclosure and Tabs for one shared switching panel.
+- **ordinary blocking task, form, settings flow, or focused information:** use Dialog. Choose AlertDialog for one urgent consequential decision and Drawer when the temporary task belongs at a screen edge.
+- **urgent or consequential decision that requires an explicit response:** use AlertDialog. Keep a safe Cancel before Action; choose Dialog for ordinary forms and information.
+- **compact anchored interactive panel:** use Popover. Choose Tooltip or HoverCard for noninteractive context, DropdownMenu for commands, Select or Combobox for option selection, and Dialog for a larger blocking task.
+- **commands or settings opened from one visible button:** use DropdownMenu. Choose ContextMenu for contextual invocation, Menubar for persistent application command categories, Select for a form value, and NavigationMenu or NavList for navigation.
+- **target-specific commands invoked by secondary click, keyboard context action, or supported long press:** use ContextMenu. Keep a visible Button or DropdownMenu route to every important command.
+- **persistent desktop-like application command categories:** use Menubar. Choose DropdownMenu for one temporary command menu, NavigationMenu or NavList for routes, Toolbar for immediately executable controls, and Drawer only as an application-selected mobile alternative.
+- **redundant passive preview for a genuine link or focusable subject:** use HoverCard. Choose Tooltip for one short hint, Popover for interaction, Dialog for a larger task, and visible Text when the information is essential.
+- **brief supplemental description for an already named control:** use Tooltip. Choose HoverCard for a richer passive preview, Popover for interaction, and visible Text for essential information.
+- **exactly one form choice from a short visible set:** use RadioGroup. Choose CheckboxGroup for independent choices, Select for a compact longer list, and ToggleGroup for pressed commands.
+- **any number of related form choices:** use CheckboxGroup. Choose Checkbox for one independent choice, RadioGroup for exactly one choice, and ToggleGroup for pressed commands.
+- **immediately applied on or off setting:** use Switch. Choose Checkbox for a deferred form answer and Toggle for a persistent pressed command.
+- **one command with persistent pressed state:** use Toggle. Choose Button for a momentary action, Switch for an immediate setting, Checkbox for a submitted choice, and ToggleGroup for related pressed commands.
+- **related keyboard-navigable pressed commands:** use ToggleGroup. Choose Toggle for one command, RadioGroup or CheckboxGroup for form choices, Switch for immediate settings, and Tabs for switching panels.
+- **exact numeric value with typing and step actions:** use NumberInput. Choose Slider for approximate spatial adjustment, Input for numeric-looking identifiers, Select or RadioGroup for a small fixed set, and Progress for read-only completion.
+- **one predefined form value from a compact collapsed collection:** use Select. Choose RadioGroup for a short visible set, Combobox for editable filtering, MultiSelect for several values, DropdownMenu for commands, and Link for navigation.
+- **several predefined form values from a compact collapsed collection:** use MultiSelect. Choose CheckboxGroup for a short visible set, Select for one value, and Combobox only when its single-value editable model fits; record a Brick gap for unsupported tag creation or other specialized multi-value behavior.
+- **editable filtering and one committed option value:** use Combobox. Choose Input when any text is valid without options, Select for a compact noneditable list, RadioGroup for a short visible set, MultiSelect for several predefined values, and DropdownMenu for commands.
+- **persistently visible composite option collection:** use record a Brick gap before application-owned implementation. Brick has no public owner for this job. Do not import Atom directly; first reconsider RadioGroup or CheckboxGroup for visible form choices, Select or MultiSelect for collapsed choices, and Combobox for editable filtering.
+- **short one-time verification, recovery, or pairing code:** use OTPField. Choose PasswordToggleField for a reusable secret, NumberInput for a quantity, and Input for an ordinary identifier or variable-length value.
+- **password entry with an allowed reveal action:** use PasswordToggleField. Choose Input with type=password when reveal is forbidden or unwanted and OTPField for a one-time code.
+- **local file picking, optional drop, review, and removal before application processing:** use FileUpload. Choose Input for a textual path or URL, Progress for transfer progress, Toast for a transient result, and Image for a rendered asset; keep server validation and upload transport in the application.
+- **short non-blocking application outcome or process update:** use Toast. Choose Field or Form feedback for validation, Progress for numeric completion, AlertDialog for a required response, and persistent application content for essential or durable information.
+- **touch-enhanced quick actions for a list-like row with an obvious click alternative:** use SwipeableItem. Choose DropdownMenu for a larger command set, Button or IconButton for continuously visible actions, and Link when the row navigates.
+- **one independent in-flow disclosure region:** use Collapsible. Choose Accordion for coordinated peer sections, Dialog or Drawer for a modal task, Popover for an anchored layer, and Show or Hide for responsive presence.
+- **one-column hierarchical navigation and optional selection:** use Tree. Choose TreeGrid for hierarchical rows with navigable columns, Accordion or Collapsible for arbitrary disclosure content, DataGrid for flat interactive tabular data, and List for static hierarchy.
+- **hierarchical rows with several navigable columns:** use TreeGrid. Choose Tree for one primary hierarchy column, DataGrid for flat interactive rows, Table for read-oriented tabular relationships, and an application-owned data tool for editing or independent cell controls.
+- **flat tabular data with composite cell navigation or row selection:** use DataGrid. Choose Table for read-oriented comparison, TreeGrid for hierarchical rows, and an application-owned data tool for editing, column management, or an enterprise data engine.
+- **read-oriented row and column comparison:** use Table. Choose DataGrid for composite cell navigation or row selection, TreeGrid for hierarchical interactive rows, and List when meaningful column relationships are absent.
+- **changing stream of focusable articles with article-to-article keyboard movement:** use Feed. Choose List for a static sequence, Table or DataGrid for tabular relationships, Tree for hierarchy, and Stack or Grid for purely visual arrangement.
+- **linear read-only task completion or indeterminate work:** use Progress. Choose ProgressCircle when compact circular geometry is important, Slider for editable values, Toast for a transient outcome, and Skeleton for unknown content loading.
+- **compact circular read-only task completion or indeterminate work:** use ProgressCircle. Choose Progress for linear completion, Slider for editable values, and Skeleton for unknown content loading.
+- **visual count or presence dot over one owning element:** use NotificationBadge. Choose Badge for an in-flow passive label or count, Status for a named state, Button for an actionable count, and visible Text when the value must be announced or understood without the owner; NotificationBadge does not announce changes.
+- **compact identity for a named person, organization, or entity:** use Avatar. Choose Image for a larger editorial portrait and NotificationBadge only when the owning Avatar needs a separate visual count or presence indicator.
+- **short passive in-flow label, category, status, or count:** use Badge. Choose NotificationBadge for an overlaid count or dot, Status for richer named state semantics, and Button when the label is actionable.
+- **editable, selectable, or submitted opaque hexadecimal color:** use ColorPicker. Choose ColorSwatch for a passive preview; richer alpha, gradient, channel, eyedropper, and color-space editing remains an Atom-first gap.
+- **passive preview of one color or a compact color mix:** use ColorSwatch. Choose ColorPicker when the user must edit, select, or submit the value; keep interaction on a semantic owner.
+- **short assistive-only equivalent for meaning already conveyed visually:** use VisuallyHidden. Choose visible Text for essential instructions, state, errors, or announcements, and keep an IconButton or Button itself visible while placing the hidden equivalent inside it.
+- **approximate numeric value or ordered range through spatial manipulation:** use Slider. Choose NumberInput for exact entry, Progress for read-only completion, and Rating for a short ordered score.
+- **short ordered score input or recognizable passive score aggregate:** use Rating. Choose Slider for a general numeric setting and RadioGroup when choices have distinct categorical meanings.
 - **ordered or unordered content:** use List. Choose NavList, an interactive collection, Table, or DataGrid when rows navigate, select, activate, or expose data relationships.
 
 ## Rules
@@ -55,7 +98,47 @@ Choose the correct FLOWSTACK layer and require Brick-first composition when buil
 - `grid`
 - `text`
 - `image`
+- `aspect-ratio`
+- `code-block`
 - `show`
 - `hide`
 - `accordion`
+- `collapsible`
 - `list`
+- `feed`
+- `tree`
+- `tree-grid`
+- `table`
+- `data-grid`
+- `dialog`
+- `alert-dialog`
+- `popover`
+- `dropdown-menu`
+- `context-menu`
+- `menubar`
+- `hover-card`
+- `tooltip`
+- `radio-group`
+- `checkbox-group`
+- `switch`
+- `toggle`
+- `toggle-group`
+- `number-input`
+- `select`
+- `multi-select`
+- `combobox`
+- `otp-field`
+- `password-toggle-field`
+- `file-upload`
+- `toast`
+- `swipeable-item`
+- `progress`
+- `progress-circle`
+- `notification-badge`
+- `avatar`
+- `badge`
+- `color-picker`
+- `color-swatch`
+- `visually-hidden`
+- `slider`
+- `rating`

package/dist/agents/link-box.json

@@ -0,0 +1,97 @@
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "link-box",
+  "name": "Link Box",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Expand one real destination across a containing region while keeping secondary controls independent.",
+  "useWhen": [
+    "A card, result, article, or other bounded item has one primary destination and needs a larger pointer target.",
+    "The same item may contain a separate save, compare, menu, or other action."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The complete region performs an operation instead of navigating.",
+      "useInstead": "Button or Pressable"
+    },
+    {
+      "condition": "Only the visible text should be clickable or pointer text selection is important.",
+      "useInstead": "Link"
+    }
+  ],
+  "composition": [
+    "Wrap the complete visual item in LinkBox.Root and put LinkBox.Link around concise destination text, usually the item title.",
+    "Wrap every independently interactive sibling in LinkBox.Action; never place buttons or additional links inside LinkBox.Link.",
+    "When an Action overlays media through ZStack, compose ZStack.Item asChild with LinkBox.Action and use ZStack.Root isolation=\"open\" plus ZStack.Item layer=\"action\"; use edgeSpacing when the control needs a theme-space inset.",
+    "Give Root the semantic host for the item, such as article or li, and keep the inner Card.Root as its default div to avoid duplicate semantic containers."
+  ],
+  "rules": [
+    {
+      "id": "link-box-one-destination",
+      "level": "must",
+      "statement": "Provide exactly one primary LinkBox.Link with a real destination and concise accessible name."
+    },
+    {
+      "id": "link-box-actions",
+      "level": "must",
+      "statement": "Keep secondary controls outside the primary anchor and inside LinkBox.Action."
+    },
+    {
+      "id": "link-box-overlay-actions",
+      "level": "must",
+      "statement": "For an Action nested in a ZStack overlay, use ZStack's public isolation and named-layer API, then prove the independent action and expanded link both activate correctly in a real browser."
+    },
+    {
+      "id": "link-box-no-press",
+      "level": "must",
+      "statement": "Do not add role, tabIndex, click handlers, or Pressable behavior to LinkBox.Root."
+    },
+    {
+      "id": "link-box-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus link-box.css; the modular entry includes Link styling."
+    },
+    {
+      "id": "link-box-plain-editorial",
+      "level": "should",
+      "statement": "Use Root variant plain for an unbounded editorial preview whose edge media and unpadded copy should not receive a hover boundary; focus-visible remains intact."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Wrapping the entire Card in Link and then adding favorite or menu buttons inside it.",
+      "correction": "Use LinkBox.Root, keep one title LinkBox.Link, and layer each separate control through LinkBox.Action."
+    },
+    {
+      "mistake": "Making Root focusable in addition to Link.",
+      "correction": "Root is only a visual containing region; the real Link owns focus and navigation."
+    },
+    {
+      "mistake": "Placing LinkBox.Action inside an isolated overlay layout without checking stacking contexts.",
+      "correction": "Merge ZStack.Item onto LinkBox.Action with asChild, set ZStack.Root isolation=\"open\", set the item layer=\"action\", and verify pointer activation rather than recreating the relationship with inline styles."
+    },
+    {
+      "mistake": "Using LinkBox for a card that only performs an operation.",
+      "correction": "Use Button or Pressable so action semantics and keyboard behavior remain truthful."
+    }
+  ],
+  "validation": [
+    "Inspect the final DOM for one primary a[href] and no nested interactive elements.",
+    "Click empty visual areas, then keyboard-focus and activate the named link with Enter.",
+    "Verify secondary controls activate independently with both pointer and keyboard input and do not navigate.",
+    "Check the whole-region hover and focus ring in light, dark, forced colors, narrow layouts, and zoom."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "link",
+      "versionPolicy": "installed-exact"
+    },
+    "link",
+    "card",
+    "button",
+    "icon-button"
+  ]
+}

package/dist/agents/link-box.md

@@ -0,0 +1,53 @@
+# Link Box agent guide
+
+## Purpose
+
+Expand one real destination across a containing region while keeping secondary controls independent.
+
+## Use when
+
+- A card, result, article, or other bounded item has one primary destination and needs a larger pointer target.
+- The same item may contain a separate save, compare, menu, or other action.
+
+## Choose something else when
+
+- The complete region performs an operation instead of navigating. Use Button or Pressable.
+- Only the visible text should be clickable or pointer text selection is important. Use Link.
+
+## Required composition
+
+- Wrap the complete visual item in LinkBox.Root and put LinkBox.Link around concise destination text, usually the item title.
+- Wrap every independently interactive sibling in LinkBox.Action; never place buttons or additional links inside LinkBox.Link.
+- When an Action overlays media through ZStack, compose ZStack.Item asChild with LinkBox.Action and use ZStack.Root isolation="open" plus ZStack.Item layer="action"; use edgeSpacing when the control needs a theme-space inset.
+- Give Root the semantic host for the item, such as article or li, and keep the inner Card.Root as its default div to avoid duplicate semantic containers.
+
+## Rules
+
+- **MUST:** Provide exactly one primary LinkBox.Link with a real destination and concise accessible name.
+- **MUST:** Keep secondary controls outside the primary anchor and inside LinkBox.Action.
+- **MUST:** For an Action nested in a ZStack overlay, use ZStack's public isolation and named-layer API, then prove the independent action and expanded link both activate correctly in a real browser.
+- **MUST:** Do not add role, tabIndex, click handlers, or Pressable behavior to LinkBox.Root.
+- **MUST:** Load styles.css or core.css plus link-box.css; the modular entry includes Link styling.
+- **SHOULD:** Use Root variant plain for an unbounded editorial preview whose edge media and unpadded copy should not receive a hover boundary; focus-visible remains intact.
+
+## Common mistakes
+
+- **Avoid:** Wrapping the entire Card in Link and then adding favorite or menu buttons inside it. **Instead:** Use LinkBox.Root, keep one title LinkBox.Link, and layer each separate control through LinkBox.Action.
+- **Avoid:** Making Root focusable in addition to Link. **Instead:** Root is only a visual containing region; the real Link owns focus and navigation.
+- **Avoid:** Placing LinkBox.Action inside an isolated overlay layout without checking stacking contexts. **Instead:** Merge ZStack.Item onto LinkBox.Action with asChild, set ZStack.Root isolation="open", set the item layer="action", and verify pointer activation rather than recreating the relationship with inline styles.
+- **Avoid:** Using LinkBox for a card that only performs an operation. **Instead:** Use Button or Pressable so action semantics and keyboard behavior remain truthful.
+
+## Validation checklist
+
+- Inspect the final DOM for one primary a[href] and no nested interactive elements.
+- Click empty visual areas, then keyboard-focus and activate the named link with Enter.
+- Verify secondary controls activate independently with both pointer and keyboard input and do not navigate.
+- Check the whole-region hover and focus ring in light, dark, forced colors, narrow layouts, and zoom.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/link`
+- `link`
+- `card`
+- `button`
+- `icon-button`

package/dist/agents/link.json

@@ -16,7 +16,8 @@
     }
   ],
   "composition": [
-    "Provide a real href or compose a router-owned anchor, then choose a visual variant independently from navigation semantics."
+    "Provide a real href or compose a router-owned anchor. Leave the default theme variant to follow the project decoration policy, choose underline for a persistent local affordance, or choose plain only inside unmistakable navigation whose container, current state, hover/pressed treatment, and focus ring preserve the destination affordance without decoration. Neutral navigation stays primary at rest and gains semantic accent emphasis on hover and press.",
+    "When a Link completes a sentence or paragraph, keep it inside that semantic Text owner and leave its default inherited size so typography and wrapping remain one coherent text flow; use layout components only for independently meaningful peer items."
   ],
   "rules": [
     {
@@ -24,6 +25,16 @@
       "level": "must",
       "statement": "Preserve anchor semantics and a real destination even when the link looks like a button."
     },
+    {
+      "id": "link-inline-sentence",
+      "level": "must",
+      "statement": "Keep a Link that completes surrounding prose inside the owning sentence or paragraph and inherit its typography; do not split one sentence into layout siblings merely to align it."
+    },
+    {
+      "id": "link-plain-distinction",
+      "level": "must",
+      "statement": "When a theme removes the resting underline, keep accent link text at least 3:1 distinct from adjacent primary text and restore the underline on interaction."
+    },
     {
       "id": "link-css",
       "level": "must",
@@ -32,16 +43,34 @@
   ],
   "commonMistakes": [
     {
-      "mistake": "Replacing a destination with Button because the design is prominent.",
-      "correction": "Use Link and select the appropriate Brick variant."
+      "mistake": "Replacing ordinary inline or standalone navigation with Button only to increase emphasis.",
+      "correction": "Use Link for ordinary navigation; use Button with a real href only when the destination intentionally needs a filled, soft, outlined, or ghost action treatment."
+    },
+    {
+      "mistake": "Rendering prose and the Link that completes it as separate Stack children, or explicitly restating Link's default inherited size.",
+      "correction": "Render one semantic Text sentence with an inline Link and leave its inherited size implicit; reserve Stack for independent peers."
+    },
+    {
+      "mistake": "Removing resting underlines globally without validating links against surrounding text.",
+      "correction": "Use the Theme Link input so compilation validates the required text distinction, or keep underlines."
     }
   ],
   "validation": [
     "Inspect href and accessible name.",
-    "Test focus, Enter navigation, visited/external behavior when relevant, and contrast."
+    "For inline prose links, confirm the Link remains inside the owning sentence or paragraph, inherits its typography, and wraps as one text flow.",
+    "Test focus, Enter navigation, visited/external behavior when relevant, and contrast.",
+    "For no-resting-underline themes, verify the compiled 3:1 text-distinction result and the interactive underline.",
+    "For explicit plain navigation, verify no interaction underline appears, neutral destinations gain semantic accent hover/press emphasis, and container, current, and focus treatments still communicate the destination."
   ],
   "related": [
-    "@flowstack-ui/atom/agents/link",
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "link",
+      "versionPolicy": "installed-exact"
+    },
+    "text",
+    "stack",
     "button"
   ]
 }

package/dist/agents/link.md

@@ -14,23 +14,33 @@ Render finished native navigation as inline, standalone, or button-like content
 
 ## Required composition
 
-- Provide a real href or compose a router-owned anchor, then choose a visual variant independently from navigation semantics.
+- Provide a real href or compose a router-owned anchor. Leave the default theme variant to follow the project decoration policy, choose underline for a persistent local affordance, or choose plain only inside unmistakable navigation whose container, current state, hover/pressed treatment, and focus ring preserve the destination affordance without decoration. Neutral navigation stays primary at rest and gains semantic accent emphasis on hover and press.
+- When a Link completes a sentence or paragraph, keep it inside that semantic Text owner and leave its default inherited size so typography and wrapping remain one coherent text flow; use layout components only for independently meaningful peer items.
 
 ## Rules
 
 - **MUST:** Preserve anchor semantics and a real destination even when the link looks like a button.
+- **MUST:** Keep a Link that completes surrounding prose inside the owning sentence or paragraph and inherit its typography; do not split one sentence into layout siblings merely to align it.
+- **MUST:** When a theme removes the resting underline, keep accent link text at least 3:1 distinct from adjacent primary text and restore the underline on interaction.
 - **MUST:** Load styles.css or core.css plus link.css.
 
 ## Common mistakes
 
-- **Avoid:** Replacing a destination with Button because the design is prominent. **Instead:** Use Link and select the appropriate Brick variant.
+- **Avoid:** Replacing ordinary inline or standalone navigation with Button only to increase emphasis. **Instead:** Use Link for ordinary navigation; use Button with a real href only when the destination intentionally needs a filled, soft, outlined, or ghost action treatment.
+- **Avoid:** Rendering prose and the Link that completes it as separate Stack children, or explicitly restating Link's default inherited size. **Instead:** Render one semantic Text sentence with an inline Link and leave its inherited size implicit; reserve Stack for independent peers.
+- **Avoid:** Removing resting underlines globally without validating links against surrounding text. **Instead:** Use the Theme Link input so compilation validates the required text distinction, or keep underlines.
 
 ## Validation checklist
 
 - Inspect href and accessible name.
+- For inline prose links, confirm the Link remains inside the owning sentence or paragraph, inherits its typography, and wraps as one text flow.
 - Test focus, Enter navigation, visited/external behavior when relevant, and contrast.
+- For no-resting-underline themes, verify the compiled 3:1 text-distinction result and the interactive underline.
+- For explicit plain navigation, verify no interaction underline appears, neutral destinations gain semantic accent hover/press emphasis, and container, current, and focus treatments still communicate the destination.
 
 ## Related guidance
 
 - `@flowstack-ui/atom/agents/link`
+- `text`
+- `stack`
 - `button`

package/dist/agents/list.json

@@ -67,7 +67,7 @@
   ],
   "validation": [
     "Inspect ul or ol and li output, ordered meaning, marker behavior, structured-part order, nesting, roles, and CSS delivery.",
-    "Test long titles and descriptions, compact and comfortable density, all variants and markers, 320 CSS px, 200 and 400 percent zoom, RTL, and forced colors.",
+    "Test long titles and descriptions, compact and comfortable density, all variants and markers, first-line marker alignment in bordered simple and structured rows, 320 CSS px, 200 and 400 percent zoom, RTL, and forced colors.",
     "Confirm Trailing content does not squeeze Content, controls have names and touch targets, disabled descendants are handled explicitly, and List adds no keyboard model."
   ],
   "related": [

package/dist/agents/list.md

@@ -36,7 +36,7 @@ Render finished ordered or unordered content with native list semantics, optiona
 ## Validation checklist
 
 - Inspect ul or ol and li output, ordered meaning, marker behavior, structured-part order, nesting, roles, and CSS delivery.
-- Test long titles and descriptions, compact and comfortable density, all variants and markers, 320 CSS px, 200 and 400 percent zoom, RTL, and forced colors.
+- Test long titles and descriptions, compact and comfortable density, all variants and markers, first-line marker alignment in bordered simple and structured rows, 320 CSS px, 200 and 400 percent zoom, RTL, and forced colors.
 - Confirm Trailing content does not squeeze Content, controls have names and touch targets, disabled descendants are handled explicitly, and List adds no keyboard model.
 
 ## Related guidance