From cd6be3258331012c1cdfe6dd5e8070eee3ba5fb1 Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Sun, 11 Jul 2021 05:04:05 +0200
Subject: [PATCH] Clean up character sheet

---
 src/module/handlebars/handlebars-partials.ts  |  2 +
 src/scss/components/_character_header.scss    | 53 ++++++++++++
 .../components/_character_progression.scss    | 61 +++++++-------
 .../components/_character_properties.scss     | 30 +++++++
 src/scss/components/_sheet.scss               | 11 +++
 .../{_tabs.scss => _sheet_tab_nav.scss}       | 10 +--
 src/scss/ds4.scss                             |  5 +-
 .../sheets/actor/character-sheet.hbs          | 84 ++-----------------
 .../actor/components/character-header.hbs     | 25 ++++++
 .../components/character-progression.hbs      | 30 +++----
 .../actor/components/character-properties.hbs | 59 +++++++++++++
 src/templates/sheets/actor/creature-sheet.hbs | 13 +--
 src/templates/sheets/item/components/body.hbs |  8 +-
 13 files changed, 251 insertions(+), 140 deletions(-)
 create mode 100644 src/scss/components/_character_header.scss
 create mode 100644 src/scss/components/_character_properties.scss
 create mode 100644 src/scss/components/_sheet.scss
 rename src/scss/components/{_tabs.scss => _sheet_tab_nav.scss} (70%)
 create mode 100644 src/templates/sheets/actor/components/character-header.hbs
 create mode 100644 src/templates/sheets/actor/components/character-properties.hbs

diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts
index 82e58e8..a5f7466 100644
--- a/src/module/handlebars/handlebars-partials.ts
+++ b/src/module/handlebars/handlebars-partials.ts
@@ -8,6 +8,8 @@ export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
         "systems/ds4/templates/sheets/actor/components/biography.hbs",
         "systems/ds4/templates/sheets/actor/components/character-progression.hbs",
+        "systems/ds4/templates/sheets/actor/components/character-properties.hbs",
+        "systems/ds4/templates/sheets/actor/components/character-header.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",
diff --git a/src/scss/components/_character_header.scss b/src/scss/components/_character_header.scss
new file mode 100644
index 0000000..f69efd2
--- /dev/null
+++ b/src/scss/components/_character_header.scss
@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/typography";
+
+.ds4-character-header {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    gap: 1em;
+
+    &__img {
+        border: none;
+        cursor: pointer;
+        height: 100px;
+        width: 100px;
+    }
+
+    &__data {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__data-row {
+        align-content: center;
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        gap: 0.5em;
+        > * {
+            flex: 1;
+        }
+    }
+
+    &__name {
+        display: flex;
+        align-items: center;
+        border-bottom: 0;
+        margin: 0;
+    }
+
+    &__name-input {
+        @include typography.font-heading-upper;
+        background-color: transparent;
+        border: none;
+        flex: 1;
+        font-size: 1.25em;
+        height: auto;
+    }
+}
diff --git a/src/scss/components/_character_progression.scss b/src/scss/components/_character_progression.scss
index 8e316a8..d1d03d8 100644
--- a/src/scss/components/_character_progression.scss
+++ b/src/scss/components/_character_progression.scss
@@ -10,42 +10,39 @@
 @use "../utils/variables";
 @use "../utils/mixins";
 
-.progression {
-    .progression-entry {
-        @include mixins.mark-invalid-or-disabled-input;
+.ds4-character-progression {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.5em;
 
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
+    &__entry {
         align-items: center;
+        display: flex;
+        flex: 1;
+        gap: 0.25em;
+        justify-content: flex-end;
+    }
 
-        padding-right: 3px;
-        h2.progression-label {
-            @include typography.font-heading-upper;
-            display: block;
-            height: 50px;
-            padding: 0;
-            color: colors.$c-light-grey;
-            border: none;
-            line-height: 50px;
-            margin: variables.$margin-sm 0;
-            text-align: right;
-        }
-        input.progression-value {
-            margin-left: 5px;
-            flex: 0 0 40px;
-            text-align: left;
+    &__label {
+        @include typography.font-heading-upper;
+        border: none;
+        color: colors.$c-light-grey;
+        margin: 0;
+        padding: 0;
+        text-align: right;
+    }
 
-            &--slayer-points {
-                &::-webkit-inner-spin-button,
-                &::-webkit-outer-spin-button {
-                    -webkit-appearance: auto;
-                }
-                &:hover,
-                &:focus {
-                    -moz-appearance: auto;
-                }
+    &__input {
+        flex: 0 0 5ch;
+
+        &--slayer-points {
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: auto;
+            }
+            &:hover,
+            &:focus {
+                -moz-appearance: auto;
             }
         }
     }
diff --git a/src/scss/components/_character_properties.scss b/src/scss/components/_character_properties.scss
new file mode 100644
index 0000000..1962afd
--- /dev/null
+++ b/src/scss/components/_character_properties.scss
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/mixins";
+
+.ds4-character-properties {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.25em;
+
+    &__property {
+        flex: 1;
+    }
+
+    &__property-label {
+        font-size: 0.9em;
+        font-weight: bold;
+        white-space: nowrap;
+    }
+
+    &__property-multi-input {
+        display: flex;
+        gap: 0.125em;
+    }
+}
diff --git a/src/scss/components/_sheet.scss b/src/scss/components/_sheet.scss
new file mode 100644
index 0000000..2308aef
--- /dev/null
+++ b/src/scss/components/_sheet.scss
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_sheet_tab_nav.scss
similarity index 70%
rename from src/scss/components/_tabs.scss
rename to src/scss/components/_sheet_tab_nav.scss
index a16447a..9d86fd9 100644
--- a/src/scss/components/_tabs.scss
+++ b/src/scss/components/_sheet_tab_nav.scss
@@ -6,16 +6,12 @@
 
 @use "../utils/variables";
 
-nav.tabs {
+.ds4-sheet-tab-nav {
     height: auto;
     border-top: variables.$border-groove;
     border-bottom: variables.$border-groove;
-    .item {
-        font-weight: bold;
-        white-space: nowrap;
-    }
 
-    .item.active {
-        text-decoration: none;
+    &__item {
+        font-weight: bold;
     }
 }
diff --git a/src/scss/ds4.scss b/src/scss/ds4.scss
index 7e33edd..1185def 100644
--- a/src/scss/ds4.scss
+++ b/src/scss/ds4.scss
@@ -23,6 +23,7 @@
     @include meta.load-css("components/apps");
     @include meta.load-css("components/basic_property");
     @include meta.load-css("components/character_progression");
+    @include meta.load-css("components/character_properties");
     @include meta.load-css("components/character_values");
     @include meta.load-css("components/check");
     @include meta.load-css("components/checks");
@@ -33,10 +34,12 @@
     @include meta.load-css("components/currency");
     @include meta.load-css("components/description");
     @include meta.load-css("components/forms");
+    @include meta.load-css("components/character_header");
     @include meta.load-css("components/item_list");
     @include meta.load-css("components/profile");
     @include meta.load-css("components/rollable_image");
-    @include meta.load-css("components/tabs");
+    @include meta.load-css("components/sheet");
+    @include meta.load-css("components/sheet_tab_nav");
     @include meta.load-css("components/talent_rank_equation");
     @include meta.load-css("tabs/biography");
 }
diff --git a/src/templates/sheets/actor/character-sheet.hbs b/src/templates/sheets/actor/character-sheet.hbs
index 8e5eb27..6fc20bc 100644
--- a/src/templates/sheets/actor/character-sheet.hbs
+++ b/src/templates/sheets/actor/character-sheet.hbs
@@ -6,83 +6,17 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<form class="{{cssClass}} flexcol" autocomplete="off">
-    {{!-- Sheet Header --}}
-    <header class="sheet-header">
-        <img class="profile-img" src="{{data.img}}" data-edit="img" alt="Actor Icon" title="{{data.name}}" height="100"
-            width="100" />
-        <div class="header-fields flexrow">
-            <h1 class="charname">
-                <label for="name" class="hidden">Name</label>
-                <input name="name" type="text" id="name" value="{{data.name}}" placeholder="Name" />
-            </h1>
-            {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
-
-            <div class="flexrow basic-properties">
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
-                    <input type="text" name="data.baseInfo.race" id="data.baseInfo.race"
-                        value="{{data.data.baseInfo.race}}" data-dtype="String" />
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
-                    <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
-                        value="{{data.data.baseInfo.culture}}" data-dtype="String" />
-                </div>
-                <div class="basic-property flex125">
-                    <label class="basic-property-label"
-                        for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
-                    <div class="flexrow">
-                        <input id="data.progression.progressPoints.used" type="number"
-                            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">Total
-                            Progression Points</label>
-                        <input type="number" id="data.progression.progressPoints.total"
-                            name="data.progression.progressPoints.total"
-                            value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
-                    </div>
-                </div>
-                <div class="basic-property flex125">
-                    <label class="basic-property-label"
-                        for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
-                    <div class="flexrow">
-                        <input type="number" name="data.progression.talentPoints.used"
-                            id="data.progression.talentPoints.used" value="{{data.data.progression.talentPoints.used}}"
-                            data-dtype="Number" />
-                        <span class="input-divider"> / </span>
-                        <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
-                        <input type="number" name="data.progression.talentPoints.total"
-                            id="data.progression.talentPoints.total"
-                            value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
-                    </div>
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
-                    <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
-                        value="{{data.data.baseInfo.class}}" data-dtype="String" />
-                </div>
-                <div class="basic-property">
-                    <label class="basic-property-label"
-                        for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
-                    <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
-                        value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
-                </div>
-            </div>
-        </div>
-    </header>
+<form class="{{cssClass}} ds4-sheet" autocomplete="off">
+    {{!-- Character Header --}}
+    {{> systems/ds4/templates/sheets/actor/components/character-header.hbs}}
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" data-group="primary">
-        <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
+    <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="biography">{{localize 'DS4.HeadingBiography'}}</a>
     </nav>
 
     <!-- beautify ignore:start -->
diff --git a/src/templates/sheets/actor/components/character-header.hbs b/src/templates/sheets/actor/components/character-header.hbs
new file mode 100644
index 0000000..e2d279c
--- /dev/null
+++ b/src/templates/sheets/actor/components/character-header.hbs
@@ -0,0 +1,25 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<header class="ds4-character-header">
+    <img class="ds4-character-header__img" src="{{data.img}}" data-edit="img" alt="{{localize 'DS4.ActorImageAltText'}}"
+        title="{{data.name}}" height="100" width="100" />
+    <div class="ds4-character-header__data">
+        <div class="ds4-character-header__data-row">
+            <h1 class="ds4-character-header__name">
+                <label for="name" class="hidden">Name</label>
+                <input class="ds4-character-header__name-input" name="name" type="text" id="name" value="{{data.name}}"
+                    placeholder="{{localize 'DS4.PlaceholderName'}}" />
+            </h1>
+            {{> systems/ds4/templates/sheets/actor/components/character-progression.hbs}}
+        </div>
+        <div class="ds4-character-header__data-row">
+            {{> systems/ds4/templates/sheets/actor/components/character-properties.hbs}}
+        </div>
+    </div>
+</header>
diff --git a/src/templates/sheets/actor/components/character-progression.hbs b/src/templates/sheets/actor/components/character-progression.hbs
index 9788ea5..515d6a5 100644
--- a/src/templates/sheets/actor/components/character-progression.hbs
+++ b/src/templates/sheets/actor/components/character-progression.hbs
@@ -6,41 +6,41 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="progression flexrow">
-    <div class="progression-entry">
-        <h2 class="progression-label"><label for="data.combatValues.hitPoints.value"
+<div class="ds4-character-progression">
+    <div class="ds4-character-progression__entry">
+        <h2 class="ds4-character-progression__label"><label for="data.combatValues.hitPoints.value"
                 title="{{localize 'DS4.CombatValuesHitPointsCurrent'}}">{{localize
                 "DS4.CombatValuesHitPointsCurrentAbbr"}}</label>
         </h2>
-        <input class="progression-value" type="number" name="data.combatValues.hitPoints.value"
+        <input class="ds4-character-progression__input" type="number" name="data.combatValues.hitPoints.value"
             id="data.combatValues.hitPoints.value" value="{{data.data.combatValues.hitPoints.value}}"
             data-dtype="Number" />
     </div>
-    {{#if (eq actor.type "character")}}
+    {{#if (eq data.type "character")}}
     {{#if settings.showSlayerPoints}}
-    <div class="progression-entry">
-        <h2 class="progression-label"><label for="data.slayersPoints.value"
+    <div class="ds4-character-progression__entry">
+        <h2 class="ds4-character-progression__label"><label for="data.slayersPoints.value"
                 title="{{localize 'DS4.CharacterSlayerPoints'}}">{{localize "DS4.CharacterSlayerPointsAbbr"}}</label>
         </h2>
-        <input class="progression-value progression-value--slayer-points" type="number"
+        <input class="ds4-character-progression__input ds4-character-progression__input--slayer-points" type="number"
             max="{{data.data.slayerPoints.max}}" min="0" step="1" name="data.slayerPoints.value"
             id="data.slayersPoints.value" value="{{data.data.slayerPoints.value}}" data-dtype="Number" />
     </div>
     {{/if}}
-    <div class="progression-entry">
-        <h2 class="progression-label"><label for="data.progression.level"
+    <div class="ds4-character-progression__entry">
+        <h2 class="ds4-character-progression__label"><label for="data.progression.level"
                 title="{{localize 'DS4.CharacterProgressionLevel'}}">{{localize
                 "DS4.CharacterProgressionLevelAbbr"}}</label>
         </h2>
-        <input class="progression-value" type="number" min="0" name="data.progression.level" id="data.progression.level"
-            value="{{data.data.progression.level}}" data-dtype="Number" />
+        <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.level"
+            id="data.progression.level" value="{{data.data.progression.level}}" data-dtype="Number" />
     </div>
-    <div class="progression-entry">
-        <h2 class="progression-label"><label for="data.progression.experiencePoints"
+    <div class="ds4-character-progression__entry">
+        <h2 class="ds4-character-progression__label"><label for="data.progression.experiencePoints"
                 title="{{localize 'DS4.CharacterProgressionExperiencePoints'}}">{{localize
                 "DS4.CharacterProgressionExperiencePointsAbbr"}}</label>
         </h2>
-        <input class="progression-value" type="number" min="0" name="data.progression.experiencePoints"
+        <input class="ds4-character-progression__input" type="number" min="0" name="data.progression.experiencePoints"
             id="data.progression.experiencePoints" value="{{data.data.progression.experiencePoints}}"
             data-dtype="Number" />
     </div>
diff --git a/src/templates/sheets/actor/components/character-properties.hbs b/src/templates/sheets/actor/components/character-properties.hbs
new file mode 100644
index 0000000..0cc69f7
--- /dev/null
+++ b/src/templates/sheets/actor/components/character-properties.hbs
@@ -0,0 +1,59 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="ds4-character-properties">
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
+        <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.data.baseInfo.race}}"
+            data-dtype="String" />
+    </div>
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
+        <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
+            value="{{data.data.baseInfo.culture}}" data-dtype="String" />
+    </div>
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
+        <div class="ds4-character-properties__property-multi-input">
+            <input id="data.progression.progressPoints.used" type="number" 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">Total
+                Progression Points</label>
+            <input type="number" id="data.progression.progressPoints.total" name="data.progression.progressPoints.total"
+                value="{{data.data.progression.progressPoints.total}}" data-dtype="Number" />
+        </div>
+    </div>
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
+        <div class="ds4-character-properties__property-multi-input">
+            <input type="number" name="data.progression.talentPoints.used" id="data.progression.talentPoints.used"
+                value="{{data.data.progression.talentPoints.used}}" data-dtype="Number" />
+            <span class="input-divider"> / </span>
+            <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
+            <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+                value="{{data.data.progression.talentPoints.total}}" data-dtype="Number" />
+        </div>
+    </div>
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
+        <input type="text" id="data.baseInfo.class" name="data.baseInfo.class" value="{{data.data.baseInfo.class}}"
+            data-dtype="String" />
+    </div>
+    <div class="ds4-character-properties__property">
+        <label class="ds4-character-properties__property-label"
+            for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
+        <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
+            value="{{data.data.baseInfo.heroClass}}" data-dtype="String" />
+    </div>
+</div>
diff --git a/src/templates/sheets/actor/creature-sheet.hbs b/src/templates/sheets/actor/creature-sheet.hbs
index 1b034bc..3ae5da8 100644
--- a/src/templates/sheets/actor/creature-sheet.hbs
+++ b/src/templates/sheets/actor/creature-sheet.hbs
@@ -61,12 +61,13 @@ SPDX-License-Identifier: MIT
     </header>
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="sheet-tabs tabs" data-group="primary">
-        <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="item" data-tab="special-creature-abilities">{{localize 'DS4.HeadingSpecialCreatureAbilities'}}</a>
-        <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+    <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="special-creature-abilities">{{localize
+            'DS4.HeadingSpecialCreatureAbilities'}}</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="description">{{localize 'DS4.HeadingDescription'}}</a>
     </nav>
 
     {{!-- Sheet Body --}}
diff --git a/src/templates/sheets/item/components/body.hbs b/src/templates/sheets/item/components/body.hbs
index 8779e25..1fced58 100644
--- a/src/templates/sheets/item/components/body.hbs
+++ b/src/templates/sheets/item/components/body.hbs
@@ -8,11 +8,11 @@ SPDX-License-Identifier: MIT
 {{!-- Template for the common body (navigation & body sections) of all items. --}}
 
 {{!-- Sheet Tab Navigation --}}
-<nav class="sheet-tabs tabs" data-group="primary">
-    <a class="item" data-tab="description">{{localize "DS4.HeadingDescription"}}</a>
-    <a class="item" data-tab="effects">{{localize "DS4.HeadingEffects"}}</a>
+<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="item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
+    <a class="ds4-sheet-tab-nav__item item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
     {{/if}}
 </nav>