viur-ui 0.0.1 → 0.0.2

package/src/forms/bones/utils.js

@@ -12,9 +12,8 @@ export default class Utils {
   }
 
   static stripHtml(html) {
-    const div = document.createElement("div")
-    div.innerHTML = html
-    return div.textContent || div.innerText || ""
+    // DOMParser builds an inert document: no scripts or event handlers run (unlike innerHTML)
+    return new DOMParser().parseFromString(String(html ?? ""), "text/html").body.textContent || ""
   }
 
   static unescape(value) {
@@ -93,10 +92,10 @@ export default class Utils {
       let finalstr = formatstr
       for (let pathstr of pathlist) {
         let aval = readValue(pathstr, avalue)
-        // Auch Zahlen und Wahrheitswerte gehören in den Text: vorher wurde
-        // JEDER Nicht-String durch den Fallback ersetzt, `$(dest.kdnr)` mit 42
-        // verschwand also. Leeres, Objekte und der Platzhalter "-" bleiben der
-        // Fallback.
+        // Numbers and booleans belong in the text too: previously
+        // EVERY non-string was replaced by the fallback, so `$(dest.kdnr)` with 42
+        // disappeared. Empty values, objects and the placeholder "-" remain the
+        // fallback.
         if (aval === null || aval === undefined || aval === "-" || typeof aval === "object") {
           aval = fallback
         } else {
@@ -110,20 +109,20 @@ export default class Utils {
     return finalStrList.join(", ")
   }
 
-  // ── ViUR-Werte als Text ───────────────────────────────────────────────
+  // ── ViUR values as text ───────────────────────────────────────────────
   //
-  // EINE Stelle, die jeden Bone-Wert in eine Zeichenkette übersetzt — für
-  // Tabellen, Detailansichten, Export. Denn ein Bone-Wert ist selten ein
-  // Skalar: mehrsprachige Bones sind ein Objekt je Sprache, `multiple` eine
-  // Liste, relationale Bones tragen `{dest, rel}` und ihren eigenen
-  // Formatstring, `text` enthält HTML.
+  // ONE place that turns every bone value into a string — for
+  // tables, detail views, export. Because a bone value is rarely a
+  // scalar: multilingual bones are one object per language, `multiple` a
+  // list, relational bones carry `{dest, rel}` and their own
+  // format string, `text` contains HTML.
 
-  /** Typfamilie eines Bones: "str.email" → "str". */
+  /** Type family of a bone: "str.email" → "str". */
   static boneFamily(type) {
     return String(type ?? "").split(".")[0]
   }
 
-  /** select-Wert → Beschriftung. Akzeptiert Objekt- UND Paar-Schreibweise. */
+  /** select value → label. Accepts object AND pair notation. */
   static optionLabel(bone, value) {
     const values = bone?.["values"]
     if (Array.isArray(values)) {
@@ -137,7 +136,7 @@ export default class Utils {
     return String(value)
   }
 
-  /** Ein EINZELNER Wert (ohne Sprachen/multiple — das macht boneToString). */
+  /** A SINGLE value (without languages/multiple — boneToString handles that). */
   static singleValueToString(value, bone = {}, options = {}) {
     if (value === null || value === undefined || value === "") return ""
     switch (Utils.boneFamily(bone["type"])) {
@@ -159,7 +158,7 @@ export default class Utils {
       case "date": {
         const parsed = new Date(String(value))
         if (Number.isNaN(parsed.getTime())) return String(value)
-        // ViUR setzt die Flags `date`/`time` (beide standardmäßig an).
+        // ViUR sets the flags `date`/`time` (both on by default).
         const wantsDate = bone["date"] !== false
         const wantsTime = bone["time"] !== false
         const format = {}
@@ -169,15 +168,15 @@ export default class Utils {
       }
       case "relational":
       case "record": {
-        // Relationale Bones bringen ihren Formatstring mit ("$(dest.name)").
+        // Relational bones bring their own format string ("$(dest.name)").
         const formatstr = bone["format"] ?? bone["params"]?.["format"] ?? "$(dest.name)"
         const text = Utils.formatString(formatstr, value, "")
         if (text && text !== "-") return Utils.stripHtml(String(text))
-        // Ohne Format ist der Schlüssel besser als nichts.
+        // Without a format, the key is better than nothing.
         return String(value?.["dest"]?.["key"] ?? value?.["key"] ?? "")
       }
       case "text":
-        // Textbones enthalten HTML — in einer Zelle stört das.
+        // Text bones contain HTML — that's disruptive in a cell.
         return Utils.stripHtml(String(value))
       case "raw":
         return typeof value === "object" ? JSON.stringify(value) : String(value)
@@ -186,7 +185,7 @@ export default class Utils {
     }
   }
 
-  /** Ein Wert OHNE Sprachdimension (multiple-Listen inklusive) als Text. */
+  /** A value WITHOUT language dimension (multiple lists included) as text. */
   static monolingualToString(value, bone = {}, options = {}) {
     if (bone["multiple"]) {
       const list = Array.isArray(value) ? value : value === null || value === undefined ? [] : [value]
@@ -196,10 +195,10 @@ export default class Utils {
   }
 
   /**
-   * Flagge einer Sprache — pflegefrei über die CLDR-Daten des Browsers:
-   * Sprachcode → wahrscheinlichste Region (`Intl.Locale.maximize`, de→DE,
-   * en→US, ja→JP) → Regional-Indicator-Emoji. `null`, wenn keine Region
-   * bestimmbar ist.
+   * Flag of a language — maintenance-free via the browser's CLDR data:
+   * language code → most likely region (`Intl.Locale.maximize`, de→DE,
+   * en→US, ja→JP) → regional indicator emoji. `null` if no region
+   * can be determined.
    */
   static languageFlag(code) {
     try {
@@ -211,28 +210,28 @@ export default class Utils {
     }
   }
 
-  /** Präfix, das einen Wert seiner Sprache zuordnet: Flagge, sonst Kürzel. */
+  /** Prefix that assigns a value to its language: flag, otherwise code. */
   static languageTag(code) {
     return Utils.languageFlag(code) ?? `${code}:`
   }
 
   /**
-   * Bone-Wert eines Datensatzes als Text.
+   * Bone value of an entry as text.
    *
-   * Mehrsprachige Bones (`bone.languages`) steuert `options.language`:
-   * - `"*"` — ALLE befüllten Sprachen, je mit Flaggen-Präfix (`🇩🇪 Wert`),
-   *   verkettet mit `languageSeparator` (Standard `", "`).
-   *   `options.primaryLanguage` steht dabei vorn, die übrigen folgen in der
-   *   Reihenfolge des Bones.
-   * - Sprachcode — der Wert dieser Sprache. Ist er leer, springt die Anzeige
-   *   auf die erste befüllte Sprache und kennzeichnet das mit deren Flagge —
-   *   eine leere Zelle verschweigt sonst, dass der Eintrag in anderer Sprache
-   *   sehr wohl Inhalt hat.
-   * - nicht gesetzt — die erste Sprache des Bones, ohne Präfix (stabiles
-   *   Verhalten für Formatstrings und andere Bestandsnutzer).
+   * Multilingual bones (`bone.languages`) are controlled by `options.language`:
+   * - `"*"` — ALL filled languages, each with a flag prefix (`🇩🇪 value`),
+   *   joined with `languageSeparator` (default `", "`).
+   *   `options.primaryLanguage` comes first, the others follow in the
+   *   bone's order.
+   * - language code — the value of that language. If it's empty, the display falls back
+   *   to the first filled language and marks that with its flag —
+   *   an empty cell would otherwise hide that the entry does have content
+   *   in another language.
+   * - not set — the bone's first language, without prefix (stable
+   *   behavior for format strings and other existing users).
    *
-   * @param {*} value Wert aus dem Skel
-   * @param {object} bone Bone-Beschreibung aus der `structure`
+   * @param {*} value value from the skel
+   * @param {object} bone bone description from the `structure`
    * @param {{ language?: string, primaryLanguage?: string, locale?: string, boolTexts?: [string, string], separator?: string, languageSeparator?: string }} [options]
    */
   static boneToString(value, bone = {}, options = {}) {
@@ -254,7 +253,7 @@ export default class Utils {
         lang = languages.find((other) => !isEmpty(value[other])) ?? lang
       }
       const text = Utils.monolingualToString(value[lang], bone, options)
-      // Präfix nur, wenn eine BESTIMMTE Sprache gewünscht war und eine andere kam.
+      // Prefix only if a SPECIFIC language was requested and a different one came.
       return options.language && options.language !== lang && !isEmpty(value[lang])
         ? `${Utils.languageTag(lang)} ${text}`
         : text

package/src/forms/bones/view/base_item.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import boneLogic from "./boneLogic"
+import boneLogic from "./boneLogic.js"
 import { computed, defineComponent, reactive } from "vue"
 import { useI18n } from "vue-i18n"
 

package/src/forms/bones/view/boneLogic.js

@@ -1,4 +1,4 @@
-import Utils from "../utils"
+import Utils from "../utils.js"
 import { computed, reactive } from "vue"
 
 export const languageMap = [

package/src/forms/bones/widgets/booleanBone.vue

@@ -12,44 +12,44 @@
 <script setup>
 import { reactive, onMounted, inject, computed } from "vue"
 /**
- * Schalter für boolesche Werte (true/false).
+ * Switch for boolean values (true/false).
  *
- * Verfügbar in drei Varianten: `bool` (Switch), `bool.choose` (Ja/Nein-Buttons),
- * `bool.select` (Dropdown). Der Wert `null`, `undefined`, `false` und `""` wird
- * einheitlich als `false` behandelt.
+ * Available in three variants: `bool` (switch), `bool.choose` (yes/no buttons),
+ * `bool.select` (dropdown). The values `null`, `undefined`, `false` and `""` are
+ * uniformly treated as `false`.
  *
  * @displayName BooleanBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-boolean - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-boolean-default - Standard-Variante
- * @cssClass bone-widget-boolean-{name} - Dynamisch gesetzt auf den Bone-Namen
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-boolean - Identifies the bone type
+ * @cssClass bone-widget-boolean-default - Default variant
+ * @cssClass bone-widget-boolean-{name} - Dynamically set to the bone name
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert. `null`, `undefined`, `false` und `""` gelten als `false`. */
+  /** Current bone value. `null`, `undefined`, `false` and `""` count as `false`. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Autofocus (aktuell nicht aktiv genutzt). */
+  /** Autofocus (currently not actively used). */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {boolean} value - Aktueller Wert
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {boolean} value - Current value
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/booleanBoneChoose.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- readonly an der Gruppe: wa-radio-group markiert nur Radios, die selbst
-       nicht disabled sind — sonst wäre bei readonly keine Auswahl sichtbar -->
+  <!-- readonly on the group: wa-radio-group only marks radios that are not
+       disabled themselves — otherwise no selection would be visible when readonly -->
   <wa-radio-group
     :value="state.value"
     :disabled="boneState.readonly"

package/src/forms/bones/widgets/booleanBoneSelect.vue

@@ -8,9 +8,9 @@
     :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
     @change="changeEvent"
   >
-    <!-- String-Werte: wa-select gleicht seinen Wert beim Setzen mit den
-         Options-Werten ab; boolesche werden erst später zu Strings, der
-         gespeicherte Wert erschiene dann nicht -->
+    <!-- String values: wa-select matches its value against the option values
+         when it is set; booleans only become strings later, so the
+         stored value would not appear -->
     <wa-option
       v-for="val in ['true', 'false']"
       :key="val"

package/src/forms/bones/widgets/codeBone.vue

@@ -39,21 +39,21 @@ import { EditorState } from "@codemirror/state"
 import { languages } from "@codemirror/language-data"
 
 /**
- * Code-Editor auf Basis von CodeMirror für syntaxhervorgehobene Quelltext-Eingabe.
+ * Code editor based on CodeMirror for syntax-highlighted source code input.
  *
- * Erkennt die Programmiersprache anhand von `boneState.bonestructure.type`
- * (z.B. `raw.code.python`, `raw.code.html`, `raw.code.javascript`) und lädt
- * das passende CodeMirror-Language-Plugin dynamisch nach. Unterstützt
- * Mehrfachwerte (`multiple`). Ein Expand-Button ermöglicht das Aufklappen
- * auf volle Höhe.
+ * Detects the programming language from `boneState.bonestructure.type`
+ * (e.g. `raw.code.python`, `raw.code.html`, `raw.code.javascript`) and dynamically
+ * loads the matching CodeMirror language plugin. Supports
+ * multiple values (`multiple`). An expand button allows expanding
+ * to full height.
  *
  * @displayName CodeBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-raw - Kennzeichnet den übergeordneten Bone-Typ
- * @cssClass bone-widget-raw-default - Standard-Variante
- * @cssClass bone-widget-wrapper - Umschließt Editor und Expand-Button
- * @cssClass is-max-size - Wird per Expand-Button umgeschaltet; hebt die maximale Höhe auf
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-raw - Identifies the parent bone type
+ * @cssClass bone-widget-raw-default - Default variant
+ * @cssClass bone-widget-wrapper - Wraps the editor and the expand button
+ * @cssClass is-max-size - Toggled via the expand button; removes the maximum height
  */
 defineOptions({
   inheritAttrs: false,
@@ -63,27 +63,27 @@ const element = ref(null)
 const view = ref(null)
 
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert (Quelltext als String). */
+  /** Current bone value (source code as a string). */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones (CodeBone unterstützt kein multilang). */
+  /** Language key for multilingual bones (CodeBone does not support multilang). */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach dem Mount auf den CodeMirror-Editor. */
+  /** Focuses the CodeMirror editor after mount. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string} value - Aktueller Quelltext
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string} value - Current source code
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/colorBone.vue

@@ -22,43 +22,43 @@
 <script setup>
 import { reactive, onMounted, inject } from "vue"
 /**
- * Farbauswahl-Feld über ein natives `<wa-color-picker>`-Element.
+ * Color picker field using a native `<wa-color-picker>` element.
  *
- * Speichert den gewählten Farbwert als Hex-String, z.B. `"#e74c3c"`.
- * Unterstützt mehrfache Werte (`multiple`), aber keine Mehrsprachigkeit.
+ * Stores the selected color value as a hex string, e.g. `"#e74c3c"`.
+ * Supports multiple values (`multiple`), but not multiple languages.
  *
  * @displayName ColorBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-color - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-color-default - Standard-Variante
- * @cssClass bone-widget-color-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-color-color`
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-color - Identifies the bone type
+ * @cssClass bone-widget-color-default - Default variant
+ * @cssClass bone-widget-color-{name} - Dynamically set to the bone name, e.g. `bone-widget-color-color`
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert als Hex-String, z.B. `"#e74c3c"`, oder `null`. */
+  /** Current bone value as a hex string, e.g. `"#e74c3c"`, or `null`. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach 600 ms auf das Input-Element. */
+  /** Focuses the input element after 600 ms. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string|null} value - Gewählter Farbwert als Hex-String oder `null`
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string|null} value - Selected color value as a hex string or `null`
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/dateBone.vue

@@ -19,48 +19,48 @@
 <script setup>
 import { reactive, onMounted, computed, inject } from "vue"
 /**
- * Datums- und/oder Zeitfeld, gesteuert durch `bonestructure.date` und `bonestructure.time`.
+ * Date and/or time field, controlled by `bonestructure.date` and `bonestructure.time`.
  *
- * Rendert ein `<wa-input>` mit dem passenden `type`-Attribut:
- * - `date` wenn nur `date: true`
- * - `time` wenn nur `time: true`
- * - `datetime-local` wenn beide gesetzt sind
+ * Renders a `<wa-input>` with the matching `type` attribute:
+ * - `date` if only `date: true`
+ * - `time` if only `time: true`
+ * - `datetime-local` if both are set
  *
- * Bereinigt Zeitzonendaten aus dem Wert, bevor er ans Input weitergegeben wird.
- * Unterstützt mehrfache Werte (`multiple`), aber keine Mehrsprachigkeit.
+ * Strips timezone data from the value before it is passed to the input.
+ * Supports multiple values (`multiple`), but not multiple languages.
  *
  * @displayName DateBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-date - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-date-default - Standard-Variante
- * @cssClass bone-widget-date-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-date-publishedAt`
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-date - Identifies the bone type
+ * @cssClass bone-widget-date-default - Default variant
+ * @cssClass bone-widget-date-{name} - Dynamically set to the bone name, e.g. `bone-widget-date-publishedAt`
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert als ISO-String, z.B. `"2026-03-28"` oder `"10:30:00"`. */
+  /** Current bone value as an ISO string, e.g. `"2026-03-28"` or `"10:30:00"`. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach 600 ms auf das Input-Element. */
+  /** Focuses the input element after 600 ms. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string} value - Aktueller Eingabewert als ISO-String
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string} value - Current input value as an ISO string
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])

package/src/forms/bones/widgets/emailBone.vue

@@ -21,45 +21,45 @@
 import { reactive, onMounted, inject, ref, watchEffect, computed } from "vue"
 import { useTimeoutFn } from "@vueuse/core"
 /**
- * Einzeiliges E-Mail-Eingabefeld mit nativer Browser-Validierung.
+ * Single-line email input field with native browser validation.
  *
- * Rendert ein `<wa-input type="email">` und nutzt die native Constraint
- * Validation API des Browsers zur Format-Prüfung. Bei
- * `boneState.label === "placeholder"` wird die Bone-Beschreibung als
- * Placeholder angezeigt statt als Label darüber.
+ * Renders a `<wa-input type="email">` and uses the browser's native Constraint
+ * Validation API for format checking. With
+ * `boneState.label === "placeholder"`, the bone description is shown as a
+ * placeholder instead of as a label above.
  *
  * @displayName EmailBone
  *
- * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
- * @cssClass bone-widget-email - Kennzeichnet den Bone-Typ
- * @cssClass bone-widget-email-default - Standard-Variante
- * @cssClass bone-widget-email-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-email-email`
+ * @cssClass bone-widget - Base class of all bone widgets
+ * @cssClass bone-widget-email - Identifies the bone type
+ * @cssClass bone-widget-email-default - Default variant
+ * @cssClass bone-widget-email-{name} - Dynamically set to the bone name, e.g. `bone-widget-email-email`
  */
 defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
-  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  /** Bone name – passed as the first argument in every `change` event. */
   name: String,
-  /** Aktueller Bone-Wert. */
+  /** Current bone value. */
   value: [Object, String, Number, Boolean, Array],
-  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  /** Index in the multiple array; `undefined` for a single value. */
   index: Number,
-  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  /** Language key for multilingual bones, e.g. `"de"`. */
   lang: String,
-  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  /** Bone structure (currently not actively used). */
   bone: Object,
-  /** Setzt den Fokus nach 600 ms auf das Input-Element. */
+  /** Focuses the input element after 600 ms. */
   autofocus: Boolean,
 })
 
 const emit = defineEmits([
   /**
-   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
-   * @arg {string} name - Bone-Name
-   * @arg {string} value - Aktueller Eingabewert
-   * @arg {string|undefined} lang - Sprach-Key
-   * @arg {number|undefined} index - Index im Multiple-Array
+   * Fired on every value change and on mount (initialization).
+   * @arg {string} name - Bone name
+   * @arg {string} value - Current input value
+   * @arg {string|undefined} lang - Language key
+   * @arg {number|undefined} index - Index in the multiple array
    */
   "change",
 ])