diff --git a/apps/catalog/src/CatalogApp.tsx b/apps/catalog/src/CatalogApp.tsx
index d1b441a..2e8ba24 100644
--- a/apps/catalog/src/CatalogApp.tsx
+++ b/apps/catalog/src/CatalogApp.tsx
@@ -1411,6 +1411,7 @@ export function CatalogApp() {
При reduced motion кольцо остаётся видимым без вращения; процесс и его завершение принадлежат приложению.
+
diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md
index f9a837e..159e90a 100644
--- a/docs/COMPONENTS.md
+++ b/docs/COMPONENTS.md
@@ -329,3 +329,6 @@ Engine продолжает владеть определениями полей
В `ResourceRow` передаётся через `progress` и заменяет статус между
наименованием и кнопками. Процент принадлежит приложению, анимация его не выдумывает.
См. [контракт](PROGRESS_BAR.md).
+
+StatusBadge `variant="indicator"` отображает только одну лампу состояния.
+Передавайте `aria-label` и `title`; дополнительный текст и значки скрываются.
diff --git a/packages/ui-core/styles.css b/packages/ui-core/styles.css
index 9482925..06c7788 100644
--- a/packages/ui-core/styles.css
+++ b/packages/ui-core/styles.css
@@ -3811,3 +3811,10 @@ textarea.nodedc-field__control {
.nodedc-progress-bar__fill { transition: none; }
.nodedc-progress-bar[data-indeterminate] > .nodedc-progress-bar__fill { animation: none; width: 100%; transform: scaleX(0.5); }
}
+
+.nodedc-status[data-variant="indicator"] { min-height: 0; width: .42rem; height: .42rem; padding: 0; gap: 0; background: transparent; }
+.nodedc-status[data-variant="indicator"]::before { content: ""; display: block; width: .42rem; height: .42rem; flex: 0 0 .42rem; border-radius: var(--nodedc-radius-circle); background: var(--nodedc-text-muted); }
+.nodedc-status[data-variant="indicator"][data-tone="success"]::before { background: rgb(var(--nodedc-success-rgb)); }
+.nodedc-status[data-variant="indicator"][data-tone="warning"]::before { background: rgb(var(--nodedc-warning-rgb)); }
+.nodedc-status[data-variant="indicator"][data-tone="danger"]::before { background: rgb(var(--nodedc-danger-rgb)); }
+.nodedc-status[data-variant="indicator"][data-tone="accent"]::before { background: rgb(var(--nodedc-accent-rgb)); }
diff --git a/packages/ui-react/src/StatusBadge.tsx b/packages/ui-react/src/StatusBadge.tsx
index bad2f1c..4379b3a 100644
--- a/packages/ui-react/src/StatusBadge.tsx
+++ b/packages/ui-react/src/StatusBadge.tsx
@@ -5,12 +5,13 @@ export type StatusTone = "neutral" | "success" | "warning" | "danger" | "accent"
export interface StatusBadgeProps extends HTMLAttributes {
tone?: StatusTone;
+ variant?: "badge" | "indicator";
}
-export function StatusBadge({ tone = "neutral", className, children, ...props }: StatusBadgeProps) {
+export function StatusBadge({ tone = "neutral", variant = "badge", className, children, ...props }: StatusBadgeProps) {
return (
-
- {children}
+
+ {variant === "indicator" ? null : children}
);
}
diff --git a/registry/components.json b/registry/components.json
index 496bc57..476d6df 100644
--- a/registry/components.json
+++ b/registry/components.json
@@ -449,6 +449,7 @@
"status": "baseline",
"package": "@nodedc/ui-react",
"exports": ["StatusBadge"],
+ "variants": ["badge", "indicator"],
"domContract": ["nodedc-status"],
"summary": "Semantic status pill whose tone is independent from the application accent."
},