<st-chip>

JSON type: Chip

A small rounded status pill: text in the default slot, with an optional leading dot. Tones map to the theme's status tokens (soft background, text colour on that background), so a chip reads the same in every theme. Use neutral for plain labels, accent for the brand tint, and the status tones for meaning only (success = done, warning = due soon, danger = overdue).

The pill's box (padding, background) sits on an inner element, not on :host: an outer page's CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's :host rules, which would leave the pill without its padding.

Usage

import '@sankhyatronics/sankhya-cms/chip'; // registers <st-chip>

Properties

Property	Attribute	Type	Default	Description
tone	tone	'neutral' | 'accent' | 'success' | 'warning' | 'danger'	'neutral'	Colour treatment: a soft tint of the matching theme token.
size	size	'md' | 'sm'	'md'	sm for dense lists and table cells.
translucent	translucent	boolean	false	A see-through white pill with white text, for a chip on a coloured card.
dot	dot	boolean	false	Shows a leading dot in the chip's text colour.

See the live examples in Storybook.