nuxt-ui-basekit 0.2.0 → 0.2.1

package/app/components/BaseKitRecordPicker.vue

@@ -3,32 +3,32 @@ import { computed, ref } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
 
 /**
- * Auswahl eines Datensatzes über (potenziell mehrere) Modelle — die Auswahl
- * läuft in einem Modal, das per „Auswählen" / „Ändern" aufgeht. Im Modal ist
- * die Liste nach Text UND Typ filterbar.
+ * Picks a record across one or several models. The choosing happens in a modal
+ * that opens through "Select" or "Change"; inside, the list filters by text
+ * AND by type.
  *
- * - **Nichts gewählt** → Button „Auswählen".
- * - **Gewählt** → Titel der Auswahl (Link zum Bearbeiten des Inhalts) + Typ-
- *   Badge + Button „Ändern".
+ * - **Nothing selected** — a "Select" button.
+ * - **Selected** — the title of the choice, linking to its edit form, plus a
+ *   type badge and a "Change" button.
  *
- * Modell-agnostisch — die `items` liefert der Aufrufer. `v-model` = `value`
- * der Option (oder `null`).
+ * Model-agnostic: the caller supplies `items`. `v-model` is the option's
+ * `value`, or `null`.
  */
 export interface BaseKitRecordOption {
   value: number
   label: string
-  /** Typ-Badge (bereits übersetzt). */
+  /** Type badge — already in the caller's language. */
   type?: string
-  /** Zusatz rechts in der Liste (z. B. Slug). */
+  /** Extra detail on the right of the list, a slug for instance. */
   hint?: string
-  /** Interner Link zum Bearbeiten des Inhalts. */
+  /** Internal link to the record's edit form. */
   editHref?: string
 }
 
 const props = withDefaults(defineProps<{
   modelValue?: number | null
   items: BaseKitRecordOption[]
-  /** Titel des Auswahl-Modals. */
+  /** Title of the picker modal. */
   title?: string
 }>(), {
   modelValue: null,
@@ -72,7 +72,7 @@ function choose(item: BaseKitRecordOption): void {
 
 <template>
   <div>
-    <!-- Gewählt: Titel (Bearbeiten-Link) + Typ-Badge + Ändern -->
+    <!-- Selected: title as an edit link, type badge, change button -->
     <div v-if="selected" class="flex items-center gap-2">
       <NuxtLink
         v-if="selected.editHref"
@@ -93,7 +93,7 @@ function choose(item: BaseKitRecordOption): void {
       </UButton>
     </div>
 
-    <!-- Nichts gewählt: Auswählen -->
+    <!-- Nothing selected: the select button -->
     <UButton v-else color="neutral" variant="subtle" icon="i-lucide-list" @click="openModal">
       {{ labels.select }}
     </UButton>

package/app/components/BaseKitSettingRow.vue

@@ -1,35 +1,36 @@
 <script setup lang="ts">
 /**
- * Setting-Row — Pattern für eine einzelne Einstellung in einer Settings-Card.
+ * One setting inside a settings card.
  *
  *  ┌──────────────────────────────────────────────────────┐
- *  │ Titel                                       [Action] │
- *  │ Beschreibungstext (optional, mehrzeilig)             │
+ *  │ Title                                       [Control] │
+ *  │ Description (optional, may wrap)                     │
  *  └──────────────────────────────────────────────────────┘
  *
- * Titel + Action stehen auf einer Zeile (Action rechts, Titel links).
- * Die Beschreibung steht darunter, linksbündig zum Titel.
+ * Title and control share a line, title left and control right. The
+ * description sits underneath, aligned with the title.
  *
- * Verwendung:
+ * Usage:
  *
- *   <BaseKitSettingRow title="Benachrichtigungen" description="E-Mails und Push erhalten">
+ *   <BaseKitSettingRow title="Notifications" description="Receive email and push">
  *     <USwitch v-model="notifications" />
  *   </BaseKitSettingRow>
  *
- *   <BaseKitSettingRow title="Sprache" description="Wird beim Speichern übernommen">
+ *   <BaseKitSettingRow title="Language" description="Applied on save">
  *     <USelect v-model="staged" :items="locales" />
  *   </BaseKitSettingRow>
  *
- * Der `meta`-Slot nimmt eine Zusatzzeile unter der Beschreibung auf — Bestand,
- * Sperrgrund, Hinweis. Sie steht bewusst getrennt von `description`: das Feld
- * trägt den einen erklärenden Satz, und eine Zahl ist keine Erklärung.
+ * The `meta` slot takes an extra line below the description — a count, a
+ * reason something is locked, a hint. Kept apart from `description` on
+ * purpose: that field carries the one explaining sentence, and a number is not
+ * an explanation.
  *
- *   <BaseKitSettingRow title="E-Learning" description="Kurse und Nachweise.">
+ *   <BaseKitSettingRow title="E-learning" description="Courses and certificates.">
  *     <USwitch v-model="on" />
- *     <template #meta><span>4 Kurse</span></template>
+ *     <template #meta><span>4 courses</span></template>
  *   </BaseKitSettingRow>
  *
- * Mehrere Rows in einer Card werden über Tailwind divider getrennt:
+ * Several rows in one card are separated with a Tailwind divider:
  *
  *   <UCard>
  *     <div class="divide-y divide-default">

package/app/components/BaseKitStatTile.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /**
- * Eine Zahl mit Beschriftung — die richtige Form für einen einzelnen Wert.
+ * A number with a label — the right shape for a single value.
  *
- * Ein Balkendiagramm mit genau einem Balken sagt nicht mehr als die Zahl
- * selbst und kostet die vierfache Fläche. Deshalb sind Bestand und
- * Handlungsliste Kacheln und keine Diagramme.
+ * A bar chart with exactly one bar says no more than the number itself and
+ * costs four times the space. Which is why counts and to-do figures are tiles
+ * here and not charts.
  *
- * `tone` färbt nur, wenn die Zahl über null liegt: „0 offene Vorgänge" ist
- * keine Warnung, sondern der Normalzustand.
+ * `tone` only colours when the number is above zero: "0 open items" is not a
+ * warning, it is the normal state.
  */
 import { computed } from 'vue'
 import { useChartFormat } from '../composables/useChartPalette'
@@ -33,8 +33,8 @@ const valueClass = computed(() => {
   return props.tone === 'alert' ? 'text-error' : 'text-highlighted'
 })
 
-/** Der Punkt neben der Zahl trägt dieselbe Aussage wie die Farbe — die Farbe
- *  allein wäre für eine Rot-Grün-Schwäche keine. */
+/** The dot next to the number carries the same message as the colour — the
+ *  colour alone would carry none under a red-green deficiency. */
 const flagged = computed(() => props.value > 0 && props.tone === 'alert')
 </script>
 

package/app/components/BaseKitTabs.vue

@@ -3,43 +3,43 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from '#imports'
 
 /**
- * Tab-Gruppierung — Pattern, um auf einer Seite mehrere Bereiche (z.B.
- * Einstellungs-Gruppen) zu gliedern, gerade bei vielen Feldern.
+ * Splits a page into sections — settings groups, say, and anything else that
+ * gets unwieldy once there are many fields.
  *
- * Generisch: pro Tab ein benannter Slot (= dessen `key`). Aktiver Tab optional
- * über `v-model` steuerbar, sonst der erste.
+ * One named slot per tab, keyed by its `key`. The active tab is optionally
+ * driven through `v-model`; without it the first one wins.
  *
  *   <BaseKitTabs :items="[
- *     { key: 'general', label: 'Allgemein', icon: 'i-lucide-settings' },
- *     { key: 'access',  label: 'Zugriff',   icon: 'i-lucide-lock' },
+ *     { key: 'general', label: 'General', icon: 'i-lucide-settings' },
+ *     { key: 'access',  label: 'Access',  icon: 'i-lucide-lock' },
  *   ]">
  *     <template #general> … </template>
  *     <template #access>  … </template>
  *   </BaseKitTabs>
  *
- * Deep-Linking: mit `hash-nav` ist der aktive Tab über den URL-Hash adressierbar
- * (`…/seite#access`). Beim Laden gewinnt ein passender Hash; ein Tab-Wechsel
- * schreibt den Hash via `router.replace` (kein History-Spam). Bei mehreren
- * Tab-Gruppen auf einer Seite nur EINE mit `hash-nav` betreiben.
+ * Deep linking: with `hash-nav` the active tab becomes addressable through the
+ * URL fragment (`…/page#access`). On load a matching hash wins; switching tabs
+ * writes the hash through `router.replace`, so the history stays clean. With
+ * several tabsets on one page, run only ONE of them with `hash-nav`.
  *
- * Der Hash greift bewusst erst `onMounted`: der Server sieht ihn gar nicht
- * (Browser schicken ihn nicht mit), und ein davon abweichender erster Render
- * im Client zerlegt die Hydration — dann stand die Markierung auf dem einen
- * Tab und der Inhalt kam vom anderen. Aus demselben Grund läuft er über
- * `select()`, damit ein gebundenes `v-model` den Tab aus dem Hash mitbekommt.
+ * The hash is applied `onMounted` on purpose. The server never sees it —
+ * browsers do not send it — and a first client render that differs from the
+ * server's tears the hydration apart: the marker sat on one tab while the
+ * content came from another. For the same reason it goes through `select()`,
+ * so a bound `v-model` learns about the tab from the hash.
  *
- * A11y: tablist/tab/tabpanel-Rollen, Pfeiltasten links/rechts wechseln.
+ * Accessibility: tablist/tab/tabpanel roles, left and right arrow keys switch.
  *
- * Layout-Konvention: die Tab-Leiste NICHT in eine `UCard` wrappen — Tabs +
- * Inhalt liegen direkt auf der Seite. Feinere Struktur je Tab-Inhalt (Gruppen,
- * Fieldset, einzelne Cards) nach Bedarf INNERHALB des jeweiligen Slots.
+ * Layout convention: do NOT wrap the tab bar in a `UCard` — tabs and content
+ * sit directly on the page. Finer structure per tab (groups, fieldsets,
+ * individual cards) belongs INSIDE the respective slot.
  */
 const props = withDefaults(defineProps<{
-  /** Tab-Definitionen (Reihenfolge = Anzeigereihenfolge). */
+  /** Tab definitions; their order is the display order. */
   items: Array<{ key: string, label: string, icon?: string }>
-  /** Aktiver Tab-Key (v-model). Ohne Bindung wird der erste Tab aktiv. */
+  /** Key of the active tab (v-model). Unbound, the first tab becomes active. */
   modelValue?: string
-  /** Aktiven Tab über den URL-Hash adressierbar machen (`#<key>`). */
+  /** Make the active tab addressable through the URL fragment (`#<key>`). */
   hashNav?: boolean
 }>(), {
   modelValue: undefined,
@@ -53,7 +53,7 @@ const emit = defineEmits<{
 const route = useRoute()
 const router = useRouter()
 
-/** Gültiger Tab-Key aus dem aktuellen URL-Hash, sonst null. */
+/** A valid tab key from the current URL fragment, otherwise null. */
 function keyFromHash(): string | null {
   if (!props.hashNav) return null
   const key = String(route.hash ?? '').replace(/^#/, '')
@@ -62,36 +62,35 @@ function keyFromHash(): string | null {
 
 const active = ref<string>(props.modelValue ?? props.items[0]?.key ?? '')
 
-/** Hat der Nutzer selbst gewählt? Dann gewinnt seine Wahl über den Hash. */
+/** Did the user choose themselves? Then their choice beats the hash. */
 const picked = ref(false)
 
-// Hash erst im Client anwenden — siehe Kommentar oben.
+// Apply the hash on the client only — see the comment at the top.
 onMounted(() => applyHash())
 
-// v-model rein: Auswahl von außen übernehmen.
+// v-model coming in: take the selection from outside.
 watch(() => props.modelValue, (next) => {
   if (next !== undefined && next !== active.value) active.value = next
 })
 
-// Hash ändert sich (Direktlink, Zurück/Vorwärts) → passenden Tab aktivieren.
+// The hash changed — a direct link, back or forward — so activate that tab.
 watch(() => route.hash, () => {
   const key = keyFromHash()
   if (key !== null && key !== active.value) active.value = key
 })
 
-// Items wechseln. Zwei Fälle: der Tab aus dem Hash taucht erst jetzt auf
-// (rechte-abhängige Tabs kommen mit dem Bootstrap nach) — dann übernehmen,
-// solange der Nutzer nicht selbst gewählt hat. Sonst: fällt der aktive Tab
-// weg, zurück auf den ersten.
+// The items changed. Two cases: the tab named in the hash only appears now —
+// permission-dependent tabs arrive late — in which case take it, as long as
+// the user has not chosen themselves. Otherwise, if the active tab disappears,
+// fall back to the first.
 watch(() => props.items, (items) => {
   if (!picked.value && applyHash()) return
   if (!items.some(i => i.key === active.value)) active.value = items[0]?.key ?? ''
 })
 
 /**
- * Tab aus dem Hash übernehmen, falls er zu einem Item passt und nicht schon
- * aktiv ist. Zählt nicht als Nutzer-Wahl. Liefert `true`, wenn gewechselt
- * wurde.
+ * Take the tab from the hash if it matches an item and is not already active.
+ * Does not count as a user choice. Returns `true` when it switched.
  */
 function applyHash(): boolean {
   const key = keyFromHash()

package/app/components/BaseKitViewLink.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 /**
- * Weg vom Bearbeiten-Formular zur Ansicht derselben Sache.
+ * The way from an edit form to the public view of the same thing.
  *
- * Die Gegenrichtung gab es längst: In der Ansicht stehen die Kontext-Aktionen
- * („Bearbeiten", „Inhalt pflegen"). Der Rückweg fehlte — wer eine Rubrik
- * bearbeitet hatte, kam nur über den Umweg Übersicht → Frontend → Rubrik
- * dorthin, um das Ergebnis zu sehen.
+ * The opposite direction had existed for a long time: the view carries the
+ * context actions ("Edit", "Manage content"). The way back was missing —
+ * having edited a record, the only route to seeing the result was the detour
+ * through the overview and the front end.
  *
- * Steht neben dem Rücksprung im Seitenkopf, an derselben Stelle wie dort:
- * Erst die Ansicht, dann der Rücksprung zur Liste — die Reihenfolge folgt der
- * Häufigkeit, mit der man beides braucht.
+ * Sits next to the back link in the page header, in the same spot: first the
+ * view, then the way back to the list. The order follows how often each is
+ * needed.
  *
- * **Nur zeigen, wenn es die Ansicht gibt.** Ein neu angelegter Datensatz hat
- * noch keine, und ein Link ins Leere ist schlechter als kein Link. Deshalb
- * gehört das `v-if` an die Aufrufstelle, wo bekannt ist, ob gespeichert wurde.
+ * **Only render it when the view exists.** A freshly created record has none,
+ * and a link into nowhere is worse than no link. That is why the `v-if`
+ * belongs at the call site, where it is known whether anything was saved.
  */
 import { computed } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
@@ -21,9 +21,9 @@ import { useBaseKitLabels } from '../composables/useBaseKit'
 const props = withDefaults(defineProps<{
   to: string
   /**
-   * Öffnet die Ansicht in einem neuen Reiter. Voreingestellt, weil man beim
-   * Bearbeiten meist nachsehen und weiterarbeiten will — nicht wechseln und
-   * die ungespeicherten Änderungen verlieren.
+   * Opens the view in a new tab. On by default, because while editing you
+   * usually want to look and carry on — not switch away and lose the unsaved
+   * changes.
    */
   newTab?: boolean
   label?: string

package/app/components/charts/BaseKitChartBars.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 /**
- * Waagerechte Balken für nominale Kategorien — Rollen, Typen, Herkünfte.
+ * Horizontal bars for nominal categories — roles, types, sources.
  *
- * Waagerecht, weil die Beschriftung aus Namen besteht und Namen unter einer
- * senkrechten Säule schräg gestellt werden müssten. Alle Balken tragen
- * **dieselbe** Farbe: die Kategorien haben keine eigene Ordnung, und ein
- * Farbverlauf nach Größe würde die Länge ein zweites Mal erzählen, statt eine
- * neue Auskunft zu geben.
+ * Horizontal because the labels are names, and names under a vertical column
+ * would have to be tilted. Every bar carries the **same** colour: the
+ * categories have no order of their own, and a gradient by size would tell the
+ * length a second time instead of adding anything.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -19,7 +18,7 @@ interface BarItem {
 
 const props = withDefaults(defineProps<{
   items: BarItem[]
-  /** Sichtbare Zeilen; der Rest wandert in „Weitere". */
+  /** Rows shown; the rest is folded into a "more" row. */
   limit?: number
   moreLabel?: string
   emptyLabel?: string
@@ -65,8 +64,8 @@ const color = baseKitChartColor(0)
       >
         <span class="truncate text-sm text-muted" :title="row.label">{{ row.label }}</span>
 
-        <!-- Die Spur ist die Fläche, der Balken die Aussage; deshalb trägt die
-             Spur nur eine Andeutung und keine zweite Farbe. -->
+        <!-- The track is the surface, the bar is the statement; which is why
+             the track only hints and carries no second colour. -->
         <span class="h-2.5 w-full rounded-full bg-elevated">
           <span
             class="block h-2.5 rounded-full transition-opacity"

package/app/components/charts/BaseKitChartColumns.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 /**
- * Gestapelte Säulen über einer Zeitachse — „was ist je Tag entstanden".
+ * Stacked columns over a time axis — what accrued per day.
  *
- * Warum gestapelt und nicht mehrere Linien: die Frage ist Anteil am Ganzen,
- * nicht Verlauf einzelner Reihen. Und warum Säulen und keine Fläche: Tageswerte
- * sind gezählte Ereignisse, keine stetige Größe — eine Fläche würde zwischen
- * zwei Tagen interpolieren und behaupten, dass um 12 Uhr nachts etwas
- * halb passiert ist.
+ * Stacked rather than several lines because the question is share of the
+ * whole, not the course of individual series. Columns rather than an area
+ * because daily values are counted events, not a continuous quantity: an area
+ * would interpolate between two days and claim something half-happened at
+ * midnight.
  *
- * Trennung zwischen den Segmenten passiert über eine 2-px-Lücke in der
- * Kartenfarbe, nicht über einen Rahmen: ein Rahmen ist Tinte, die keine Daten
- * trägt, und bei dünnen Segmenten überdeckt er den Wert.
+ * Segments are separated by a 2px gap in the card colour rather than a border.
+ * A border is ink that carries no data, and on thin segments it covers the
+ * value.
  *
- * Höchstens fünf Reihen — siehe `useChartPalette`.
+ * Five series at most — see `useChartPalette`.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -25,13 +25,13 @@ interface ColumnSeries {
 }
 
 const props = withDefaults(defineProps<{
-  /** Beschriftung je Säule, z. B. ISO-Tage. */
+  /** Label per column, ISO dates for instance. */
   categories: string[]
   series: ColumnSeries[]
   height?: number
-  /** Achsenbeschriftung (kurz) aus einer Kategorie. */
+  /** Short axis label derived from a category. */
   formatCategory?: (value: string) => string
-  /** Ausführliche Fassung für den Tooltip. */
+  /** The long form, for the tooltip. */
   formatCategoryLong?: (value: string) => string
   ariaLabel?: string
 }>(), {
@@ -64,7 +64,7 @@ const plot = computed(() => {
   }
 })
 
-/** Tagessummen — sie bestimmen die Skala und stehen im Tooltip. */
+/** Daily totals — they set the scale and appear in the tooltip. */
 const totals = computed(() =>
   props.categories.map((_, index) =>
     props.series.reduce((sum, s) => sum + (s.points[index] ?? 0), 0),
@@ -72,9 +72,8 @@ const totals = computed(() =>
 )
 
 /**
- * Obere Achsengrenze auf eine runde Zahl aufgerundet. Ohne das steht die
- * Beschriftung auf krummen Werten wie 37, und die Gitterlinien tragen keine
- * ablesbare Auskunft mehr.
+ * Upper axis bound, rounded up to something even. Without it the labels sit on
+ * awkward values like 37 and the grid lines stop telling anyone anything.
  */
 const scaleMax = computed(() => {
   const peak = Math.max(0, ...totals.value)
@@ -100,7 +99,7 @@ function columnX(index: number): number {
   return PADDING.left + plot.value.band * (index + 0.5) - plot.value.columnWidth / 2
 }
 
-/** Runde Kappe nur oben — unten sitzt die Säule auf der Grundlinie auf. */
+/** Rounded cap on top only — the column sits flat on the baseline. */
 function cappedPath(x: number, y: number, w: number, h: number): string {
   const r = Math.min(4, w / 2, h)
   if (h <= 0) return ''
@@ -129,7 +128,7 @@ const columns = computed(() => {
     const segments: Segment[] = []
     let stacked = 0
 
-    // Von unten nach oben stapeln; die oberste Reihe bekommt die Kappe.
+    // Stack bottom to top; the topmost series gets the cap.
     const present = props.series
       .map((s, order) => ({ s, order, value: s.points[index] ?? 0 }))
       .filter(entry => entry.value > 0)
@@ -140,8 +139,8 @@ const columns = computed(() => {
       const top = baseline - (stacked / max) * innerHeight
 
       const isTop = position === present.length - 1
-      // Lücke nach oben, außer beim obersten Segment — dort säße sie
-      // zwischen Säule und Luft und würde die Säule nur kürzen.
+      // A gap above, except on the topmost segment — there it would sit
+      // between the column and thin air and merely shorten it.
       const height = Math.max(0, bottom - top - (isTop ? 0 : GAP))
       if (height <= 0) return
 
@@ -159,9 +158,9 @@ const columns = computed(() => {
 })
 
 /**
- * Beschriftung ausdünnen, bis sie nicht mehr kollidiert — und zwar durch
- * Weglassen, nicht durch Verstecken: ein ausgeblendeter Text bleibt im
- * Baum stehen und wird von Screenreadern trotzdem vorgelesen.
+ * Thin the labels out until they stop colliding — by leaving them out, not by
+ * hiding them: hidden text stays in the tree and screen readers read it
+ * anyway.
  */
 const axisLabels = computed(() => {
   const perLabel = 56
@@ -194,7 +193,7 @@ const tooltip = computed(() => {
         value: s.points[index] ?? 0,
       }))
       .filter(row => row.value > 0),
-    // Am Rand kippt der Kasten nach innen, statt aus der Karte zu laufen.
+    // Near the edge the box flips inward instead of running off the card.
     anchor: PADDING.left + plot.value.band * (index + 0.5),
   }
 })
@@ -218,7 +217,7 @@ function readout(index: number): string {
       :aria-label="props.ariaLabel"
       class="block max-w-full overflow-visible"
     >
-      <!-- Gitter: durchgezogene Haarlinien, eine Stufe von der Fläche weg. -->
+      <!-- Grid: solid hairlines, one step away from the surface. -->
       <g>
         <line
           v-for="tick in ticks"
@@ -242,7 +241,7 @@ function readout(index: number): string {
         >{{ tick.label }}</text>
       </g>
 
-      <!-- Datenmarken -->
+      <!-- Data marks -->
       <g
         v-for="column in columns"
         :key="column.category"
@@ -257,8 +256,8 @@ function readout(index: number): string {
         />
       </g>
 
-      <!-- Trefferflächen: über die volle Höhe und über die ganze Bandbreite,
-           damit niemand eine 14 px schmale Säule treffen muss. -->
+      <!-- Hit areas: full height and the whole band, so nobody has to hit a
+           14px column. -->
       <g>
         <rect
           v-for="column in columns"
@@ -279,7 +278,7 @@ function readout(index: number): string {
         />
       </g>
 
-      <!-- Achsenbeschriftung -->
+      <!-- Axis labels -->
       <text
         v-for="label in axisLabels"
         :key="`label-${label.category}`"
@@ -291,7 +290,7 @@ function readout(index: number): string {
       >{{ label.text }}</text>
     </svg>
 
-    <!-- Tooltip: Wert führt, Reihenname folgt. -->
+    <!-- Tooltip: the value leads, the series name follows. -->
     <div
       v-if="tooltip"
       class="pointer-events-none absolute top-0 z-10 min-w-40 -translate-x-1/2 rounded-md border border-default bg-default p-2 shadow-lg"

package/app/components/charts/BaseKitChartDonut.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /**
- * Ring für Teil-vom-Ganzen bei wenigen Klassen.
+ * A ring for part-of-whole across a few classes.
  *
- * Bewusst eng eingesetzt: ein Ring beantwortet „wie verteilt sich das grob",
- * nicht „welcher von zweien ist größer". Sobald zwei Segmente nahe beieinander
- * liegen, ist ein Balken die ehrlichere Form. Höchstens vier Segmente, sonst
- * verlieren die kleinen ihre Beschriftung.
+ * Deliberately narrow in scope: a ring answers "roughly how does this split",
+ * not "which of these two is bigger". As soon as two segments sit close
+ * together, a bar is the more honest shape. Four segments at most, otherwise
+ * the small ones lose their labels.
  *
- * In der Mitte steht die Summe — das ist die Zahl, die zuerst gesucht wird,
- * und sie füllt den Platz, den ein Ring ohnehin frei lässt.
+ * The total goes in the middle — it is the number people look for first, and
+ * it fills the space a ring leaves empty anyway.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -21,7 +21,7 @@ interface DonutSlice {
 
 const props = withDefaults(defineProps<{
   slices: DonutSlice[]
-  /** Beschriftung unter der Summe in der Mitte. */
+  /** Label below the total in the centre. */
   centerLabel?: string
   size?: number
   ariaLabel?: string
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<{
 const { number, percent } = useChartFormat()
 
 const THICKNESS = 18
-/** Lücke zwischen den Segmenten, in Grad — das Gegenstück zur 2-px-Lücke. */
+/** Gap between segments, in degrees — the counterpart to the 2px gap. */
 const GAP_DEGREES = 2
 
 const active = ref<string | null>(null)
@@ -61,8 +61,8 @@ const arcs = computed(() => {
       const start = cursor
       cursor += sweep
 
-      // Ein Segment, das den ganzen Kreis füllt, hätte identischen Start- und
-      // Endpunkt — der Bogen verschwände. Dann zeichnen wir den vollen Ring.
+      // A segment filling the whole circle would have identical start and end
+      // points and the arc would vanish. Draw the full ring instead.
       const full = sweep >= 359.9
       const gap = full ? 0 : Math.min(GAP_DEGREES, sweep / 3)
       const from = start + gap / 2
@@ -95,10 +95,10 @@ const legend = computed(() =>
 </script>
 
 <template>
-  <!-- Legende unter dem Ring, nicht daneben: die Karte steht auf der
-       Übersicht in einer schmalen Spalte, und nebeneinander blieb für die
-       Beschriftungen so wenig übrig, dass „Ausgeschieden" auf ein „A"
-       zusammenschrumpfte. Untereinander hat jede Zeile die volle Breite. -->
+  <!-- Legend below the ring, not beside it: the card often sits in a narrow
+       column, and side by side so little was left for the labels that a word
+       like "Discontinued" shrank to a "D". Stacked, every row has the full
+       width. -->
   <div class="flex flex-col items-center gap-5">
     <svg
       :width="props.size"
@@ -108,8 +108,8 @@ const legend = computed(() =>
       :aria-label="props.ariaLabel"
       class="shrink-0"
     >
-      <!-- Leerer Ring, wenn nichts da ist: die Form bleibt erkennbar, statt
-           dass die Karte auf eine leere Fläche zusammenfällt. -->
+      <!-- An empty ring when there is nothing: the shape stays recognisable
+           instead of the card collapsing into a blank area. -->
       <circle
         v-if="!arcs.length"
         :cx="center"
@@ -156,7 +156,7 @@ const legend = computed(() =>
       >{{ props.centerLabel }}</text>
     </svg>
 
-    <!-- Legende trägt die Identität, nicht die Farbe allein. -->
+    <!-- The legend carries the identity, not the colour alone. -->
     <ul class="w-full space-y-1.5">
       <li
         v-for="entry in legend"