feat: better styling of item sheets

src/lang/de.json

@@ -9,13 +9,11 @@
     "DS4.DocumentImageAltText": "Bild von {name}",
     "DS4.RollableImageRollableTitle": "Für {name} würfeln",
     "DS4.DiceOverlayImageAltText": "Bild eines W20",
-    "DS4.NotOwned": "Nicht besessen",
     "DS4.HeadingValues": "Werte",
     "DS4.HeadingBiography": "Biografie",
-    "DS4.HeadingDetails": "Details",
+    "DS4.HeadingProperties": "Eigenschaften",
     "DS4.HeadingEffects": "Effekte",
     "DS4.HeadingInventory": "Inventar",
-    "DS4.HeadingProfile": "Profil",
     "DS4.HeadingAbilities": "Fähigkeiten",
     "DS4.HeadingSpells": "Zaubersprüche",
     "DS4.HeadingDescription": "Beschreibung",
@@ -43,7 +41,6 @@
     "DS4.ItemEquipped": "Ausgerüstet",
     "DS4.ItemEquippedAbbr": "A",
     "DS4.SortByItemEquipped": "Nach Ausgerüstet sortieren",
-    "DS4.ItemOwner": "Besitzer",
     "DS4.ItemAvailability": "Verfügbarkeit",
     "DS4.ItemAvailabilityHamlet": "Dorf",
     "DS4.ItemAvailabilityVilage": "Kleinstadt",
@@ -78,6 +75,14 @@
     "DS4.ItemTypeSpecialCreatureAbilityPlural": "Besondere Kreaturenfähigkeiten",
     "DS4.ItemWeaponCheckFlavor": "{actor} greift mit {weapon} an.",
     "DS4.ItemSpellCheckFlavor": "{actor} wirkt {spell}.",
+    "DS4.ItemPropertiesArmor": "Panzerungseigenschaften",
+    "DS4.ItemPropertiesEquipable": "Ausrüstungseigenschaften",
+    "DS4.ItemPropertiesPhysical": "Physische Eigenschaften",
+    "DS4.ItemPropertiesProtective": "Schützende Eigenschaften",
+    "DS4.ItemPropertiesSpecialCreatureAbility": "Besondere Kreaturenfähigkeitseigenschaften",
+    "DS4.ItemPropertiesSpell": "Zaubereigenschaften",
+    "DS4.ItemPropertiesTalent": "Talenteigenschaften",
+    "DS4.ItemPropertiesWeapon": "Waffeneigenschaften",
     "DS4.ArmorType": "Panzerungstyp",
     "DS4.ArmorTypeAbbr": "PAT",
     "DS4.SortByArmorType": "Nach Panzerungstyp sortieren",
@@ -129,12 +134,10 @@
     "DS4.SpellEffectRadius": "Effektradius",
     "DS4.SpellDuration": "Wirkdauer",
     "DS4.SpellCooldownDuration": "Abklingzeit",
-    "DS4.SpellMinimumLevelsHealer": "Zugangsstufe für Heiler",
-    "DS4.SpellMinimumLevelsHealerAbbr": "Zugangsstufe Hei",
-    "DS4.SpellMinimumLevelsWizard": "Zugangsstufe für Zauberer",
-    "DS4.SpellMinimumLevelsWizardAbbr": "Zugangsstufe Zau",
-    "DS4.SpellMinimumLevelsSorcerer": "Zugangsstufe für Schwarzmagier",
-    "DS4.SpellMinimumLevelsSorcererAbbr": "Zugangsstufe Sch",
+    "DS4.SpellMinimumLevel": "Zugangsstufe",
+    "DS4.SpellCasterClassHealer": "Heiler",
+    "DS4.SpellCasterClassSorcerer": "Schwarzmagier",
+    "DS4.SpellCasterClassWizard": "Zauberer",
     "DS4.SpellPrice": "Preis (Gold)",
     "DS4.EffectEnabled": "Aktiv",
     "DS4.EffectEnabledAbbr": "A",
@@ -191,10 +194,10 @@
     "DS4.CharacterSlayerPointsAbbr": "SP",
     "DS4.TalentRank": "Rang",
     "DS4.SortByTalentRank": "Nach Rang sortieren",
-    "DS4.TalentRankBase": "Erworbener Rang",
-    "DS4.TalentRankMax": "Maximaler Rang",
-    "DS4.TalentRankMod": "Zusätzlicher Rang",
-    "DS4.TalentRankTotal": "Gesamter Rang",
+    "DS4.TalentRankBase": "Erworben",
+    "DS4.TalentRankMax": "Maximum",
+    "DS4.TalentRankMod": "Zusätzlich",
+    "DS4.TalentRankTotal": "Gesamt",
     "DS4.TalentRankOf": "von",
     "DS4.CharacterLanguageLanguages": "Sprachen",
     "DS4.CharacterLanguageAlphabets": "Schriftzeichen",

src/lang/en.json

@@ -9,13 +9,11 @@
     "DS4.DocumentImageAltText": "Image of {name}",
     "DS4.RollableImageRollableTitle": "Roll for {name}",
     "DS4.DiceOverlayImageAltText": "Image of a d20",
-    "DS4.NotOwned": "No owner",
     "DS4.HeadingValues": "Values",
     "DS4.HeadingBiography": "Biography",
-    "DS4.HeadingDetails": "Details",
+    "DS4.HeadingProperties": "Properties",
     "DS4.HeadingEffects": "Effects",
     "DS4.HeadingInventory": "Inventory",
-    "DS4.HeadingProfile": "Profile",
     "DS4.HeadingAbilities": "Abilities",
     "DS4.HeadingSpells": "Spells",
     "DS4.HeadingDescription": "Description",
@@ -43,7 +41,6 @@
     "DS4.ItemEquipped": "Equipped",
     "DS4.ItemEquippedAbbr": "E",
     "DS4.SortByItemEquipped": "Sort by Equipped",
-    "DS4.ItemOwner": "Owner",
     "DS4.ItemAvailability": "Availability",
     "DS4.ItemAvailabilityHamlet": "Hamlet",
     "DS4.ItemAvailabilityVilage": "Village",
@@ -78,6 +75,14 @@
     "DS4.ItemTypeSpecialCreatureAbilityPlural": "Special Creature Abilities",
     "DS4.ItemWeaponCheckFlavor": "{actor} attacks with {weapon}.",
     "DS4.ItemSpellCheckFlavor": "{actor} casts {spell}.",
+    "DS4.ItemPropertiesArmor": "Armor Properties",
+    "DS4.ItemPropertiesEquipable": "Equipment Properties",
+    "DS4.ItemPropertiesPhysical": "Physical Properties",
+    "DS4.ItemPropertiesProtective": "Protective Properties",
+    "DS4.ItemPropertiesSpecialCreatureAbility": "Special Creature Ability Properties",
+    "DS4.ItemPropertiesSpell": "Spell Properties",
+    "DS4.ItemPropertiesTalent": "Talent Properties",
+    "DS4.ItemPropertiesWeapon": "Weapon Properties",
     "DS4.ArmorType": "Armor Type",
     "DS4.ArmorTypeAbbr": "AT",
     "DS4.SortByArmorType": "Sort by Armor Type",
@@ -129,12 +134,10 @@
     "DS4.SpellEffectRadius": "Radius",
     "DS4.SpellDuration": "Duration",
     "DS4.SpellCooldownDuration": "Cooldown",
-    "DS4.SpellMinimumLevelsHealer": "Minimum level for Healers",
-    "DS4.SpellMinimumLevelsHealerAbbr": "Min lvl HEA",
-    "DS4.SpellMinimumLevelsWizard": "Minimum level for Wizards",
-    "DS4.SpellMinimumLevelsWizardAbbr": "Min lvl WIZ",
-    "DS4.SpellMinimumLevelsSorcerer": "Minimum level for Sorcerers",
-    "DS4.SpellMinimumLevelsSorcererAbbr": "Min lvl SRC",
+    "DS4.SpellMinimumLevel": "Minimum Level",
+    "DS4.SpellCasterClassHealer": "Healer",
+    "DS4.SpellCasterClassSorcerer": "Sorcerer",
+    "DS4.SpellCasterClassWizard": "Wizard",
     "DS4.SpellPrice": "Price (Gold)",
     "DS4.EffectEnabled": "Enabled",
     "DS4.EffectEnabledAbbr": "E",
@@ -191,10 +194,10 @@
     "DS4.CharacterSlayerPointsAbbr": "SP",
     "DS4.TalentRank": "Rank",
     "DS4.SortByTalentRank": "Sort by Rank",
-    "DS4.TalentRankBase": "Acquired Ranks",
-    "DS4.TalentRankMax": "Maximum Ranks",
-    "DS4.TalentRankMod": "Additional Ranks",
-    "DS4.TalentRankTotal": "Total Ranks",
+    "DS4.TalentRankBase": "Acquired",
+    "DS4.TalentRankMax": "Maximum",
+    "DS4.TalentRankMod": "Additional",
+    "DS4.TalentRankTotal": "Total",
     "DS4.TalentRankOf": "of",
     "DS4.CharacterLanguageLanguages": "Languages",
     "DS4.CharacterLanguageAlphabets": "Alphabets",

src/module/actor/sheets/actor-sheet.ts

@@ -22,10 +22,10 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
     /** @override */
     static get defaultOptions(): ActorSheet.Options {
         return foundry.utils.mergeObject(super.defaultOptions, {
-            classes: ["ds4", "sheet", "actor"],
-            height: 620,
-            scrollY: [".values", ".inventory", ".spells", ".abilities", ".effects", ".biography", ".description"],
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "values" }],
+            classes: ["sheet", "ds4-actor-sheet"],
+            height: 625,
+            scrollY: [".ds4-sheet-body"],
+            tabs: [{ navSelector: ".ds4-sheet-tab-nav", contentSelector: ".ds4-sheet-body", initial: "values" }],
             dragDrop: [
                 { dragSelector: ".item-list .item", dropSelector: null },
                 { dragSelector: ".effect-list .effect", dropSelector: null },

src/module/actor/sheets/character-sheet.ts

@@ -11,7 +11,7 @@ export class DS4CharacterActorSheet extends DS4ActorSheet {
     /** @override */
     static get defaultOptions(): ActorSheet.Options {
         return foundry.utils.mergeObject(super.defaultOptions, {
-            classes: ["ds4", "sheet", "actor", "character"],
+            classes: ["sheet", "ds4-actor-sheet", "ds4-character-sheet"],
         });
     }
 }

src/module/actor/sheets/creature-sheet.ts

@@ -11,7 +11,7 @@ export class DS4CreatureActorSheet extends DS4ActorSheet {
     /** @override */
     static get defaultOptions(): ActorSheet.Options {
         return foundry.utils.mergeObject(super.defaultOptions, {
-            classes: ["ds4", "sheet", "actor", "creature"],
+            classes: ["sheet", "ds4-actor-sheet", "ds4-creature-sheet"],
         });
     }
 }

src/module/handlebars/handlebars-partials.ts

@@ -8,14 +8,12 @@ export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
         "systems/ds4/templates/sheets/actor/components/actor-header.hbs",
         "systems/ds4/templates/sheets/actor/components/actor-progression.hbs",
-        "systems/ds4/templates/sheets/actor/components/add-button.hbs",
         "systems/ds4/templates/sheets/actor/components/biography.hbs",
         "systems/ds4/templates/sheets/actor/components/character-properties.hbs",
         "systems/ds4/templates/sheets/actor/components/check.hbs",
         "systems/ds4/templates/sheets/actor/components/checks.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-value.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-values.hbs",
-        "systems/ds4/templates/sheets/actor/components/control-button-group.hbs",
         "systems/ds4/templates/sheets/actor/components/core-value.hbs",
         "systems/ds4/templates/sheets/actor/components/core-values.hbs",
         "systems/ds4/templates/sheets/actor/components/creature-properties.hbs",
@@ -26,7 +24,6 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/components/item-list-header.hbs",
         "systems/ds4/templates/sheets/actor/components/items-overview.hbs",
         "systems/ds4/templates/sheets/actor/components/profile.hbs",
-        "systems/ds4/templates/sheets/actor/components/rollable-image.hbs",
         "systems/ds4/templates/sheets/actor/components/talent-rank-equation.hbs",
         "systems/ds4/templates/sheets/actor/tabs/biography.hbs",
         "systems/ds4/templates/sheets/actor/tabs/character-abilities.hbs",
@@ -37,11 +34,23 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/tabs/effects.hbs",
         "systems/ds4/templates/sheets/actor/tabs/spells.hbs",
         "systems/ds4/templates/sheets/actor/tabs/values.hbs",
-        "systems/ds4/templates/sheets/item/components/body.hbs",
-        "systems/ds4/templates/sheets/item/components/sheet-header.hbs",
+        "systems/ds4/templates/sheets/item/components/effect-list-entry.hbs",
+        "systems/ds4/templates/sheets/item/components/effect-list-header.hbs",
+        "systems/ds4/templates/sheets/item/components/item-header.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/armor.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/equipable.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/physical.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/protective.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/talent.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/special-creature-ability.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/spell.hbs",
+        "systems/ds4/templates/sheets/item/components/properties/weapon.hbs",
         "systems/ds4/templates/sheets/item/tabs/description.hbs",
-        "systems/ds4/templates/sheets/item/tabs/details.hbs",
         "systems/ds4/templates/sheets/item/tabs/effects.hbs",
+        "systems/ds4/templates/sheets/item/tabs/properties.hbs",
+        "systems/ds4/templates/sheets/shared/components/add-button.hbs",
+        "systems/ds4/templates/sheets/shared/components/control-button-group.hbs",
+        "systems/ds4/templates/sheets/shared/components/rollable-image.hbs",
     ];
     await loadTemplates(templatePaths);
 }

src/module/item/item-sheet.ts

@@ -8,6 +8,7 @@ import { DS4ActiveEffect } from "../active-effect";
 import { DS4 } from "../config";
 import { getGame } from "../helpers";
 import notifications from "../ui/notifications";
+import { enforce } from "../utils";
 import { isDS4ItemDataTypePhysical } from "./item-data-source";
 
 /**
@@ -17,11 +18,11 @@ export class DS4ItemSheet extends ItemSheet<ItemSheet.Options, DS4ItemSheetData>
     /** @override */
     static get defaultOptions(): ItemSheet.Options {
         return foundry.utils.mergeObject(super.defaultOptions, {
-            width: 540,
+            classes: ["sheet", "ds4-item-sheet"],
             height: 400,
-            classes: ["ds4", "sheet", "item"],
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description" }],
-            scrollY: [".tab.description", ".tab.effects", ".tab.details"],
+            scrollY: [".ds4-sheet-body"],
+            tabs: [{ navSelector: ".ds4-sheet-tab-nav", contentSelector: ".ds4-sheet-body", initial: "description" }],
+            width: 540,
         });
     }
 
@@ -61,46 +62,65 @@ export class DS4ItemSheet extends ItemSheet<ItemSheet.Options, DS4ItemSheetData>
 
         if (!this.options.editable) return;
 
-        html.find(".effect-control").on("click", this._onManageActiveEffect.bind(this));
+        html.find(".control-effect").on("click", this.onControlEffect.bind(this));
     }
 
     /**
-     * Handle management of ActiveEffects.
-     * @param event - he originating click event
+     * Handles a click on an element of this sheet to control an embedded effect of the item corresponding to this
+     * sheet.
+     *
+     * @param event - The originating click event
      */
-    protected async _onManageActiveEffect(event: JQuery.ClickEvent): Promise<unknown> {
+    protected onControlEffect(event: JQuery.ClickEvent): void {
         event.preventDefault();
-
         if (this.item.isOwned) {
             return notifications.warn(getGame().i18n.localize("DS4.WarningManageActiveEffectOnOwnedItem"));
         }
         const a = event.currentTarget;
-        const li = $(a).parents(".effect");
-
         switch (a.dataset["action"]) {
             case "create":
-                return this.createActiveEffect();
+                return this.onCreateEffect();
             case "edit":
-                const id = li.data("effectId");
-                const effect = this.item.effects.get(id);
-                if (!effect) {
-                    throw new Error(
-                        getGame().i18n.format("DS4.ErrorItemDoesNotHaveEffect", { id, item: this.item.name }),
-                    );
-                }
-                return effect.sheet.render(true);
-            case "delete": {
-                return this.item.deleteEmbeddedDocuments("ActiveEffect", [li.data("effectId")]);
-            }
+                return this.onEditEffect(event);
+            case "delete":
+                return this.onDeleteEffect(event);
         }
     }
 
     /**
-     * Create a new ActiveEffect for the item using default data.
+     * Creates a new embedded effect.
+     *
+     * @param event - The originating click event
      */
-    protected createActiveEffect(): void {
+    protected onCreateEffect(): void {
         DS4ActiveEffect.createDefault(this.item);
     }
+
+    /**
+     * Opens the sheet of the embedded effect corresponding to the clicked element.
+     *
+     * @param event - The originating click event
+     */
+    protected onEditEffect(event: JQuery.ClickEvent): void {
+        const id = $(event.currentTarget)
+            .parents(embeddedDocumentListEntryProperties.ActiveEffect.selector)
+            .data(embeddedDocumentListEntryProperties.ActiveEffect.idDataAttribute);
+        const effect = this.item.effects.get(id);
+        enforce(effect, getGame().i18n.format("DS4.ErrorItemDoesNotHaveEffect", { id, item: this.item.name }));
+        effect.sheet.render(true);
+    }
+
+    /**
+     * Deletes the embedded item corresponding to the clicked element.
+     *
+     * @param event - The originating click event
+     */
+    protected onDeleteEffect(event: JQuery.ClickEvent): void {
+        const li = $(event.currentTarget).parents(embeddedDocumentListEntryProperties.ActiveEffect.selector);
+        const id = li.data(embeddedDocumentListEntryProperties.ActiveEffect.idDataAttribute);
+        this.item.deleteEmbeddedDocuments("ActiveEffect", [id]);
+        li.slideUp(200, () => this.render(false));
+    }
 }
 
 interface DS4ItemSheetData extends ItemSheet.Data<ItemSheet.Options> {
@@ -109,3 +129,13 @@ interface DS4ItemSheetData extends ItemSheet.Data<ItemSheet.Options> {
     actor: DS4ItemSheet["item"]["actor"];
     isPhysical: boolean;
 }
+
+/**
+ * This object contains information about specific properties embedded document list entries for each different type.
+ */
+const embeddedDocumentListEntryProperties = Object.freeze({
+    ActiveEffect: {
+        selector: ".effect",
+        idDataAttribute: "effectId",
+    },
+});

src/scss/components/_apps.scss

@@ -1,25 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
- *
- * SPDX-License-Identifier: MIT
- */
-
-.window-content {
-    overflow-y: hidden;
-    padding: 5px;
-
-    form {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .sheet-body {
-        overflow-y: hidden;
-    }
-    .tab {
-        height: 100%;
-        overflow-y: auto;
-        align-content: flex-start;
-    }
-}

src/scss/components/_basic_property.scss

@@ -1,37 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
- * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
- *
- * SPDX-License-Identifier: MIT
- */
-
-@use "../utils/mixins";
-
-.basic-properties {
-    flex: 0 0 100%;
-    grid-gap: 2px;
-    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
-    .basic-property {
-        display: grid;
-        align-content: end;
-        padding-left: 1px;
-        padding-right: 1px;
-
-        & > label {
-            font-size: 0.9em;
-            font-weight: bold;
-        }
-
-        & > select {
-            display: block;
-            width: 100%;
-        }
-
-        .input-divider {
-            text-align: center;
-        }
-
-        @include mixins.mark-invalid-or-disabled-input;
-    }
-}

src/scss/components/_description.scss

@@ -1,84 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
- * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
- *
- * SPDX-License-Identifier: MIT
- */
-
-@use "../utils/mixins";
-@use "../utils/variables";
-
-.side-properties {
-    flex: 0;
-    min-width: fit-content;
-    max-width: 50%;
-    margin: 5px 5px 5px 0;
-    padding-right: 5px;
-    border-right: variables.$border-groove;
-
-    .side-property {
-        margin: 2px 0;
-        display: grid;
-        grid-template-columns: minmax(40%, max-content) 1fr;
-        justify-content: left;
-
-        label {
-            line-height: variables.$default-input-height;
-            font-weight: bold;
-            padding-right: 3pt;
-        }
-
-        input,
-        select,
-        a {
-            text-align: left;
-            width: calc(100% - 2px);
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        span {
-            line-height: variables.$default-input-height;
-            padding: 0 4px;
-        }
-
-        @include mixins.mark-invalid-or-disabled-input;
-
-        input[type="checkbox"] {
-            width: auto;
-            height: 100%;
-            margin: 0px;
-        }
-
-        .unit-data-pair {
-            display: flex;
-            flex-direction: row;
-            select {
-                width: 4em;
-            }
-            input {
-                max-width: 7em;
-            }
-        }
-    }
-}
-
-.description {
-    height: 100%;
-}
-
-.sheet-body .tab .editor {
-    height: 100%;
-}
-
-.tox {
-    .tox-edit-area {
-        padding: 0 8px;
-    }
-    .tox-toolbar-overlord {
-        background-color: transparent;
-        .tox-toolbar__primary {
-            background: transparent;
-        }
-    }
-}

src/scss/components/_forms.scss

@@ -1,72 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-@use "../utils/colors";
-@use "../utils/typography";
-@use "../utils/variables";
-
-.item-form {
-    font-family: typography.$font-primary;
-}
-
-header.sheet-header {
-    flex: 0 0 auto;
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-
-    .profile-img {
-        flex: 0 0 100px;
-        height: 100px;
-        margin: variables.$margin-sm 10px variables.$margin-sm 0;
-        border: none;
-    }
-
-    .header-fields {
-        flex: 1;
-    }
-
-    h1.charname {
-        height: 50px;
-        padding: 0px;
-        margin: variables.$margin-sm 10px variables.$margin-sm 0;
-        border-bottom: 0;
-        @include typography.font-heading-upper;
-        display: block;
-        input {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            border: none;
-            background-color: transparent;
-            @include typography.font-heading-upper;
-        }
-    }
-    h2.item-type {
-        @include typography.font-heading-upper;
-        display: block;
-        height: 50px;
-        padding: 0px;
-        flex: 0 0 auto;
-        color: colors.$c-light-grey;
-        border: none;
-        line-height: 50px;
-        margin: variables.$margin-sm 0;
-        text-align: right;
-    }
-}
-
-.sheet-tabs {
-    flex: 0;
-}
-
-.sheet-body,
-.sheet-body .tab {
-    height: 100%;
-}

src/scss/components/_sheet_tab_nav.scss

@@ -1,18 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-@use "../utils/variables";
-
-.ds4-sheet-tab-nav {
-    border-bottom: variables.$border-groove;
-    border-top: variables.$border-groove;
-    height: auto;
-
-    &__item {
-        font-weight: bold;
-        white-space: nowrap;
-    }
-}

src/scss/components/actor/_actor_header.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/typography";
+@use "../../utils/mixins";
 
 .ds4-actor-header {
     display: flex;
@@ -42,8 +42,8 @@
         margin: 0;
     }
 
-    &__name-input {
-        @include typography.font-heading-upper;
+    &__name-input[type="text"] {
+        @include mixins.font-heading-upper;
         background-color: transparent;
         border: none;
         flex: 1;

src/scss/components/actor/_actor_progression.scss

@@ -5,10 +5,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/colors";
-@use "../utils/typography";
-@use "../utils/variables";
-@use "../utils/mixins";
+@use "../../utils/colors";
+@use "../../utils/mixins";
+@use "../../utils/variables";
 
 .ds4-actor-progression {
     @include mixins.mark-invalid-or-disabled-input;
@@ -24,7 +23,7 @@
     }
 
     &__label {
-        @include typography.font-heading-upper;
+        @include mixins.font-heading-upper;
         border: none;
         color: colors.$c-light-grey;
         margin: 0;

src/scss/components/actor/_actor_properties.scss

@@ -6,8 +6,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/mixins";
-@use "../utils/variables";
+@use "../../utils/mixins";
+@use "../../utils/variables";
 
 .ds4-actor-properties {
     @include mixins.mark-invalid-or-disabled-input;
@@ -26,7 +26,7 @@
 
     &__property-select {
         width: 100%;
-        height: variables.$default-input-height;
+        height: var(--form-field-height);
     }
 
     &__property-multi-input {

src/scss/components/actor/_actor_sheet.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-.ds4.sheet.actor {
+.ds4-actor-sheet {
+    min-height: 625px;
     min-width: 650px;
-    min-height: 620px;
 }

src/scss/components/actor/_check.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/mixins";
+@use "../../utils/mixins";
 
 .ds4-check {
     cursor: pointer;

src/scss/components/actor/_combat_value.scss

@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/mixins";
-@use "../utils/variables";
-@use "../utils/typography";
+@use "../../utils/mixins";
+@use "../../utils/variables";
 
 .ds4-combat-value {
     $size: 3.75rem;
@@ -53,7 +52,7 @@
     }
 
     &__label {
-        @include typography.font-heading-upper;
+        @include mixins.font-heading-upper;
         font-size: 1.2em;
         white-space: nowrap;
     }

src/scss/components/actor/_combat_values.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/variables";
+@use "../../utils/variables";
 
 .ds4-combat-values {
     border-bottom: variables.$border-groove;

src/scss/components/actor/_core_value.scss

@@ -4,16 +4,16 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/colors";
-@use "../utils/typography";
-@use "../utils/variables";
+@use "../../utils/colors";
+@use "../../utils/mixins";
+@use "../../utils/variables";
 
 .ds4-core-value {
     align-items: center;
     display: flex;
 
     &__label {
-        @include typography.font-heading-upper;
+        @include mixins.font-heading-upper;
         flex: 1;
         font-size: 2em;
         text-align: center;

src/scss/components/actor/_core_values.scss

@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/colors";
-@use "../utils/typography";
-@use "../utils/variables";
+@use "../../utils/colors";
+@use "../../utils/variables";
 
 .ds4-core-values {
     column-gap: 0.5em;

src/scss/components/actor/_currency.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/variables";
+@use "../../utils/variables";
 
 .ds4-currency {
     align-items: center;

src/scss/components/actor/_talent_rank_equation.scss

@@ -10,10 +10,12 @@
     gap: 0.5em;
 
     &__value {
+        &[type="number"] {
             background-color: transparent;
             border: 0;
             height: auto;
             padding: 0;
             text-align: center;
         }
+    }
 }

src/scss/components/dice/_dice_total.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/colors";
+@use "../../utils/colors";
 
 // Needs to be nested in .dice-roll to win against foundry's style.css with respect to specificity
 .dice-roll .ds4-dice-total {

src/scss/components/item/_item_header.scss

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+@use "../../utils/mixins";
+
+.ds4-item-header {
+    align-items: center;
+    display: flex;
+    gap: 1em;
+
+    &__img {
+        border: none;
+        cursor: pointer;
+        height: 100px;
+        width: 100px;
+    }
+
+    &__data {
+        flex: 1;
+    }
+
+    &__type {
+        @include mixins.font-heading-upper;
+        border: none;
+        color: colors.$c-light-grey;
+        margin-bottom: 0;
+    }
+
+    &__name {
+        border: none;
+        margin: 0;
+    }
+
+    &__name-label {
+        display: none;
+    }
+
+    &__name-input[type="text"] {
+        @include mixins.font-heading-upper;
+        background-color: transparent;
+        border: none;
+        font-size: 1.25em;
+        height: auto;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

src/scss/components/item/_item_properties.scss

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-item-properties {
+    @include mixins.mark-invalid-or-disabled-input;
+
+    &__title {
+        border-bottom: variables.$border-groove;
+        font-weight: bold;
+        margin-bottom: 0;
+        margin-top: 1em;
+        padding-left: 1em;
+    }
+}

src/scss/components/item/_item_sheet.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-item-sheet {
+    min-height: 400px;
+    min-width: 540px;
+}

src/scss/components/shared/_editor.scss

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-form {
+    .editor {
+        height: 100%;
+
+        .tox {
+            .tox-toolbar-overlord,
+            .tox-toolbar__primary {
+                background: transparent;
+            }
+        }
+    }
+}

src/scss/components/shared/_embedded_document_list.scss

@@ -5,8 +5,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "../utils/mixins";
-@use "../utils/variables";
+@use "../../utils/mixins";
+@use "../../utils/variables";
 
 .ds4-embedded-document-list {
     @include mixins.mark-invalid-or-disabled-input;
@@ -17,9 +17,9 @@
     display: grid;
     grid-column-gap: 0.5em;
     grid-row-gap: 0.2em;
-    margin: 0.5em 0;
+    margin: 0;
     overflow-y: auto;
-    padding: 0;
+    padding: 0.5em 0;
 
     &--weapon {
         grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
@@ -85,6 +85,10 @@
         }
     }
 
+    &--item-effect {
+        grid-template-columns: $row-height 1fr 5ch;
+    }
+
     &__row {
         display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`
 
@@ -96,7 +100,6 @@
             height: $row-height;
             line-height: $row-height;
             white-space: nowrap;
-            overflow: hidden;
             text-overflow: ellipsis;
         }
     }
@@ -106,16 +109,21 @@
     }
 
     &__editable {
+        &[type="text"],
+        &[type="number"] {
             background-color: transparent;
             border: 0;
             padding: 0;
+        }
 
         &--checkbox {
+            &[type="checkbox"] {
                 width: 100%;
                 height: 100%;
                 margin: 0px;
             }
         }
+    }
 
     &__description {
         overflow: hidden;

src/scss/components/shared/_sheet_body.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-body {
+    height: 100%;
+    overflow-y: auto;
+}

src/scss/components/shared/_sheet_form.scss

@@ -4,8 +4,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-.ds4-sheet {
+.ds4-sheet-form {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
+    font-family: var(--ds4-font-primary);
+    height: 100%;
 }

src/scss/components/shared/_sheet_tab.scss

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-tab {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 100%;
+
+    &[data-tab].active {
+        display: flex;
+    }
+
+    > * {
+        flex-shrink: 0;
+    }
+}

src/scss/components/shared/_sheet_tab_nav.scss

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/variables";
+
+.ds4-sheet-tab-nav {
+    border-bottom: variables.$border-groove;
+    border-top: variables.$border-groove;
+    display: flex;
+    flex-wrap: nowrap;
+    height: calc(2 * var(--line-height-16));
+    justify-content: space-around;
+    line-height: calc(2 * var(--line-height-16));
+    margin: variables.$margin-sm 0;
+
+    &__item {
+        font-weight: bold;
+        white-space: nowrap;
+
+        &.active {
+            text-shadow: 0 0 variables.$padding-md var(--color-shadow-primary);
+        }
+    }
+}

src/scss/ds4.scss

@@ -6,40 +6,40 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "sass:meta";
+// global
+@use "global/accessibility";
+@use "global/fonts";
 
-/* Global styles */
-@include meta.load-css("global/accessibility");
-@include meta.load-css("global/flex");
-@include meta.load-css("global/fonts");
-@include meta.load-css("global/grid");
-@include meta.load-css("global/window");
+// shared
+@use "components/shared/control_button_group";
+@use "components/shared/editor";
+@use "components/shared/embedded_document_list";
+@use "components/shared/rollable_image";
+@use "components/shared/sheet_body";
+@use "components/shared/sheet_form";
+@use "components/shared/sheet_tab_nav";
+@use "components/shared/sheet_tab";
 
-@include meta.load-css("components/actor_sheet");
-@include meta.load-css("components/dice_total");
+// actor
+@use "components/actor/actor_header";
+@use "components/actor/actor_progression";
+@use "components/actor/actor_properties";
+@use "components/actor/actor_sheet";
+@use "components/actor/biography";
+@use "components/actor/check";
+@use "components/actor/checks";
+@use "components/actor/combat_value";
+@use "components/actor/combat_values";
+@use "components/actor/core_value";
+@use "components/actor/core_values";
+@use "components/actor/currency";
+@use "components/actor/profile";
+@use "components/actor/talent_rank_equation";
 
-/* Styles limited to ds4 sheets */
-.ds4 {
-    @include meta.load-css("components/actor_header");
-    @include meta.load-css("components/actor_progression");
-    @include meta.load-css("components/actor_properties");
-    @include meta.load-css("components/apps");
-    @include meta.load-css("components/basic_property");
-    @include meta.load-css("components/check");
-    @include meta.load-css("components/checks");
-    @include meta.load-css("components/combat_value");
-    @include meta.load-css("components/combat_values");
-    @include meta.load-css("components/control_button_group");
-    @include meta.load-css("components/core_value");
-    @include meta.load-css("components/core_values");
-    @include meta.load-css("components/currency");
-    @include meta.load-css("components/description");
-    @include meta.load-css("components/embedded_document_list");
-    @include meta.load-css("components/forms");
-    @include meta.load-css("components/profile");
-    @include meta.load-css("components/rollable_image");
-    @include meta.load-css("components/sheet_tab_nav");
-    @include meta.load-css("components/sheet");
-    @include meta.load-css("components/talent_rank_equation");
-    @include meta.load-css("tabs/biography");
-}
+// item
+@use "components/item/item_header";
+@use "components/item/item_properties";
+@use "components/item/item_sheet";
+
+// dice
+@use "components/dice/dice_total";

src/scss/global/_accessibility.scss

@@ -5,6 +5,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-.hidden {
+.ds4-hidden {
     display: none;
 }

src/scss/global/_flex.scss

@@ -1,93 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
- *
- * SPDX-License-Identifier: MIT
- */
-
-/* ----------------------------------------- */
-/*  Flexbox                                  */
-/* ----------------------------------------- */
-
-.flexrow {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > * {
-        flex: 1;
-    }
-
-    .flex05 {
-        flex: 0.5;
-    }
-    .flex1 {
-        flex: 1;
-    }
-    .flex125 {
-        flex: 1.25;
-    }
-    .flex15 {
-        flex: 1.5;
-    }
-    .flex2 {
-        flex: 2;
-    }
-    .flex3 {
-        flex: 3;
-    }
-    .flex4 {
-        flex: 4;
-    }
-}
-
-.flexnowrap {
-    flex-wrap: nowrap;
-}
-
-.flexcol {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    > * {
-        flex: 1;
-    }
-
-    .flex05 {
-        flex: 0.5;
-    }
-    .flex1 {
-        flex: 1;
-    }
-    .flex125 {
-        flex: 1.25;
-    }
-    .flex15 {
-        flex: 1.5;
-    }
-    .flex2 {
-        flex: 2;
-    }
-    .flex3 {
-        flex: 3;
-    }
-    .flex4 {
-        flex: 4;
-    }
-}
-
-.flex-center {
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.flex-between {
-    justify-content: space-between;
-}
-
-.flex-around {
-    justify-content: space-around;
-}

src/scss/global/_fonts.scss

@@ -43,3 +43,8 @@
     font-weight: normal;
     src: local("Wood Stamp"), url("../fonts/Woodstamp/Woodstamp.woff") format("woff");
 }
+
+:root {
+    --ds4-font-primary: Lora, serif;
+    --ds4-font-heading: "Wood Stamp", sans-serif;
+}

src/scss/global/_grid.scss

@@ -1,89 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-.grid,
-.grid-2col {
-    display: grid;
-    grid-column: span 2 / span 2;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-    padding: 0;
-}
-
-.grid-1col {
-    grid-column: span 1 / span 1;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.grid-3col {
-    grid-column: span 3 / span 3;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.grid-4col {
-    grid-column: span 4 / span 4;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.grid-5col {
-    grid-column: span 5 / span 5;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.grid-6col {
-    grid-column: span 6 / span 6;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.grid-7col {
-    grid-column: span 7 / span 7;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.grid-8col {
-    grid-column: span 8 / span 8;
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-}
-
-.grid-9col {
-    grid-column: span 9 / span 9;
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-}
-
-.grid-10col {
-    grid-column: span 10 / span 10;
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-}
-
-.grid-11col {
-    grid-column: span 11 / span 11;
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-}
-
-.grid-12col {
-    grid-column: span 12 / span 12;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.flex-group-center,
-.flex-group-left,
-.flex-group-right {
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 5px;
-    border: 1px solid #999;
-}
-
-.flex-group-left {
-    justify-content: flex-start;
-    text-align: left;
-}
-
-.flex-group-right {
-    justify-content: flex-end;
-    text-align: right;
-}

src/scss/global/_window.scss

@@ -1,18 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-@use "../utils/typography";
-
-.window-app {
-    font-family: typography.$font-primary;
-    input[type="text"],
-    input[type="number"],
-    input[type="password"],
-    input[type="date"],
-    input[type="time"] {
-        width: 100%;
-    }
-}

src/scss/utils/_mixins.scss

@@ -7,23 +7,6 @@
 
 @use "./colors";
 
-@mixin element-invisible {
-    position: absolute;
-
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    border: 0;
-    padding: 0;
-
-    clip: rect(0 0 0 0);
-    overflow: hidden;
-}
-
-@mixin hide {
-    display: none;
-}
-
 @mixin centered-content {
     display: grid;
     place-items: center;
@@ -39,5 +22,10 @@
 }
 
 @mixin foundry-highlight-text-shadow {
-    text-shadow: 0 0 10px red;
+    text-shadow: 0 0 10px var(--color-shadow-primary);
+}
+
+@mixin font-heading-upper {
+    font-family: var(--ds4-font-heading);
+    text-transform: uppercase;
 }

src/scss/utils/_typography.scss

@@ -1,14 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Johannes Loher
- *
- * SPDX-License-Identifier: MIT
- */
-
-$font-primary: "Lora", serif;
-$font-secondary: "Lora", serif;
-$font-heading: "Wood Stamp", sans-serif;
-
-@mixin font-heading-upper {
-    font-family: $font-heading;
-    text-transform: uppercase;
-}

src/scss/utils/_variables.scss

@@ -13,8 +13,6 @@ $margin-sm: $padding-sm;
 $margin-md: $padding-md;
 $margin-lg: $padding-lg;
 
-$default-input-height: 26px;
-
 $official-icons-path: "../assets/icons/official";
 
 $border-groove: 2px groove colors.$c-border-groove;

src/templates/dialogs/roll-options.hbs

@@ -16,27 +16,27 @@ SPDX-License-Identifier: MIT
 <form class="ds4-roll-options">
     <div class="form-group">
         <label for="check-target-number">{{localize "DS4.DialogRollOptionsCheckTargetNumberLabel"}}</label>
-        <input id="check-target-number" data-type="Number" type="number" name="check-target-number"
+        <input id="check-target-number" data-dtype="Number" type="number" name="check-target-number"
             value="{{checkTargetNumber}}" />
     </div>
     <div class="form-group">
         <label for="gm-modifier">{{localize "DS4.DialogRollOptionsGMModifierLabel"}}</label>
-        <input id="gm-modifier" data-type="Number" type="number" name="gm-modifier" value="0" />
+        <input id="gm-modifier" data-dtype="Number" type="number" name="gm-modifier" value="0" />
     </div>
     <div class="form-group">
         <label for="maximum-coup-result">{{localize "DS4.DialogRollOptionsMaximumCoupResultLabel"}}</label>
-        <input id="maximum-coup-result" data-type="Number" type="number" name="maximum-coup-result"
+        <input id="maximum-coup-result" data-dtype="Number" type="number" name="maximum-coup-result"
             value="{{maximumCoupResult}}" />
     </div>
     <div class="form-group">
         <label for="minimum-fumble-result">{{localize "DS4.DialogRollOptionsMinimumFumbleResultLabel"}}</label>
-        <input id="minimum-fumble-result" data-type="Number" type="number" name="minimum-fumble-result"
+        <input id="minimum-fumble-result" data-dtype="Number" type="number" name="minimum-fumble-result"
             value="{{minimumFumbleResult}}" />
     </div>
     <div class="form-group">
         <label for="roll-mode">{{localize "DS4.DialogRollOptionsRollModeLabel"}}</label>
         <div class="form-fields">
-            <select id="roll-mode" name="roll-mode" data-type="String">
+            <select id="roll-mode" name="roll-mode" data-dtype="String">
                 {{#select rollMode}}
                 {{#each rollModes as |rollModeValue rollModeKey|}}
                 <option value="{{rollModeKey}}">{{localize rollModeValue}}</option>

src/templates/sheets/actor/character-sheet.hbs

@@ -6,26 +6,26 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}} ds4-sheet" autocomplete="off">
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
     {{!-- Header --}}
     {{#> systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/character-properties.hbs}}
     {{/systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
-        <a class="ds4-sheet-tab-nav__item item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
     </nav>
 
     <!-- beautify ignore:start -->
     <!-- prettier-ignore-start -->
 {{!-- Sheet Body (remove indentation to avoid annoying Handlebars auto-indent) --}}
-<section class="sheet-body">
+<section class="ds4-sheet-body">
 {{!-- Values Tab --}}
 {{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}
 

src/templates/sheets/actor/components/actor-header.hbs

@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
     <div class="ds4-actor-header__data">
         <div class="ds4-actor-header__data-row">
             <h1 class="ds4-actor-header__name">
-                <label for="name-{{data._id}}" class="hidden">{{localize 'DS4.ActorName'}}</label>
+                <label for="name-{{data._id}}" class="ds4-hidden">{{localize 'DS4.ActorName'}}</label>
                 <input class="ds4-actor-header__name-input" name="name" type="text" id="name-{{data._id}}"
                     value="{{data.name}}" placeholder="{{localize 'DS4.ActorName'}}" />
             </h1>

src/templates/sheets/actor/components/character-properties.hbs

@@ -27,7 +27,7 @@ SPDX-License-Identifier: MIT
                 name="data.progression.progressPoints.used" value="{{data.data.progression.progressPoints.used}}"
                 data-dtype="Number" />
             <span class="input-divider"> / </span>
-            <label class="hidden" for="data.progression.progressPoints.total-{{data._id}}">Total
+            <label class="ds4-hidden" for="data.progression.progressPoints.total-{{data._id}}">Total
                 Progression Points</label>
             <input type="number" id="data.progression.progressPoints.total-{{data._id}}"
                 name="data.progression.progressPoints.total" value="{{data.data.progression.progressPoints.total}}"
@@ -42,7 +42,7 @@ SPDX-License-Identifier: MIT
                 id="data.progression.talentPoints.used-{{data._id}}" value="{{data.data.progression.talentPoints.used}}"
                 data-dtype="Number" />
             <span class="input-divider"> / </span>
-            <label for="data.progression.talentPoints.total-{{data._id}}" class="hidden">Total Talent Points</label>
+            <label for="data.progression.talentPoints.total-{{data._id}}" class="ds4-hidden">Total Talent Points</label>
             <input type="number" name="data.progression.talentPoints.total"
                 id="data.progression.talentPoints.total-{{data._id}}"
                 value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />

src/templates/sheets/actor/components/creature-properties.hbs

@@ -11,7 +11,7 @@ SPDX-License-Identifier: MIT
         <label class="ds4-actor-properties__property-label"
             for="data.baseInfo.creatureType-{{data._id}}">{{config.i18n.creatureBaseInfo.creatureType}}</label>
         <select class="ds4-actor-properties__property-select" id="data.baseInfo.creatureType-{{data._id}}"
-            name="data.baseInfo.creatureType" data-type="String">
+            name="data.baseInfo.creatureType" data-dtype="String">
             {{#select data.data.baseInfo.creatureType}}
             {{#each config.i18n.creatureTypes as |value key|}}
             <option value="{{key}}">{{value}}</option>
@@ -35,7 +35,7 @@ SPDX-License-Identifier: MIT
         <label class="ds4-actor-properties__property-label"
             for="data.baseInfo.sizeCategory-{{data._id}}">{{config.i18n.creatureBaseInfo.sizeCategory}}</label>
         <select class="ds4-actor-properties__property-select" id="data.baseInfo.sizeCategory-{{data._id}}"
-            name="data.baseInfo.sizeCategory" data-type="String">
+            name="data.baseInfo.sizeCategory" data-dtype="String">
             {{#select data.data.baseInfo.sizeCategory}}
             {{#each config.i18n.creatureSizeCategories as |value key|}}
             <option value="{{key}}">{{value}}</option>

src/templates/sheets/actor/components/effect-list-entry.hbs

@@ -19,7 +19,7 @@ SPDX-License-Identifier: MIT
     {{#if effectData.isEffectivelyEnabled}}<i class="fas fa-check"></i>{{else}}<i class="fas fa-ban"></i>{{/if}}
 
     {{!-- icon --}}
-    {{> systems/ds4/templates/sheets/actor/components/rollable-image.hbs rollable=false src=effectData.icon
+    {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=false src=effectData.icon
     alt=(localize "DS4.EffectIconAltText" label=effectData.label) title=effectData.label}}
 
     {{!-- label --}}
@@ -32,6 +32,6 @@ SPDX-License-Identifier: MIT
     <div title="{{effectData.factor}}">{{effectData.factor}}</div>
 
     {{!-- control button group --}}
-    {{> systems/ds4/templates/sheets/actor/components/control-button-group.hbs documentType="effect"
+    {{> systems/ds4/templates/sheets/shared/components/control-button-group.hbs documentType="effect"
     editTitle="DS4.UserInteractionEditEffectTitle" deleteTitle="DS4.UserInteractionDeleteEffectTitle"}}
 </li>

src/templates/sheets/actor/components/item-list-entry.hbs

@@ -24,7 +24,7 @@ SPDX-License-Identifier: MIT
     {{/if}}
 
     {{!-- image --}}
-    {{> systems/ds4/templates/sheets/actor/components/rollable-image.hbs rollable=itemData.data.rollable
+    {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=itemData.data.rollable
     src=itemData.img alt=(localize "DS4.DocumentImageAltText" name=itemData.name) title=itemData.name
     rollableTitle=(localize "DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}}
 
@@ -50,6 +50,6 @@ SPDX-License-Identifier: MIT
     {{/unless}}
 
     {{!-- control button group --}}
-    {{> systems/ds4/templates/sheets/actor/components/control-button-group.hbs documentType="item"
+    {{> systems/ds4/templates/sheets/shared/components/control-button-group.hbs documentType="item"
     editTitle="DS4.UserInteractionEditItemTitle" deleteTitle="DS4.UserInteractionDeleteItemTitle"}}
 </li>

src/templates/sheets/actor/components/items-overview.hbs

@@ -48,7 +48,7 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
 documentType='item' type='weapon'}}
 
 {{!-- ARMOR --}}
@@ -91,7 +91,7 @@ documentType='item' type='weapon'}}
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
 documentType='item' type='armor'}}
 
 {{!-- SHIELD --}}
@@ -115,7 +115,7 @@ documentType='item' type='armor'}}
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
 documentType='item' type='shield'}}
 
 {{!-- EQUIPMENT --}}
@@ -139,7 +139,7 @@ documentType='item' type='shield'}}
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
 documentType='item' type='equipment'}}
 
 {{!-- LOOT --}}
@@ -161,5 +161,5 @@ documentType='item' type='equipment'}}
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
 documentType='item' type='loot'}}

src/templates/sheets/actor/creature-sheet.hbs

@@ -6,7 +6,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}} ds4-sheet" autocomplete="off">
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
     {{!-- Header --}}
     {{#> systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/creature-properties.hbs}}
@@ -14,17 +14,17 @@ SPDX-License-Identifier: MIT
 
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
-        <a class="ds4-sheet-tab-nav__item item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
-        <a class="ds4-sheet-tab-nav__item item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+    <nav class="ds4-sheet-tab-nav" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="sheet-body">
+    <section class="ds4-sheet-body">
         {{!-- Values Tab --}}
         {{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}
 

src/templates/sheets/actor/tabs/biography.hbs

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab biography" data-group="primary" data-tab="biography">
+<div class="ds4-sheet-tab tab biography" data-group="primary" data-tab="biography">
     <div class="ds4-biography-tab-content">
         <!-- beautify ignore:start -->
         <!-- prettier-ignore-start -->

src/templates/sheets/actor/tabs/character-abilities.hbs

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab abilities" data-group="primary" data-tab="abilities">
+<div class="ds4-sheet-tab tab abilities" data-group="primary" data-tab="abilities">
     {{!-- TALENT --}}
     <h4 class="ds4-embedded-document-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
     {{#unless (isEmpty itemsByType.talent)}}
@@ -23,7 +23,7 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='talent'}}
 
     {{!-- RACIAL ABILITY --}}
@@ -36,7 +36,7 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='racialAbility'}}
 
     {{!-- LANGUAGE --}}
@@ -49,7 +49,7 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='language'}}
 
     {{!-- ALPHABET --}}
@@ -62,6 +62,6 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='alphabet'}}
 </div>

src/templates/sheets/actor/tabs/character-inventory.hbs

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab inventory" data-group="primary" data-tab="inventory">
+<div class="ds4-sheet-tab tab inventory" data-group="primary" data-tab="inventory">
     {{> systems/ds4/templates/sheets/actor/components/currency.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/items-overview.hbs}}
 </div>

src/templates/sheets/actor/tabs/creature-abilities.hbs

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab abilities" data-group="primary" data-tab="abilities">
+<div class="ds4-sheet-tab tab abilities" data-group="primary" data-tab="abilities">
     {{#unless (isEmpty itemsByType.specialCreatureAbility)}}
     <ol class="ds4-embedded-document-list ds4-embedded-document-list--special-creature-ability item-list">
         {{> systems/ds4/templates/sheets/actor/components/item-list-header.hbs type='specialCreatureAbility'}}
@@ -14,6 +14,6 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='specialCreatureAbility'}}
 </div>

src/templates/sheets/actor/tabs/creature-inventory.hbs

@@ -5,6 +5,6 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab inventory" data-group="primary" data-tab="inventory">
+<div class="ds4-sheet-tab tab inventory" data-group="primary" data-tab="inventory">
     {{> systems/ds4/templates/sheets/actor/components/items-overview.hbs}}
 </div>

src/templates/sheets/actor/tabs/description.hbs

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab description" data-group="primary" data-tab="description">
+<div class="ds4-sheet-tab tab description" data-group="primary" data-tab="description">
     {{editor content=data.data.baseInfo.description target="data.baseInfo.description" button=true owner=owner
     editable=editable}}
 </div>

src/templates/sheets/actor/tabs/effects.hbs

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab effects" data-group="primary" data-tab="effects">
+<div class="ds4-sheet-tab tab effects" data-group="primary" data-tab="effects">
     {{#unless (isEmpty data.effects)}}
     <ol class="ds4-embedded-document-list ds4-embedded-document-list--effect effect-list">
         {{> systems/ds4/templates/sheets/actor/components/effect-list-header.hbs}}
@@ -14,6 +14,6 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddEffectTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddEffectTitle'
     documentType='effect'}}
 </div>

src/templates/sheets/actor/tabs/spells.hbs

@@ -49,7 +49,7 @@ titleKey=titleKey}}
 {{!-- ======================================================================== --}}
 
 
-<div class="tab spells" data-group="primary" data-tab="spells">
+<div class="ds4-sheet-tab tab spells" data-group="primary" data-tab="spells">
     {{#unless (isEmpty itemsByType.spell)}}
     <ol class="ds4-embedded-document-list ds4-embedded-document-list--spell item-list">
         {{#> systems/ds4/templates/sheets/actor/components/item-list-header.hbs isEquipable=true hideDescription=true
@@ -98,6 +98,6 @@ titleKey=titleKey}}
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='spell'}}
 </div>

src/templates/sheets/actor/tabs/values.hbs

@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="tab values" data-group="primary" data-tab="values">
+<div class="ds4-sheet-tab tab values" data-group="primary" data-tab="values">
     {{> systems/ds4/templates/sheets/actor/components/core-values.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/combat-values.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/checks.hbs}}

src/templates/sheets/item/alphabet-sheet.hbs

@@ -1,15 +1,25 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/armor-sheet.hbs

@@ -1,42 +1,36 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid grid-3col basic-properties">
-        <div class="basic-property">
-            <label>{{localize "DS4.ArmorType"}}</label>
-            <select name="data.armorType" data-type="String">
-                {{#select data.data.armorType}}
-                {{#each config.i18n.armorTypes as |value key|}}
-                <option value="{{key}}">{{value}}</option>
-                {{/each}}
-                {{/select}}
-            </select>
-        </div>
-        <div class="basic-property">
-            <label for="data.armorMaterialType">{{localize "DS4.ArmorMaterialType"}}</label>
-            <select name="data.armorMaterialType" data-type="String">
-                {{#select data.data.armorMaterialType}}
-                {{#each config.i18n.armorMaterialTypes as |value key|}}
-                <option value="{{key}}">{{value}}</option>
-                {{/each}}
-                {{/select}}
-            </select>
-        </div>
-        <div class="basic-property">
-            <label>{{localize "DS4.ArmorValue"}}</label>
-            <input type="text" name="data.armorValue" value="{{data.data.armorValue}}" placeholder="0"
-                data-dtype="Number" />
-        </div>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#>
-    systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/armor.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/protective.hbs}}
+        {{#if isOwned}}
+        {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+        {{/if}}
+        {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/components/body.hbs

@@ -1,35 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-{{!-- Template for the common body (navigation & body sections) of all items. --}}
-
-{{!-- Sheet Tab Navigation --}}
-<nav class="ds4-sheet-tab-nav sheet-tabs tabs" data-group="primary">
-    <a class="ds4-sheet-tab-nav__item item" data-tab="description">{{localize "DS4.HeadingDescription"}}</a>
-    <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize "DS4.HeadingEffects"}}</a>
-    {{#if isPhysical}}
-    <a class="ds4-sheet-tab-nav__item item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
-    {{/if}}
-</nav>
-
-{{!-- Sheet Body --}}
-<section class="sheet-body">
-
-    {{!-- Description Tab --}}
-    {{#> systems/ds4/templates/sheets/item/tabs/description.hbs}}
-    {{> @partial-block}}
-    {{/systems/ds4/templates/sheets/item/tabs/description.hbs}}
-
-    {{!-- Effects Tab --}}
-    {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
-
-    {{#if isPhysical}}
-    {{!-- Details Tab --}}
-    {{> systems/ds4/templates/sheets/item/tabs/details.hbs}}
-    {{/if}}
-
-</section>

src/templates/sheets/item/components/effect-list-entry.hbs

@@ -0,0 +1,22 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!--
+!-- Render an effect list entry row.
+!-- @param effectData: The data of the item.
+--}}
+<li class="ds4-embedded-document-list__row effect" data-effect-id="{{effectData._id}}">
+    {{!-- icon --}}
+    {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=false src=effectData.icon
+    alt=(localize "DS4.EffectIconAltText" label=effectData.label) title=effectData.label}}
+
+    {{!-- label --}}
+    <div title="{{effectData.label}}">{{effectData.label}}</div>
+
+    {{!-- control button group --}}
+    {{> systems/ds4/templates/sheets/shared/components/control-button-group.hbs documentType="effect"
+    editTitle="DS4.UserInteractionEditEffectTitle" deleteTitle="DS4.UserInteractionDeleteEffectTitle"}}
+</li>

src/templates/sheets/item/components/effect-list-header.hbs

@@ -0,0 +1,19 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!--
+!-- Render an effect list header row.
+--}}
+<li class="ds4-embedded-document-list__row ds4-embedded-document-list__row--header">
+    {{!-- icon --}}
+    <div></div>
+
+    {{!-- label --}}
+    <div>{{localize 'DS4.EffectLabel'}}</div>
+
+    {{!-- control buttons placeholder --}}
+    <div></div>
+</li>

src/templates/sheets/item/components/item-header.hbs

@@ -0,0 +1,18 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<header class="ds4-item-header">
+    <img class="ds4-item-header__img" src="{{data.img}}" data-edit="img" alt="{{localize 'DS4.ItemImageAltText'}}"
+        title="{{data.name}}" />
+    <div class="ds4-item-header__data">
+        <h2 class="ds4-item-header__type">{{lookup config.i18n.itemTypes item.type}}</h2>
+        <h1 class="ds4-item-header__name">
+            <label for="name-{{data._id}}" class="ds4-item-header__name-label">{{localize 'DS4.ItemName'}}</label>
+            <input class="ds4-item-header__name-input" name="name" type="text" id="name-{{data._id}}"
+                value="{{data.name}}" placeholder="{{localize 'DS4.ItemName'}}" />
+        </h1>
+    </div>
+</header>

src/templates/sheets/item/components/properties/armor.hbs

@@ -0,0 +1,33 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--armor">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesArmor'}}</h4>
+    <div class="form-group">
+        <label for="data.armorType-{{data._id}}">{{localize "DS4.ArmorType"}}</label>
+        <div class="form-fields">
+            <select id="data.armorType-{{data._id}}" name="data.armorType" data-dtype="String">
+                {{#select data.data.armorType}}
+                {{#each config.i18n.armorTypes as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="data.armorMaterialType-{{data._id}}">{{localize "DS4.ArmorMaterialType"}}</label>
+        <div class="form-fields">
+            <select id="data.armorMaterialType-{{data._id}}" name="data.armorMaterialType" data-dtype="String">
+                {{#select data.data.armorMaterialType}}
+                {{#each config.i18n.armorMaterialTypes as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+</div>

src/templates/sheets/item/components/properties/equipable.hbs

@@ -0,0 +1,14 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--equipable">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesEquipable'}}</h4>
+    <div class="form-group">
+        <label for="data.equipped-{{data._id}}">{{localize "DS4.ItemEquipped"}}</label>
+        <input id="data.equipped-{{data._id}}" data-dtype="Boolean" type="checkbox" name="data.equipped" {{checked
+            data.data.equipped}} />
+    </div>
+</div>

src/templates/sheets/item/components/properties/physical.hbs

@@ -0,0 +1,38 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--physical">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesPhysical'}}</h4>
+    <div class="form-group">
+        <label for="data.price-{{data._id}}">{{localize "DS4.PriceGold"}}</label>
+        <input id="data.price-{{data._id}}" data-dtype="Number" type="number" min="0" max="99999" step="0.01"
+            placeholder="0" name="data.price" value="{{data.data.price}}" />
+    </div>
+    <div class="form-group">
+        <label for="data.availability-{{data._id}}">{{localize "DS4.ItemAvailability"}}</label>
+        <div class="form-fields">
+            <select id="data.availability-{{data._id}}" name="data.availability" data-dtype="String">
+                {{#select data.data.availability}}
+                {{#each config.i18n.itemAvailabilities as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    {{#if isOwned}}
+    <div class="form-group">
+        <label for="data.quantity-{{data._id}}">{{localize "DS4.Quantity"}}</label>
+        <input id="data.quantity-{{data._id}}" data-dtype="Number" type="number" name="data.quantity" placeholder="0"
+            value="{{data.data.quantity}}" />
+    </div>
+    <div class="form-group">
+        <label for="data.storageLocation-{{data._id}}">{{localize "DS4.StorageLocation"}}</label>
+        <input id="data.storageLocation-{{data._id}}" data-dtype="String" type="text" name="data.storageLocation"
+            value="{{data.data.storageLocation}}" />
+    </div>
+    {{/if}}
+</div>

src/templates/sheets/item/components/properties/protective.hbs

@@ -0,0 +1,14 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--protective">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesProtective'}}</h4>
+    <div class="form-group">
+        <label for="data.armorValue-{{data._id}}">{{localize "DS4.ArmorValue"}}</label>
+        <input id="data.armorValue-{{data._id}}" data-dtype="Number" type="number" min="0" step="1" placeholder="0"
+            name="data.armorValue" value="{{data.data.armorValue}}" />
+    </div>
+</div>

src/templates/sheets/item/components/properties/special-creature-ability.hbs

@@ -0,0 +1,15 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--special-creature-ability">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesSpecialCreatureAbility'}}</h4>
+    <div class="form-group">
+        <label for="data.experiencePoints-{{data._id}}">{{localize
+            "DS4.SpecialCreatureAbilityExperiencePoints"}}</label>
+        <input id="data.experiencePoints-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+            placeholder="0" name="data.experiencePoints" value="{{data.data.experiencePoints}}" />
+    </div>
+</div>

src/templates/sheets/item/components/properties/spell.hbs

@@ -0,0 +1,112 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--spell">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesSpell'}}</h4>
+    <div class="form-group">
+        <label for="data.bonus-{{data._id}}">{{localize "DS4.SpellBonus"}}</label>
+        <input id="data.bonus-{{data._id}}" data-dtype="String" type="text" name="data.bonus" placeholder="0"
+            value="{{data.data.bonus}}" />
+    </div>
+    <div class="form-group">
+        <label for="data.spellType-{{data._id}}">{{localize "DS4.SpellType"}}</label>
+        <div class="form-fields">
+            <select id="data.spellType-{{data._id}}" name="data.spellType" data-dtype="String">
+                {{#select data.data.spellType}}
+                {{#each config.i18n.spellTypes as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="data.spellCategory-{{data._id}}">{{localize "DS4.SpellCategory"}}</label>
+        <div class="form-fields">
+            <select id="data.spellCategory-{{data._id}}" name="data.spellCategory" data-dtype="String">
+                {{#select data.data.spellCategory}}
+                {{#each config.i18n.spellCategories as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group slim">
+        <label>{{localize "DS4.SpellMaxDistance"}}</label>
+        <div class="form-fields">
+            <input data-dtype="String" type="text" name="data.maxDistance.value"
+                value="{{data.data.maxDistance.value}}" />
+            <select name="data.maxDistance.unit" data-dtype="String">
+                {{#select data.data.maxDistance.unit}}
+                {{#each config.i18n.distanceUnits as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group slim">
+        <label>{{localize "DS4.SpellEffectRadius"}}</label>
+        <div class="form-fields">
+            <input data-dtype="String" type="text" name="data.effectRadius.value"
+                value="{{data.data.effectRadius.value}}" />
+            <select name="data.effectRadius.unit" data-dtype="String">
+                {{#select data.data.effectRadius.unit}}
+                {{#each config.i18n.distanceUnits as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group slim">
+        <label>{{localize "DS4.SpellDuration"}}</label>
+        <div class="form-fields">
+            <input data-dtype="String" type="text" name="data.duration.value" value="{{data.data.duration.value}}" />
+            <select name="data.duration.unit" data-dtype="String">
+                {{#select data.data.duration.unit}}
+                {{#each config.i18n.customTemporalUnits as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group slim">
+        <label>{{localize "DS4.SpellCooldownDuration"}}</label>
+        <div class="form-fields">
+            <input data-dtype="String" type="text" name="data.cooldownDuration.value"
+                value="{{data.data.cooldownDuration.value}}" />
+            <select name="data.cooldownDuration.unit" data-dtype="String">
+                {{#select data.data.cooldownDuration.unit}}
+                {{#each config.i18n.temporalUnits as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group slim">
+        <label>{{localize "DS4.SpellMinimumLevel"}}</label>
+        <div class="form-fields">
+            <label for="data.minimumLevels.healer-{{data._id}}">{{localize "DS4.SpellCasterClassHealer"}}</label>
+            <input id="data.minimumLevels.healer-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+                name="data.minimumLevels.healer" placeholder="–" value="{{data.data.minimumLevels.healer}}" />
+            <label for="data.minimumLevels.sorcerer-{{data._id}}">{{localize "DS4.SpellCasterClassSorcerer"}}</label>
+            <input id="data.minimumLevels.sorcerer-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+                name="data.minimumLevels.sorcerer" placeholder="–" value="{{data.data.minimumLevels.sorcerer}}" />
+            <label for="data.minimumLevels.wizard-{{data._id}}">{{localize "DS4.SpellCasterClassWizard"}}</label>
+            <input id="data.minimumLevels.wizard-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+                name="data.minimumLevels.wizard" placeholder="–" value="{{data.data.minimumLevels.wizard}}" />
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="data.price-{{data._id}}">{{localize "DS4.SpellPrice"}}</label>
+        <input id="data.price-{{data._id}}" data-dtype="Number" type="number" min="0" step="0.01" name="data.price"
+            placeholder="0" value="{{data.data.price}}" />
+    </div>
+</div>

src/templates/sheets/item/components/properties/talent.hbs

@@ -0,0 +1,26 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--talent">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesTalent'}}</h4>
+    <div class="form-group slim">
+        <label>{{localize "DS4.TalentRank"}}</label>
+        <div class="form-fields">
+            <label for="data.rank.base-{{data._id}}">{{localize "DS4.TalentRankBase"}}</label>
+            <input id="data.rank.base-{{data._id}}" data-dtype="Number" type="number" min="0"
+                max="{{data.data.rank.max}}" step="1" name="data.rank.base" value="{{data.data.rank.base}}" />
+            <label for="data.rank.max-{{data._id}}">{{localize "DS4.TalentRankMax"}}</label>
+            <input id="data.rank.max-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+                name="data.rank.max" value="{{data.data.rank.max}}" />
+            <br />
+            <label for="data.rank.mod-{{data._id}}">{{localize "DS4.TalentRankMod"}}</label>
+            <input id="data.rank.mod-{{data._id}}" data-dtype="Number" type="number" min="0" step="1"
+                name="data.rank.mod" value="{{data.data.rank.mod}}" />
+            <label for="data.rank.total-{{data._id}}">{{localize "DS4.TalentRankTotal"}}</label>
+            <span id="data.rank.total-{{data._id}}">{{data.data.rank.total}}</span>
+        </div>
+    </div>
+</div>

src/templates/sheets/item/components/properties/weapon.hbs

@@ -0,0 +1,31 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-item-properties ds4-item-properties--weapon">
+    <h4 class="ds4-item-properties__title">{{localize 'DS4.ItemPropertiesWeapon'}}</h4>
+    <div class="form-group">
+        <label for="data.attackType-{{data._id}}">{{localize "DS4.AttackType"}}</label>
+        <div class="form-fields">
+            <select id="data.attackType-{{data._id}}" name="data.attackType" data-dtype="String">
+                {{#select data.data.attackType}}
+                {{#each config.i18n.attackTypes as |value key|}}
+                <option value="{{key}}">{{value}}</option>
+                {{/each}}
+                {{/select}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="data.weaponBonus-{{data._id}}">{{localize "DS4.WeaponBonus"}}</label>
+        <input id="data.weaponBonus-{{data._id}}" data-dtype="Number" type="number" name="data.weaponBonus"
+            placeholder="0" value="{{data.data.weaponBonus}}" />
+    </div>
+    <div class="form-group">
+        <label for="data.opponentDefense-{{data._id}}">{{localize "DS4.OpponentDefense"}}</label>
+        <input id="data.opponentDefense-{{data._id}}" data-dtype="Number" type="number" name="data.opponentDefense"
+            placeholder="0" value="{{data.data.opponentDefense}}" />
+    </div>
+</div>

src/templates/sheets/item/components/sheet-header.hbs

@@ -1,15 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-<header class="sheet-header">
-    <img class="profile-img" src="{{data.img}}" data-edit="img" title="{{data.name}}" />
-    <div class="header-fields flexrow">
-        <h1 class="charname"><input name="name" type="text" value="{{data.name}}" placeholder="Name" /></h1>
-        <h2 class="item-type">{{lookup config.i18n.itemTypes item.type}}</h2>
-        {{> @partial-block}}
-    </div>
-</header>

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

@@ -1,15 +1,34 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#>
-    systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{#if isOwned}}
+        {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+        {{/if}}
+        {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/language-sheet.hbs

@@ -1,15 +1,25 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/loot-sheet.hbs

@@ -1,14 +1,31 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/racialAbility-sheet.hbs

@@ -1,15 +1,25 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/shield-sheet.hbs

@@ -1,22 +1,35 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid grid-1col basic-properties">
-        <div class="basic-property">
-            <label>{{localize "DS4.ArmorValue"}}</label>
-            <input type="text" name="data.armorValue" value="{{data.data.armorValue}}" placeholder="0"
-                data-dtype="Number" />
-        </div>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#>
-    systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/protective.hbs}}
+        {{#if isOwned}}
+        {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+        {{/if}}
+        {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/specialCreatureAbility-sheet.hbs

@@ -4,18 +4,28 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid grid-3col basic-properties">
-        <div class="basic-property">
-            <label>{{localize "DS4.SpecialCreatureAbilityExperiencePoints"}}</label>
-            <input type="number" min="0" step="1" name="data.experiencePoints" value="{{data.data.experiencePoints}}"
-                placeholder="0" data-dtype="Number" />
-        </div>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/special-creature-ability.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

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

@@ -1,103 +1,34 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Oliver Rümpelein
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-{{!-- ======================================================================== --}}
-{{!-- INLINE PARTIAL DEFINITIONS --}}
-{{!-- ======================================================================== --}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
-{{#*inline "unitDatum" }}
-<div class="side-property">
-    <label>{{localize localizeString}}</label>
-    <div class="unit-data-pair">
-        <input class="item-num-val" type="text" data-dtype="String" name="data.{{property}}.value"
-            value="{{lookup (lookup data.data property) 'value'}}" />
-        <select name="data.{{property}}.unit" data-type="String">
-            {{#select (lookup (lookup data.data property) 'unit')}}
-            {{#if (eq unitType 'temporal')}}
-            {{#each (lookup config.i18n 'temporalUnitsAbbr') as |value key|}}
-            <option value="{{key}}">{{value}}</option>
-            {{/each}}
-            {{else if (eq unitType 'customTemporal')}}
-            {{#each (lookup config.i18n 'customTemporalUnitsAbbr') as |value key|}}
-            <option value="{{key}}">{{value}}</option>
-            {{/each}}
-            {{else}}
-            {{#each (lookup config.i18n 'distanceUnitsAbbr') as |value key|}}
-            <option value="{{key}}">{{value}}</option>
-            {{/each}}
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/spell.hbs}}
+        {{#if isOwned}}
+        {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
         {{/if}}
-            {{/select}}
-        </select>
-    </div>
-</div>
-{{/inline}}
-
-
-{{!-- ======================================================================== --}}
-
-
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid basic-properties">
-        <div class="basic-property">
-            <label for="data.spellType">{{localize "DS4.SpellType"}}</label>
-            <select id="data.spellType" name="data.spellType" data-type="String">
-                {{#select data.data.spellType}}
-                {{#each config.i18n.spellTypes as |value key|}}
-                <option value="{{key}}">{{value}}</option>
-                {{/each}}
-                {{/select}}
-            </select>
-        </div>
-        <div class="basic-property">
-            <label for="data.bonus">{{localize "DS4.SpellBonus"}}</label>
-            <input id="data.bonus" type="text" name="data.bonus" value="{{data.data.bonus}}" data-dtype="String" />
-        </div>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-
-    {{!-- Common Item body --}}
-    {{#> systems/ds4/templates/sheets/item/components/body.hbs}}
-    <div class="side-property">
-        <label for="data.spellCategory">{{localize "DS4.SpellCategory"}}</label>
-        <select id="data.spellCategory" name="data.spellCategory" data-type="String">
-            {{#select data.data.spellCategory}}
-            {{#each config.i18n.spellCategories as |value key|}}
-            <option value="{{key}}">{{value}}</option>
-            {{/each}}
-            {{/select}}
-        </select>
-    </div>
-    {{> unitDatum data=data property='maxDistance' localizeString='DS4.SpellMaxDistance' unitType='distance' }}
-    {{> unitDatum data=data property='effectRadius' localizeString='DS4.SpellEffectRadius' unitType='distance' }}
-    {{> unitDatum data=data property='duration' localizeString='DS4.SpellDuration' unitType='customTemporal' }}
-    {{> unitDatum data=data property='cooldownDuration' localizeString='DS4.SpellCooldownDuration' unitType='temporal'
-    }}
-    <div class="side-property" title="{{localize 'DS4.SpellMinimumLevelsHealer'}}">
-        <label for="data.minimumLevels.healer">{{localize "DS4.SpellMinimumLevelsHealerAbbr"}}</label>
-        <input type="number" min="0" step="1" data-dtype="Number" name="data.minimumLevels.healer"
-            id="data.minimumLevels.healer" value="{{data.data.minimumLevels.healer}}" />
-    </div>
-    <div class="side-property" title="{{localize 'DS4.SpellMinimumLevelsWizard'}}">
-        <label for="data.minimumLevels.wizard">{{localize "DS4.SpellMinimumLevelsWizardAbbr"}}</label>
-        <input type="number" min="0" step="1" data-dtype="Number" name="data.minimumLevels.wizard"
-            id="data.minimumLevels.wizard" value="{{data.data.minimumLevels.wizard}}" />
-    </div>
-    <div class="side-property" title="{{localize 'DS4.SpellMinimumLevelsSorcerer'}}">
-        <label for="data.minimumLevels.sorcerer">{{localize "DS4.SpellMinimumLevelsSorcererAbbr"}}</label>
-        <input type="number" min="0" step="1" data-dtype="Number" name="data.minimumLevels.sorcerer"
-            id="data.minimumLevels.sorcerer" value="{{data.data.minimumLevels.sorcerer}}" />
-    </div>
-    <div class="side-property">
-        <label for="data.price">{{localize "DS4.SpellPrice"}}</label>
-        <span name="data.price" id="data.price">{{data.data.price}}</span>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/body.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
 
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/tabs/description.hbs

@@ -1,46 +1,10 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-{{!--
-Render a description tab.
-Additional elements of the side-properties div can be handed over via the @partial-block.
---}}
-
-<div class="tab flexrow description" data-group="primary" data-tab="description">
-    <div class="side-properties">
-        {{#if isOwned}}
-        {{#if (ne data.data.equipped undefined)}}<div class="side-property">
-            <label for="data.equipped">{{localize 'DS4.ItemEquipped'}}</label>
-            <input type="checkbox" name="data.equipped" data-dtype="Boolean" {{checked data.data.equipped}}
-                title="{{localize 'DS4.ItemEquipped'}}">
-        </div>
-        {{/if}}
-        <div class="side-property">
-            <label for="data.actor">{{localize 'DS4.ItemOwner'}}</label>
-            <a class="content-link entity-link" draggable="true" data-type="Actor" data-entity="Actor" data-id="{{actor.id}}"><i
-                    class="fas fa-user"></i>{{actor.name}}</a>
-        </div>
-        {{#if isPhysical}}
-        <div class="side-property">
-            <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
-            <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity"
-                value="{{data.data.quantity}}" />
-        </div>
-        <div class="side-property">
-            <label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>
-            <input type="text" data-dtype="String" name="data.storageLocation" value="{{data.data.storageLocation}}" />
-        </div>
-        {{/if}}
-        {{else}}
-        <span>{{localize "DS4.NotOwned"}}</span>
-        {{/if}}
-        {{> @partial-block}}
-    </div>
-    <div class="description" title="{{localize 'DS4.HeadingDescription'}}">
-        {{editor content=data.data.description target="data.description" button=true owner=owner editable=editable}}
-    </div>
+<div class="ds4-sheet-tab tab description" data-group="primary" data-tab="description">
+    {{editor content=data.data.description target="data.description" button=true owner=owner
+    editable=editable}}
 </div>

src/templates/sheets/item/tabs/details.hbs

@@ -1,28 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-{{!-- The item tab for details. --}}
-<div class="tab details" data-group="primary" data-tab="details">
-    {{!-- As you add new fields, add them in here! --}}
-    <div class="side-properties">
-        <div class="side-property">
-            <label for="data.price">{{localize "DS4.PriceGold"}}</label>
-            <input type="number" min="0" max="99999" step="0.01" data-dtype="Number" name="data.price"
-                value="{{data.data.price}}" />
-        </div>
-        <div class="side-property">
-            <label for="data.availability">{{localize "DS4.ItemAvailability"}}</label>
-            <select name="data.availability" data-type="String">
-                {{#select data.data.availability}}
-                {{#each config.i18n.itemAvailabilities as |value key|}}
-                <option value="{{key}}">{{value}}</option>
-                {{/each}}
-                {{/select}}
-            </select>
-        </div>
-    </div>
-</div>

src/templates/sheets/item/tabs/effects.hbs

@@ -1,32 +1,18 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-{{!-- Tab for the items view to manage effects --}}
-<div class="tab effects" data-group="primary" data-tab="effects">
-    <ol class="effects-list">
-        <li class="effect flexrow effect-header">
-            <div class="effect-image"></div>
-            <div class="effect-name">Name</div>
-            <div class="effect-controls">
-                <a class="effect-control" data-action="create" title="{{localize 'DS4.UserInteractionAddEffectTitle'}}">
-                    <i class="fas fa-plus"></i> {{localize 'DS4.UserInteractionAdd'}}</a>
-            </div>
-        </li>
-        {{#each item.effects as |effect id|}}
-        <li class="effect flexrow" data-effect-id="{{effect.id}}">
-            <h4 class="effect-name">{{effect.data.label}}</h4>
-            <div class="effect-controls">
-                <a class="effect-control" data-action="edit" title="{{localize 'DS4.UserInteractionEditEffectTitle'}}">
-                    <i class="fas fa-edit"></i></a>
-                <a class="effect-control" data-action="delete"
-                    title="{{localize 'DS4.UserInteractionDeleteEffectTitle'}}">
-                    <i class="fas fa-trash"></i></a>
-            </div>
-        </li>
+<div class="ds4-sheet-tab tab effects" data-group="primary" data-tab="effects">
+    {{#unless (isEmpty data.effects)}}
+    <ol class="ds4-embedded-document-list ds4-embedded-document-list--item-effect effect-list">
+        {{> systems/ds4/templates/sheets/item/components/effect-list-header.hbs}}
+        {{#each data.effects as |effectData id| }}
+        {{> systems/ds4/templates/sheets/item/components/effect-list-entry.hbs effectData=effectData}}
         {{/each}}
     </ol>
+    {{/unless}}
+    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddEffectTitle'
+    documentType='effect'}}
 </div>

src/templates/sheets/item/tabs/properties.hbs

@@ -0,0 +1,9 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-sheet-tab tab properties" data-group="primary" data-tab="properties">
+    {{> @partial-block}}
+</div>

src/templates/sheets/item/talent-sheet.hbs

@@ -1,41 +1,31 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-{{!-- ======================================================================== --}}
-{{!-- INLINE PARTIAL DEFINITIONS --}}
-{{!-- ======================================================================== --}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
 
-{{#*inline "talentRankBasicProperty" }}
-<div class="basic-property">
-    <label for="data.rank.{{property}}">{{localize localizeString}}</label>
-    <input type="number" min="0" step="1" data-dtype="Number" {{disabled}} {{#if (eq property 'base' )
-        }}max="{{data.data.rank.max}}" {{/if}} name="data.rank.{{property}}"
-        value="{{lookup data.data.rank property}}" />
-</div>
-{{/inline}}
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
 
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/talent.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
 
-{{!-- ======================================================================== --}}
-
-
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid grid-4col basic-properties">
-        {{> talentRankBasicProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
-        {{> talentRankBasicProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
-        {{> talentRankBasicProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
-        {{> talentRankBasicProperty data=data property='total' localizeString='DS4.TalentRankTotal'
-        disabled='disabled'}}
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-
-    {{!-- Common Item body --}}
-    {{#>
-    systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
-
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>

src/templates/sheets/item/weapon-sheet.hbs

@@ -1,37 +1,35 @@
 {{!--
 SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}}" autocomplete="off">
-    {{#> systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
-    <div class="grid grid-3col basic-properties">
-        <div class="basic-property">
-            <label>{{localize "DS4.AttackType"}}</label>
-            <select name="data.attackType" data-type="String">
-                {{#select data.data.attackType}}
-                {{#each config.i18n.attackTypes as |value key|}}
-                <option value="{{key}}">{{value}}</option>
-                {{/each}}
-                {{/select}}
-            </select>
-        </div>
-        <div class="basic-property">
-            <label>{{localize "DS4.WeaponBonus"}}</label>
-            <input type="number" name="data.weaponBonus" value="{{data.data.weaponBonus}}" placeholder="0"
-                data-dtype="Number" />
-        </div>
-        <div class="basic-property">
-            <label>{{localize "DS4.OpponentDefense"}}</label>
-            <input type="number" name="data.opponentDefense" value="{{data.data.opponentDefense}}" placeholder="0"
-                data-dtype="Number" />
-        </div>
-    </div>
-    {{/systems/ds4/templates/sheets/item/components/sheet-header.hbs}}
+<form class="{{cssClass}} ds4-sheet-form" autocomplete="off">
+    {{!-- Header --}}
+    {{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
 
-    {{!-- Common Item body --}}
-    {{#>
-    systems/ds4/templates/sheets/item/components/body.hbs}}{{/systems/ds4/templates/sheets/item/components/body.hbs}}
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
+        <a class="ds4-sheet-tab-nav__item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
+        <a class="ds4-sheet-tab-nav__item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="ds4-sheet-body">
+        {{!-- Description Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+
+        {{!-- Properties Tab --}}
+        {{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        {{> systems/ds4/templates/sheets/item/components/properties/weapon.hbs}}
+        {{#if isOwned}}
+        {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+        {{/if}}
+        {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+    </section>
 </form>