Removes old spell sheet

src/main.mjs

@@ -6,11 +6,11 @@ import {SpellDataModel} from "./module/data/spell.mjs";
 import {VornachteileDataModel} from "./module/data/vornachteile.mjs";
 import {Character} from "./module/documents/character.mjs";
 import {CharacterSheet} from "./module/sheets/characterSheet.mjs";
-import {VornachteilSheet} from "./module/sheets/vornachteilSheet.mjs";
+import {AdvantageSheet} from "./module/sheets/advantageSheet.mjs";
 import {GroupDataModel} from "./module/data/group.mjs";
 import {GroupSheet} from "./module/sheets/groupSheet.mjs";
 import {EquipmentDataModel} from "./module/data/equipment.mjs";
-import {AusruestungSheet} from "./module/sheets/equipmentSheet.mjs";
+import {EquipmentSheet} from "./module/sheets/equipmentSheet.mjs";
 import {CreatureDataModel} from "./module/data/creature.mjs";
 import {CreatureSheet} from "./module/sheets/creatureSheet.mjs";
 import {LiturgySheet} from "./module/sheets/liturgySheet.mjs";
@@ -106,12 +106,12 @@ Hooks.once("init", () => {
         makeDefault: true,
         label: 'DSA41.SpellLabels.Item',
     });
-    foundry.documents.collections.Items.registerSheet('dsa41.advantage', VornachteilSheet, {
+    foundry.documents.collections.Items.registerSheet('dsa41.advantage', AdvantageSheet, {
         types: ["Advantage"],
         makeDefault: true,
         label: 'DSA41.VornachteilLabels.Item'
     })
-    foundry.documents.collections.Items.registerSheet('dsa41.equipment', AusruestungSheet, {
+    foundry.documents.collections.Items.registerSheet('dsa41.equipment', EquipmentSheet, {
         types: ["Equipment"],
         makeDefault: false,
         label: 'DSA41.AusruestungLabels.Item'

src/module/sheets/advantageSheet.mjs

@@ -0,0 +1,65 @@
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
+
+export class AdvantageSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
+
+    /** @inheritDoc */
+    static DEFAULT_OPTIONS = {
+        position: {width: 520, height: 480},
+        classes: ['dsa41', 'sheet', 'item', 'advantage'],
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: AdvantageSheet.#onSubmitForm
+        }
+    }
+
+    static TABS = {
+        sheet: {
+            tabs: [
+                {id: 'advantage', group: 'sheet', label: 'Vorteil'},
+            ],
+            initial: 'advantage'
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/advantage/main-sheet.hbs`
+        },
+        advantage: {
+            template: `systems/DSA_4-1/templates/item/advantage/tab-advantage.hbs`
+        }
+    }
+
+    /**
+     * Handle form submission
+     * @this {AdvantageSheet}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
+
+        await this.document.update(formData.object) // Note: formData.object
+    }
+
+    /** @override */
+    async _prepareContext(options) {
+        const context = await super._prepareContext(options);
+        const advantageData = context.document;
+
+        context.system = advantageData.system;
+        context.flags = context.system.flags;
+        context.hasChoices = context.system.auswahl.length > 0;
+        context.choices = {}
+        context.system.auswahl.forEach(a => {
+            context.choices[a] = a
+        })
+        context.hasModality = context.system.value != null
+
+        return context;
+    }
+}

src/module/sheets/equipmentSheet.mjs

@@ -1,42 +1,121 @@
-export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
-    /**@override */
-    static get defaultOptions() {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
+
+/**
+ * @typedef ApplicationTab
+ * @property {string}  id
+ * @property {string}  group
+ * @property {boolean} active
+ * @property {string}  cssClass
+ * @property {string}  [label]
+ * @property {string}  [icon]
+ * @property {string}  [tooltip]
+ */
+
+export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
+
+    /** @inheritDoc */
+    static DEFAULT_OPTIONS = {
+        position: {width: 640, height: 480},
         classes: ['dsa41', 'sheet', 'item', 'equipment'],
-            width: 520,
-            height: 480,
-            tabs: [
-                {
-                    navSelector: '.sheet-tabs',
-                    contentSelector: '.sheet-body',
-                    initial: 'description',
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: EquipmentSheet.#onSubmitForm
         },
+        actions: {
+            editImage:
+            DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage
+
+        }
+    }
+
+    static TABS = {
+        sheet: {
+            tabs: [
+                {id: 'meta', group: 'sheet', label: 'Meta'},
+                // Additional Tabs are added based on the nature of this item
+
             ],
-        });
+            initial: 'meta'
+        }
     }
 
-    /** @override */
-    get template() {
-        return `systems/DSA_4-1/templates/item/item-equipment-sheet.hbs`;
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/equipment/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-meta.hbs`
+        },
+        melee: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-melee.hbs`
+        },
+        ranged: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-ranged.hbs`
+        },
+        container: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-container.hbs`
+        },
+        armor: {
+            template: `systems/DSA_4-1/templates/item/equipment/tab-armor.hbs`
+        }
     }
 
-    /** @override */
-    getData() {
-        // Retrieve the data structure from the base sheet. You can inspect or log
-        // the context variable to see the structure, but some key properties for
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
+    /**
+     * Handle form submission
+     * @this {EquipmentSheet}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
 
-        // Use a safe clone of the actor data for further operations.
-        const equipmentData = context.data;
+        let normalisedFormData = {}
 
-        // Add the actor's data to context.data for easier access, as well as flags.
-        context.system = equipmentData.system;
-        context.flags = equipmentData.flags;
+        Object.entries(formData.object).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                normalisedFormData[key] = value[0]
+            } else {
+                normalisedFormData[key] = value
+            }
+        })
 
-        context.quantity = context.system.quantity;
-        context.description = context.system.description;
+        await this.document.update(normalisedFormData) // Note: formData.object
+    }
+
+    async _preparePartContext(partId, context) {
+        switch (partId) {
+            case 'meta':
+                this.#prepareMetaContext(context)
+                break;
+            case 'melee':
+                this.#prepareMeleeContext(context)
+                break;
+            case 'ranged':
+                this.#prepareRangedContext(context)
+                break;
+            case 'container':
+                this.#prepareContainerContext(context)
+                break;
+            case 'armor':
+                this.#prepareArmorContext(context)
+                break;
+        }
+        context.tab = context.tabs[partId]
+        return context
+    }
+
+    #prepareMetaContext(context) {
+        const equipmentData = context.document.system;
+        context.system = equipmentData;
+        context.quantity = equipmentData.quantity;
+        context.description = equipmentData.description;
+        context.name = context.document.name;
+        context.img = context.document.img;
 
         context.categoryAndOptions = {
             options: {
@@ -46,23 +125,22 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 Behälter: "Behälter",
                 Rüstung: "Rüstung",
             },
-            entries: context.system.category,
+            entries: equipmentData.category,
             targetField: "category"
         };
-        context.isMeleeWeapon = context.system.category.includes("Nahkampfwaffe");
-        context.isRangedWeapon = context.system.category.includes("Fernkampfwaffe");
-        context.isContainer = context.system.category.includes("Behälter");
-        context.isArmor = context.system.category.includes("Rüstung");
-        context.price = context.system.price;
-        context.weight = context.system.weight;
+    }
+
+    #prepareMeleeContext(context) {
+        const equipmentData = context.document.system;
+        context.system = equipmentData;
         context.meleeSkillsAndOptions = {
             options: {
                 "": "",
                 Dolche: "Dolche",
                 Fechtwaffen: "Fechtwaffen",
-                Säbel: "Säbel",
+                "Säbel": "Säbel",
                 Schwerter: "Schwerter",
-                Anderthalbhänder: "Anderthalbhänder",
+                "Anderthalbhänder": "Anderthalbhänder",
                 "Zweihandschwerter/-säbel": "Zweihandschwerter/-säbel",
                 "Infanteriewaffen": "Infanteriewaffen",
                 "Speere": "Speere",
@@ -72,9 +150,13 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 "Kettenwaffen": "Kettenwaffen",
                 "Raufen": "Raufen"
             },
-            entries: context.system.meleeSkills,
+            entries: equipmentData.meleeSkills,
             targetField: "meleeSkills"
         }
+    }
+
+    #prepareRangedContext(context) {
+        const equipmentData = context.document.system;
         context.rangedSkillsAndOptions = {
             options: {
                 "": "",
@@ -84,24 +166,86 @@ export class AusruestungSheet extends foundry.appv1.sheets.ItemSheet {
                 "Armbrust": "Armbrust",
                 "Bogen": "Bogen",
             },
-            entries: context.system.rangedSkills,
+            entries: equipmentData.rangedSkills,
             targetField: "rangedSkills"
         }
-        return context;
     }
 
-    activateListeners(html) {
-        super.activateListeners(html);
+    #prepareContainerContext(context) {
 
-        html.on('change', '.array-editor select', (evt) => {
+    }
+
+    #prepareArmorContext(context) {
+
+    }
+
+    /**
+     * Adds Tabs based on the items nature
+     *
+     * @param {String} tabGroup
+     * @private
+     */
+    _prepareTabs(tabGroup) {
+
+        const currentTabs = super._prepareTabs(tabGroup);
+
+        const category = this.document.system.category
+        /**
+         *
+         * @type {[{ApplicationTab}]}
+         */
+        let tabs = currentTabs;
+
+        if (category.includes("Nahkampfwaffe")) {
+            tabs.melee = {
+                id: 'melee', group: tabGroup, label: 'Nahkampfwaffe'
+            }
+        }
+        if (category.includes("Fernkampfwaffe")) {
+            tabs.ranged = {
+                id: 'ranged', group: tabGroup, label: 'Fernkampfwaffe'
+            }
+        }
+        if (category.includes("Behälter")) {
+            tabs.container = {
+                id: 'container', group: tabGroup, label: 'Behälter'
+            }
+        }
+        if (category.includes("Rüstung")) {
+            tabs.armor = {
+                id: 'armor', group: tabGroup, label: 'Rüstung'
+            }
+        }
+
+        return tabs
+    }
+
+    /** @override */
+    async _prepareContext(options) {
+
+        const context = await super._prepareContext(options);
+        context.price = context.document.system.price
+        context.weight = context.document.system.weight
+
+        return context
+    }
+
+    /**
+     * Actions performed after any render of the Application.
+     * Post-render steps are not awaited by the render process.
+     * @param {ApplicationRenderContext} context      Prepared context data
+     * @param {RenderOptions} options                 Provided render options
+     * @protected
+     */
+    _onRender(context, options) {
+        this.element.querySelector('.array-editor select').addEventListener('change', (evt) => {
             const addingValue = evt.currentTarget.value;
             const fieldToTarget = evt.currentTarget.dataset.targetField;
-            const newSkills = [...this.object.system[fieldToTarget], addingValue];
+            const newSkills = [...this.document.system[fieldToTarget], addingValue];
 
-            this.object.update({system: {[fieldToTarget]: newSkills}});
+            this.document.update({system: {[fieldToTarget]: newSkills}});
             evt.currentTarget.value = "";
         })
-
     }
 
 }

src/module/sheets/skillSheet.mjs

@@ -1,37 +1,61 @@
-export class SkillSheet extends foundry.appv1.sheets.ItemSheet {
-    /**@override */
-    static get defaultOptions() {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
+
+export class SkillSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
+
+    /** @inheritDoc */
+    static DEFAULT_OPTIONS = {
+        position: {width: 520, height: 480},
         classes: ['dsa41', 'sheet', 'item', 'skill'],
-            width: 520,
-            height: 480,
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: SkillSheet.#onSubmitForm
+        }
+    }
+
+    static TABS = {
+        sheet: {
             tabs: [
-                {
-                    navSelector: '.sheet-tabs',
-                    contentSelector: '.sheet-body',
-                    initial: 'meta',
-                },
+                {id: 'meta', group: 'sheet', label: 'Meta'},
+                {id: 'description', group: 'sheet', label: 'Beschreibung'},
             ],
-        });
+            initial: 'meta'
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/skill/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/skill/tab-meta.hbs`
+        },
+        description: {
+            template: `systems/DSA_4-1/templates/item/skill/tab-description.hbs`
+        }
+    }
+
+    /**
+     * Handle form submission
+     * @this {SkillSheet}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
+
+        await this.document.update(formData.object) // Note: formData.object
     }
 
     /** @override */
-    get template() {
-        return `systems/DSA_4-1/templates/item/item-skill-sheet.hbs`;
-    }
+    async _prepareContext(options) {
 
-    /** @override */
-    getData() {
-        // Retrieve the data structure from the base sheet. You can inspect or log
-        // the context variable to see the structure, but some key properties for
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
+        const context = await super._prepareContext(options)
+        const skillData = context.document;
 
-        // Use a safe clone of the actor data for further operations.
-        const skillData = context.data;
-
-        // Add the actor's data to context.data for easier access, as well as flags.
         context.system = skillData.system;
         context.flags = skillData.flags;
         context.categoryOptions = {
@@ -45,21 +69,11 @@ export class SkillSheet extends foundry.appv1.sheets.ItemSheet {
             Handwerk: "Handwerk"
         }
 
-        context.isCombat = context.system.gruppe === "Kampf"
-        context.isTalent = context.system.gruppe !== "Kampf"
-        context.isLanguage = context.system.gruppe === "Sprachen" || context.system.gruppe === "Schriften"
-        context.hasRequirement = context.system.voraussetzung.talent != null
+        context.isCombat = skillData.gruppe === "Kampf"
+        context.isTalent = skillData.gruppe !== "Kampf"
+        context.isLanguage = skillData.gruppe === "Sprachen" || skillData.gruppe === "Schriften"
+        context.hasRequirement = skillData.voraussetzung?.talent != null ?? false
 
         return context;
     }
-
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) {
-
-        }
-    }
-
 }

src/module/sheets/spellSheet.mjs

@@ -1,49 +1,69 @@
-export class SpellSheet extends foundry.appv1.sheets.ItemSheet {
-    /**@override */
-    static get defaultOptions() {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
+
+export class SpellSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
+
+
+    /** @inheritDoc */
+    static DEFAULT_OPTIONS = {
+        position: {width: 520, height: 480},
         classes: ['dsa41', 'sheet', 'item', 'spell'],
-            width: 520,
-            height: 480,
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: SpellSheet.#onSubmitForm
+        }
+    }
+
+    static TABS = {
+        sheet: {
             tabs: [
-                {
-                    navSelector: '.sheet-tabs',
-                    contentSelector: '.sheet-body',
-                    initial: 'meta',
-                },
+                {id: 'meta', group: 'sheet', label: 'Meta'},
+                {id: 'variants', group: 'sheet', label: 'Varianten'},
+                {id: 'commonality', group: 'sheet', label: 'Verbreitung'},
             ],
-        });
+            initial: 'meta'
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/spell/main-sheet.hbs`
+        },
+        meta: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-meta.hbs`
+        },
+        variants: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-variants.hbs`
+        },
+        commonality: {
+            template: `systems/DSA_4-1/templates/item/spell/tab-commonality.hbs`
+        }
+    }
+
+    /**
+     * Handle form submission
+     * @this {SpellSheet}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
+
+        await this.document.update(formData.object) // Note: formData.object
     }
 
     /** @override */
-    get template() {
-        return `systems/DSA_4-1/templates/item/item-spell-sheet.hbs`;
-    }
+    async _prepareContext(options) {
+        const context = await super._prepareContext(options);
+        const spellData = context.document;
 
-    /** @override */
-    getData() {
-        // Retrieve the data structure from the base sheet. You can inspect or log
-        // the context variable to see the structure, but some key properties for
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
-
-        // Use a safe clone of the actor data for further operations.
-        const skillData = context.data;
-
-        // Add the actor's data to context.data for easier access, as well as flags.
-        context.system = skillData.system;
-        context.flags = skillData.flags;
+        context.system = spellData.system;
+        context.flags = spellData.flags;
 
         return context;
     }
 
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) return;
-
-    }
-
 }

src/module/sheets/vornachteilSheet.mjs

@@ -1,56 +0,0 @@
-export class VornachteilSheet extends foundry.appv1.sheets.ItemSheet {
-    /**@override */
-    static get defaultOptions() {
-        return foundry.utils.mergeObject(super.defaultOptions, {
-            classes: ['dsa41', 'sheet', 'item', 'advantage'],
-            width: 520,
-            height: 480,
-            tabs: [
-                {
-                    navSelector: '.sheet-tabs',
-                    contentSelector: '.sheet-body',
-                    initial: 'description',
-                },
-            ],
-        });
-    }
-
-    /** @override */
-    get template() {
-        return `systems/DSA_4-1/templates/item/item-advantage-sheet.hbs`;
-    }
-
-    /** @override */
-    getData() {
-        // Retrieve the data structure from the base sheet. You can inspect or log
-        // the context variable to see the structure, but some key properties for
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
-
-        // Use a safe clone of the actor data for further operations.
-        const advantageData = context.data;
-
-        // Add the actor's data to context.data for easier access, as well as flags.
-        context.system = advantageData.system;
-        context.flags = advantageData.flags;
-        context.hasChoices = context.system.auswahl.length > 0;
-        context.choices = {}
-        context.system.auswahl.forEach(a => {
-            context.choices[a] = a
-        })
-        context.hasModality = context.system.value != null
-
-        return context;
-    }
-
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) {
-
-        }
-    }
-
-}

src/style/_equipment-sheet.scss

@@ -1,28 +1,15 @@
 @use "./_colours";
 @use "./_numbers";
 
-.app.window-app.dsa41.sheet.item.equipment {
+.application.sheet.dsa41.item.equipment {
 
-  .sheet-body {
+  .tab.meta.active > div {
 
-    position: relative;
-
-    .tab.active {
-      padding: 4px;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .tab.meta.active {
-
-      position: absolute;
       display: grid;
       grid-auto-columns: 1fr 1fr;
       grid-template-columns: 80px auto;
-      grid-template-rows: 24px 48px auto 48px;
-      gap: 0 0;
+    grid-template-rows: 32px 48px auto 48px;
+    gap: 8px;
       grid-template-areas:
     "category category"
     "quantity name"
@@ -57,6 +44,7 @@
         grid-area: bottomline;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
 
         .named-value {
           position: relative;
@@ -104,7 +92,7 @@
 
           ul {
             list-style-type: none;
-            padding: 0;
+            padding: 0 32px 0 0;
             margin: 0;
             text-indent: 0;
 
@@ -124,6 +112,7 @@
             position: absolute;
             right: 0;
             top: 0;
+            width: 24px;
           }
         }
 
@@ -153,7 +142,4 @@
 
     }
 
-
-  }
-
 }

src/style/_richtext-editor.scss

@@ -0,0 +1,3 @@
+.editor.prosemirror.active, .editor.prosemirror.inactive {
+  flex: 1;
+}

src/style/_skill-sheet.scss

@@ -1,6 +1,6 @@
 .sheet.item.skill {
 
-  .tab.meta.active {
+  .meta-details {
 
     display: grid;
     grid-template-areas:
@@ -8,9 +8,7 @@
       "taw statistics ebe"
       "language language language"
       "attack attack attack";
-
-    gap: 8px;
-    margin: 8px;
+    height: unset;
 
     .category {
       grid-area: category;
@@ -48,4 +46,8 @@
 
   }
 
+  .description-details {
+
+  }
+
 }

src/style/_tabs.scss

@@ -10,7 +10,7 @@
     display: flow;
     border-top: unset;
     border-bottom: unset;
-    margin-bottom: 9px;
+    margin-bottom: 0;
 
     a.item[data-tab] {
 
@@ -25,7 +25,6 @@
         background: assets.$tab-background;
         position: relative;
         z-index: 2;
-
       }
 
     }
@@ -46,3 +45,60 @@
   }
 
 }
+
+// Tabs v2
+
+.sheet-tabs {
+
+  position: relative;
+  display: flow;
+  border-top: unset;
+  border-bottom: unset;
+  margin-bottom: 0;
+
+  a[data-action="tab"] {
+
+    background-color: colours.$tab-inactive-background-color;
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    vertical-align: middle;
+    padding: 0 16px;
+
+    span {
+
+    }
+
+    &.active {
+
+      border-left: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-top: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-right: numbers.$tab-border-width solid colours.$tab-border-color;
+      border-bottom: 0;
+      top: numbers.$tab-border-width*2;
+      background: assets.$tab-background;
+      position: relative;
+      z-index: 2;
+
+      span {
+
+      }
+
+    }
+
+  }
+}
+
+section.tab {
+  border: numbers.$tab-border-width solid colours.$tab-border-color;
+  background: assets.$tab-pane-background;
+  flex: 1;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 8px;
+    padding: 8px;
+  }
+}

src/style/styles.scss

@@ -11,6 +11,7 @@
 @use "_player-action";
 @use "_modify-liturgy";
 @use "_liturgy-banner";
-@use "_talent-sheet";
+@use "_skill-sheet";
 @use "_active-effect-sheet";
 @use "_advantage-sheet";
+@use "_richtext-editor";

src/templates/item/advantage/main-sheet.hbs

@@ -0,0 +1,14 @@
+<div>
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
+         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
+        {{#each tabs as |tab|}}
+            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
+               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
+                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
+                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
+                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
+            </a>
+        {{/each}}
+    </nav>
+</div>

src/templates/item/advantage/tab-advantage.hbs

@@ -0,0 +1,33 @@
+<section class="tab {{tabs.advantage.id}} {{tabs.advantage.cssClass}}"
+         data-tab="{{tabs.advantage.id}}"
+         data-group="{{tabs.advantage.group}}">
+    <div>
+        <label>Name</label>
+        <input name="system.name" value="{{system.name}}"/>
+
+    </div>
+    {{#if hasModality}}
+        <div>
+            <label for="{{this._id}}.choice">Auswahl</label>
+            {{#if hasChoices}}
+                <select id="{{this._id}}.choice" name="system.gruppe">
+                    {{selectOptions choices selected=system.auswahl inverted=true}}
+                </select>
+            {{else}}
+                <input id="{{this._id}}.choice" name="system.value" value="{{system.value}}"/>
+            {{/if}}
+        </div>
+    {{/if}}
+    <div class="body">
+        <label>Beschreibung</label>
+        <prose-mirror
+                name=" system.description"
+                button="false"
+                editable="{{editable}}"
+                toggled="true"
+                value="{{ system.description}}">
+            {{{ system.description}}}
+        </prose-mirror>
+    </div>
+
+</section>

src/templates/item/equipment/main-sheet.hbs

@@ -0,0 +1,14 @@
+<div>
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
+         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
+        {{#each tabs as |tab|}}
+            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
+               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
+                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
+                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
+                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
+            </a>
+        {{/each}}
+    </nav>
+</div>

src/templates/item/equipment/tab-armor.hbs

@@ -0,0 +1,37 @@
+<section class="tab {{tabs.armor.id}} {{tabs.armor.cssClass}}"
+         data-tab="{{tabs.armor.id}}"
+         data-group="{{tabs.armor.group}}">
+    <div>
+
+        <div>
+            <label>Gesamt Rüstungswert
+                <input type="text" name="system.armorValue" value="{{system.armorValue}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Gesamt Behinderung
+                <input type="text" name="system.armorHandicap" value="{{system.armorHandicap}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Initiative Modifaktor
+                <input type="text" name="system.iniModifier" value="{{system.iniModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Bruchfaktor
+                <input type="text" name="system.breakFactor" value="{{system.breakFactor}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Attacke
+                <input type="text" name="system.attackModifier" value="{{system.attackModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Parade
+                <input type="text" name="system.parryModifier" value="{{system.parryModifier}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/equipment/tab-container.hbs

@@ -0,0 +1,7 @@
+<section class="tab {{tabs.container.id}} {{tabs.container.cssClass}}"
+         data-tab="{{tabs.container.id}}"
+         data-group="{{tabs.container.group}}">
+    <div>
+        Behälter Specs
+    </div>
+</section>

src/templates/item/equipment/tab-melee.hbs

@@ -0,0 +1,43 @@
+<section class="tab {{tabs.melee.id}} {{tabs.melee.cssClass}}"
+         data-tab="{{tabs.melee.id}}"
+         data-group="{{tabs.melee.group}}">
+    <div>
+        <div>
+            <label>TP
+                <input type="text" name="system.meleeAttackDamage" value="{{system.meleeAttackDamage}}"/>
+            </label>
+        </div>
+        <div>
+            <label>TP/KK
+                <input name="system.meleeAttackModifier" type="number" value="{{system.meleeAttackModifier}}"/>
+                <input name="system.meleeAttackModifierIncrement" type="number"
+                       value="{{system.meleeAttackModifierIncrement}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Geführte Talente
+                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.meleeSkillsAndOptions}}
+            </label>
+        </div>
+        <div>
+            <label>Initiative
+                <input name="system.iniModifier" type="number" value="{{system.iniModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Bruchfaktor
+                <input name="system.breakFactor" type="number" value="{{system.breakFactor}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Attacke
+                <input name="system.attackModifier" type="number" value="{{system.attackModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Parade
+                <input name="system.parryModifier" type="number" value="{{system.parryModifier}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/equipment/tab-meta.hbs

@@ -0,0 +1,40 @@
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+    <div>
+        <div class="name">
+            <img class="img" src="{{img}}" data-action="editImage" data-edit="img" alt="{{name}}" title="{{name}}"/>
+            <label>Name
+                <input name="name" type="text" value="{{name}}" placeholder="Name"/>
+            </label>
+        </div>
+        <div class="quantity">
+            <label>Anzahl
+                <input type="number" name="system.quantity"
+                       value="{{quantity}}"/>
+            </label>
+        </div>
+        <div class="category"><label>Kategorie:
+            {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.categoryAndOptions}}
+        </label></div>
+        <div class="description">
+            <label>Beschreibungstext</label>
+            <prose-mirror
+                    name="system.description"
+                    button="false"
+                    editable="{{editable}}"
+                    toggled="true"
+                    value="{{system.description}}">
+                {{{system.description}}}
+            </prose-mirror>
+        </div>
+        <div class="bottomline">
+            <label class="named-value"><span>Preis (Silbertaler)</span>
+                <input type="number" name="system.price" value="{{price}}"/>
+            </label>
+            <label class="named-value"><span>Gewicht (in Stein)</span>
+                <input type="number" name="system.weight" value="{{weight}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/equipment/tab-ranged.hbs

@@ -0,0 +1,32 @@
+<section class="tab {{tabs.ranged.id}} {{tabs.ranged.cssClass}}"
+         data-tab="{{tabs.ranged.id}}"
+         data-group="{{tabs.ranged.group}}">
+    <div>
+        <div>
+            <label>TP
+                <input type="text" name="system.rangedAttackDamage" value="{{system.rangedAttackDamage}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Reichweiten
+                <input type="text" name="system.rangedRangeModifier" value="{{system.rangedRangeModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>TP+
+                <input type="text" name="system.rangeRangeDamageModifier"
+                       value="{{system.rangeRangeDamageModifier}}"/>
+            </label>
+        </div>
+        <div>
+            <label>Geführte Talente
+                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.rangedSkillsAndOptions}}
+            </label>
+        </div>
+        <div>
+            <label>Ladedauer (Aktionen)
+                <input type="text" name="system.rangedReloadTime" value="{{system.rangedReloadTime}}"/>
+            </label>
+        </div>
+    </div>
+</section>

src/templates/item/item-advantage-sheet.hbs

@@ -1,35 +0,0 @@
-<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="advantage">Vorteil</a>
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-        <div class="tab advantage {{#if hasModality}}modality{{/if}}" data-group="primary" data-tab="advantage">
-            <div>
-                <label>Name</label>
-                <input name="system.name" value="{{system.name}}"/>
-
-            </div>
-            {{#if hasModality}}
-                <div>
-                    <label>Auswahl</label>
-                    {{#if hasChoices}}
-                        <select name="system.gruppe">
-                            {{selectOptions choices selected=system.auswahl inverted=true}}
-                        </select>
-                    {{else}}
-                        <input name="system.value" value="{{system.value}}"/>
-                    {{/if}}
-                </div>
-            {{/if}}
-            <div class="body">
-                <label>Beschreibung</label>
-                {{editor system.description target="system.description" button=true owner=owner editable=editable}}
-            </div>
-
-        </div>
-    </section>
-</form>

src/templates/item/item-equipment-sheet.hbs

@@ -1,164 +0,0 @@
-<form class="{{cssClass}} {{item.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="meta">Gegenstand</a>
-        {{#if isMeleeWeapon}}
-            <a class="item" data-tab="melee">Nahkampfwaffe</a>
-        {{/if}}
-        {{#if isRangedWeapon}}
-            <a class="item" data-tab="ranged">Fernkampfwaffe</a>
-        {{/if}}
-        {{#if isContainer}}
-            <a class="item" data-tab="container">Behälter</a>
-        {{/if}}
-        {{#if isArmor}}
-            <a class="item" data-tab="armor">Rüstung</a>
-        {{/if}}
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-
-        <div class="tab meta" data-group="primary" data-tab="meta">
-            <div class="name">
-                <img class="img" src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
-                <label>Name
-                    <input name="name" type="text" value="{{item.name}}" placeholder="Name"/>
-                </label>
-            </div>
-            <div class="quantity">
-                <label>Anzahl
-                    <input type="number" name="system.quantity"
-                           value="{{quantity}}"/>
-                </label>
-            </div>
-            <div class="category"><label>Kategorie:
-                {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.categoryAndOptions}}
-            </label></div>
-            <div class="description">
-                <label>Beschreibungstext</label>
-                {{editor system.description target="system.description" button=true owner=owner editable=editable}}
-            </div>
-            <div class="bottomline">
-                <label class="named-value"><span>Preis (Silbertaler)</span>
-                    <input type="number" name="system.price" value="{{price}}"/>
-                </label>
-                <label class="named-value"><span>Gewicht (in Stein)</span>
-                    <input type="number" name="system.weight" value="{{weight}}"/>
-                </label>
-            </div>
-        </div>
-
-        {{#if isMeleeWeapon}}
-            <div class="tab melee" data-group="primary" data-tab="melee">
-                <div>
-                    <label>TP
-                        <input type="text" name="system.meleeAttackDamage" value="{{system.meleeAttackDamage}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>TP/KK
-                        <input name="system.meleeAttackModifier" type="number" value="{{system.meleeAttackModifier}}"/>
-                        <input name="system.meleeAttackModifierIncrement" type="number"
-                               value="{{system.meleeAttackModifierIncrement}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Geführte Talente
-                        {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.meleeSkillsAndOptions}}
-                    </label>
-                </div>
-                <div>
-                    <label>Initiative
-                        <input name="system.iniModifier" type="number" value="{{system.iniModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Bruchfaktor
-                        <input name="system.breakFactor" type="number" value="{{system.breakFactor}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Attacke
-                        <input name="system.attackModifier" type="number" value="{{system.attackModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input name="system.parryModifier" type="number" value="{{system.parryModifier}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-        {{#if isRangedWeapon}}
-            <div class="tab ranged" data-group="primary" data-tab="ranged">
-                <div>
-                    <label>TP
-                        <input type="text" name="system.rangedAttackDamage" value="{{system.rangedAttackDamage}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Reichweiten
-                        <input type="text" name="system.rangedRangeModifier" value="{{system.rangedRangeModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>TP+
-                        <input type="text" name="system.rangeRangeDamageModifier"
-                               value="{{system.rangeRangeDamageModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Geführte Talente
-                        {{> "systems/DSA_4-1/templates/ui/partial-array-editor.hbs" this.rangedSkillsAndOptions}}
-                    </label>
-                </div>
-                <div>
-                    <label>Ladedauer (Aktionen)
-                        <input type="text" name="system.rangedReloadTime" value="{{system.rangedReloadTime}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-        {{#if isContainer}}
-            <div class="tab container" data-group="primary" data-tab="container">
-                Behälter Specs
-            </div>
-        {{/if}}
-        {{#if isArmor}}
-            <div class="tab armor" data-group="primary" data-tab="armor">
-                <div>
-                    <label>Gesamt Rüstungswert
-                        <input type="text" name="system.armorValue" value="{{system.armorValue}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Gesamt Behinderung
-                        <input type="text" name="system.armorHandicap" value="{{system.armorHandicap}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Initiative Modifaktor
-                        <input type="text" name="system.iniModifier" value="{{system.iniModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Bruchfaktor
-                        <input type="text" name="system.breakFactor" value="{{system.breakFactor}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Attacke
-                        <input type="text" name="system.attackModifier" value="{{system.attackModifier}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input type="text" name="system.parryModifier" value="{{system.parryModifier}}"/>
-                    </label>
-                </div>
-            </div>
-        {{/if}}
-    </section>
-</form>

src/templates/item/item-skill-sheet.hbs

@@ -1,97 +0,0 @@
-<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="meta">Talent</a>
-        <a class="item" data-tab="description">Regeltext</a>
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-
-        <div class="tab meta" data-group="primary" data-tab="meta">
-            <div class="category">
-                <label>Kategorie
-                    <select name="system.gruppe">
-                        {{selectOptions categoryOptions selected=system.gruppe inverted=true}}
-                    </select>
-                </label>
-            </div>
-            <div class="taw">
-                <label>TAW:
-                    <input type="text" name="system.taw"
-                           value="{{system.taw}}"/>
-                </label>
-            </div>
-            {{#if isTalent}}
-            <div class="statistics">
-                <label class="throw">Probe</label>
-                <div>
-                    <label>
-                        <input type="text" name="system.probe.0"
-                               value="{{system.probe.[0]}}"/>
-                    </label>
-                </div>
-                <div><label>
-                    <input type="text" name="system.probe.1"
-                           value="{{system.probe.[1]}}"/>
-                </label></div>
-                <div>
-                    <label>
-                        <input type="text" name="system.probe.2"
-                               value="{{system.probe.[2]}}"/>
-                    </label>
-                </div>
-            </div>
-            {{/if}}
-            <div class="ebe">
-                <label>Effektive Behinderung
-                    <input type="text" name="system.behinderung" value="{{system.behinderung}}"/>
-                </label>
-            </div>
-            {{#if isLanguage}}
-            <div class="language-statistics">
-                <label>Sprachenkomplexizität
-                    <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
-                </label>
-            </div>
-            {{/if}}
-            {{#if isCombat}}
-            <div class="attack-statistics">
-                <div>
-                    <label>Attacke
-                        <input type="text" name="system.at" value="{{system.at}}"/>
-                    </label>
-                </div>
-                <div>
-                    <label>Parade
-                        <input type="text" name="system.pa" value="{{system.pa}}"/>
-                    </label>
-                </div>
-            </div>
-            {{/if}}
-
-        </div>
-        <div class="tab description" data-group="primary" data-tab="description">
-            <div>
-                <label>Beschreibungstext</label>
-                {{editor system.talent target="system.talent" button=true owner=owner editable=editable}}
-            </div>
-            {{#if hasRequirement}}
-            <div>
-                <label>Voraussetzung</label>
-                <ul>
-                    {{#each system.voraussetzung}}
-                        <li>
-                            <input type="text" name="system.vorraussetzung.{{@key}}.wert" value="{{this}}"/>
-                            <input type="text" name="system.vorraussetzung.{{@key}}.talent" value="{{this}}"/>
-                        </li>
-                    {{/each}}
-                </ul>
-            </div>
-            {{/if}}
-        </div>
-
-        </div>
-    </section>
-</form>

src/templates/item/item-spell-sheet.hbs

@@ -1,98 +0,0 @@
-<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
-
-    {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" style="flex: 0" data-group="primary">
-        <a class="item" data-tab="meta">Kopfdaten</a>
-        <a class="item" data-tab="variants">Varianten</a>
-        <a class="item" data-tab="commonality">Verbreitung</a>
-    </nav>
-
-    {{!-- Sheet Body --}}
-    <section class="sheet-body" style="flex: 1">
-
-        <div class="tab meta" data-group="primary" data-tab="meta">
-            <div>
-                <label>Name
-                    <input type="text" name="system.name.value"
-                           value="{{system.attributeReference1.value}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Probe
-                    <input type="text" name="system.probe.0"
-                           value="{{system.probe.[0]}}"/>
-                    <input type="text" name="system.probe.1"
-                           value="{{system.probe.[1]}}"/>
-                    <input type="text" name="system.probe[2].value"
-                           value="{{system.probe.[2]}}"/>
-                </label>
-            </div>
-            <div><label>Proben Modifikation
-                <input type="text" name="system.probenMod"
-                       value="{{system.probenMod}}"/>
-            </label></div>
-            <div>
-                <label>Zauberdauer
-                    <input type="text" name="system.zauberdauer"
-                           value="{{system.zauberdauer}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Kosten
-                    <input type="text" name="system.kosten" value="{{system.kosten}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Wirkung
-                    <input type="text" name="system.wirkung" value="{{system.wirkung}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Wirkungsdauer
-                    <input type="text" name="system.wirkungsdauer" value="{{system.wirkungsdauer}}"/>
-                </label>
-            </div>
-
-        </div>
-        <div class="tab variants" data-group="primary" data-tab="variants">
-            <div>
-                <label>Modifikationen
-                    <input type="text" name="system.modifikationen" value="{{system.modifikationen}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Varianten
-                    hier später Varianten
-                </label>
-            </div>
-            <div>
-                <label>Reversalis
-                    <input type="text" name="system.reversalis" value="{{system.reversalis}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Antimagie
-                    <input type="text" name="system.antimagie" value="{{system.antimagie}}"/>
-                </label>
-            </div>
-        </div>
-        <div class="tab commonality" data-group="primary" data-tab="commonality">
-            <div>
-                <label>Komplexität
-                    <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Repräsentation
-                    <input type="text" name="system.repräsentation" value="{{system.repräsentation}}"/>
-                </label>
-            </div>
-            <div>
-                <label>Verbreitung
-                    <input type="text" name="system.info" value="{{system.info}}"/>
-                </label>
-            </div>
-        </div>
-
-    </section>
-</form>

src/templates/item/skill/main-sheet.hbs

@@ -0,0 +1,14 @@
+<div>
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
+         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
+        {{#each tabs as |tab|}}
+            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
+               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
+                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
+                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
+                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
+            </a>
+        {{/each}}
+    </nav>
+</div>

src/templates/item/skill/tab-description.hbs

@@ -0,0 +1,32 @@
+{{!-- Individual Tab Template --}}
+<section class="tab {{tabs.description.id}} {{tabs.description.cssClass}}"
+         data-tab="{{tabs.description.id}}"
+         data-group="{{tabs.description.group}}">
+    {{!-- Tab content here --}}
+    <div class="description-details">
+
+        <label>Beschreibungstext</label>
+        <prose-mirror
+                name="system.talent"
+                button="false"
+                editable="{{editable}}"
+                toggled="true"
+                value="{{system.talent}}">
+            {{{system.talent}}}
+        </prose-mirror>
+
+        {{#if hasRequirement}}
+            <div>
+                <label>Voraussetzung</label>
+                <ul>
+                    {{#each system.voraussetzung}}
+                        <li>
+                            <input type="text" name="system.vorraussetzung.{{@key}}.wert" value="{{this}}"/>
+                            <input type="text" name="system.vorraussetzung.{{@key}}.talent" value="{{this}}"/>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+        {{/if}}
+    </div>
+</section>

src/templates/item/skill/tab-meta.hbs

@@ -0,0 +1,68 @@
+{{!-- Individual Tab Template --}}
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+    {{!-- Tab content here --}}
+    <div class="meta-details">
+        <div class="category">
+            <label>Kategorie
+                <select name="system.gruppe">
+                    {{selectOptions categoryOptions selected=system.gruppe inverted=true}}
+                </select>
+            </label>
+        </div>
+        <div class="taw">
+            <label>TAW:
+                <input type="text" name="system.taw"
+                       value="{{system.taw}}"/>
+            </label>
+        </div>
+        {{#if isTalent}}
+            <div class="statistics">
+                <label class="throw">Probe</label>
+                <div>
+                    <label>
+                        <input type="text" name="system.probe.0"
+                               value="{{system.probe.[0]}}"/>
+                    </label>
+                </div>
+                <div><label>
+                    <input type="text" name="system.probe.1"
+                           value="{{system.probe.[1]}}"/>
+                </label></div>
+                <div>
+                    <label>
+                        <input type="text" name="system.probe.2"
+                               value="{{system.probe.[2]}}"/>
+                    </label>
+                </div>
+            </div>
+        {{/if}}
+        <div class="ebe">
+            <label>Effektive Behinderung
+                <input type="text" name="system.behinderung" value="{{system.behinderung}}"/>
+            </label>
+        </div>
+        {{#if isLanguage}}
+            <div class="language-statistics">
+                <label>Sprachenkomplexität
+                    <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
+                </label>
+            </div>
+        {{/if}}
+        {{#if isCombat}}
+            <div class="attack-statistics">
+                <div>
+                    <label>Attacke
+                        <input type="text" name="system.at" value="{{system.at}}"/>
+                    </label>
+                </div>
+                <div>
+                    <label>Parade
+                        <input type="text" name="system.pa" value="{{system.pa}}"/>
+                    </label>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</section>

src/templates/item/spell/main-sheet.hbs

@@ -0,0 +1,14 @@
+<div>
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs{{#if verticalTabs}} vertical{{/if}}"
+         aria-roledescription="{{localize "SHEETS.FormNavLabel"}}">
+        {{#each tabs as |tab|}}
+            <a data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}"
+               {{#if tab.cssClass}}class="{{tab.cssClass}}"{{/if}}
+                {{#if tab.tooltip}}data-tooltip="{{tab.tooltip}}"{{/if}}>
+                {{#if tab.icon}}<i class="{{tab.icon}}" inert></i>{{/if}}
+                {{#if tab.label}}<span>{{localize tab.label}}</span>{{/if}}
+            </a>
+        {{/each}}
+    </nav>
+</div>

src/templates/item/spell/tab-commonality.hbs

@@ -0,0 +1,21 @@
+<section class="tab {{tabs.commonality.id}} {{tabs.commonality.cssClass}}"
+         data-tab="{{tabs.commonality.id}}"
+         data-group="{{tabs.commonality.group}}">
+
+    <div>
+        <label>Komplexität
+            <input type="text" name="system.komplexität" value="{{system.komplexität}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Repräsentation
+            <input type="text" name="system.repräsentation" value="{{system.repräsentation}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Verbreitung
+            <input type="text" name="system.info" value="{{system.info}}"/>
+        </label>
+    </div>
+
+</section>

src/templates/item/spell/tab-meta.hbs

@@ -0,0 +1,48 @@
+<section class="tab {{tabs.meta.id}} {{tabs.meta.cssClass}}"
+         data-tab="{{tabs.meta.id}}"
+         data-group="{{tabs.meta.group}}">
+
+    <div>
+        <label>Name
+            <input type="text" name="system.name.value"
+                   value="{{system.attributeReference1.value}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Probe
+            <input type="text" name="system.probe.0"
+                   value="{{system.probe.[0]}}"/>
+            <input type="text" name="system.probe.1"
+                   value="{{system.probe.[1]}}"/>
+            <input type="text" name="system.probe[2].value"
+                   value="{{system.probe.[2]}}"/>
+        </label>
+    </div>
+    <div><label>Proben Modifikation
+        <input type="text" name="system.probenMod"
+               value="{{system.probenMod}}"/>
+    </label></div>
+    <div>
+        <label>Zauberdauer
+            <input type="text" name="system.zauberdauer"
+                   value="{{system.zauberdauer}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Kosten
+            <input type="text" name="system.kosten" value="{{system.kosten}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Wirkung
+            <input type="text" name="system.wirkung" value="{{system.wirkung}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Wirkungsdauer
+            <input type="text" name="system.wirkungsdauer" value="{{system.wirkungsdauer}}"/>
+        </label>
+    </div>
+
+
+</section>

src/templates/item/spell/tab-variants.hbs

@@ -0,0 +1,26 @@
+<section class="tab {{tabs.variants.id}} {{tabs.variants.cssClass}}"
+         data-tab="{{tabs.variants.id}}"
+         data-group="{{tabs.variants.group}}">
+
+    <div>
+        <label>Modifikationen
+            <input type="text" name="system.modifikationen" value="{{system.modifikationen}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Varianten
+            hier später Varianten
+        </label>
+    </div>
+    <div>
+        <label>Reversalis
+            <input type="text" name="system.reversalis" value="{{system.reversalis}}"/>
+        </label>
+    </div>
+    <div>
+        <label>Antimagie
+            <input type="text" name="system.antimagie" value="{{system.antimagie}}"/>
+        </label>
+    </div>
+
+</section>