feat(ui): support a single status indicator without duplicate glyphs

apps/catalog/src/CatalogApp.tsx

@@ -1411,6 +1411,7 @@ export function CatalogApp() {
               </div>
               <p className="catalog-preview__explanation">При reduced motion кольцо остаётся видимым без вращения; процесс и его завершение принадлежат приложению.</p>
             </Preview>
+            <Preview title="Лампы состояния" note="один индикатор без дублирующего значка"><StatusBadge variant="indicator" tone="success" aria-label="Готово" title="Готово" /><StatusBadge variant="indicator" aria-label="Недоступно" title="Недоступно" /></Preview>
             <Preview title="Линейный прогресс" note="измеренный / неизвестный / завершённый">
               <ProgressBar label="Подготовка" value={0.6} valueText="Три этапа из пяти" />
               <ProgressBar label="Получение сведений" />

docs/COMPONENTS.md

@@ -329,3 +329,6 @@ Engine продолжает владеть определениями полей
 В `ResourceRow` передаётся через `progress` и заменяет статус между
 наименованием и кнопками. Процент принадлежит приложению, анимация его не выдумывает.
 См. [контракт](PROGRESS_BAR.md).
+
+StatusBadge `variant="indicator"` отображает только одну лампу состояния.
+Передавайте `aria-label` и `title`; дополнительный текст и значки скрываются.

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)); }

packages/ui-react/src/StatusBadge.tsx

@@ -5,12 +5,13 @@ export type StatusTone = "neutral" | "success" | "warning" | "danger" | "accent"
 
 export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
   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 (
-    <span className={cn("nodedc-status", className)} data-tone={tone === "neutral" ? undefined : tone} {...props}>
+    <span className={cn("nodedc-status", className)} data-tone={tone === "neutral" ? undefined : tone} data-variant={variant === "indicator" ? variant : undefined} {...props}>
-      {children}
+      {variant === "indicator" ? null : children}
     </span>
   );
 }

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."
     },