Axismundi · v3.5.11 · Wave 1 #33

List — Full Spec Module

Baseline components.css §26 remains authoritative. This lab page demonstrates static lists, action rows, navigation rows, selected catalog states, disabled split, Avatar composition, and Ripple v2 on interactive row items only.

Experimental lab preview. No baseline CSS, WordPress registration, runtime module, or Avatar record closure is performed in v3.5.11 Phase 2. Canonical interactive rows do not use button role="listitem".

§2. Static list

Static rows use native list structure and receive no ripple host.

  • Profile Public
  • Last active 5 min

Static informational rows. No data-ax-ripple, no fake click target.

  1. Review summary Confirm all source links and image captions.
  2. Publish notes Static editorial mapping approximates core/list.

§3. Configurations and styles

M3 configurations separate visual style from interaction mode: standard and segmented are style choices; single-action and multi-action are behavior shapes.

Multi-action row Primary row + trailing action composition.

Static composition specimen only. Production multi-action rows need a focus and activation owner; no nested row button is introduced here.

§4. Action rows

Action rows are native buttons. Ripple attaches to the item, not the container.

The second row is a static focused-state catalog specimen.

Navigation rows use anchors. Selected/current state is represented with aria-current, not a listbox claim.

§5. Selection modes

Selection mode examples are static catalog specimens in v3.5.11. Persistent listbox or checkbox behavior belongs to an integration owner.

Static visual only. Real multi-select requires checkbox/listbox state management and keyboard policy.

§6. Segmented list

Segmented lists are visual variants with per-row rounding and a 2px gap.

Hover is statically visualized; disabled native button receives no ripple host.

§7. Row heights and slots

Baseline heights: 56 / 72 / 88. Avatar is composed, image is a List slot.

§8. Default and selected item states

Hover/focus/pressed/dragged are static state specimens. Drag behavior remains out of v3.5.11 scope.

Static catalog state. Production selectable lists need an owner for focus, keyboard movement, and state persistence.

ARIA-disabled navigation Integrator must suppress activation.

aria-disabled communicates state only. Integration code owns activation suppression and focus policy.

§9. Expand interaction boundary

M3 lists may expand. v3.5.11 records the visual contract only; no expand/collapse runtime is created.

Child row Shown only to document the static expanded shape.

§10. Long-content stress

§11. WordPress mapping specimens

core/list maps only to static editorial lists. App rows, search results, profile directories, and notifications are theme pattern or plugin territory.

  • Static editorial row
  • Maps to core/list only when content is truly editorial.

§12. Code snippets

<button type="button"
        class="ax-list__item"
        data-ax-ripple="bounded">
  <span class="ax-list__content">
    <span class="ax-list__label">Action</span>
  </span>
</button>
<ul class="ax-list" aria-label="Profile summary">
  <li class="ax-list__item" data-demo-static="true">
    <span class="ax-list__content">
      <span class="ax-list__label">Static row</span>
    </span>
  </li>
</ul>

§13. Playwright QA targets

TargetExpected
Single-line row56px min-height
Two-line row72px min-height
Three-line row88px min-height
Ripple hostsInteractive .ax-list__item only
Static rowsNo ripple host
ContainerNo ripple host
MobileNo horizontal overflow at 390px

§14. Cross-references