Panoramica

The <mds-paginator-item> web component is a compound child of <mds-paginator> that renders a single clickable cell of the pagination control: either a numbered page or a navigation arrow. It has no standalone meaning and exists only to be orchestrated by its parent, which owns page state and emits the page-change event.

Semantic Behavior

Compound child only: It is rendered exclusively by <mds-paginator> (one per page number plus the back/forward arrows) and is not used standalone or mixed with other child types; the parent manages count, ordering, scrolling, and selection.State is parent-driven: selected and disabled are not set by the consumer - the parent reflects them based on currentPage and the page boundaries, and the item only renders the resulting visual state.Click reported upward: The item carries no internal page logic; clicking it is resolved by the parent, which emits mdsPaginatorChange.Keyboard activation: The item is keyboard-activatable, but only while it is neither disabled nor selected - the active and unavailable cells ignore activation, although they stay in the tab order.Icon vs. text rendering: When icon is set the item renders an icon (used for the back/forward arrows); otherwise it renders the default slot as the page number.Text-only slot: The default slot is meant for a plain text string (a page number); HTML elements or nested components should not be placed in it.

Properties & Visual Configurations

This child exposes only three props, none of which a consumer normally sets directly: icon: Provide an icon name to turn the cell into a navigation control (the parent passes the back/forward arrows); leave it unset for a numbered page that uses the text slot instead.selected: Marks the cell as the current page. Set by the parent only; it switches the item to its selected visual treatment and makes it inert.disabled: Marks the cell as unavailable (e.g. the back arrow on page 1, the forward arrow on the last page). Set by the parent only; it blocks activation and applies the disabled styling. Visual appearance (size, radius, colors, shadows for the default, hover, selected, and disabled states) is set through the --mds-paginator-item-* CSS custom properties listed in AGENTS.md rather than through props. They are declared on each item’s own host, so a value set on mds-paginator or a parent selector does not reach the items the paginator renders.

Dipendenze

Usa: mds-icon, mds-textUsato da: mds-paginator