Item

shadow

Item components are blocks that can contain various types of content, including text, icons, avatars, images, inputs, and other standard or custom elements. Item elements are usually found inside List elements.

Basic usage

Use with images

Use with buttons

Use with icons

When to use

Use wje-item to improve readability, scannability, and contextual understanding of content.

When not to use

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices

• Compress media and use lazy loading in larger collections.
• Keep information priority consistent across cards/lists.
• Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties

labelColorStyles

Description	Controls color styling related to label-color-styles.
Attribute	label-color-styles
Type	object
Default	{}

inheritedAriaAttributes

Description	Sets ARIA metadata used to improve accessibility semantics for assistive technologies.
Attribute	inherited-aria-attributes
Type	object
Default	{}

multipleInputs

Description	Controls whether multiple-inputs is enabled and affects component behavior.
Attribute	multiple-inputs
Type	boolean
Default	false

focusable

Description	Controls whether focusable is enabled and affects component behavior.
Attribute	focusable
Type	boolean
Default	true

button

Description	Controls whether button is enabled and affects component behavior.
Attribute	button
Type	boolean
Default	false

disabled

Description	Disables user interaction with the component.
Attribute	disabled
Type	boolean
Default	false

counter

Description	Controls whether counter is enabled and affects component behavior.
Attribute	counter
Type	boolean
Default	false

routerDirection

Description	Sets the text value stored in router-direction.
Attribute	router-direction
Type	string
Default	'forward'

type

Description	Sets the input type that controls value parsing and validation.
Attribute	type
Type	string
Default	'button'

Events

No events available for this component.

Methods

isClickable

Description	Returns the CSS styles for the component.
Signature	() => boolean

CSS Shadow Parts

Name	Description
native	The native part.
inner	The inner part.

CSS Custom Properties

Name	Description
--wje-item-background	Sets the background color of the item. Accepts any valid CSS color value.
--wje-item-color	Defines the text color for the item. Accepts any valid CSS color value.
--wje-item-padding-start	Specifies the left padding of the item. Accepts any valid CSS length.
--wje-item-padding-end	Specifies the right padding of the item. Accepts any valid CSS length.
--wje-item-padding-top	Specifies the top padding of the item. Accepts any valid CSS length.
--wje-item-padding-bottom	Specifies the bottom padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-start	Specifies the left inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-end	Specifies the right inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-top	Specifies the top inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-bottom	Specifies the bottom inner padding of the item. Accepts any valid CSS length.
--wje-item-border-radius	Defines the border radius, providing rounded corners for the item.
--wje-item-border-width	Sets the border width of the item. Accepts any valid CSS length.
--wje-item-border-style	Specifies the style of the border, such as solid, dashed, or dotted.
--wje-item-border-color	Defines the color of the item's border. Accepts any valid CSS color value.
--wje-item-min-height	Sets the minimum height of the item to ensure consistent layout.
--wje-item-transition	Specifies the transition effects for the item, such as for hover or focus states.
--wje-item-inner-box-shadow	Adds a shadow effect inside the item for a 3D appearance.

Slots

Name	Description
start	The start slot.
end	The end slot.
error	The error slot.
helper	The helper slot.