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