{ "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.", "counts": { "classes": 702, "groups": 188 }, "groups": { "ui-accordion": { "base": "ui-accordion", "modifiers": [], "parts": [ "ui-accordion__body", "ui-accordion__item", "ui-accordion__summary" ] }, "ui-activity": { "base": "ui-activity", "modifiers": [], "parts": [] }, "ui-alert": { "base": "ui-alert", "modifiers": [ "ui-alert--accent", "ui-alert--band", "ui-alert--danger", "ui-alert--info", "ui-alert--success", "ui-alert--warning" ], "parts": [ "ui-alert__body", "ui-alert__close", "ui-alert__title" ] }, "ui-animate-dot": { "base": "ui-animate-dot", "modifiers": [], "parts": [] }, "ui-animate-fade": { "base": "ui-animate-fade", "modifiers": [], "parts": [] }, "ui-animate-in": { "base": "ui-animate-in", "modifiers": [], "parts": [] }, "ui-animate-matrix": { "base": "ui-animate-matrix", "modifiers": [], "parts": [] }, "ui-annotation": { "base": "ui-annotation", "modifiers": [ "ui-annotation--accent", "ui-annotation--axis", "ui-annotation--badge", "ui-annotation--band", "ui-annotation--bracket", "ui-annotation--callout", "ui-annotation--circle", "ui-annotation--cluster", "ui-annotation--compare", "ui-annotation--curve", "ui-annotation--danger", "ui-annotation--draw", "ui-annotation--elbow", "ui-annotation--evidence", "ui-annotation--focus", "ui-annotation--info", "ui-annotation--label", "ui-annotation--muted", "ui-annotation--pulse", "ui-annotation--rect", "ui-annotation--reveal", "ui-annotation--slope", "ui-annotation--success", "ui-annotation--threshold", "ui-annotation--timeline", "ui-annotation--warning" ], "parts": [ "ui-annotation__badge", "ui-annotation__connector", "ui-annotation__connector-end", "ui-annotation__label", "ui-annotation__note", "ui-annotation__note-line", "ui-annotation__subject", "ui-annotation__title" ] }, "ui-app-content": { "base": "ui-app-content", "modifiers": [], "parts": [] }, "ui-app-empty-state": { "base": "ui-app-empty-state", "modifiers": [], "parts": [] }, "ui-app-main": { "base": "ui-app-main", "modifiers": [], "parts": [] }, "ui-app-metric": { "base": "ui-app-metric", "modifiers": [], "parts": [ "ui-app-metric__delta", "ui-app-metric__label", "ui-app-metric__value" ] }, "ui-app-metrics": { "base": "ui-app-metrics", "modifiers": [], "parts": [] }, "ui-app-nav": { "base": "ui-app-nav", "modifiers": [], "parts": [ "ui-app-nav__section" ] }, "ui-app-panel": { "base": "ui-app-panel", "modifiers": [], "parts": [ "ui-app-panel__head", "ui-app-panel__title" ] }, "ui-app-rail": { "base": "ui-app-rail", "modifiers": [], "parts": [ "ui-app-rail__account", "ui-app-rail__brand", "ui-app-rail__foot" ] }, "ui-app-shell": { "base": "ui-app-shell", "modifiers": [ "ui-app-shell--full" ], "parts": [] }, "ui-app-toolbar": { "base": "ui-app-toolbar", "modifiers": [], "parts": [ "ui-app-toolbar__group" ] }, "ui-app-topbar": { "base": "ui-app-topbar", "modifiers": [], "parts": [ "ui-app-topbar__title" ] }, "ui-avatar": { "base": "ui-avatar", "modifiers": [ "ui-avatar--lg", "ui-avatar--sm" ], "parts": [] }, "ui-avatar-group": { "base": "ui-avatar-group", "modifiers": [], "parts": [] }, "ui-badge": { "base": "ui-badge", "modifiers": [ "ui-badge--accent", "ui-badge--danger", "ui-badge--dot", "ui-badge--info", "ui-badge--muted", "ui-badge--success", "ui-badge--warning" ], "parts": [] }, "ui-body-state": { "base": "ui-body-state", "modifiers": [ "ui-body-state--error", "ui-body-state--stale" ], "parts": [] }, "ui-bracket-note": { "base": "ui-bracket-note", "modifiers": [ "ui-bracket-note--accent", "ui-bracket-note--danger", "ui-bracket-note--info", "ui-bracket-note--success", "ui-bracket-note--warning" ], "parts": [ "ui-bracket-note__label" ] }, "ui-breadcrumb": { "base": "ui-breadcrumb", "modifiers": [], "parts": [ "ui-breadcrumb__item" ] }, "ui-break-after": { "base": "ui-break-after", "modifiers": [], "parts": [] }, "ui-break-before": { "base": "ui-break-before", "modifiers": [], "parts": [] }, "ui-bullet": { "base": "ui-bullet", "modifiers": [ "ui-bullet__measure--accent", "ui-bullet__measure--neg", "ui-bullet__measure--pos" ], "parts": [ "ui-bullet__label", "ui-bullet__measure", "ui-bullet__target" ] }, "ui-button": { "base": "ui-button", "modifiers": [ "ui-button--danger", "ui-button--dense", "ui-button--ghost", "ui-button--icon", "ui-button--lg", "ui-button--sm", "ui-button--subtle" ], "parts": [ "ui-button__label" ] }, "ui-card": { "base": "ui-card", "modifiers": [ "ui-card--accent", "ui-card--interactive" ], "parts": [ "ui-card__head" ] }, "ui-caret": { "base": "ui-caret", "modifiers": [], "parts": [] }, "ui-carousel": { "base": "ui-carousel", "modifiers": [], "parts": [ "ui-carousel__next", "ui-carousel__prev", "ui-carousel__slide", "ui-carousel__stage", "ui-carousel__status", "ui-carousel__thumb", "ui-carousel__thumbs", "ui-carousel__viewport" ] }, "ui-center": { "base": "ui-center", "modifiers": [], "parts": [] }, "ui-check": { "base": "ui-check", "modifiers": [], "parts": [] }, "ui-chip": { "base": "ui-chip", "modifiers": [ "ui-chip--accent", "ui-chip--dense" ], "parts": [] }, "ui-citation": { "base": "ui-citation", "modifiers": [ "ui-citation--chip" ], "parts": [] }, "ui-claim": { "base": "ui-claim", "modifiers": [ "ui-claim--disputed", "ui-claim--partial", "ui-claim--supported", "ui-claim--unknown", "ui-claim--unsupported" ], "parts": [ "ui-claim__basis", "ui-claim__caveat", "ui-claim__limits", "ui-claim__refs", "ui-claim__scope", "ui-claim__statement", "ui-claim__status" ] }, "ui-clamp": { "base": "ui-clamp", "modifiers": [], "parts": [ "ui-clamp__body", "ui-clamp__control", "ui-clamp__less", "ui-clamp__more", "ui-clamp__toggle" ] }, "ui-cluster": { "base": "ui-cluster", "modifiers": [ "ui-cluster--between" ], "parts": [] }, "ui-code": { "base": "ui-code", "modifiers": [ "ui-code--numbered", "ui-code__line--add", "ui-code__line--hl", "ui-code__line--remove" ], "parts": [ "ui-code__body", "ui-code__head", "ui-code__line" ] }, "ui-combobox": { "base": "ui-combobox", "modifiers": [], "parts": [ "ui-combobox__empty", "ui-combobox__input", "ui-combobox__list", "ui-combobox__option" ] }, "ui-command": { "base": "ui-command", "modifiers": [], "parts": [ "ui-command__empty", "ui-command__group", "ui-command__input", "ui-command__item", "ui-command__list", "ui-command__meta", "ui-command__shortcut" ] }, "ui-compare": { "base": "ui-compare", "modifiers": [ "ui-compare--2up" ], "parts": [ "ui-compare__col", "ui-compare__head" ] }, "ui-connector": { "base": "ui-connector", "modifiers": [ "ui-connector--accent", "ui-connector--danger", "ui-connector--dashed", "ui-connector--draw", "ui-connector--info", "ui-connector--muted", "ui-connector--success", "ui-connector--warning" ], "parts": [ "ui-connector__end", "ui-connector__path" ] }, "ui-container": { "base": "ui-container", "modifiers": [ "ui-container--narrow", "ui-container--wide" ], "parts": [] }, "ui-cq": { "base": "ui-cq", "modifiers": [], "parts": [] }, "ui-crosshair": { "base": "ui-crosshair", "modifiers": [ "ui-crosshair--muted", "ui-crosshair__line--x", "ui-crosshair__line--y" ], "parts": [ "ui-crosshair__badge", "ui-crosshair__line" ] }, "ui-def": { "base": "ui-def", "modifiers": [], "parts": [] }, "ui-delta": { "base": "ui-delta", "modifiers": [ "ui-delta--down", "ui-delta--flat", "ui-delta--invert", "ui-delta--up" ], "parts": [] }, "ui-diff": { "base": "ui-diff", "modifiers": [ "ui-diff--split", "ui-diff__row--add", "ui-diff__row--context", "ui-diff__row--remove" ], "parts": [ "ui-diff__code", "ui-diff__head", "ui-diff__hunk", "ui-diff__ln", "ui-diff__pane", "ui-diff__row" ] }, "ui-discussion": { "base": "ui-discussion", "modifiers": [], "parts": [ "ui-discussion__actions", "ui-discussion__composer", "ui-discussion__header", "ui-discussion__hint", "ui-discussion__item", "ui-discussion__list", "ui-discussion__message", "ui-discussion__messages", "ui-discussion__meta", "ui-discussion__quote", "ui-discussion__state" ] }, "ui-display": { "base": "ui-display", "modifiers": [], "parts": [] }, "ui-divider": { "base": "ui-divider", "modifiers": [], "parts": [] }, "ui-dot": { "base": "ui-dot", "modifiers": [ "ui-dot--accent", "ui-dot--danger", "ui-dot--info", "ui-dot--live", "ui-dot--success", "ui-dot--warning" ], "parts": [] }, "ui-dotbar": { "base": "ui-dotbar", "modifiers": [ "ui-dotbar--indeterminate" ], "parts": [] }, "ui-dotfield": { "base": "ui-dotfield", "modifiers": [], "parts": [] }, "ui-dotfit": { "base": "ui-dotfit", "modifiers": [], "parts": [] }, "ui-dotgauge": { "base": "ui-dotgauge", "modifiers": [], "parts": [] }, "ui-dotgrid": { "base": "ui-dotgrid", "modifiers": [ "ui-dotgrid--accent", "ui-dotgrid--dense" ], "parts": [] }, "ui-dotloader": { "base": "ui-dotloader", "modifiers": [], "parts": [] }, "ui-dotmatrix": { "base": "ui-dotmatrix", "modifiers": [ "ui-dotmatrix--pulse", "ui-dotmatrix--reveal", "ui-dotmatrix__cell--accent", "ui-dotmatrix__cell--hot" ], "parts": [ "ui-dotmatrix__cell" ] }, "ui-dotrule": { "base": "ui-dotrule", "modifiers": [], "parts": [] }, "ui-dotspinner": { "base": "ui-dotspinner", "modifiers": [ "ui-dotspinner--lg", "ui-dotspinner--sm" ], "parts": [] }, "ui-empty-state": { "base": "ui-empty-state", "modifiers": [ "ui-empty-state--invite" ], "parts": [ "ui-empty-state__glyph", "ui-empty-state__hint", "ui-empty-state__lead" ] }, "ui-error-summary": { "base": "ui-error-summary", "modifiers": [], "parts": [ "ui-error-summary__list", "ui-error-summary__title" ] }, "ui-evidence-grid": { "base": "ui-evidence-grid", "modifiers": [], "parts": [] }, "ui-evidence-item": { "base": "ui-evidence-item", "modifiers": [], "parts": [ "ui-evidence-item__body", "ui-evidence-item__caveat", "ui-evidence-item__kind", "ui-evidence-item__meta", "ui-evidence-item__method", "ui-evidence-item__source", "ui-evidence-item__title", "ui-evidence-item__value", "ui-evidence-item__window" ] }, "ui-evidence-ledger": { "base": "ui-evidence-ledger", "modifiers": [], "parts": [] }, "ui-eyebrow": { "base": "ui-eyebrow", "modifiers": [ "ui-eyebrow--caps", "ui-eyebrow--mono", "ui-eyebrow--muted", "ui-eyebrow--sm" ], "parts": [] }, "ui-field": { "base": "ui-field", "modifiers": [], "parts": [] }, "ui-figure": { "base": "ui-figure", "modifiers": [ "ui-figure__body--key-right" ], "parts": [ "ui-figure__body", "ui-figure__caption", "ui-figure__data", "ui-figure__key", "ui-figure__media", "ui-figure__overlay", "ui-figure__stage" ] }, "ui-file": { "base": "ui-file", "modifiers": [], "parts": [] }, "ui-generated": { "base": "ui-generated", "modifiers": [], "parts": [ "ui-generated__label" ] }, "ui-glossary": { "base": "ui-glossary", "modifiers": [], "parts": [ "ui-glossary__def", "ui-glossary__term" ] }, "ui-grid": { "base": "ui-grid", "modifiers": [], "parts": [] }, "ui-halftone": { "base": "ui-halftone", "modifiers": [], "parts": [] }, "ui-highlights": { "base": "ui-highlights", "modifiers": [], "parts": [] }, "ui-hint": { "base": "ui-hint", "modifiers": [ "ui-hint--error" ], "parts": [] }, "ui-icon": { "base": "ui-icon", "modifiers": [], "parts": [] }, "ui-input": { "base": "ui-input", "modifiers": [], "parts": [] }, "ui-input-group": { "base": "ui-input-group", "modifiers": [], "parts": [ "ui-input-group__addon" ] }, "ui-input-icon": { "base": "ui-input-icon", "modifiers": [ "ui-input-icon--end" ], "parts": [ "ui-input-icon__icon" ] }, "ui-inspector": { "base": "ui-inspector", "modifiers": [], "parts": [ "ui-inspector__body", "ui-inspector__head" ] }, "ui-interval": { "base": "ui-interval", "modifiers": [], "parts": [ "ui-interval__bounds", "ui-interval__label", "ui-interval__point", "ui-interval__range", "ui-interval__track" ] }, "ui-job": { "base": "ui-job", "modifiers": [ "ui-job--blocked", "ui-job--compact", "ui-job--complete", "ui-job--failed", "ui-job--queued", "ui-job--running" ], "parts": [ "ui-job__actions", "ui-job__bar", "ui-job__body", "ui-job__head", "ui-job__meta", "ui-job__progress", "ui-job__title" ] }, "ui-kbd": { "base": "ui-kbd", "modifiers": [], "parts": [] }, "ui-keep": { "base": "ui-keep", "modifiers": [], "parts": [] }, "ui-key-value": { "base": "ui-key-value", "modifiers": [], "parts": [] }, "ui-label": { "base": "ui-label", "modifiers": [], "parts": [] }, "ui-legend": { "base": "ui-legend", "modifiers": [ "ui-legend--compact", "ui-legend--diverging", "ui-legend--gradient", "ui-legend--interactive", "ui-legend--threshold", "ui-legend--vertical", "ui-legend--with-values", "ui-legend__swatch--1", "ui-legend__swatch--2", "ui-legend__swatch--3", "ui-legend__swatch--4", "ui-legend__swatch--5", "ui-legend__swatch--6", "ui-legend__swatch--7", "ui-legend__swatch--8", "ui-legend__swatch--circle", "ui-legend__swatch--line" ], "parts": [ "ui-legend__caption", "ui-legend__item", "ui-legend__label", "ui-legend__swatch", "ui-legend__symbol", "ui-legend__tick", "ui-legend__ticks", "ui-legend__title", "ui-legend__track", "ui-legend__value" ] }, "ui-level": { "base": "ui-level", "modifiers": [ "ui-level--danger", "ui-level--warn" ], "parts": [] }, "ui-lightbox": { "base": "ui-lightbox", "modifiers": [], "parts": [ "ui-lightbox__close" ] }, "ui-link": { "base": "ui-link", "modifiers": [ "ui-link--arrow", "ui-link--cta" ], "parts": [] }, "ui-marginnote": { "base": "ui-marginnote", "modifiers": [], "parts": [] }, "ui-mark": { "base": "ui-mark", "modifiers": [ "ui-mark--accent", "ui-mark--box", "ui-mark--danger", "ui-mark--draw", "ui-mark--info", "ui-mark--muted", "ui-mark--strike", "ui-mark--success", "ui-mark--underline", "ui-mark--warning" ], "parts": [] }, "ui-matrix": { "base": "ui-matrix", "modifiers": [], "parts": [] }, "ui-menu": { "base": "ui-menu", "modifiers": [ "ui-menu--at-pointer", "ui-menu--dropdown" ], "parts": [ "ui-menu__item", "ui-menu__label", "ui-menu__sep" ] }, "ui-menu-host": { "base": "ui-menu-host", "modifiers": [], "parts": [] }, "ui-meta": { "base": "ui-meta", "modifiers": [], "parts": [ "ui-meta__item" ] }, "ui-meter": { "base": "ui-meter", "modifiers": [ "ui-meter--accent", "ui-meter--danger", "ui-meter--info", "ui-meter--success", "ui-meter--warning" ], "parts": [ "ui-meter__fill", "ui-meter__label", "ui-meter__row", "ui-meter__value" ] }, "ui-modal": { "base": "ui-modal", "modifiers": [ "ui-modal--drawer" ], "parts": [ "ui-modal__body", "ui-modal__close", "ui-modal__foot", "ui-modal__head", "ui-modal__title" ] }, "ui-mono": { "base": "ui-mono", "modifiers": [], "parts": [] }, "ui-muted": { "base": "ui-muted", "modifiers": [], "parts": [] }, "ui-num": { "base": "ui-num", "modifiers": [ "ui-num--muted", "ui-num--neg", "ui-num--pos" ], "parts": [] }, "ui-origin-label": { "base": "ui-origin-label", "modifiers": [ "ui-origin-label--ai" ], "parts": [] }, "ui-pagehead": { "base": "ui-pagehead", "modifiers": [], "parts": [ "ui-pagehead__actions", "ui-pagehead__title" ] }, "ui-pagination": { "base": "ui-pagination", "modifiers": [], "parts": [ "ui-pagination__item" ] }, "ui-pane": { "base": "ui-pane", "modifiers": [], "parts": [ "ui-pane__actions", "ui-pane__body", "ui-pane__head", "ui-pane__title", "ui-pane__title-input" ] }, "ui-panel": { "base": "ui-panel", "modifiers": [], "parts": [ "ui-panel__head" ] }, "ui-popover": { "base": "ui-popover", "modifiers": [], "parts": [] }, "ui-print-exact": { "base": "ui-print-exact", "modifiers": [], "parts": [] }, "ui-print-only": { "base": "ui-print-only", "modifiers": [], "parts": [] }, "ui-progress": { "base": "ui-progress", "modifiers": [ "ui-progress--indeterminate" ], "parts": [ "ui-progress__bar" ] }, "ui-property": { "base": "ui-property", "modifiers": [], "parts": [ "ui-property__label", "ui-property__value" ] }, "ui-prose": { "base": "ui-prose", "modifiers": [ "ui-prose--blocks", "ui-prose--compact" ], "parts": [] }, "ui-provenance": { "base": "ui-provenance", "modifiers": [], "parts": [ "ui-provenance__item" ] }, "ui-quote": { "base": "ui-quote", "modifiers": [], "parts": [ "ui-quote__cite" ] }, "ui-range": { "base": "ui-range", "modifiers": [], "parts": [] }, "ui-ratio": { "base": "ui-ratio", "modifiers": [], "parts": [] }, "ui-readout": { "base": "ui-readout", "modifiers": [], "parts": [ "ui-readout__spacer" ] }, "ui-reasoning": { "base": "ui-reasoning", "modifiers": [], "parts": [ "ui-reasoning__body" ] }, "ui-report": { "base": "ui-report", "modifiers": [ "ui-report--compact", "ui-report--numbered", "ui-report__cover--compact", "ui-report__finding--critical", "ui-report__finding--major", "ui-report__finding--minor", "ui-report__finding--resolved", "ui-report__section--unnumbered" ], "parts": [ "ui-report__action", "ui-report__action-criteria", "ui-report__action-due", "ui-report__action-owner", "ui-report__action-priority", "ui-report__action-source", "ui-report__action-status", "ui-report__action-title", "ui-report__actions", "ui-report__appendix", "ui-report__caption", "ui-report__cover", "ui-report__decision", "ui-report__decision-body", "ui-report__decision-grid", "ui-report__decision-item", "ui-report__decision-kicker", "ui-report__decision-label", "ui-report__decision-meta", "ui-report__decision-title", "ui-report__decision-value", "ui-report__evidence", "ui-report__figure", "ui-report__finding", "ui-report__finding-caveat", "ui-report__finding-claim", "ui-report__finding-evidence", "ui-report__finding-impact", "ui-report__finding-remediation", "ui-report__finding-title", "ui-report__footnotes", "ui-report__head", "ui-report__meta", "ui-report__section", "ui-report__section-head", "ui-report__sources", "ui-report__subtitle", "ui-report__summary", "ui-report__title", "ui-report__toc" ] }, "ui-reveal": { "base": "ui-reveal", "modifiers": [], "parts": [] }, "ui-row": { "base": "ui-row", "modifiers": [ "ui-row--ruled", "ui-row--stacked" ], "parts": [ "ui-row__mark", "ui-row__meta", "ui-row__title" ] }, "ui-screen-only": { "base": "ui-screen-only", "modifiers": [], "parts": [] }, "ui-scroll-progress": { "base": "ui-scroll-progress", "modifiers": [], "parts": [] }, "ui-scroll-reveal": { "base": "ui-scroll-reveal", "modifiers": [], "parts": [] }, "ui-search": { "base": "ui-search", "modifiers": [], "parts": [] }, "ui-segmented": { "base": "ui-segmented", "modifiers": [], "parts": [ "ui-segmented__option" ] }, "ui-segmented-buttons": { "base": "ui-segmented-buttons", "modifiers": [], "parts": [ "ui-segmented-buttons__button" ] }, "ui-sel": { "base": "ui-sel", "modifiers": [ "ui-sel--maybe", "ui-sel--off", "ui-sel--on" ], "parts": [] }, "ui-select": { "base": "ui-select", "modifiers": [], "parts": [] }, "ui-selectionbar": { "base": "ui-selectionbar", "modifiers": [ "ui-selectionbar--anchor-block-end", "ui-selectionbar--anchor-block-start", "ui-selectionbar--anchored" ], "parts": [ "ui-selectionbar__actions", "ui-selectionbar__count" ] }, "ui-severity": { "base": "ui-severity", "modifiers": [], "parts": [] }, "ui-severity-dot": { "base": "ui-severity-dot", "modifiers": [], "parts": [] }, "ui-severity-row": { "base": "ui-severity-row", "modifiers": [], "parts": [ "ui-severity-row__meta", "ui-severity-row__title" ] }, "ui-severity-tone": { "base": "ui-severity-tone", "modifiers": [], "parts": [] }, "ui-shortcut": { "base": "ui-shortcut", "modifiers": [], "parts": [ "ui-shortcut__sep" ] }, "ui-sidebar": { "base": "ui-sidebar", "modifiers": [], "parts": [] }, "ui-sidenote": { "base": "ui-sidenote", "modifiers": [], "parts": [ "ui-sidenote__ref" ] }, "ui-sitefooter": { "base": "ui-sitefooter", "modifiers": [], "parts": [ "ui-sitefooter__links" ] }, "ui-siteheader": { "base": "ui-siteheader", "modifiers": [ "ui-siteheader--sticky" ], "parts": [ "ui-siteheader__actions", "ui-siteheader__brand" ] }, "ui-sitemenu": { "base": "ui-sitemenu", "modifiers": [], "parts": [ "ui-sitemenu__panel" ] }, "ui-sitenav": { "base": "ui-sitenav", "modifiers": [], "parts": [] }, "ui-skeleton": { "base": "ui-skeleton", "modifiers": [], "parts": [] }, "ui-skiplink": { "base": "ui-skiplink", "modifiers": [], "parts": [] }, "ui-source-card": { "base": "ui-source-card", "modifiers": [], "parts": [ "ui-source-card__actions", "ui-source-card__excerpt", "ui-source-card__origin", "ui-source-card__time", "ui-source-card__title" ] }, "ui-source-list": { "base": "ui-source-list", "modifiers": [], "parts": [ "ui-source-list__item" ] }, "ui-spark": { "base": "ui-spark", "modifiers": [ "ui-spark--dots", "ui-spark__bar--accent", "ui-spark__bar--neg", "ui-spark__bar--pos" ], "parts": [ "ui-spark__bar" ] }, "ui-spinner": { "base": "ui-spinner", "modifiers": [], "parts": [] }, "ui-splitter": { "base": "ui-splitter", "modifiers": [ "ui-splitter--horizontal", "ui-splitter--vertical" ], "parts": [ "ui-splitter__handle", "ui-splitter__pane" ] }, "ui-spotlight": { "base": "ui-spotlight", "modifiers": [ "ui-spotlight--ring" ], "parts": [ "ui-spotlight__hole" ] }, "ui-src": { "base": "ui-src", "modifiers": [ "ui-src--conflict", "ui-src--generated", "ui-src--reviewed", "ui-src--stale", "ui-src--unverified", "ui-src--verified" ], "parts": [] }, "ui-stack": { "base": "ui-stack", "modifiers": [], "parts": [] }, "ui-stagger": { "base": "ui-stagger", "modifiers": [ "ui-stagger--auto" ], "parts": [] }, "ui-stat": { "base": "ui-stat", "modifiers": [], "parts": [ "ui-stat__delta", "ui-stat__label", "ui-stat__value" ] }, "ui-state": { "base": "ui-state", "modifiers": [ "ui-state--busy", "ui-state--conflict", "ui-state--error", "ui-state--locked", "ui-state--needs-review", "ui-state--offline", "ui-state--queued", "ui-state--reviewed", "ui-state--saved", "ui-state--saving", "ui-state--stale" ], "parts": [ "ui-state__detail", "ui-state__label" ] }, "ui-statgrid": { "base": "ui-statgrid", "modifiers": [], "parts": [] }, "ui-status": { "base": "ui-status", "modifiers": [], "parts": [] }, "ui-steps": { "base": "ui-steps", "modifiers": [ "ui-steps__item--done" ], "parts": [ "ui-steps__item" ] }, "ui-surface": { "base": "ui-surface", "modifiers": [], "parts": [] }, "ui-switch": { "base": "ui-switch", "modifiers": [], "parts": [ "ui-switch__thumb", "ui-switch__track" ] }, "ui-switcher": { "base": "ui-switcher", "modifiers": [], "parts": [] }, "ui-syncbar": { "base": "ui-syncbar", "modifiers": [], "parts": [] }, "ui-tab": { "base": "ui-tab", "modifiers": [], "parts": [] }, "ui-table": { "base": "ui-table", "modifiers": [ "ui-table--break-anywhere", "ui-table--comfortable", "ui-table--dense", "ui-table--lined", "ui-table--selectable" ], "parts": [ "ui-table__empty", "ui-table__select", "ui-table__sort", "ui-table__toolbar" ] }, "ui-table-wrap": { "base": "ui-table-wrap", "modifiers": [ "ui-table-wrap--loading" ], "parts": [] }, "ui-tabs": { "base": "ui-tabs", "modifiers": [], "parts": [ "ui-tabs__list", "ui-tabs__panel" ] }, "ui-tag": { "base": "ui-tag", "modifiers": [ "ui-tag--accent" ], "parts": [] }, "ui-tags": { "base": "ui-tags", "modifiers": [], "parts": [] }, "ui-term": { "base": "ui-term", "modifiers": [], "parts": [] }, "ui-textarea": { "base": "ui-textarea", "modifiers": [], "parts": [] }, "ui-textref": { "base": "ui-textref", "modifiers": [], "parts": [] }, "ui-themetoggle": { "base": null, "modifiers": [], "parts": [ "ui-themetoggle__button", "ui-themetoggle__label", "ui-themetoggle__prefix", "ui-themetoggle__thumb", "ui-themetoggle__track" ] }, "ui-timeline": { "base": "ui-timeline", "modifiers": [], "parts": [ "ui-timeline__item", "ui-timeline__time" ] }, "ui-timestrip": { "base": "ui-timestrip", "modifiers": [], "parts": [ "ui-timestrip__axis", "ui-timestrip__event", "ui-timestrip__now" ] }, "ui-toast": { "base": "ui-toast", "modifiers": [ "ui-toast--accent", "ui-toast--danger", "ui-toast--info", "ui-toast--success", "ui-toast--warning" ], "parts": [ "ui-toast__close", "ui-toast__title" ] }, "ui-toast-stack": { "base": "ui-toast-stack", "modifiers": [ "ui-toast-stack--assertive" ], "parts": [] }, "ui-toc": { "base": "ui-toc", "modifiers": [], "parts": [ "ui-toc__link", "ui-toc__list", "ui-toc__title" ] }, "ui-tool-call": { "base": "ui-tool-call", "modifiers": [], "parts": [ "ui-tool-call__body", "ui-tool-call__name", "ui-tool-call__status" ] }, "ui-tool-log": { "base": "ui-tool-log", "modifiers": [], "parts": [] }, "ui-toolstrip": { "base": "ui-toolstrip", "modifiers": [ "ui-toolstrip--anchor-block-end", "ui-toolstrip--anchor-block-start", "ui-toolstrip--anchored", "ui-toolstrip--compact", "ui-toolstrip--floating", "ui-toolstrip--pane" ], "parts": [ "ui-toolstrip__actions", "ui-toolstrip__brand", "ui-toolstrip__context", "ui-toolstrip__fill", "ui-toolstrip__group", "ui-toolstrip__search" ] }, "ui-tooltip": { "base": "ui-tooltip", "modifiers": [], "parts": [ "ui-tooltip__bubble" ] }, "ui-tour-note": { "base": "ui-tour-note", "modifiers": [], "parts": [ "ui-tour-note__actions", "ui-tour-note__body", "ui-tour-note__step", "ui-tour-note__title" ] }, "ui-tree": { "base": "ui-tree", "modifiers": [], "parts": [ "ui-tree__branch", "ui-tree__label", "ui-tree__leaf", "ui-tree__summary" ] }, "ui-visually-hidden": { "base": "ui-visually-hidden", "modifiers": [], "parts": [] }, "ui-vt": { "base": "ui-vt", "modifiers": [], "parts": [] }, "ui-waffle": { "base": "ui-waffle", "modifiers": [], "parts": [] } }, "classes": [ "ui-accordion", "ui-accordion__body", "ui-accordion__item", "ui-accordion__summary", "ui-activity", "ui-alert", "ui-alert--accent", "ui-alert--band", "ui-alert--danger", "ui-alert--info", "ui-alert--success", "ui-alert--warning", "ui-alert__body", "ui-alert__close", "ui-alert__title", "ui-animate-dot", "ui-animate-fade", "ui-animate-in", "ui-animate-matrix", "ui-annotation", "ui-annotation--accent", "ui-annotation--axis", "ui-annotation--badge", "ui-annotation--band", "ui-annotation--bracket", "ui-annotation--callout", "ui-annotation--circle", "ui-annotation--cluster", "ui-annotation--compare", "ui-annotation--curve", "ui-annotation--danger", "ui-annotation--draw", "ui-annotation--elbow", "ui-annotation--evidence", "ui-annotation--focus", "ui-annotation--info", "ui-annotation--label", "ui-annotation--muted", "ui-annotation--pulse", "ui-annotation--rect", "ui-annotation--reveal", "ui-annotation--slope", "ui-annotation--success", "ui-annotation--threshold", "ui-annotation--timeline", "ui-annotation--warning", "ui-annotation__badge", "ui-annotation__connector", "ui-annotation__connector-end", "ui-annotation__label", "ui-annotation__note", "ui-annotation__note-line", "ui-annotation__subject", "ui-annotation__title", "ui-app-content", "ui-app-empty-state", "ui-app-main", "ui-app-metric", "ui-app-metric__delta", "ui-app-metric__label", "ui-app-metric__value", "ui-app-metrics", "ui-app-nav", "ui-app-nav__section", "ui-app-panel", "ui-app-panel__head", "ui-app-panel__title", "ui-app-rail", "ui-app-rail__account", "ui-app-rail__brand", "ui-app-rail__foot", "ui-app-shell", "ui-app-shell--full", "ui-app-toolbar", "ui-app-toolbar__group", "ui-app-topbar", "ui-app-topbar__title", "ui-avatar", "ui-avatar--lg", "ui-avatar--sm", "ui-avatar-group", "ui-badge", "ui-badge--accent", "ui-badge--danger", "ui-badge--dot", "ui-badge--info", "ui-badge--muted", "ui-badge--success", "ui-badge--warning", "ui-body-state", "ui-body-state--error", "ui-body-state--stale", "ui-bracket-note", "ui-bracket-note--accent", "ui-bracket-note--danger", "ui-bracket-note--info", "ui-bracket-note--success", "ui-bracket-note--warning", "ui-bracket-note__label", "ui-breadcrumb", "ui-breadcrumb__item", "ui-break-after", "ui-break-before", "ui-bullet", "ui-bullet__label", "ui-bullet__measure", "ui-bullet__measure--accent", "ui-bullet__measure--neg", "ui-bullet__measure--pos", "ui-bullet__target", "ui-button", "ui-button--danger", "ui-button--dense", "ui-button--ghost", "ui-button--icon", "ui-button--lg", "ui-button--sm", "ui-button--subtle", "ui-button__label", "ui-card", "ui-card--accent", "ui-card--interactive", "ui-card__head", "ui-caret", "ui-carousel", "ui-carousel__next", "ui-carousel__prev", "ui-carousel__slide", "ui-carousel__stage", "ui-carousel__status", "ui-carousel__thumb", "ui-carousel__thumbs", "ui-carousel__viewport", "ui-center", "ui-check", "ui-chip", "ui-chip--accent", "ui-chip--dense", "ui-citation", "ui-citation--chip", "ui-claim", "ui-claim--disputed", "ui-claim--partial", "ui-claim--supported", "ui-claim--unknown", "ui-claim--unsupported", "ui-claim__basis", "ui-claim__caveat", "ui-claim__limits", "ui-claim__refs", "ui-claim__scope", "ui-claim__statement", "ui-claim__status", "ui-clamp", "ui-clamp__body", "ui-clamp__control", "ui-clamp__less", "ui-clamp__more", "ui-clamp__toggle", "ui-cluster", "ui-cluster--between", "ui-code", "ui-code--numbered", "ui-code__body", "ui-code__head", "ui-code__line", "ui-code__line--add", "ui-code__line--hl", "ui-code__line--remove", "ui-combobox", "ui-combobox__empty", "ui-combobox__input", "ui-combobox__list", "ui-combobox__option", "ui-command", "ui-command__empty", "ui-command__group", "ui-command__input", "ui-command__item", "ui-command__list", "ui-command__meta", "ui-command__shortcut", "ui-compare", "ui-compare--2up", "ui-compare__col", "ui-compare__head", "ui-connector", "ui-connector--accent", "ui-connector--danger", "ui-connector--dashed", "ui-connector--draw", "ui-connector--info", "ui-connector--muted", "ui-connector--success", "ui-connector--warning", "ui-connector__end", "ui-connector__path", "ui-container", "ui-container--narrow", "ui-container--wide", "ui-cq", "ui-crosshair", "ui-crosshair--muted", "ui-crosshair__badge", "ui-crosshair__line", "ui-crosshair__line--x", "ui-crosshair__line--y", "ui-def", "ui-delta", "ui-delta--down", "ui-delta--flat", "ui-delta--invert", "ui-delta--up", "ui-diff", "ui-diff--split", "ui-diff__code", "ui-diff__head", "ui-diff__hunk", "ui-diff__ln", "ui-diff__pane", "ui-diff__row", "ui-diff__row--add", "ui-diff__row--context", "ui-diff__row--remove", "ui-discussion", "ui-discussion__actions", "ui-discussion__composer", "ui-discussion__header", "ui-discussion__hint", "ui-discussion__item", "ui-discussion__list", "ui-discussion__message", "ui-discussion__messages", "ui-discussion__meta", "ui-discussion__quote", "ui-discussion__state", "ui-display", "ui-divider", "ui-dot", "ui-dot--accent", "ui-dot--danger", "ui-dot--info", "ui-dot--live", "ui-dot--success", "ui-dot--warning", "ui-dotbar", "ui-dotbar--indeterminate", "ui-dotfield", "ui-dotfit", "ui-dotgauge", "ui-dotgrid", "ui-dotgrid--accent", "ui-dotgrid--dense", "ui-dotloader", "ui-dotmatrix", "ui-dotmatrix--pulse", "ui-dotmatrix--reveal", "ui-dotmatrix__cell", "ui-dotmatrix__cell--accent", "ui-dotmatrix__cell--hot", "ui-dotrule", "ui-dotspinner", "ui-dotspinner--lg", "ui-dotspinner--sm", "ui-empty-state", "ui-empty-state--invite", "ui-empty-state__glyph", "ui-empty-state__hint", "ui-empty-state__lead", "ui-error-summary", "ui-error-summary__list", "ui-error-summary__title", "ui-evidence-grid", "ui-evidence-item", "ui-evidence-item__body", "ui-evidence-item__caveat", "ui-evidence-item__kind", "ui-evidence-item__meta", "ui-evidence-item__method", "ui-evidence-item__source", "ui-evidence-item__title", "ui-evidence-item__value", "ui-evidence-item__window", "ui-evidence-ledger", "ui-eyebrow", "ui-eyebrow--caps", "ui-eyebrow--mono", "ui-eyebrow--muted", "ui-eyebrow--sm", "ui-field", "ui-figure", "ui-figure__body", "ui-figure__body--key-right", "ui-figure__caption", "ui-figure__data", "ui-figure__key", "ui-figure__media", "ui-figure__overlay", "ui-figure__stage", "ui-file", "ui-generated", "ui-generated__label", "ui-glossary", "ui-glossary__def", "ui-glossary__term", "ui-grid", "ui-halftone", "ui-highlights", "ui-hint", "ui-hint--error", "ui-icon", "ui-input", "ui-input-group", "ui-input-group__addon", "ui-input-icon", "ui-input-icon--end", "ui-input-icon__icon", "ui-inspector", "ui-inspector__body", "ui-inspector__head", "ui-interval", "ui-interval__bounds", "ui-interval__label", "ui-interval__point", "ui-interval__range", "ui-interval__track", "ui-job", "ui-job--blocked", "ui-job--compact", "ui-job--complete", "ui-job--failed", "ui-job--queued", "ui-job--running", "ui-job__actions", "ui-job__bar", "ui-job__body", "ui-job__head", "ui-job__meta", "ui-job__progress", "ui-job__title", "ui-kbd", "ui-keep", "ui-key-value", "ui-label", "ui-legend", "ui-legend--compact", "ui-legend--diverging", "ui-legend--gradient", "ui-legend--interactive", "ui-legend--threshold", "ui-legend--vertical", "ui-legend--with-values", "ui-legend__caption", "ui-legend__item", "ui-legend__label", "ui-legend__swatch", "ui-legend__swatch--1", "ui-legend__swatch--2", "ui-legend__swatch--3", "ui-legend__swatch--4", "ui-legend__swatch--5", "ui-legend__swatch--6", "ui-legend__swatch--7", "ui-legend__swatch--8", "ui-legend__swatch--circle", "ui-legend__swatch--line", "ui-legend__symbol", "ui-legend__tick", "ui-legend__ticks", "ui-legend__title", "ui-legend__track", "ui-legend__value", "ui-level", "ui-level--danger", "ui-level--warn", "ui-lightbox", "ui-lightbox__close", "ui-link", "ui-link--arrow", "ui-link--cta", "ui-marginnote", "ui-mark", "ui-mark--accent", "ui-mark--box", "ui-mark--danger", "ui-mark--draw", "ui-mark--info", "ui-mark--muted", "ui-mark--strike", "ui-mark--success", "ui-mark--underline", "ui-mark--warning", "ui-matrix", "ui-menu", "ui-menu--at-pointer", "ui-menu--dropdown", "ui-menu-host", "ui-menu__item", "ui-menu__label", "ui-menu__sep", "ui-meta", "ui-meta__item", "ui-meter", "ui-meter--accent", "ui-meter--danger", "ui-meter--info", "ui-meter--success", "ui-meter--warning", "ui-meter__fill", "ui-meter__label", "ui-meter__row", "ui-meter__value", "ui-modal", "ui-modal--drawer", "ui-modal__body", "ui-modal__close", "ui-modal__foot", "ui-modal__head", "ui-modal__title", "ui-mono", "ui-muted", "ui-num", "ui-num--muted", "ui-num--neg", "ui-num--pos", "ui-origin-label", "ui-origin-label--ai", "ui-pagehead", "ui-pagehead__actions", "ui-pagehead__title", "ui-pagination", "ui-pagination__item", "ui-pane", "ui-pane__actions", "ui-pane__body", "ui-pane__head", "ui-pane__title", "ui-pane__title-input", "ui-panel", "ui-panel__head", "ui-popover", "ui-print-exact", "ui-print-only", "ui-progress", "ui-progress--indeterminate", "ui-progress__bar", "ui-property", "ui-property__label", "ui-property__value", "ui-prose", "ui-prose--blocks", "ui-prose--compact", "ui-provenance", "ui-provenance__item", "ui-quote", "ui-quote__cite", "ui-range", "ui-ratio", "ui-readout", "ui-readout__spacer", "ui-reasoning", "ui-reasoning__body", "ui-report", "ui-report--compact", "ui-report--numbered", "ui-report__action", "ui-report__action-criteria", "ui-report__action-due", "ui-report__action-owner", "ui-report__action-priority", "ui-report__action-source", "ui-report__action-status", "ui-report__action-title", "ui-report__actions", "ui-report__appendix", "ui-report__caption", "ui-report__cover", "ui-report__cover--compact", "ui-report__decision", "ui-report__decision-body", "ui-report__decision-grid", "ui-report__decision-item", "ui-report__decision-kicker", "ui-report__decision-label", "ui-report__decision-meta", "ui-report__decision-title", "ui-report__decision-value", "ui-report__evidence", "ui-report__figure", "ui-report__finding", "ui-report__finding--critical", "ui-report__finding--major", "ui-report__finding--minor", "ui-report__finding--resolved", "ui-report__finding-caveat", "ui-report__finding-claim", "ui-report__finding-evidence", "ui-report__finding-impact", "ui-report__finding-remediation", "ui-report__finding-title", "ui-report__footnotes", "ui-report__head", "ui-report__meta", "ui-report__section", "ui-report__section--unnumbered", "ui-report__section-head", "ui-report__sources", "ui-report__subtitle", "ui-report__summary", "ui-report__title", "ui-report__toc", "ui-reveal", "ui-row", "ui-row--ruled", "ui-row--stacked", "ui-row__mark", "ui-row__meta", "ui-row__title", "ui-screen-only", "ui-scroll-progress", "ui-scroll-reveal", "ui-search", "ui-segmented", "ui-segmented-buttons", "ui-segmented-buttons__button", "ui-segmented__option", "ui-sel", "ui-sel--maybe", "ui-sel--off", "ui-sel--on", "ui-select", "ui-selectionbar", "ui-selectionbar--anchor-block-end", "ui-selectionbar--anchor-block-start", "ui-selectionbar--anchored", "ui-selectionbar__actions", "ui-selectionbar__count", "ui-severity", "ui-severity-dot", "ui-severity-row", "ui-severity-row__meta", "ui-severity-row__title", "ui-severity-tone", "ui-shortcut", "ui-shortcut__sep", "ui-sidebar", "ui-sidenote", "ui-sidenote__ref", "ui-sitefooter", "ui-sitefooter__links", "ui-siteheader", "ui-siteheader--sticky", "ui-siteheader__actions", "ui-siteheader__brand", "ui-sitemenu", "ui-sitemenu__panel", "ui-sitenav", "ui-skeleton", "ui-skiplink", "ui-source-card", "ui-source-card__actions", "ui-source-card__excerpt", "ui-source-card__origin", "ui-source-card__time", "ui-source-card__title", "ui-source-list", "ui-source-list__item", "ui-spark", "ui-spark--dots", "ui-spark__bar", "ui-spark__bar--accent", "ui-spark__bar--neg", "ui-spark__bar--pos", "ui-spinner", "ui-splitter", "ui-splitter--horizontal", "ui-splitter--vertical", "ui-splitter__handle", "ui-splitter__pane", "ui-spotlight", "ui-spotlight--ring", "ui-spotlight__hole", "ui-src", "ui-src--conflict", "ui-src--generated", "ui-src--reviewed", "ui-src--stale", "ui-src--unverified", "ui-src--verified", "ui-stack", "ui-stagger", "ui-stagger--auto", "ui-stat", "ui-stat__delta", "ui-stat__label", "ui-stat__value", "ui-state", "ui-state--busy", "ui-state--conflict", "ui-state--error", "ui-state--locked", "ui-state--needs-review", "ui-state--offline", "ui-state--queued", "ui-state--reviewed", "ui-state--saved", "ui-state--saving", "ui-state--stale", "ui-state__detail", "ui-state__label", "ui-statgrid", "ui-status", "ui-steps", "ui-steps__item", "ui-steps__item--done", "ui-surface", "ui-switch", "ui-switch__thumb", "ui-switch__track", "ui-switcher", "ui-syncbar", "ui-tab", "ui-table", "ui-table--break-anywhere", "ui-table--comfortable", "ui-table--dense", "ui-table--lined", "ui-table--selectable", "ui-table-wrap", "ui-table-wrap--loading", "ui-table__empty", "ui-table__select", "ui-table__sort", "ui-table__toolbar", "ui-tabs", "ui-tabs__list", "ui-tabs__panel", "ui-tag", "ui-tag--accent", "ui-tags", "ui-term", "ui-textarea", "ui-textref", "ui-themetoggle__button", "ui-themetoggle__label", "ui-themetoggle__prefix", "ui-themetoggle__thumb", "ui-themetoggle__track", "ui-timeline", "ui-timeline__item", "ui-timeline__time", "ui-timestrip", "ui-timestrip__axis", "ui-timestrip__event", "ui-timestrip__now", "ui-toast", "ui-toast--accent", "ui-toast--danger", "ui-toast--info", "ui-toast--success", "ui-toast--warning", "ui-toast-stack", "ui-toast-stack--assertive", "ui-toast__close", "ui-toast__title", "ui-toc", "ui-toc__link", "ui-toc__list", "ui-toc__title", "ui-tool-call", "ui-tool-call__body", "ui-tool-call__name", "ui-tool-call__status", "ui-tool-log", "ui-toolstrip", "ui-toolstrip--anchor-block-end", "ui-toolstrip--anchor-block-start", "ui-toolstrip--anchored", "ui-toolstrip--compact", "ui-toolstrip--floating", "ui-toolstrip--pane", "ui-toolstrip__actions", "ui-toolstrip__brand", "ui-toolstrip__context", "ui-toolstrip__fill", "ui-toolstrip__group", "ui-toolstrip__search", "ui-tooltip", "ui-tooltip__bubble", "ui-tour-note", "ui-tour-note__actions", "ui-tour-note__body", "ui-tour-note__step", "ui-tour-note__title", "ui-tree", "ui-tree__branch", "ui-tree__label", "ui-tree__leaf", "ui-tree__summary", "ui-visually-hidden", "ui-vt", "ui-waffle" ], "states": [ { "class": "is-num", "scope": ".ui-table cell", "effect": "tabular figures, end-aligned (the canonical numeric cell)" }, { "class": "is-pos", "scope": ".ui-table cell, .ui-stat__delta, .ui-app-metric__delta", "effect": "positive-delta tone" }, { "class": "is-neg", "scope": ".ui-table cell, .ui-stat__delta, .ui-app-metric__delta", "effect": "negative-delta tone" }, { "class": "is-key", "scope": ".ui-table cell", "effect": "emphasised key column" }, { "class": "is-open", "scope": "controlled .ui-modal / .ui-popover", "effect": "open visibility state; focus management belongs to the matching behavior/host" }, { "class": "is-active", "scope": ".ui-tab and other selectable items", "effect": "active/selected state" }, { "class": "is-source-active", "scope": ".ui-source-card", "effect": "temporary source highlight after a citation/backref activation", "managed": "runtime" }, { "class": "is-inactive", "scope": "interactive .ui-legend__item", "effect": "host-set toggled-off state" }, { "class": "is-on", "scope": ".ui-dotbar segment ()", "effect": "lit segment — author-writable for a static bar, or set by a data binding" }, { "class": "is-visible", "scope": ".ui-reveal", "effect": "revealed state", "managed": "runtime" }, { "class": "is-in", "scope": ".ui-matrix", "effect": "reveal-complete state", "managed": "runtime" }, { "class": "is-leaving", "scope": ".ui-toast", "effect": "exit-animation state", "managed": "runtime" } ], "customProperties": [ { "name": "--chart-color", "on": ".ui-legend__swatch", "type": "color", "example": "var(--chart-1)", "note": "legend-key series colour — use a --chart-* token, never a raw hex" }, { "name": "--chart-pattern", "on": ".ui-legend__swatch", "type": "image", "example": "var(--chart-pattern-1)", "note": "redundant non-colour channel — pair pattern N with colour N (WCAG 1.4.1)" }, { "name": "--value", "on": ".ui-meter, .ui-progress", "type": "number 0..100", "example": "92", "note": "measured value as a UNITLESS number 0..100 (registered , never a %). Set it on the meter/progress host — it inherits to the __fill/__bar. Prefer attrs.meter(value)/attrs.progress(value) from @ponchia/ui/classes, which sets it plus role + aria-valuenow/min/max together." }, { "name": "--job-progress", "on": ".ui-job", "type": "percentage", "example": "64%", "note": "determinate background-job progress. Set it on the .ui-job host; pair the .ui-job__progress element with role=\"progressbar\" and matching aria-valuenow/min/max when the value is known." }, { "name": "--icon-mask", "on": ".ui-icon", "type": "image", "example": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/svg%3E\")", "required": true, "note": "REQUIRED — the bitmap masked into the icon; a bare .ui-icon with no --icon-mask paints a solid currentColor square, not a glyph. The value is an image (a mask url(); there is no --glyph-* token). Use renderGlyph(name, { render: 'mask' }) to build it from a named glyph." }, { "name": "--icon-size", "on": ".ui-icon", "type": "length", "example": "1.25rem", "note": "icon box size (default 1em)" }, { "name": "--i", "on": ".ui-stagger > *", "type": "integer", "example": "2", "note": "per-child stagger index — sets each child's animation-delay (× 60ms). Omit and use `.ui-stagger--auto` to derive it from :nth-child instead." }, { "name": "--ui-vt-name", "on": ".ui-vt", "type": "custom-ident", "example": "hero-image", "required": true, "note": "REQUIRED — the view-transition-name; .ui-vt is inert (no transition) without it" }, { "name": "--v", "on": ".ui-spark__bar", "type": "number 0..1", "example": "0.7", "required": true, "note": "REQUIRED — the normalised bar height (0..1). The host normalises; Bronto only paints. A bar with no --v collapses to the 1px floor. Pair every spark with a host-written role=\"img\" + aria-label." }, { "name": "--sidenote-width", "on": ".ui-sidenote, .ui-marginnote", "type": "length", "example": "12rem", "note": "width of the floated margin note on wide viewports (default 12rem). The container must reserve a matching inline-end gutter — see docs/sidenote.md." }, { "name": "--textref-highlight", "on": ".ui-textref", "type": "color", "example": "var(--accent-soft)", "note": "the ::target-text highlight wash for the matched cited sentence (default var(--accent-soft)). The host builds the #:~:text= href; Bronto owns the paint — see docs/textref.md." }, { "name": "--figure-max-inline", "on": ".ui-figure__stage", "type": "length", "example": "32rem", "note": "maximum inline size of the centered figure stage (default 42rem). The host still owns chart/media dimensions and data mapping." }, { "name": "--figure-min-block", "on": ".ui-figure__stage", "type": "length", "example": "16rem", "note": "minimum block size reserved for a live or late-rendered figure stage (default 0px)." }, { "name": "--figure-key-width", "on": ".ui-figure__body--key-right", "type": "length", "example": "12rem", "note": "width of the right-side key column before the figure body collapses to one column (default 14rem)." }, { "name": "--v", "on": ".ui-bullet__measure", "type": "number 0..1", "example": "0.62", "required": true, "note": "REQUIRED — the normalised measure (0..1). The host normalises; Bronto only paints. A measure with no --v collapses to the 2px floor. Pair every bullet with a host-written role=\"img\" + aria-label." }, { "name": "--t", "on": ".ui-bullet__target", "type": "number 0..1", "example": "0.9", "note": "the normalised target tick position (0..1). Omit to drop the target mark." }, { "name": "--band-lo", "on": ".ui-bullet", "type": "number 0..1", "example": "0.5", "note": "the lower qualitative-band boundary (0..1, default 0.5). Bands are grayscale by Few-design — meaning lives in the required aria-label." }, { "name": "--band-hi", "on": ".ui-bullet", "type": "number 0..1", "example": "0.8", "note": "the upper qualitative-band boundary (0..1, default 0.8). Must be ≥ --band-lo." }, { "name": "--toc-top", "on": ".ui-toc", "type": "length", "example": "1rem", "note": "the sticky inset from the top of the scroll container (default var(--space-md))." }, { "name": "--lo", "on": ".ui-interval", "type": "number 0..1", "example": "0.22", "required": true, "note": "REQUIRED — normalised lower bound of the interval. The host normalises; Bronto only paints." }, { "name": "--hi", "on": ".ui-interval", "type": "number 0..1", "example": "0.68", "required": true, "note": "REQUIRED — normalised upper bound of the interval. The host normalises; Bronto only paints." }, { "name": "--v", "on": ".ui-interval__point", "type": "number 0..1", "example": "0.52", "note": "optional normalised point estimate inside the interval. Omit the point element when there is no point estimate." }, { "name": "--clamp-lines", "on": ".ui-clamp", "type": "integer", "example": "3", "note": "number of lines shown before the optional reveal control expands the excerpt (default 4)." }, { "name": "--highlight-evidence", "on": ".ui-highlights", "type": "color", "example": "var(--accent-soft)", "note": "CSS Custom Highlight API wash for host-registered bronto-evidence ranges." }, { "name": "--highlight-search", "on": ".ui-highlights", "type": "color", "example": "var(--warning-soft)", "note": "CSS Custom Highlight API wash for host-registered bronto-search ranges." }, { "name": "--highlight-current", "on": ".ui-highlights", "type": "color", "example": "color-mix(in srgb, var(--accent) 22%, transparent)", "note": "CSS Custom Highlight API wash for the host-registered bronto-current range." }, { "name": "--splitter-pos", "on": ".ui-splitter", "type": "percentage", "example": "36%", "note": "first pane size in the splitter axis. initSplitter keeps this and aria-valuenow in sync; the host may persist the last value." }, { "name": "--splitter-handle", "on": ".ui-splitter", "type": "length", "example": "0.75rem", "note": "fixed size of the separator handle track (default 0.75rem)." }, { "name": "--splitter-pane-min", "on": ".ui-splitter", "type": "length", "example": "12rem", "note": "minimum first-pane size before the grid track clamps (default 0px); pair with matching aria-valuemin when the limit is user-visible." }, { "name": "--stack-gap", "on": ".ui-stack", "type": "length", "example": "1.5rem", "note": "vertical rhythm between stacked children (default var(--space-md))" }, { "name": "--cluster-gap", "on": ".ui-cluster", "type": "length", "example": "0.75rem", "note": "gap between clustered inline items (default var(--space-xs))" }, { "name": "--grid-min", "on": ".ui-grid", "type": "length", "example": "12rem", "note": "minimum column width before the auto-fit grid wraps (default 16rem)" }, { "name": "--grid-gap", "on": ".ui-grid", "type": "length", "example": "1rem", "note": "gap between grid cells (default var(--space-md))" }, { "name": "--sidebar-width", "on": ".ui-sidebar", "type": "length", "example": "18rem", "note": "natural width of the sidebar child (default 16rem)" }, { "name": "--sidebar-min", "on": ".ui-sidebar", "type": "percentage | length", "example": "50%", "note": "min width of the main child before the two stack (default 60%)" }, { "name": "--sidebar-gap", "on": ".ui-sidebar", "type": "length", "example": "1.5rem", "note": "gap between the sidebar and the main child (default var(--space-md))" }, { "name": "--switcher-gap", "on": ".ui-switcher", "type": "length", "example": "1.5rem", "note": "gap between switcher children in both row and column states (default var(--space-md))" }, { "name": "--switcher-min", "on": ".ui-switcher", "type": "length", "example": "20rem", "note": "threshold below which all children switch from row to column together (default 24rem)" }, { "name": "--center-max", "on": ".ui-center", "type": "length", "example": "70ch", "note": "max measure of the centred column — the INNER width; gutters add to the total (content-box) (default 64rem)" }, { "name": "--center-gutter", "on": ".ui-center", "type": "length", "example": "2rem", "note": "inline padding either side of the centred column (default var(--space-md))" }, { "name": "--ratio", "on": ".ui-ratio", "type": "ratio", "example": "4 / 3", "note": "intrinsic aspect ratio of the box (default 16 / 9). Give .ui-ratio EXACTLY ONE child — only :first-child is sized to fill; a second child silently breaks the ratio. For a caption/overlay, position it absolutely inside the single child" }, { "name": "--app-rail", "on": ".ui-app-shell", "type": "length", "example": "16rem", "note": "width of the app-shell sidebar rail column (default 14rem)" }, { "name": "--container", "on": ".ui-container", "type": "length", "example": "72rem", "note": "max inline width of the default page frame, border-box (default 72rem)" }, { "name": "--container-narrow", "on": ".ui-container--narrow", "type": "length", "example": "44rem", "note": "max inline width of the narrow page frame (default 44rem)" }, { "name": "--container-wide", "on": ".ui-container--wide", "type": "length", "example": "82rem", "note": "max inline width of the wide page frame (default 82rem)" }, { "name": "--av-size", "on": ".ui-avatar", "type": "length", "example": "2.6rem", "note": "avatar box size; the initials font-size derives from it (default 2.2rem; --sm 1.5rem, --lg 3.2rem)" }, { "name": "--dotmatrix-cols", "on": ".ui-dotmatrix", "type": "number", "example": "8", "note": "columns in the dot grid — the density knob (default 12)" }, { "name": "--dotmatrix-gap", "on": ".ui-dotmatrix", "type": "length", "example": "0.3rem", "note": "gap between dots (default 0.5rem; set 0 with --dotmatrix-dot-radius:0 to fuse the dots)" }, { "name": "--dotmatrix-dot", "on": ".ui-dotmatrix", "type": "length", "example": "0.5rem", "note": "fixed dot length for intrinsic sizing (default minmax(0, 1fr) — fluid to the container)" }, { "name": "--dotmatrix-dot-radius", "on": ".ui-dotmatrix", "type": "length", "example": "0", "note": "dot corner radius (default 50% = round; 0 = square pixels)" }, { "name": "--dotmatrix-glow", "on": ".ui-dotmatrix", "type": "length", "example": "2px", "note": "phosphor bloom radius around lit cells (default 0 = off)" }, { "name": "--dotmatrix-pulse-min", "on": ".ui-dotmatrix", "type": "number", "example": "0.4", "note": "opacity floor the --pulse animation dips to (default 0.55)" }, { "name": "--dotmatrix-reveal-step", "on": ".ui-dotmatrix", "type": "time", "example": "5ms", "note": "per-cell scan cadence for the reveal animation (default 3ms)" }, { "name": "--ds-box", "on": ".ui-dotspinner", "type": "length", "example": "2.6rem", "note": "dot-spinner box size (default 1.6rem; the --lg modifier sets 2.6rem)" }, { "name": "--ds-dot", "on": ".ui-dotspinner", "type": "length", "example": "0.42rem", "note": "dot-spinner dot size (default 0.26rem)" }, { "name": "--crosshair-color", "on": ".ui-crosshair", "type": "color", "example": "var(--accent)", "note": "crosshair rule + badge colour (default var(--accent); the --muted modifier uses --line-strong)" }, { "name": "--connector-color", "on": ".ui-connector", "type": "color", "example": "var(--accent)", "note": "leader-line stroke + label colour (default var(--line-strong); the --muted/--accent modifiers reset it)" }, { "name": "--connector-width", "on": ".ui-connector", "type": "number", "example": "2", "note": "leader-line stroke width (default 1.5)" }, { "name": "--mark-color", "on": ".ui-mark", "type": "color", "example": "var(--accent)", "note": "hand-drawn mark colour; a tone modifier sets it (no base default — each draw style falls back to --line-strong)" }, { "name": "--spot-pad", "on": ".ui-spotlight", "type": "length", "example": "12px", "note": "padding between the spotlit target and the cutout edge (default 8px)" }, { "name": "--spot-radius", "on": ".ui-spotlight", "type": "length", "example": "12px", "note": "spotlight cutout corner radius (default var(--radius-md))" }, { "name": "--spot-backdrop", "on": ".ui-spotlight", "type": "color", "example": "color-mix(in srgb, #000 70%, transparent)", "note": "the dimming backdrop colour outside the cutout (default 55% black)" } ], "rootAttributes": [ { "name": "data-theme", "on": ":root", "values": [ "light", "dark" ], "note": "colour theme. Unset follows the OS via prefers-color-scheme; set it to force one." }, { "name": "data-density", "on": ":root or any subtree", "values": [ "compact", "comfortable" ], "note": "spacing-scale preset (the middle scale is the default when unset). Scoped per-subtree, unlike the others." }, { "name": "data-surface", "on": ":root", "values": [ "oled" ], "note": "opt into a true-black surface ramp for OLED. Unset = the standard elevated dark base." }, { "name": "data-contrast", "on": ":root", "values": [ "high" ], "note": "raise contrast of lines/text for low-vision or glare. Unset = the standard ramp." }, { "name": "data-bronto-skin", "on": ":root", "values": [ "amber-crt", "phosphor-green", "e-ink" ], "note": "opt-in display colorway — requires @ponchia/ui/css/skins.css. Unset (the design target) = the default Nothing aesthetic." }, { "name": "--accent", "on": ":root or a theme root", "values": [ "" ], "note": "the single brand knob; the accent family derives from it. Re-brand at :root/[data-theme] (a subtree override is only a partial re-brand). See docs/theming.md." } ], "behaviorAttributes": [ { "name": "data-bronto-open", "on": "a trigger (button/link)", "value": "id of the target ", "behavior": "initDialog", "note": "click calls showModal() on the named ; focus returns to the trigger on every close path" }, { "name": "data-bronto-close", "on": "a button inside a ", "behavior": "initDialog", "note": "click closes the nearest enclosing " }, { "name": "data-bronto-dialog-light", "on": "a ", "behavior": "initDialog", "note": "opt into backdrop light-dismiss (click the backdrop to close)" }, { "name": "data-bronto-menu", "on": "a native
dropdown", "behavior": "initMenu", "note": "adds outside-click / Escape close affordances to a
-based .ui-menu" }, { "name": "data-bronto-popover", "on": "a trigger", "value": "id of the .ui-popover panel", "behavior": "initPopover", "note": "collision-aware NON-modal popover (no focus trap); top-layer via the native popover attr when present, else an .is-open class. Author an accessible name on the panel." }, { "name": "data-bronto-command", "on": "a .ui-command palette host wrapping its input", "behavior": "initCommand", "note": "wires the filter input + active-option keyboard model" }, { "name": "data-bronto-carousel-roledescription", "on": "a .ui-carousel host", "behavior": "initCarousel", "note": "localized override for the carousel aria-roledescription; the behavior applies its English default only when this attribute and any authored aria-roledescription are absent." }, { "name": "data-bronto-carousel-slide-roledescription", "on": "a .ui-carousel host (applies to each slide)", "behavior": "initCarousel", "note": "localized override for the per-slide aria-roledescription; an authored slide aria-roledescription is preserved and the English \"slide\" default applies only when both are absent." }, { "name": "data-bronto-error-summary-title", "on": "a form/error-summary host enhanced by initFormValidation", "behavior": "initFormValidation", "note": "localized heading for the generated validation error summary; an authored title or this attribute is preserved, English is only the fallback." }, { "name": "data-bronto-toast-dismiss-label", "on": "the toast host (or via toast() options)", "behavior": "toast", "note": "localized aria-label for the generated toast dismiss button; defaults to the English 'Dismiss' only when absent." }, { "name": "data-bronto-sources", "on": "a source/citation island", "behavior": "initSources", "note": "scopes citation preview metadata and source-card focus/highlight behavior; the host still owns numbering, fetching, and trust decisions." }, { "name": "data-bronto-splitter", "on": "a .ui-splitter host", "value": "optional 'vertical' | 'horizontal' (otherwise inferred from .ui-splitter--horizontal / aria-orientation)", "behavior": "initSplitter", "note": "keyboard + pointer ARIA window-splitter behavior; updates --splitter-pos and aria-valuenow, then emits bronto:splitter:resize. The host owns persistence and pane state." }, { "name": "data-bronto-splitter-adjust", "on": "a button inside a .ui-splitter host", "value": "signed percentage-point delta, for example -10 or 10", "behavior": "initSplitter", "note": "single-pointer non-drag alternative to moving the separator; activation clamps to aria-valuemin/aria-valuemax and emits bronto:splitter:resize." }, { "name": "data-bronto-source-ref", "on": "a button/control that references a source card", "value": "id of the source card, with or without a leading #", "behavior": "initSources", "note": "button/control equivalent of a .ui-citation[href=\"#source-id\"]; activation focuses and highlights the referenced source." }, { "name": "data-bronto-dismiss", "on": "a button", "value": "optional CSS selector of the ancestor to remove", "behavior": "dismissible", "note": "click removes the nearest matching ancestor (or, with no value, the nearest [data-bronto-dismissible])" }, { "name": "data-bronto-disclosure", "on": "a trigger", "value": "id of the element it toggles", "behavior": "initDisclosure", "note": "toggles the named element + keeps aria-expanded in sync" }, { "name": "data-bronto-tabs", "on": "a .ui-tabs group host", "behavior": "initTabs", "note": "adds the WAI-ARIA Tabs keyboard model (roving tabindex, Arrow/Home/End, aria-selected, panel hidden sync) over .ui-tab[data-tab] / .ui-tabs__panel[data-panel]. Without it the CSS tabs are mouse-only with no roving focus." }, { "name": "data-bronto-theme-toggle", "on": "a .ui-themetoggle__button (or any control)", "value": "optional 'light' | 'dark' to force a specific theme instead of toggling", "behavior": "initThemeToggle", "note": "click toggles or sets data-theme on and persists it; without it the button is inert. Pair with applyStoredTheme() before paint to avoid a flash." }, { "name": "data-bronto-validate", "on": "a
", "behavior": "initFormValidation", "note": "progressive-enhancement validation: suppresses native bubbles, writes validationMessage into the field error slot, builds the error summary. With JS off the form still validates natively." }, { "name": "data-bronto-error", "on": "an empty error slot inside a .ui-field (canonical:

)", "behavior": "initFormValidation", "note": "the dedicated per-field error node initFormValidation fills + links via aria-describedby (and unlinks when the field is valid). Preferred over borrowing the .ui-hint help slot." }, { "name": "data-bronto-error-summary", "on": "a .ui-error-summary inside the form", "behavior": "initFormValidation", "note": "on an invalid submit, filled with role=alert + tabindex=-1 in-page links to each bad field and focused." }, { "name": "data-bronto-combobox", "on": "a .ui-combobox host (wrapping the input + listbox)", "behavior": "initCombobox", "note": "editable combobox with a filtered listbox (APG pattern). The input needs a real accessible name (a placeholder does not count — it warns)." }, { "name": "data-bronto-combobox-live", "on": "the [data-bronto-combobox] host", "behavior": "initCombobox", "note": "opt-in: a MutationObserver re-reads option nodes in place for async/replaced results, instead of a full re-init. Off by default." }, { "name": "data-bronto-sortable", "on": "a .ui-table ", "behavior": "initTableSort", "note": "click a header .ui-table__sort button to sort; numeric columns via data-sort=\"num\" or .is-num cells. Use data-sort-value on a cell for a canonical sort key (accepts a European decimal comma)." }, { "name": "data-bronto-select", "on": "a row checkbox inside a [data-bronto-sortable] table", "behavior": "initTableSort", "note": "toggling it sets the row aria-selected and syncs the header select-all state; emits bronto:selectionchange." }, { "name": "data-bronto-select-all", "on": "the header checkbox of a [data-bronto-sortable] table", "behavior": "initTableSort", "note": "toggles every [data-bronto-select] row box; goes indeterminate on a partial selection." }, { "name": "data-bronto-dismissible", "on": "the ancestor a [data-bronto-dismiss] button removes", "behavior": "dismissible", "note": "marks the default removal target when the dismiss button has no selector value. A cancelable bronto:dismiss fires first." }, { "name": "data-bronto-legend", "on": "a .ui-legend host", "behavior": "initLegend", "note": "each .ui-legend__item is a