Fix tab jumping on form input changes by preventing sheet re-rendering

- Increase tab navigation height from 2x to 2.5x line-height
- Add proper flexbox centering for tab items with icons
- Add gap between icon and text (0.25rem)
- Add padding (0.5rem vertical, 0.75rem horizontal) for better touch targets
- Reduce icon size to 0.875rem for better visual balance
- Remove fixed line-height to allow proper vertical centering
- Maintain text shadow effect for active tabs

The tab navigation now properly accommodates FontAwesome icons while
maintaining good visual hierarchy and touch accessibility.

scss/components/shared/_form_group.scss

@@ -4,12 +4,13 @@
  * SPDX-License-Identifier: MIT
  */
 
-.ds4-form-group {
+.ds4-form-group,
+.ds4-item-sheet .form-group {
   clear: both;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 3px 0;
+  margin: 8px 0;
   align-items: center;
 
   &--start {
@@ -24,4 +25,78 @@
     flex: 2;
     line-height: var(--input-height);
   }
+
+  // Add spacing between form groups
+  & + & {
+    margin-top: 12px;
+  }
+
+  // Style for slim form groups (input + select combinations)
+  &.slim {
+    margin: 6px 0;
+
+    .form-fields {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      input {
+        flex: 1;
+        min-width: 60px;
+      }
+
+      select {
+        flex: 0 0 auto;
+        min-width: 120px;
+        width: auto !important;
+      }
+
+      label {
+        flex: 0 0 auto;
+        margin-right: 8px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// Style standard Foundry form-fields containers
+.ds4-item-sheet .form-fields {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+
+  input, select, textarea {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    padding: 4px 8px;
+    color: var(--color-text-primary);
+
+    &:focus {
+      border-color: var(--color-text-accent);
+      box-shadow: 0 0 3px var(--color-text-accent);
+    }
+  }
+
+  select {
+    background: rgba(255, 255, 255, 0.05);
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23efe6d8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 8px;
+    padding-right: 24px;
+    width: auto !important;
+  }
+}
+
+// Improve label styling
+.ds4-item-sheet .form-group > label {
+  flex: 0 0 160px;
+  font-weight: bold;
+  color: var(--color-form-label);
+  line-height: var(--input-height);
+  margin-right: 12px;
 }

scss/components/shared/_sheet_body.scss

@@ -4,12 +4,14 @@
  * SPDX-License-Identifier: MIT
  */
 
-.ds4-sheet-body {
+.ds4-sheet-body,
+.sheet-body {
   height: 100%;
   overflow-y: auto;
 
   // Prevent double scrollbars on biography tab
-  .ds4-sheet-tab.tab.biography.active {
+  .ds4-sheet-tab.tab.biography.active,
+  .tab[data-tab="biography"].active {
     overflow: hidden;
   }
 }

scss/components/shared/_sheet_tab.scss

@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-.ds4-sheet-tab {
+.ds4-sheet-tab,
+.tab {
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;

scss/components/shared/_sheet_tab_nav.scss

@@ -6,20 +6,31 @@
 
 @use "../../utils/variables";
 
-.ds4-sheet-tab-nav {
+.ds4-sheet-tab-nav,
+nav.tabs {
   border-bottom: variables.$border-groove;
   border-top: variables.$border-groove;
   display: flex;
   flex-wrap: nowrap;
-  height: calc(2 * var(--line-height-16));
+  height: calc(2.5 * var(--line-height-16));
   justify-content: space-around;
-  line-height: calc(2 * var(--line-height-16));
   margin: variables.$margin-sm 0;
 
-  &__item {
+  .ds4-sheet-tab-nav__item,
+  .item {
     flex: 0 1 auto !important; // necessary to override the styling from lang-de, see https://gitlab.com/henry4k/foundryvtt-lang-de/-/issues/9
     font-weight: bold;
     white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    line-height: 1;
+
+    i {
+      font-size: 0.875rem;
+    }
 
     &.active {
       text-shadow: 0 0 variables.$padding-md var(--color-shadow-primary);

scss/global/_fonts.scss

@@ -59,13 +59,11 @@
   --ds4-font-heading: "Wood Stamp", sans-serif;
 }
 
-// Apply Wood Stamp font only to DS4 sheet-specific elements
-.ds4-actor-sheet h1,
+// Apply Wood Stamp font only to DS4 sheet-specific elements (excluding window titles)
 .ds4-actor-sheet h2,
 .ds4-actor-sheet h4,
 .ds4-actor-sheet h5,
 .ds4-actor-sheet h6,
-.ds4-item-sheet h1,
 .ds4-item-sheet h2,
 .ds4-item-sheet h4,
 .ds4-item-sheet h5,
@@ -76,3 +74,11 @@
   text-transform: uppercase;
   font-weight: 100 !important;
 }
+
+// Keep window titles readable with standard font
+.ds4-actor-sheet .window-title,
+.ds4-item-sheet .window-title {
+  font-family: var(--font-sans) !important;
+  text-transform: none !important;
+  font-weight: normal !important;
+}

src/apps/actor/base-sheet.js

@@ -40,16 +40,37 @@ export class DS4ActorSheet extends foundry.applications.api.HandlebarsApplicatio
       deleteEffect: DS4ActorSheet.prototype._onDeleteEffect,
       changeEffect: DS4ActorSheet.prototype._onChangeEffect,
       sortItems: DS4ActorSheet.prototype._onSortItems,
-      changeTab: DS4ActorSheet.prototype._onChangeTab,
+
       editImage: DS4ActorSheet.prototype._onEditImage,
     },
   };
 
-  static TABS = {};
+  static TABS = {
+    primary: {
+      initial: "values",
+      tabs: [
+        { id: "values", label: "DS4.HeadingValues", icon: "fas fa-chart-bar" },
+        { id: "inventory", label: "DS4.HeadingInventory", icon: "fas fa-backpack" },
+        { id: "spells", label: "DS4.HeadingSpells", icon: "fas fa-magic" },
+        { id: "abilities", label: "DS4.HeadingAbilities", icon: "fas fa-fist-raised" },
+        { id: "effects", label: "DS4.HeadingEffects", icon: "fas fa-sparkles" },
+        { id: "biography", label: "DS4.HeadingBiography", icon: "fas fa-book" }
+      ]
+    }
+  };
 
   constructor(options = {}) {
     super(options);
-    this.activeTab = "values"; // Default active tab
+
+    // Initialize tabGroups with default values
+    if (!this.tabGroups) {
+      this.tabGroups = {};
+    }
+    // Set default tab for primary group
+    if (!this.tabGroups.primary) {
+      this.tabGroups.primary = this.constructor.TABS.primary?.initial || "values";
+    }
+
   }
 
   get title() {
@@ -125,6 +146,9 @@ export class DS4ActorSheet extends foundry.applications.api.HandlebarsApplicatio
     // Add tooltips to data
     this.addTooltipsToData(context);
 
+    // Add tabs configuration using ApplicationTab typedef
+    context.tabs = this._prepareTabs("primary");
+
     return context;
   }
 
@@ -518,86 +542,145 @@ export class DS4ActorSheet extends foundry.applications.api.HandlebarsApplicatio
    * @param {Event} event - The triggering event
    * @param {HTMLElement} target - The target element
    */
-  async _onChangeTab(event, target) {
-    event.preventDefault();
-    const tab = target.dataset.tab;
-    if (!tab) return;
 
-    // Store the active tab
-    this.activeTab = tab;
+  /**
+   * Prepare tabs for a given group using ApplicationTab typedef
+   * @param {string} group - The tab group identifier
+   * @returns {Record<string, ApplicationTab>} Prepared tab data
+   */
+  _prepareTabs(group) {
 
-    // Find tab navigation elements
-    const nav = target.closest(".ds4-sheet-tab-nav");
-    const sheet = this.element.querySelector(".ds4-sheet-body");
+    const config = this.constructor.TABS[group];
+    if (!config) return {};
 
-    if (!nav || !sheet) return;
+    // Ensure tabGroups is initialized
+    if (!this.tabGroups[group]) {
+      this.tabGroups[group] = config.initial;
 
-    // Update navigation active state
-    nav.querySelectorAll(".ds4-sheet-tab-nav__item").forEach((item) => {
-      item.classList.remove("active");
-    });
-    target.classList.add("active");
-
-    // Update tab content visibility
-    sheet.querySelectorAll(".ds4-sheet-tab").forEach((tabContent) => {
-      tabContent.classList.remove("active");
-    });
-
-    const activeTab = sheet.querySelector(`.ds4-sheet-tab[data-tab="${tab}"]`);
-    if (activeTab) {
-      activeTab.classList.add("active");
     }
+
+    const tabs = {};
+    for (const tabConfig of config.tabs) {
+      const isActive = this.tabGroups[group] === tabConfig.id;
+
+      tabs[tabConfig.id] = {
+        id: tabConfig.id,
+        group: group,
+        icon: tabConfig.icon,
+        label: game.i18n.localize(tabConfig.label),
+        active: isActive,
+        cssClass: isActive ? "active" : ""
+      };
+    }
+
+
+    return tabs;
   }
 
   /** @override */
   async _onRender(context, options) {
-    await super._onRender(context, options);
 
-    // Initialize first tab as active
-    this._initializeTabs();
+    await super._onRender(context, options);
+    this._initializeTabHandlers();
   }
 
   /**
-   * Initialize tab state - show first tab, hide others
+   * Initialize tab event handlers manually since ApplicationV2 doesn't do this automatically
    */
-  _initializeTabs() {
-    const nav = this.element.querySelector(".ds4-sheet-tab-nav");
-    const sheet = this.element.querySelector(".ds4-sheet-body");
+  _initializeTabHandlers() {
+    const tabNavigation = this.element.querySelector('.tabs[data-group="primary"]');
+    if (!tabNavigation) return;
 
-    if (!nav || !sheet) {
-      return;
-    }
+    // Remove existing event listeners to prevent memory leaks
+    this._removeTabHandlers();
 
-    // Get all tab navigation items and tab content
-    const navItems = nav.querySelectorAll(".ds4-sheet-tab-nav__item");
-    const tabContents = sheet.querySelectorAll(".ds4-sheet-tab");
+    // Store tab navigation reference for cleanup
+    this._tabNavigation = tabNavigation;
 
-    // Remove active class from all items first
-    navItems.forEach((item) => item.classList.remove("active"));
-    tabContents.forEach((content) => content.classList.remove("active"));
+    // Create bound handler function for later removal
+    this._tabClickHandler = (event) => {
+      event.preventDefault();
+      const item = event.target.closest('.item[data-tab]');
+      if (!item) return;
 
-    // Find the currently active tab or default to first
-    let targetTab = this.activeTab;
-    let targetNavItem = nav.querySelector(`[data-tab="${targetTab}"]`);
-
-    // If stored tab doesn't exist, fall back to first tab
-    if (!targetNavItem) {
-      targetNavItem = navItems[0];
-      targetTab = targetNavItem?.dataset.tab;
-    }
-
-    // Set target tab navigation as active
-    if (targetNavItem && targetTab) {
-      targetNavItem.classList.add("active");
-
-      // Set corresponding tab content as active
-      const activeTabContent = sheet.querySelector(`.ds4-sheet-tab[data-tab="${targetTab}"]`);
-      if (activeTabContent) {
-        activeTabContent.classList.add("active");
+      const tabId = item.dataset.tab;
+      const groupId = item.dataset.group;
+      if (tabId && groupId) {
+        this.changeTab(tabId, groupId);
       }
+    };
+
+    // Add single delegated event listener to the navigation container
+    tabNavigation.addEventListener('click', this._tabClickHandler);
+  }
+
+  /**
+   * Remove tab event handlers to prevent memory leaks
+   */
+  _removeTabHandlers() {
+    if (this._tabNavigation && this._tabClickHandler) {
+      this._tabNavigation.removeEventListener('click', this._tabClickHandler);
     }
   }
 
+  /**
+   * Override changeTab to ensure proper tab switching without forced re-render
+   */
+  changeTab(tab, group, options = {}) {
+    // Call parent changeTab method
+    const result = super.changeTab(tab, group, options);
+
+    // Update tab display without full re-render
+    this._updateTabDisplay(tab, group);
+
+    return result;
+  }
+
+  /**
+   * Update tab display without full re-render for better performance
+   */
+  _updateTabDisplay(activeTab, group) {
+    const tabNavigation = this.element.querySelector(`.tabs[data-group="${group}"]`);
+    const tabContent = this.element.querySelector('.sheet-body');
+
+    if (!tabNavigation || !tabContent) return;
+
+    // Update navigation active states
+    const navItems = tabNavigation.querySelectorAll('.item[data-tab]');
+    navItems.forEach(item => {
+      if (item.dataset.tab === activeTab) {
+        item.classList.add('active');
+      } else {
+        item.classList.remove('active');
+      }
+    });
+
+    // Update content tab visibility
+    const contentTabs = tabContent.querySelectorAll('.tab[data-tab]');
+    contentTabs.forEach(tab => {
+      if (tab.dataset.tab === activeTab) {
+        tab.classList.add('active');
+      } else {
+        tab.classList.remove('active');
+      }
+    });
+  }
+
+  /**
+   * Override _onClose to cleanup event listeners
+   */
+  async _onClose(options) {
+    this._removeTabHandlers();
+    return super._onClose(options);
+  }
+
+
+
+
+
+
+
+
   /**
    * Handle editing the actor's portrait image
    * @param {Event} event - The triggering event

src/apps/actor/creature-sheet.js

@@ -14,6 +14,20 @@ export class DS4CreatureActorSheet extends DS4ActorSheet {
     classes: ["sheet", "ds4-actor-sheet", "ds4-creature-sheet", "themed"],
   };
 
+  static TABS = {
+    primary: {
+      initial: "values",
+      tabs: [
+        { id: "values", label: "DS4.HeadingValues", icon: "fas fa-chart-bar" },
+        { id: "inventory", label: "DS4.HeadingInventory", icon: "fas fa-backpack" },
+        { id: "spells", label: "DS4.HeadingSpells", icon: "fas fa-magic" },
+        { id: "abilities", label: "DS4.HeadingAbilities", icon: "fas fa-fist-raised" },
+        { id: "effects", label: "DS4.HeadingEffects", icon: "fas fa-sparkles" },
+        { id: "description", label: "DS4.HeadingDescription", icon: "fas fa-file-text" }
+      ]
+    }
+  };
+
   /** @override */
   async _prepareContext(options) {
     const context = await super._prepareContext(options);
@@ -29,6 +43,9 @@ export class DS4CreatureActorSheet extends DS4ActorSheet {
       );
     }
 
+    // Add tabs configuration using ApplicationTab typedef
+    context.tabs = this._prepareTabs("primary");
+
     return context;
   }
 }

src/apps/item-sheet.js

@@ -30,16 +30,30 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
       createEffect: DS4ItemSheet.prototype._onCreateEffect,
       editEffect: DS4ItemSheet.prototype._onEditEffect,
       deleteEffect: DS4ItemSheet.prototype._onDeleteEffect,
-      changeTab: DS4ItemSheet.prototype._onChangeTab,
       editImage: DS4ItemSheet.prototype._onEditImage,
     },
   };
 
-  static TABS = {};
+  static TABS = {
+    primary: {
+      initial: "description",
+      tabs: [
+        { id: "description", label: "DS4.HeadingDescription", icon: "fas fa-book" },
+        { id: "effects", label: "DS4.HeadingEffects", icon: "fas fa-sparkles" }
+      ]
+    }
+  };
 
   constructor(options = {}) {
     super(options);
-    this.activeTab = "description"; // Default active tab
+    // Initialize tabGroups with default values
+    if (!this.tabGroups) {
+      this.tabGroups = {};
+    }
+    // Set default tab for primary group
+    if (!this.tabGroups.primary) {
+      this.tabGroups.primary = this.constructor.TABS.primary?.initial || "description";
+    }
   }
 
   get title() {
@@ -84,6 +98,9 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
     // Add configuration
     context.config = CONFIG.DS4;
 
+    // Add tabs configuration using ApplicationTab typedef
+    context.tabs = this._prepareTabs("primary");
+
     // Add enriched effects
     context.enrichedEffects = [];
     if (this.item.effects && this.item.effects.size > 0) {
@@ -213,41 +230,7 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
     }
   }
 
-  /**
-   * Handle tab changes manually for custom tab behavior
-   * @param {Event} event - The triggering event
-   * @param {HTMLElement} target - The target element
-   */
-  async _onChangeTab(event, target) {
-    event.preventDefault();
-    const tab = target.dataset.tab;
-    if (!tab) return;
 
-    // Store the active tab
-    this.activeTab = tab;
-
-    // Find tab navigation elements
-    const nav = target.closest(".ds4-sheet-tab-nav");
-    const sheet = this.element.querySelector(".ds4-sheet-body");
-
-    if (!nav || !sheet) return;
-
-    // Update navigation active state
-    nav.querySelectorAll(".ds4-sheet-tab-nav__item").forEach((item) => {
-      item.classList.remove("active");
-    });
-    target.classList.add("active");
-
-    // Update tab content visibility
-    sheet.querySelectorAll(".ds4-sheet-tab").forEach((tabContent) => {
-      tabContent.classList.remove("active");
-    });
-
-    const activeTab = sheet.querySelector(`.ds4-sheet-tab[data-tab="${tab}"]`);
-    if (activeTab) {
-      activeTab.classList.add("active");
-    }
-  }
 
   /**
    * Handle editing the items's image
@@ -269,54 +252,173 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
   /** @override */
   async _onRender(context, options) {
     await super._onRender(context, options);
-
-    // Initialize first tab as active
-    this._initializeTabs();
-  }
-
-  /** @override */
-  async _onClose(options) {
-    await super._onClose(options);
+    this._initializeTabHandlers();
   }
 
   /**
-   * Initialize tab state - show first tab, hide others
+   * Initialize tab event handlers manually since ApplicationV2 doesn't do this automatically
    */
-  _initializeTabs() {
-    const nav = this.element.querySelector(".ds4-sheet-tab-nav");
-    const sheet = this.element.querySelector(".ds4-sheet-body");
-
-    if (!nav || !sheet) {
+  _initializeTabHandlers() {
+    const tabNavigation = this.element.querySelector('.tabs[data-group="primary"]');
+    if (!tabNavigation) {
       return;
     }
 
-    // Get all tab navigation items and tab content
-    const navItems = nav.querySelectorAll(".ds4-sheet-tab-nav__item");
-    const tabContents = sheet.querySelectorAll(".ds4-sheet-tab");
+    // Remove existing event listeners to prevent memory leaks
+    this._removeTabHandlers();
 
-    // Remove active class from all items first
-    navItems.forEach((item) => item.classList.remove("active"));
-    tabContents.forEach((content) => content.classList.remove("active"));
+    // Store tab navigation reference for cleanup
+    this._tabNavigation = tabNavigation;
 
-    // Find the currently active tab or default to first
-    let targetTab = this.activeTab;
-    let targetNavItem = nav.querySelector(`[data-tab="${targetTab}"]`);
-
-    // If stored tab doesn't exist, fall back to first tab
-    if (!targetNavItem) {
-      targetNavItem = navItems[0];
-      targetTab = targetNavItem?.dataset.tab;
-    }
-
-    // Set target tab navigation as active
-    if (targetNavItem && targetTab) {
-      targetNavItem.classList.add("active");
-
-      // Set corresponding tab content as active
-      const activeTabContent = sheet.querySelector(`.ds4-sheet-tab[data-tab="${targetTab}"]`);
-      if (activeTabContent) {
-        activeTabContent.classList.add("active");
+    // Create bound handler function for later removal
+    this._tabClickHandler = (event) => {
+      event.preventDefault();
+      const item = event.target.closest('.item[data-tab]');
+      if (!item) {
+        return;
       }
+
+      const tabId = item.dataset.tab;
+      const groupId = item.dataset.group;
+      if (tabId && groupId) {
+        this.changeTab(tabId, groupId);
+      }
+    };
+
+    // Add single delegated event listener to the navigation container
+    tabNavigation.addEventListener('click', this._tabClickHandler);
+  }
+
+  /**
+   * Override form submission to prevent re-rendering
+   */
+  async _processSubmitData(event, form, submitData, options = {}) {
+    // Always prevent re-rendering on form updates
+    options.render = false;
+    return super._processSubmitData(event, form, submitData, options);
+  }
+
+  /**
+   * Remove tab event handlers to prevent memory leaks
+   */
+  _removeTabHandlers() {
+    if (this._tabNavigation && this._tabClickHandler) {
+      this._tabNavigation.removeEventListener('click', this._tabClickHandler);
     }
   }
+
+  /**
+   * Override changeTab to ensure proper tab switching without forced re-render
+   */
+  changeTab(tab, group, options = {}) {
+    // Call parent changeTab method
+    const result = super.changeTab(tab, group, options);
+
+    // Update tab display without full re-render
+    this._updateTabDisplay(tab, group);
+
+    return result;
+  }
+
+  /**
+   * Update tab display without full re-render for better performance
+   */
+  _updateTabDisplay(activeTab, group) {
+    const tabNavigation = this.element.querySelector(`.tabs[data-group="${group}"]`);
+    const tabContent = this.element.querySelector('.sheet-body');
+
+    if (!tabNavigation || !tabContent) return;
+
+    // Update navigation active states
+    const navItems = tabNavigation.querySelectorAll('.item[data-tab]');
+    navItems.forEach(item => {
+      if (item.dataset.tab === activeTab) {
+        item.classList.add('active');
+      } else {
+        item.classList.remove('active');
+      }
+    });
+
+    // Update content tab visibility
+    const contentTabs = tabContent.querySelectorAll('.tab[data-tab]');
+    contentTabs.forEach(tab => {
+      if (tab.dataset.tab === activeTab) {
+        tab.classList.add('active');
+      } else {
+        tab.classList.remove('active');
+      }
+    });
+  }
+
+  /**
+   * Override _onClose to cleanup event listeners
+   */
+  async _onClose(options) {
+    this._removeTabHandlers();
+    return super._onClose(options);
+  }
+
+  /**
+   * Prepare tabs for a given group using ApplicationTab typedef
+   * @param {string} group - The tab group identifier
+   * @returns {Record<string, ApplicationTab>} Prepared tab data
+   */
+  _prepareTabs(group) {
+    const config = this._getTabsConfigForItemType();
+    if (!config) return {};
+
+    // Ensure tabGroups is initialized
+    if (!this.tabGroups[group]) {
+      this.tabGroups[group] = config.initial || "description";
+    }
+
+    const tabs = {};
+    for (const tabConfig of config.tabs) {
+      const isActive = this.tabGroups[group] === tabConfig.id;
+      tabs[tabConfig.id] = {
+        id: tabConfig.id,
+        group: group,
+        icon: tabConfig.icon,
+        label: game.i18n.localize(tabConfig.label),
+        active: isActive,
+        cssClass: isActive ? "active" : ""
+      };
+    }
+
+    return tabs;
+  }
+
+  /**
+   * Get tab configuration based on item type
+   * @returns {Object} Tab configuration for this item type
+   */
+  _getTabsConfigForItemType() {
+    const tabs = [
+      { id: "description", label: "DS4.HeadingDescription", icon: "fas fa-book" }
+    ];
+
+    // Item types that have properties tabs
+    const itemsWithProperties = [
+      "weapon", "armor", "shield", "equipment", "loot",
+      "spell", "talent", "specialCreatureAbility"
+    ];
+
+    if (itemsWithProperties.includes(this.item.type)) {
+      tabs.push({
+        id: "properties",
+        label: "DS4.HeadingProperties",
+        icon: "fas fa-cogs"
+      });
+    }
+
+    // All items can have effects
+    tabs.push({
+      id: "effects",
+      label: "DS4.HeadingEffects",
+      icon: "fas fa-sparkles"
+    });
+
+    return { tabs, initial: "description" };
+  }
+
 }

templates/sheets/actor/character-sheet.hbs

@@ -13,38 +13,47 @@ SPDX-License-Identifier: MIT
     {{/systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="ds4-sheet-tab-nav tabs" data-group="primary">
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
-    <!-- beautify ignore:start -->
-    <!-- prettier-ignore-start -->
-{{!-- Sheet Body (remove indentation to avoid annoying Handlebars auto-indent) --}}
-<section class="ds4-sheet-body">
-{{!-- Values Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}
+    {{!-- Sheet Body --}}
+    <section class="sheet-body">
+        {{!-- Values Tab --}}
+        <div class="tab {{#if tabs.values}}{{tabs.values.cssClass}}{{/if}}" data-tab="values" data-group="primary">
+            {{> 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}}
+        </div>
 
-{{!-- Inventory Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/character-inventory.hbs}}
+        {{!-- Inventory Tab --}}
+        <div class="tab {{#if tabs.inventory}}{{tabs.inventory.cssClass}}{{/if}}" data-tab="inventory" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/character-inventory.hbs}}
+        </div>
 
-{{!-- Spells Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
+        {{!-- Spells Tab --}}
+        <div class="tab {{#if tabs.spells}}{{tabs.spells.cssClass}}{{/if}}" data-tab="spells" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
+        </div>
 
-{{!-- Abilities Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/character-abilities.hbs}}
+        {{!-- Abilities Tab --}}
+        <div class="tab {{#if tabs.abilities}}{{tabs.abilities.cssClass}}{{/if}}" data-tab="abilities" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/character-abilities.hbs}}
+        </div>
 
-{{!-- Effects Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+        {{!-- Effects Tab --}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+        </div>
 
-{{!-- Biography Tab --}}
-{{> systems/ds4/templates/sheets/actor/tabs/biography.hbs}}
-
-</section>
-    <!-- prettier-ignore-end -->
-    <!-- beautify ignore:end -->
+        {{!-- Biography Tab --}}
+        <div class="tab {{#if tabs.biography}}{{tabs.biography.cssClass}}{{/if}}" data-tab="biography" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/biography.hbs}}
+        </div>
+    </section>
 </form>

templates/sheets/actor/creature-sheet.hbs

@@ -13,33 +13,45 @@ SPDX-License-Identifier: MIT
     {{/systems/ds4/templates/sheets/actor/components/actor-header.hbs}}
 
     {{!-- Sheet Tab Navigation --}}
-    <nav class="ds4-sheet-tab-nav" data-group="primary">
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Values Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}
+        <div class="tab {{#if tabs.values}}{{tabs.values.cssClass}}{{/if}}" data-tab="values" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/values.hbs}}
+        </div>
 
         {{!-- Inventory Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/creature-inventory.hbs}}
+        <div class="tab {{#if tabs.inventory}}{{tabs.inventory.cssClass}}{{/if}}" data-tab="inventory" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/creature-inventory.hbs}}
+        </div>
 
         {{!-- Spells Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
+        <div class="tab {{#if tabs.spells}}{{tabs.spells.cssClass}}{{/if}}" data-tab="spells" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
+        </div>
 
         {{!-- Abilities Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/creature-abilities.hbs}}
+        <div class="tab {{#if tabs.abilities}}{{tabs.abilities.cssClass}}{{/if}}" data-tab="abilities" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/creature-abilities.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+        </div>
 
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/actor/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/actor/tabs/description.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/actor/tabs/biography.hbs

@@ -4,14 +4,12 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<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 -->
-        {{!-- remove indentation to avoid annoying Handlebars auto-indent --}}
+<div class="ds4-biography-tab-content">
+    <!-- beautify ignore:start -->
+    <!-- prettier-ignore-start -->
+    {{!-- remove indentation to avoid annoying Handlebars auto-indent --}}
 {{> systems/ds4/templates/sheets/actor/components/profile.hbs}}
 {{> systems/ds4/templates/sheets/actor/components/biography.hbs}}
-        <!-- beautify ignore:end -->
-        <!-- prettier-ignore-end -->
-    </div>
+    <!-- beautify ignore:end -->
+    <!-- prettier-ignore-end -->
 </div>

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

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<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)}}
@@ -64,4 +64,3 @@ SPDX-License-Identifier: MIT
     {{/unless}}
     {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='alphabet'}}
-</div>

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

@@ -5,7 +5,5 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<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>
+{{> systems/ds4/templates/sheets/actor/components/currency.hbs}}
+{{> systems/ds4/templates/sheets/actor/components/items-overview.hbs}}

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

@@ -5,15 +5,13 @@ SPDX-FileCopyrightText: 2021 Gesina Schwalbe
 SPDX-License-Identifier: MIT
 --}}
 
-<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'}}
-        {{#each itemsByType.specialCreatureAbility as |item id|}}
-        {{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs item=item}}
-        {{/each}}
-    </ol>
-    {{/unless}}
-    {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
-    documentType='item' type='specialCreatureAbility'}}
-</div>
+{{#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'}}
+    {{#each itemsByType.specialCreatureAbility as |item id|}}
+    {{> systems/ds4/templates/sheets/actor/components/item-list-entry.hbs item=item}}
+    {{/each}}
+</ol>
+{{/unless}}
+{{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+documentType='item' type='specialCreatureAbility'}}

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

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

templates/sheets/actor/tabs/description.hbs

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

templates/sheets/actor/tabs/effects.hbs

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

templates/sheets/actor/tabs/spells.hbs

@@ -42,7 +42,7 @@ titleKey=titleKey}}
 
 {{!-- ======================================================================== --}}
 
-<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
@@ -79,6 +79,7 @@ titleKey=titleKey}}
             '')}}{{item.system.spellModifier.numerical}}{{else}}{{item.system.spellModifier.complex}}{{/if}}
         </div>
 
+
         {{!-- max. distance --}}
         {{> distanceUnit titleKey='DS4.SpellDistance' unitDatum=item.system.maxDistance
         config=@root/config}}
@@ -96,4 +97,3 @@ titleKey=titleKey}}
     {{/unless}}
     {{> systems/ds4/templates/sheets/shared/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
     documentType='item' type='spell'}}
-</div>

templates/sheets/actor/tabs/values.hbs

@@ -4,8 +4,6 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<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}}
-</div>
+{{> 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}}

templates/sheets/item/alphabet-sheet.hbs

@@ -9,17 +9,25 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{tabs.description.cssClass}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{tabs.effects.cssClass}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/armor-sheet.hbs

@@ -9,28 +9,35 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> 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}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

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

@@ -88,10 +88,8 @@ SPDX-License-Identifier: MIT
     <div class="form-group">
         <label for="system.allowsDefense-{{data._id}}" title="{{localize 'DS4.SpellAllowsDefenseDescription'}}">{{localize
             "DS4.SpellAllowsDefense"}}</label>
-        <div class="form-fields">
-            <input id="system.allowsDefense-{{data._id}}" data-dtype="Boolean" type="checkbox" name="system.allowsDefense"
-                {{checked data.system.allowsDefense}} />
-        </div>
+        <input id="system.allowsDefense-{{data._id}}" data-dtype="Boolean" type="checkbox" name="system.allowsDefense"
+            {{checked data.system.allowsDefense}} />
     </div>
     <div class="form-group slim">
         <label title="{{localize 'DS4.SpellMinimumLevelDescription'}}">{{localize "DS4.SpellMinimumLevel"}}</label>

templates/sheets/item/equipment-sheet.hbs

@@ -9,26 +9,33 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{#if isOwned}}
+            {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+            {{/if}}
+            {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/language-sheet.hbs

@@ -9,17 +9,25 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/loot-sheet.hbs

@@ -9,23 +9,30 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/racialAbility-sheet.hbs

@@ -9,17 +9,25 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/shield-sheet.hbs

@@ -9,27 +9,34 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> 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}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/specialCreatureAbility-sheet.hbs

@@ -9,23 +9,30 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/components/properties/special-creature-ability.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/spell-sheet.hbs

@@ -9,26 +9,33 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{tabs.description.cssClass}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
-        {{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
+        <div class="tab {{tabs.properties.cssClass}}" data-tab="properties" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/components/properties/spell.hbs}}
+            {{#if isOwned}}
+            {{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
+            {{/if}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{tabs.effects.cssClass}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/tabs/description.hbs

@@ -4,17 +4,15 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="ds4-sheet-tab tab description" data-group="primary" data-tab="description">
-    {{#if editable}}
-        <prose-mirror
-            name="system.description"
-            button="true"
-            editable="{{editable}}"
-            toggled="false"
-            value="{{data.system.description}}">
-            {{{enrichedDescription}}}
-        </prose-mirror>
-    {{else}}
+{{#if editable}}
+    <prose-mirror
+        name="system.description"
+        button="true"
+        editable="{{editable}}"
+        toggled="false"
+        value="{{data.system.description}}">
         {{{enrichedDescription}}}
-    {{/if}}
-</div>
+    </prose-mirror>
+{{else}}
+    {{{enrichedDescription}}}
+{{/if}}

templates/sheets/item/tabs/effects.hbs

@@ -4,15 +4,13 @@ SPDX-FileCopyrightText: 2021 Johannes Loher
 SPDX-License-Identifier: MIT
 --}}
 
-<div class="ds4-sheet-tab tab effects" data-group="primary" data-tab="effects">
-    {{#unless (isEmpty enrichedEffects)}}
-    <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 enrichedEffects 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>
+{{#unless (isEmpty enrichedEffects)}}
+<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 enrichedEffects 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'}}

templates/sheets/item/tabs/properties.hbs

@@ -4,6 +4,4 @@ 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>
+{{> @partial-block}}

templates/sheets/item/talent-sheet.hbs

@@ -9,23 +9,30 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/components/properties/talent.hbs}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>

templates/sheets/item/weapon-sheet.hbs

@@ -9,27 +9,34 @@ SPDX-License-Identifier: MIT
     {{> 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-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
-        <a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
+    <nav class="tabs" data-group="primary">
+        {{#each tabs}}
+        <a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
+            {{#if icon}}<i class="{{icon}}"></i>{{/if}}
+            {{label}}
+        </a>
+        {{/each}}
     </nav>
 
     {{!-- Sheet Body --}}
-    <section class="ds4-sheet-body">
+    <section class="sheet-body">
         {{!-- Description Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        <div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
+        </div>
 
         {{!-- 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}}
+        <div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
+            {{> 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}}
+        </div>
 
         {{!-- Effects Tab --}}
-        {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        <div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
+            {{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
+        </div>
     </section>
 </form>