Item

Overview

Item is helm-native: it implements its own presentation directly, with no Navius primitive underneath. ZitsItem is a flex row that carries Variant/Size classes and data-variant/data-size attributes; ZitsItemMedia (leading icon/image/avatar), ZitsItemContent, ZitsItemTitle, ZitsItemDescription, ZitsItemActions, and ZitsItemFooter are its slots, and ZitsItemGroup composes ZitsItemSeparator (itself composing ZitsSeparator) between stacked items.

Install

navius add item --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsItem Variant="outline">
    <ZitsItemMedia Variant="icon"><MailIcon /></ZitsItemMedia>
    <ZitsItemContent>
        <ZitsItemTitle>New message</ZitsItemTitle>
        <ZitsItemDescription>You have a new message from the team.</ZitsItemDescription>
    </ZitsItemContent>
    <ZitsItemActions>
        <ZitsButton Variant="outline" Size="sm">View</ZitsButton>
    </ZitsItemActions>
</ZitsItem>

Parts and props

ChildContent and Attributes pass through unchanged on every part.

ZitsItem adds:

Prop	Type	Default	Description
Variant	string	"default"	One of default, outline, muted.
Size	string	"default"	One of default, sm.

ZitsItemMedia adds:

Prop	Type	Default	Description
Variant	string	"default"	One of default, icon, image.

ZitsItemContent, ZitsItemTitle, ZitsItemDescription, ZitsItemActions, ZitsItemFooter, ZitsItemGroup, and ZitsItemSeparator take no variant/size params of their own.

Styling surface

Attributes on every part is merged with that part’s base class set via Cn.Class (or Cn.Merge on ZitsItemSeparator, which splats onto ZitsSeparator), with the caller’s classes applied last.

Parameter	Values
Variant (Item)	default · outline · muted
Size (Item)	default · sm
Variant (ItemMedia)	default · icon · image

Data attribute hooks

Part	Attribute	Description
Item	data-variant	Mirrors the Variant prop.
Item	data-size	Mirrors the Size prop.
ItemMedia	data-variant	Mirrors the Variant prop.
ItemContent	data-slot="item-content"	Static slot marker; a second adjacent item-content collapses via [&+[data-slot=item-content]]:flex-none.
ItemDescription	data-slot="item-description"	Static slot marker used by ZitsItemMedia’s group-has-[...] selector to self-align when a description is present.

Accessibility mechanism

ZitsItemGroup renders role="list"; the individual ZitsItem rows carry no implicit list-item role of their own, and no other ARIA attributes are wired by these parts.