@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/src/index.ts

@@ -0,0 +1,429 @@
+// The application Kit's public surface.
+//
+// A Kit is the unit of export routing (ADR 0002): a Product Application
+// receives this directory as vendorable source and imports from here. What it
+// ships comes in the Taxonomy's two halves
+// (.red/contexts/component-system/CONTEXT.md): a Primitive
+// imports no other Kit component, and a Composite composes at least one. Both
+// are mechanical properties, read off the imports by `test/taxonomy.test.ts`
+// rather than decided by anyone.
+//
+// Each component is exported alongside its `tv()` variants object, because the
+// classes are as much of the contract as the element is: a consumer that needs
+// a link to look like a Button imports `button` and puts the classes on its
+// own <a>, instead of forking the component to change one tag.
+//
+// Every export below is a named one, and nothing here has a side effect, so a
+// bundler keeps only what an application actually imported — the property ADR
+// 0005 asks of the Composites' behavior base, pinned by
+// `test/tree-shaking.test.ts` against a real build's output.
+
+import type { PurposeCategory } from "@reddb-io/design-system/base";
+
+export { default as ListRow } from "./primitives/ListRow.svelte";
+export { default as NavItem } from "./primitives/NavItem.svelte";
+export { default as NodeBadge } from "./primitives/NodeBadge.svelte";
+export { default as Pill } from "./primitives/Pill.svelte";
+export { default as SplitView } from "./primitives/SplitView.svelte";
+
+export { default as Diff } from "./composites/Diff.svelte";
+export { default as CommandPalette } from "./composites/CommandPalette.svelte";
+export { default as BottomNavigation } from "./composites/BottomNavigation.svelte";
+export { default as ActionPanel } from "./composites/ActionPanel.svelte";
+export { default as ActivityFeed } from "./composites/ActivityFeed.svelte";
+export { default as ApplicationShell } from "./composites/ApplicationShell.svelte";
+export { default as CardHeading } from "./composites/CardHeading.svelte";
+export { default as CategoryFilter } from "./composites/CategoryFilter.svelte";
+export { default as CategoryPreview } from "./composites/CategoryPreview.svelte";
+export { default as ChatMessage } from "./composites/ChatMessage.svelte";
+export { default as Filter } from "./composites/Filter.svelte";
+export { default as Incentive } from "./composites/Incentive.svelte";
+export { default as MultiColumnLayout } from "./composites/MultiColumnLayout.svelte";
+export { default as ContextMenu } from "./composites/ContextMenu.svelte";
+export { default as Menubar } from "./composites/Menubar.svelte";
+export { default as CheckoutForm } from "./composites/CheckoutForm.svelte";
+export { default as OrderHistory } from "./composites/OrderHistory.svelte";
+export { default as OrderSummary } from "./composites/OrderSummary.svelte";
+export { default as ShoppingCart } from "./composites/ShoppingCart.svelte";
+export { default as SidebarNavigation } from "./composites/SidebarNavigation.svelte";
+export { default as SidebarPanel } from "./composites/SidebarPanel.svelte";
+export { sidebarPanel } from "./composites/sidebar-panel.variants";
+export { default as SidebarRail } from "./composites/SidebarRail.svelte";
+export { default as StoreNavigation } from "./composites/StoreNavigation.svelte";
+export { default as PageHeading } from "./composites/PageHeading.svelte";
+export { default as Review } from "./composites/Review.svelte";
+export { default as ProductFeature } from "./composites/ProductFeature.svelte";
+export { default as ProductList } from "./composites/ProductList.svelte";
+export { default as ProductOverview } from "./composites/ProductOverview.svelte";
+export { default as ProductQuickview } from "./composites/ProductQuickview.svelte";
+export { default as SidebarLayout } from "./composites/SidebarLayout.svelte";
+export { default as SpeedDial } from "./composites/SpeedDial.svelte";
+export { default as TaskList } from "./composites/TaskList.svelte";
+export {
+  taskList,
+  type TaskListVariants,
+} from "./composites/task-list.variants";
+export {
+  TASK_STATES,
+  TASK_STATE_LABELS,
+  TASK_STATE_TONES,
+  type TaskState,
+  type TaskListItem,
+} from "./composites/task-list.behavior";
+export { default as Toolbar } from "./composites/Toolbar.svelte";
+
+export {
+  listRow,
+  LIST_ROW_SIZES,
+  type ListRowSize,
+  DEPRECATED_LIST_ROW_DENSITIES,
+  LIST_ROW_DENSITIES,
+  type ListRowDensity,
+} from "./primitives/list-row.variants";
+export { navItem } from "./primitives/nav-item.variants";
+export {
+  nodeBadge,
+  NODE_STATUSES,
+  NODE_STATUS_TONES,
+  type NodeStatus,
+} from "./primitives/node-badge.variants";
+export {
+  pill,
+  pillDismiss,
+  PILL_SIZES,
+  PILL_TONES,
+  PILL_VARIANTS,
+  DEPRECATED_PILL_VARIANTS,
+  type DeprecatedPillVariant,
+  type PillSize,
+  type PillTone,
+  type PillVariant,
+} from "./primitives/pill.variants";
+export { splitView } from "./primitives/split-view.variants";
+export {
+  bottomNavigation,
+  type BottomNavigationVariants,
+} from "./composites/bottom-navigation.variants";
+export {
+  actionPanel,
+  type ActionPanelVariants,
+} from "./composites/action-panel.variants";
+export {
+  activityFeed,
+  type ActivityFeedVariants,
+} from "./composites/activity-feed.variants";
+export type { ActivityFeedItem } from "./composites/ActivityFeed.svelte";
+export type { DiffRow } from "./composites/Diff.svelte";
+export {
+  diff,
+  DIFF_MODES,
+  type DiffChangeKind,
+  type DiffMode,
+  type DiffVariants,
+} from "./composites/diff.variants";
+export {
+  cardHeading,
+  type CardHeadingVariants,
+} from "./composites/card-heading.variants";
+export {
+  categoryFilter,
+  type CategoryFilterOption,
+  type CategoryFilterVariants,
+} from "./composites/category-filter.variants";
+export {
+  categoryPreview,
+  type CategoryPreviewVariants,
+} from "./composites/category-preview.variants";
+export {
+  chatMessage,
+  type ChatMessageVariants,
+} from "./composites/chat-message.variants";
+export {
+  checkoutForm,
+  type CheckoutField,
+  type CheckoutFormVariants,
+  type CheckoutSection,
+} from "./composites/checkout-form.variants";
+export {
+  DEFAULT_ORDER_HISTORY_LABELS,
+  orderHistory,
+  type OrderHistoryEntry,
+  type OrderHistoryLabels,
+  type OrderHistoryVariants,
+} from "./composites/order-history.variants";
+export {
+  orderSummary,
+  type OrderSummaryLine,
+  type OrderSummaryVariants,
+} from "./composites/order-summary.variants";
+export {
+  shoppingCart,
+  type ShoppingCartItem,
+  type ShoppingCartVariants,
+} from "./composites/shopping-cart.variants";
+export {
+  filter,
+  type FilterOption,
+  type FilterVariants,
+} from "./composites/filter.variants";
+export {
+  incentive,
+  type IncentiveVariants,
+} from "./composites/incentive.variants";
+export {
+  pageHeading,
+  type PageHeadingVariants,
+} from "./composites/page-heading.variants";
+export { review, type ReviewVariants } from "./composites/review.variants";
+export {
+  productFeature,
+  PRODUCT_FEATURE_MEDIA_SIDES,
+  type ProductFeatureMediaSide,
+  type ProductFeatureVariants,
+} from "./composites/product-feature.variants";
+export {
+  productList,
+  type ProductListVariants,
+} from "./composites/product-list.variants";
+export {
+  productOverview,
+  type ProductOverviewVariants,
+} from "./composites/product-overview.variants";
+export {
+  productQuickview,
+  type ProductQuickviewVariants,
+} from "./composites/product-quickview.variants";
+export {
+  commandPalette,
+  type CommandPaletteVariants,
+} from "./composites/command-palette.variants";
+export {
+  contextMenu,
+  type ContextMenuSize,
+  type ContextMenuVariants,
+} from "./composites/context-menu.variants";
+export {
+  menubar,
+  type MenubarSize,
+  type MenubarVariants,
+} from "./composites/menubar.variants";
+export {
+  speedDial,
+  type SpeedDialSize,
+  type SpeedDialVariants,
+} from "./composites/speed-dial.variants";
+export {
+  toolbar,
+  type ToolbarSize,
+  type ToolbarVariants,
+} from "./composites/toolbar.variants";
+export {
+  sidebarNavigation,
+  type SidebarNavigationVariants,
+} from "./composites/sidebar-navigation.variants";
+export {
+  sidebarRail,
+  type SidebarRailVariants,
+} from "./composites/sidebar-rail.variants";
+export type { SidebarRailItem } from "./composites/SidebarRail.svelte";
+export {
+  storeNavigation,
+  type StoreNavigationVariants,
+} from "./composites/store-navigation.variants";
+export type {
+  ApplicationNavigationItem,
+  PrimaryNavigationItem,
+  NavigationMarkers,
+  NavigationStatus,
+} from "./composites/navigation.behavior";
+export {
+  applicationShell,
+  type ApplicationShellVariants,
+} from "./composites/application-shell.variants";
+export {
+  shellBrandRegion,
+  type ShellBrandComposition,
+  type ShellBrandRegion,
+} from "./composites/application-shell.behavior";
+export {
+  multiColumnLayout,
+  type MultiColumnCount,
+  type MultiColumnLayoutVariants,
+} from "./composites/multi-column-layout.variants";
+export {
+  sidebarLayout,
+  SIDEBAR_SIDES,
+  type SidebarLayoutVariants,
+  type SidebarSide,
+} from "./composites/sidebar-layout.variants";
+
+// SplitView's behavior, exported in its own right: an application that builds
+// a splitter of its own — a three-pane layout, say — gets the same arithmetic
+// rather than writing the clamping again and getting the edges wrong.
+export {
+  clampFraction,
+  fractionAt,
+  fractionForKey,
+  percentOf,
+  separatorOrientation,
+  SPLIT_BOUNDS,
+  SPLIT_ORIENTATIONS,
+  SPLIT_STEP,
+  type SplitBounds,
+  type SplitOrientation,
+} from "./primitives/split-view.behavior";
+
+export {
+  type ContextMenuEntry,
+  type MenubarMenu,
+  type SpeedDialAction,
+  type ToolbarItem,
+} from "./composites/command-surfaces.behavior";
+export { type CommandPaletteCommand } from "./composites/command-palette.behavior";
+export { type ProductListItem } from "./composites/product-list.behavior";
+
+/**
+ * Every Primitive this Kit ships, by component name.
+ *
+ * Declared rather than discovered, because a consumer reads this list out of
+ * vendored source with no bundler glob to run — and pinned against the files
+ * on disk by `test/taxonomy.test.ts`, so it cannot quietly fall behind. The
+ * showcase renders one route per entry.
+ */
+export const PRIMITIVES = [
+  "ListRow",
+  "NavItem",
+  "NodeBadge",
+  "Pill",
+  "SplitView",
+] as const;
+
+export type PrimitiveName = (typeof PRIMITIVES)[number];
+
+/**
+ * Every Composite this Kit ships, by component name — the same catalogue in
+ * the Taxonomy's other half, kept for the same reason.
+ */
+export const COMPOSITES = [
+  "EntityInspector",
+  "EntityJourney",
+  "SettingsRow",
+  "TaskCard",
+  "TelemetryRow",
+  "PropertyPanel",
+  "PhaseSummary",
+  "PlaybackControls",
+
+  "ActionPanel",
+  "ActivityFeed",
+  "ApplicationShell",
+  "BottomNavigation",
+  "CardHeading",
+  "CategoryFilter",
+  "CategoryPreview",
+  "ChatMessage",
+  "CheckoutForm",
+  "CommandPalette",
+  "ContextMenu",
+  "Diff",
+  "Filter",
+  "Incentive",
+  "Menubar",
+  "MultiColumnLayout",
+  "OrderHistory",
+  "OrderSummary",
+  "PageHeading",
+  "Review",
+  "ProductFeature",
+  "ProductList",
+  "ProductOverview",
+  "ProductQuickview",
+  "SidebarLayout",
+  "SidebarNavigation",
+  "SidebarPanel",
+  "SidebarRail",
+  "ShoppingCart",
+  "SpeedDial",
+  "StoreNavigation",
+  "TaskList",
+  "Toolbar",
+] as const;
+
+export type CompositeName = (typeof COMPOSITES)[number];
+
+/** Every component the Kit ships, of either kind. */
+export const COMPONENTS = [...PRIMITIVES, ...COMPOSITES] as const;
+
+export type ComponentName = PrimitiveName | CompositeName;
+
+/**
+ * The purpose of every application component, carried by this Kit's own
+ * catalogue. Existing daisyUI sections are retained; Tailwind Plus and Bits UI
+ * capabilities use the same shared purpose vocabulary.
+ */
+export const COMPONENT_PURPOSES = {
+  EntityInspector: "Data display",
+  EntityJourney: "Data display",
+  SettingsRow: "Data input",
+  TaskCard: "Data display",
+  TelemetryRow: "Data display",
+  PropertyPanel: "Data display",
+  PhaseSummary: "Data display",
+  PlaybackControls: "Actions",
+
+  ListRow: "Data display",
+  NavItem: "Navigation",
+  NodeBadge: "Data display",
+  Pill: "Data display",
+  SplitView: "Layout",
+  ActionPanel: "Actions",
+  ActivityFeed: "Data display",
+  ApplicationShell: "Layout",
+  BottomNavigation: "Navigation",
+  CardHeading: "Data display",
+  CategoryFilter: "Data input",
+  CategoryPreview: "Navigation",
+  ChatMessage: "Data display",
+  CheckoutForm: "Data input",
+  CommandPalette: "Navigation",
+  ContextMenu: "Actions",
+  Diff: "Data display",
+  Filter: "Data input",
+  Incentive: "Data display",
+  Menubar: "Actions",
+  MultiColumnLayout: "Layout",
+  OrderHistory: "Data display",
+  OrderSummary: "Data display",
+  PageHeading: "Data display",
+  Review: "Data display",
+  ProductFeature: "Data display",
+  ProductList: "Data display",
+  ProductOverview: "Data display",
+  ProductQuickview: "Data display",
+  SidebarLayout: "Layout",
+  SidebarNavigation: "Navigation",
+  SidebarPanel: "Navigation",
+  SidebarRail: "Navigation",
+  ShoppingCart: "Data input",
+  SpeedDial: "Actions",
+  StoreNavigation: "Navigation",
+  TaskList: "Data display",
+  Toolbar: "Actions",
+} as const satisfies Record<ComponentName, PurposeCategory>;
+
+export type { BottomNavigationItem } from "./composites/BottomNavigation.svelte";
+
+export { default as TaskCard } from "./composites/TaskCard.svelte";
+export { default as TelemetryRow } from "./composites/TelemetryRow.svelte";
+export { default as PropertyPanel } from "./composites/PropertyPanel.svelte";
+export { default as PhaseSummary } from "./composites/PhaseSummary.svelte";
+export { default as PlaybackControls } from "./composites/PlaybackControls.svelte";
+export type { PropertyItem, PhaseGate } from "./core/operational";
+
+export { default as SettingsRow } from "./composites/SettingsRow.svelte";
+
+export { default as EntityInspector } from "./composites/EntityInspector.svelte";
+export type { InspectorEntity } from "./core/entity-inspector";
+
+export { default as EntityJourney } from "./composites/EntityJourney.svelte";
+export type { JourneyStage, JourneyState } from "./core/entity-journey";

package/vendor/ds/kits/app/src/operational.variants.ts

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+export const operational = tv({
+  slots: {
+    root: "min-w-0 [overflow-wrap:anywhere] rounded-[var(--reddb-radius-lg)] border border-muted bg-elevation-raised-surface p-[var(--reddb-spatial-inset-md)] text-foreground",
+    properties:
+      "[overflow-wrap:anywhere] [&_[data-description-item]]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] [&_dd]:break-words [&_dd]:text-end",
+    controls: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+    speed: "w-[calc(var(--reddb-spatial-control-height-md)*3)] min-w-0",
+    seek: "grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-[var(--reddb-spatial-gap-md)]",
+    body: "grid min-w-0 gap-[var(--reddb-spatial-gap-md)]",
+    header:
+      "flex min-w-0 flex-wrap items-center justify-between gap-[var(--reddb-spatial-gap-sm)]",
+    title: "m-0 min-w-0 break-words text-body font-medium",
+    description: "m-0 break-words text-caption text-ink-muted",
+    reading: "text-body tabular-nums",
+    row: "flex min-w-0 flex-wrap items-baseline justify-between gap-[var(--reddb-spatial-gap-md)]",
+    list: "m-0 grid list-none gap-[var(--reddb-spatial-gap-md)] p-0",
+    actions: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+  },
+});

package/vendor/ds/kits/app/src/primitives/ListRow.svelte

@@ -0,0 +1,95 @@
+<!--
+  ListRow — a Primitive: it imports no other Kit component.
+
+  The element is derived, never declared: a row with an `href` is a link, a row
+  with an `onclick` is a button, and a row with neither is a plain <div>. That
+  is the whole behavior, and it is what stops the two failure modes a list of
+  rows usually has — a <div> with a click handler that no keyboard can reach,
+  and a row wearing hover and focus styling that does nothing at all.
+
+  The leading and trailing rails are snippets so a caller can put a Badge, a
+  Kbd or an avatar in them without this component importing any of those and
+  becoming a Composite.
+-->
+<script lang="ts">
+  import type { ListRowContract } from "../core/contracts/listrow";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { quietControl, warnDeprecated } from "@reddb-io/design-system/base";
+  import {
+    DEPRECATED_LIST_ROW_DENSITIES,
+    listRow,
+    type ListRowDensity,
+    type ListRowSize,
+  } from "./list-row.variants";
+
+  interface Props extends ListRowContract, Omit<HTMLAttributes<HTMLElement>, keyof ListRowContract | "class" | "title"> {
+    /** @deprecated Renamed `size` (ADR 0026): `comfortable` is `md`, `compact` is `sm`. Removed next release. */
+    density?: ListRowDensity;
+    /** Before the text: an icon, an avatar, a status dot. */
+    leading?: Snippet;
+    /** After the text, pushed to the end of the row. */
+    trailing?: Snippet;
+    /** Full control over the text block. Replaces `title`/`description`. */
+    children?: Snippet;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    title,
+    description,
+    href,
+    size,
+    density,
+    selected = false,
+    leading,
+    trailing,
+    children,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const tag = $derived(href !== undefined ? "a" : rest.onclick ? "button" : "div");
+  const interactive = $derived(tag !== "div");
+  // A link needs its destination; a button must not submit the form it happens
+  // to stand in, exactly as Button defaults. A <div> needs neither.
+  const native = $derived(
+    tag === "a" ? { href } : tag === "button" ? { type: "button" as const } : {},
+  );
+
+  const resolvedSize = $derived<ListRowSize>(
+    size ?? (density !== undefined ? DEPRECATED_LIST_ROW_DENSITIES[density] : "md"),
+  );
+  const slots = $derived(listRow({ size: resolvedSize, interactive, selected }));
+
+  $effect(() => {
+    if (density !== undefined) {
+      warnDeprecated("ListRow", `density="${density}"`, `size="${DEPRECATED_LIST_ROW_DENSITIES[density]}"`);
+    }
+  });
+</script>
+
+<svelte:element
+  this={tag}
+  {...rest}
+  {...native}
+  class={interactive
+    ? quietControl({ ink: "inherit", selected, class: slots.root({ class: className }) })
+    : slots.root({ class: className })}
+  data-size={resolvedSize}
+  aria-current={selected && tag === "a" ? "true" : undefined}
+>
+  {#if leading}<span class={slots.leading()}>{@render leading()}</span>{/if}
+
+  <span class={slots.text()}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#if title}<span class={slots.title()}>{title}</span>{/if}
+      {#if description}<span class={slots.description()}>{description}</span>{/if}
+    {/if}
+  </span>
+
+  {#if trailing}<span class={slots.trailing()}>{@render trailing()}</span>{/if}
+</svelte:element>

package/vendor/ds/kits/app/src/primitives/NavItem.svelte

@@ -0,0 +1,87 @@
+<!--
+  NavItem — a Primitive: it imports no other Kit component.
+
+  One entry in a navigation list. Like ListRow it derives its element — an <a>
+  when it goes somewhere, a <button> when it only does something — but unlike
+  ListRow it also has to say *where you are*: `current` sets `aria-current`, so
+  the current page is announced and not merely tinted. Colour alone would leave
+  a screen reader with a list of identical links.
+
+  The trailing rail is a snippet, which is how a caller hangs a Badge or a Kbd
+  off an item without this component importing either.
+-->
+<script lang="ts">
+  import type { NavItemContract } from "../core/contracts/navitem";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { quietControl, warnDeprecated } from "@reddb-io/design-system/base";
+  import { navItem } from "./nav-item.variants";
+
+  /** What `aria-current` says: `page` for a route, `step` in a wizard, `location` in a trail. */
+  type CurrentToken = "page" | "step" | "location" | "date" | "time" | "true";
+
+  interface Props extends NavItemContract, Omit<HTMLAttributes<HTMLElement>, keyof NavItemContract | "class"> {
+    /** @deprecated Renamed `current` (ADR 0026): `active` is `current`, `active current="step"` is `current="step"`. Removed next release. */
+    active?: boolean;
+    /** Before the label. */
+    icon?: Snippet;
+    /** After the label, pushed to the end of the item. */
+    trailing?: Snippet;
+    /** Full control over the label. */
+    children?: Snippet;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    label,
+    href,
+    current = false,
+    active,
+    disabled = false,
+    icon,
+    trailing,
+    children,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  // A caller still on the deprecated `active` keeps its old meaning for one
+  // release: `active` decides current-ness, and a token in `current` only names it.
+  const isCurrent = $derived(active !== undefined ? active : current !== false);
+  const token = $derived<CurrentToken>(typeof current === "string" ? current : "page");
+
+  $effect(() => {
+    if (active !== undefined) warnDeprecated("NavItem", "active", "current");
+  });
+
+  const tag = $derived(href !== undefined ? "a" : "button");
+  // `pointer-events-none` stops the pointer; only these keep a keyboard out. A
+  // disabled link is not a thing the platform has, so its href is withheld —
+  // which is exactly what makes it unfocusable.
+  const native = $derived(
+    tag === "a"
+      ? { href: disabled ? undefined : href, tabindex: disabled ? -1 : undefined }
+      : { type: "button" as const, disabled },
+  );
+</script>
+
+<svelte:element
+  this={tag}
+  {...rest}
+  {...native}
+  data-nav-item
+  class={quietControl({ selected: isCurrent, class: navItem({ current: isCurrent, disabled }).root({ class: className }) })}
+  aria-current={isCurrent ? token : undefined}
+  aria-disabled={disabled ? "true" : undefined}
+>
+  <span class={navItem().label()}>
+    {#if children}{@render children()}{:else}{label ?? ""}{/if}
+  </span>
+
+  {#if icon}
+    <span class={navItem().icon()} aria-hidden="true">{@render icon()}</span>
+  {/if}
+
+  {#if trailing}<span class={navItem().trailing()}>{@render trailing()}</span>{/if}
+</svelte:element>

package/vendor/ds/kits/app/src/primitives/NodeBadge.svelte

@@ -0,0 +1,47 @@
+<!--
+  NodeBadge — a Primitive: it imports no other Kit component.
+
+  The one component in this Kit that knows a reddb word: a node, and whether
+  the cluster can currently reach it. It is here rather than in an application
+  because every reddb surface that lists nodes needs the same marker, and the
+  four statuses are the DS's to keep consistent.
+
+  It does not import Badge. It could look like one, and reaching for it would
+  make this a Composite in exchange for classes it does not want anyway — a
+  Badge is rectangular and takes no dot.
+
+  Its reachability is a domain reading, coloured through the documented
+  `NODE_STATUS_TONES` mapping onto the shared tone vocabulary (ADR 0026), and
+  announced as `data-tone` alongside `data-node-status`.
+
+  The status word is always rendered, `sr-only` when it is not drawn: a dot is
+  a colour and a fill, and neither is available to a screen reader or to anyone
+  who cannot tell the two dots apart.
+-->
+<script lang="ts">
+  import type { NodeBadgeContract } from "../core/contracts/nodebadge";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { NODE_STATUS_TONES, nodeBadge, type NodeStatus } from "./node-badge.variants";
+
+  interface Props extends NodeBadgeContract, Omit<HTMLAttributes<HTMLSpanElement>, keyof NodeBadgeContract | "class"> {
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    name,
+    status = "unknown",
+    showStatus = true,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = $derived(nodeBadge({ status, labelled: showStatus }));
+  const tone = $derived(NODE_STATUS_TONES[status]);
+</script>
+
+<span {...rest} class={slots.root({ class: className })} data-node-status={status} data-tone={tone}>
+  <span class={slots.dot()} aria-hidden="true"></span>
+  <span class={slots.name()}>{name}</span>
+  <span class={slots.status()}>{status}</span>
+</span>