+
{t("medications.detail.verlauf.status.taken_on_time")}: {takenOnTime}
diff --git a/src/components/medications/wizard/wizard-stepper.tsx b/src/components/medications/wizard/wizard-stepper.tsx
index 765453fbc..b2477320e 100644
--- a/src/components/medications/wizard/wizard-stepper.tsx
+++ b/src/components/medications/wizard/wizard-stepper.tsx
@@ -162,7 +162,7 @@ export function WizardStepper({
/>
-
- {t("settings.fitbitTag")}
-
+ {t("settings.fitbitTag")}
-
- {t("settings.googleHealthTag")}
-
+ {t("settings.googleHealthTag")}
- {t("settings.nightscoutTag")}
-
- }
+ titleAccessory={{t("settings.nightscoutTag")}}
description={
", () => {
+ it("renders the neutral chip shape on the text-2xs token", () => {
+ const html = renderToStaticMarkup(Glucose);
+ expect(html).toContain("Glucose");
+ expect(html).toContain('data-slot="tag-chip"');
+ expect(html).toContain("bg-muted");
+ expect(html).toContain("text-foreground");
+ expect(html).toContain("rounded-full");
+ expect(html).toContain("text-2xs");
+ // The arbitrary value the three hand-copied sites carried is gone.
+ expect(html).not.toContain("text-[0.6875rem]");
+ });
+
+ it("merges caller classes and forwards span props", () => {
+ const html = renderToStaticMarkup(
+
+ Steps
+ ,
+ );
+ expect(html).toContain("ml-2");
+ expect(html).toContain('title="source label"');
+ // The base shape survives the merge.
+ expect(html).toContain("rounded-full");
+ });
+});
diff --git a/src/components/ui/tag-chip.tsx b/src/components/ui/tag-chip.tsx
new file mode 100644
index 000000000..cd8676330
--- /dev/null
+++ b/src/components/ui/tag-chip.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * The small neutral tag chip that labels a card's subject line.
+ *
+ * Three Settings integration cards carried the same hand-copied literal
+ * (`bg-muted text-foreground rounded-full px-2 py-0.5 text-[0.6875rem]
+ * font-medium`) in `SettingsCardHeader`'s `titleAccessory` slot, each free to
+ * drift on the next touch. This is that literal, named โ on the `text-2xs`
+ * token rather than an arbitrary value.
+ *
+ * It is deliberately NOT a `Badge`: `Badge` carries status meaning (variant โ
+ * semantic colour), while a tag chip is a neutral noun ("Glucose", "Steps").
+ * Keeping them apart is what stops a neutral label from creeping into the
+ * status vocabulary. A chip that means a state is a `Badge`.
+ *
+ * RSC-safe: no hooks, no browser API.
+ */
+export function TagChip({
+ children,
+ className,
+ ...props
+}: {
+ children: ReactNode;
+ className?: string;
+} & Omit, "children">) {
+ return (
+
+ {children}
+
+ );
+}