Add effects and tabs

css/fvtt-prism-rpg.css

@@ -13,6 +13,9 @@
   --font-secondary: "BaskervilleBold", serif;
   --logo-standard: url("../assets/ui/prism-rpg-logo-01.webp");
 }
+.tab[data-group]:not(.active) {
+  display: none;
+}
 .initiative-area {
   min-width: 8rem;
   max-width: 8rem;

lang/en.json

@@ -402,6 +402,7 @@
       "damage": "Damage",
       "description": "Description",
       "details": "Details",
+      "effects": "Effects",
       "dex": "DEX",
       "equipment": "Equipment",
       "experience": "Experience",

module/applications/sheets/armor-sheet.mjs

@@ -19,10 +19,32 @@ export default class PrismRPGArmorSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
 
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedPassiveDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.passiveDescription, { async: true })
     context.enrichedAugmentDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.augmentDescription, { async: true })

module/applications/sheets/base-item-sheet.mjs

@@ -75,6 +75,20 @@ export default class PrismRPGItemSheet extends HandlebarsApplicationMixin(foundr
   _onRender(context, options) {
     super._onRender(context, options)
     this.#dragDrop.forEach((d) => d.bind(this.element))
+
+    // Activate tab navigation
+    const nav = this.element.querySelector('nav.tabs[data-group]')
+    if (nav) {
+      const group = nav.dataset.group
+      nav.querySelectorAll('[data-tab]').forEach(link => {
+        link.addEventListener('click', (event) => {
+          event.preventDefault()
+          const tab = event.currentTarget.dataset.tab
+          this.tabGroups[group] = tab
+          this.render()
+        })
+      })
+    }
   }
 
   // #region Drag-and-Drop Workflow

module/applications/sheets/equipment-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGEquipmentSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
 
     // Enrich passive description if equipment is a kit

module/applications/sheets/miracle-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGMiracleSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     return context
   }

module/applications/sheets/shield-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGShieldSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedBlockAugmentDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.blockAugmentDescription, { async: true })
     return context

module/applications/sheets/spell-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGSpellSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedColorEffect = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.colorEffect, { async: true })
     context.enrichedAscensionEffect = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.ascensionEffect, { async: true })

module/applications/sheets/weapon-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGWeaponSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
 
     // Enrich descriptions for all passives

styles/global.less

@@ -6,6 +6,11 @@
   --logo-standard: url("../assets/ui/prism-rpg-logo-01.webp");
 }
 
+// Tab system - hide inactive tabs
+.tab[data-group]:not(.active) {
+  display: none;
+}
+
 .initiative-area {
   min-width: 8rem;
   max-width: 8rem;

templates/armor.hbs

@@ -10,105 +10,155 @@
     {{formInput fields.name value=source.name}}
   </div>
 
-  {{! Armor Type (Light/Medium/Heavy) }}
-  {{formField
-    systemFields.armorType
-    value=system.armorType
-    localize=true
-    label="PRISMRPG.Label.armorType"
-  }}
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
 
-  {{! Maximum Reduction Rating (MRR) }}
-  {{formField
-    systemFields.mrr
-    value=system.mrr
-    localize=true
-    label="PRISMRPG.Label.mrr"
-  }}
-
-  {{! Encumbrance Load }}
-  {{formField
-    systemFields.encLoad
-    value=system.encLoad
-    localize=true
-    label="PRISMRPG.Label.encumbranceLoad"
-  }}
-
-  {{! Equipment Status }}
-  {{formField
-    systemFields.isHelmet
-    value=system.isHelmet
-    localize=true
-    label="PRISMRPG.Label.isHelmet"
-  }}
-  {{formField
-    systemFields.equipped
-    value=system.equipped
-    localize=true
-    label="PRISMRPG.Label.equipped"
-  }}
-
-  {{! Prism RPG: Armor Passive }}
-  <fieldset class="armor-passive">
-    <legend>{{localize "PRISMRPG.Label.armorPassive"}}</legend>
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
+    {{! Armor Type (Light/Medium/Heavy) }}
     {{formField
-      systemFields.passive
-      value=system.passive
+      systemFields.armorType
+      value=system.armorType
       localize=true
-      label="PRISMRPG.Label.passiveName"
+      label="PRISMRPG.Label.armorType"
     }}
-    <label>{{localize "PRISMRPG.Label.passiveDescription"}}</label>
-    {{formInput
-      systemFields.passiveDescription
-      enriched=enrichedPassiveDescription
-      value=system.passiveDescription
-      name="system.passiveDescription"
-      toggled=true
-    }}
-  </fieldset>
 
-  {{! Prism RPG: Armor Augment }}
-  <fieldset class="armor-augment">
-    <legend>{{localize "PRISMRPG.Label.armorAugment"}}</legend>
+    {{! Maximum Reduction Rating (MRR) }}
     {{formField
-      systemFields.augment
-      value=system.augment
+      systemFields.mrr
+      value=system.mrr
       localize=true
-      label="PRISMRPG.Label.augmentName"
+      label="PRISMRPG.Label.mrr"
     }}
-    <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
-    {{formInput
-      systemFields.augmentDescription
-      enriched=enrichedAugmentDescription
-      value=system.augmentDescription
-      name="system.augmentDescription"
-      toggled=true
-    }}
-  </fieldset>
 
-  {{! Cost }}
-  {{formField
-    systemFields.cost
-    value=system.cost
-    localize=true
-    label="PRISMRPG.Label.cost"
-  }}
-  {{formField
-    systemFields.money
-    value=system.money
-    localize=true
-    label="PRISMRPG.Label.currency"
-  }}
-
-  {{! Description }}
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
+    {{! Encumbrance Load }}
+    {{formField
+      systemFields.encLoad
+      value=system.encLoad
+      localize=true
+      label="PRISMRPG.Label.encumbranceLoad"
     }}
-  </fieldset>
+
+    {{! Equipment Status }}
+    {{formField
+      systemFields.isHelmet
+      value=system.isHelmet
+      localize=true
+      label="PRISMRPG.Label.isHelmet"
+    }}
+    {{formField
+      systemFields.equipped
+      value=system.equipped
+      localize=true
+      label="PRISMRPG.Label.equipped"
+    }}
+
+    {{! Cost }}
+    {{formField
+      systemFields.cost
+      value=system.cost
+      localize=true
+      label="PRISMRPG.Label.cost"
+    }}
+    {{formField
+      systemFields.money
+      value=system.money
+      localize=true
+      label="PRISMRPG.Label.currency"
+    }}
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
+    {{! Description }}
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! Prism RPG: Armor Passive }}
+    <fieldset class="armor-passive">
+      <legend>{{localize "PRISMRPG.Label.armorPassive"}}</legend>
+      {{formField
+        systemFields.passive
+        value=system.passive
+        localize=true
+        label="PRISMRPG.Label.passiveName"
+      }}
+      <label>{{localize "PRISMRPG.Label.passiveDescription"}}</label>
+      {{formInput
+        systemFields.passiveDescription
+        enriched=enrichedPassiveDescription
+        value=system.passiveDescription
+        name="system.passiveDescription"
+        toggled=true
+      }}
+    </fieldset>
+
+    {{! Prism RPG: Armor Augment }}
+    <fieldset class="armor-augment">
+      <legend>{{localize "PRISMRPG.Label.armorAugment"}}</legend>
+      {{formField
+        systemFields.augment
+        value=system.augment
+        localize=true
+        label="PRISMRPG.Label.augmentName"
+      }}
+      <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
+      {{formInput
+        systemFields.augmentDescription
+        enriched=enrichedAugmentDescription
+        value=system.augmentDescription
+        name="system.augmentDescription"
+        toggled=true
+      }}
+    </fieldset>
+
+    {{! Cost }}
+    {{formField
+      systemFields.cost
+      value=system.cost
+      localize=true
+      label="PRISMRPG.Label.cost"
+    }}
+    {{formField
+      systemFields.money
+      value=system.money
+      localize=true
+      label="PRISMRPG.Label.currency"
+    }}
+  </div>
+
 </section>

templates/equipment.hbs

@@ -9,12 +9,39 @@
     />
     {{formInput fields.name value=source.name}}
   </div>
+
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
   {{formField systemFields.encLoad value=system.encLoad localize=true}}
   {{formField systemFields.cost value=system.cost localize=true}}
   {{formField systemFields.money value=system.money localize=true}}
 
   {{formField systemFields.isKit value=system.isKit localize=true label="PRISMRPG.Label.isKit"}}
+  </div>
 
+  {{! Onglet Description }}
+  <div class="tab" data-group="primary" data-tab="description">
+  <fieldset>
+    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+    {{formInput
+      systemFields.description
+      enriched=enrichedDescription
+      value=system.description
+      name="system.description"
+      toggled=true
+    }}
+  </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab" data-group="primary" data-tab="effects">
   {{#if system.isKit}}
     {{! Kit Passive }}
     <fieldset class="kit-passive">
@@ -73,16 +100,6 @@
       {{/unless}}
     </fieldset>
   {{/if}}
-
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
+  </div>
 
 </section>

templates/miracle.hbs

@@ -10,157 +10,192 @@
     {{formInput fields.name value=source.name}}
   </div>
 
-  {{! Prism RPG: Miracle Type }}
-  {{formField
-    systemFields.miracleType
-    value=system.miracleType
-    localize=true
-    label="PRISMRPG.Label.miracleType"
-  }}
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
 
-  {{! Prism RPG: APC (Action Point Cost) }}
-  {{formField
-    systemFields.apc
-    value=system.apc
-    localize=true
-    label="PRISMRPG.Label.apc"
-  }}
-
-  {{! Prism RPG: Faith Cost }}
-  {{formField
-    systemFields.faithCost
-    value=system.faithCost
-    localize=true
-    label="PRISMRPG.Label.faithCost"
-  }}
-
-  {{! Prism RPG: Divine Favor }}
-  {{formField
-    systemFields.divineFavor
-    value=system.divineFavor
-    localize=true
-    label="PRISMRPG.Label.divineFavor"
-  }}
-
-  {{! Prism RPG: Miracle Augment }}
-  <fieldset class="miracle-augment">
-    <legend>{{localize "PRISMRPG.Label.miracleAugment"}}</legend>
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
+    {{! Prism RPG: Miracle Type }}
     {{formField
-      systemFields.augment
-      value=system.augment
+      systemFields.miracleType
+      value=system.miracleType
       localize=true
-      label="PRISMRPG.Label.augmentName"
+      label="PRISMRPG.Label.miracleType"
     }}
-    <div class="form-group">
-      <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
+
+    {{! Prism RPG: APC (Action Point Cost) }}
+    {{formField
+      systemFields.apc
+      value=system.apc
+      localize=true
+      label="PRISMRPG.Label.apc"
+    }}
+
+    {{! Prism RPG: Faith Cost }}
+    {{formField
+      systemFields.faithCost
+      value=system.faithCost
+      localize=true
+      label="PRISMRPG.Label.faithCost"
+    }}
+
+    {{! Prism RPG: Divine Favor }}
+    {{formField
+      systemFields.divineFavor
+      value=system.divineFavor
+      localize=true
+      label="PRISMRPG.Label.divineFavor"
+    }}
+
+    {{! Miracle Components (includes Religious) }}
+    <fieldset class="miracle-components">
+      <legend>{{localize "PRISMRPG.Label.components"}}</legend>
+      <div class="shift-right">
+        {{formField
+          systemFields.components.fields.verbal
+          value=system.components.verbal
+          localize=true
+          label="PRISMRPG.Label.verbal"
+        }}
+        {{formField
+          systemFields.components.fields.somatic
+          value=system.components.somatic
+          localize=true
+          label="PRISMRPG.Label.somatic"
+        }}
+        {{formField
+          systemFields.components.fields.material
+          value=system.components.material
+          localize=true
+          label="PRISMRPG.Label.material"
+        }}
+        {{formField
+          systemFields.components.fields.catalyst
+          value=system.components.catalyst
+          localize=true
+          label="PRISMRPG.Label.catalyst"
+        }}
+        {{formField
+          systemFields.components.fields.religious
+          value=system.components.religious
+          localize=true
+          label="PRISMRPG.Label.religious"
+        }}
+      </div>
+      {{formField
+        systemFields.materialComponent
+        value=system.materialComponent
+        localize=true
+        label="PRISMRPG.Label.materialComponent"
+      }}
+      {{formField
+        systemFields.catalyst
+        value=system.catalyst
+        localize=true
+        label="PRISMRPG.Label.catalystDetails"
+      }}
+    </fieldset>
+
+    {{! Miracle Properties }}
+    {{formField
+      systemFields.prayerTime
+      value=system.prayerTime
+      localize=true
+      label="PRISMRPG.Label.prayerTime"
+    }}
+    {{formField
+      systemFields.miracleRange
+      value=system.miracleRange
+      localize=true
+      label="PRISMRPG.Label.range"
+    }}
+    {{formField
+      systemFields.areaAffected
+      value=system.areaAffected
+      localize=true
+      label="PRISMRPG.Label.areaAffected"
+    }}
+    {{formField
+      systemFields.duration
+      value=system.duration
+      localize=true
+      label="PRISMRPG.Label.duration"
+    }}
+    {{formField
+      systemFields.savingThrow
+      value=system.savingThrow
+      localize=true
+      label="PRISMRPG.Label.savingThrow"
+    }}
+
+    {{! Legacy Level field }}
+    {{formField
+      systemFields.level
+      value=system.level
+      localize=true
+      label="PRISMRPG.Label.level"
+    }}
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
-        systemFields.augmentDescription
-        enriched=enrichedAugmentDescription
-        value=system.augmentDescription
-        name="system.augmentDescription"
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
         toggled=true
       }}
-    </div>
-  </fieldset>
+    </fieldset>
+  </div>
 
-  {{! Miracle Components (includes Religious) }}
-  <fieldset class="miracle-components">
-    <legend>{{localize "PRISMRPG.Label.components"}}</legend>
-    <div class="shift-right">
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! Prism RPG: Miracle Augment }}
+    <fieldset class="miracle-augment">
+      <legend>{{localize "PRISMRPG.Label.miracleAugment"}}</legend>
       {{formField
-        systemFields.components.fields.verbal
-        value=system.components.verbal
+        systemFields.augment
+        value=system.augment
         localize=true
-        label="PRISMRPG.Label.verbal"
+        label="PRISMRPG.Label.augmentName"
       }}
-      {{formField
-        systemFields.components.fields.somatic
-        value=system.components.somatic
-        localize=true
-        label="PRISMRPG.Label.somatic"
-      }}
-      {{formField
-        systemFields.components.fields.material
-        value=system.components.material
-        localize=true
-        label="PRISMRPG.Label.material"
-      }}
-      {{formField
-        systemFields.components.fields.catalyst
-        value=system.components.catalyst
-        localize=true
-        label="PRISMRPG.Label.catalyst"
-      }}
-      {{formField
-        systemFields.components.fields.religious
-        value=system.components.religious
-        localize=true
-        label="PRISMRPG.Label.religious"
-      }}
-    </div>
-    {{formField
-      systemFields.materialComponent
-      value=system.materialComponent
-      localize=true
-      label="PRISMRPG.Label.materialComponent"
-    }}
-    {{formField
-      systemFields.catalyst
-      value=system.catalyst
-      localize=true
-      label="PRISMRPG.Label.catalystDetails"
-    }}
-  </fieldset>
-
-  {{! Miracle Properties }}
-  {{formField
-    systemFields.prayerTime
-    value=system.prayerTime
-    localize=true
-    label="PRISMRPG.Label.prayerTime"
-  }}
-  {{formField
-    systemFields.miracleRange
-    value=system.miracleRange
-    localize=true
-    label="PRISMRPG.Label.range"
-  }}
-  {{formField
-    systemFields.areaAffected
-    value=system.areaAffected
-    localize=true
-    label="PRISMRPG.Label.areaAffected"
-  }}
-  {{formField
-    systemFields.duration
-    value=system.duration
-    localize=true
-    label="PRISMRPG.Label.duration"
-  }}
-  {{formField
-    systemFields.savingThrow
-    value=system.savingThrow
-    localize=true
-    label="PRISMRPG.Label.savingThrow"
-  }}
-
-  {{! Legacy Level field }}
-  {{formField
-    systemFields.level
-    value=system.level
-    localize=true
-    label="PRISMRPG.Label.level"
-  }}
-
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
+      <div class="form-group">
+        <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
+        {{formInput
+          systemFields.augmentDescription
+          enriched=enrichedAugmentDescription
+          value=system.augmentDescription
+          name="system.augmentDescription"
+          toggled=true
+        }}
+      </div>
+    </fieldset>
+  </div>
 
 </section>

templates/shield.hbs

@@ -10,95 +10,130 @@
     {{formInput fields.name value=source.name}}
   </div>
 
-  <div class="flexrow">
-    <div class="align-top">
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
 
-      {{! Prism RPG: Shield Type (Buckler/Light/Heavy/Tower) }}
-      {{formField
-        systemFields.shieldType
-        value=system.shieldType
-        localize=true
-        label="PRISMRPG.Label.shieldType"
-      }}
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
+    <div class="flexrow">
+      <div class="align-top">
 
-      {{! Prism RPG: Block APC (Action Point Cost) }}
-      {{formField
-        systemFields.apc
-        value=system.apc
-        localize=true
-        label="PRISMRPG.Label.blockAPC"
-      }}
+        {{! Prism RPG: Shield Type (Buckler/Light/Heavy/Tower) }}
+        {{formField
+          systemFields.shieldType
+          value=system.shieldType
+          localize=true
+          label="PRISMRPG.Label.shieldType"
+        }}
 
-      {{! Prism RPG: Shield Rating (SR) }}
-      {{formField
-        systemFields.sr
-        value=system.sr
-        localize=true
-        label="PRISMRPG.Label.shieldRating"
-      }}
+        {{! Prism RPG: Block APC (Action Point Cost) }}
+        {{formField
+          systemFields.apc
+          value=system.apc
+          localize=true
+          label="PRISMRPG.Label.blockAPC"
+        }}
 
-      {{formField
-        systemFields.equipped
-        value=system.equipped
-        localize=true
-        label="PRISMRPG.Label.equipped"
-      }}
+        {{! Prism RPG: Shield Rating (SR) }}
+        {{formField
+          systemFields.sr
+          value=system.sr
+          localize=true
+          label="PRISMRPG.Label.shieldRating"
+        }}
 
-    </div>
+        {{formField
+          systemFields.equipped
+          value=system.equipped
+          localize=true
+          label="PRISMRPG.Label.equipped"
+        }}
 
-    <div class="align-top">
+      </div>
 
-      {{formField
-        systemFields.encLoad
-        value=system.encLoad
-        localize=true
-        label="PRISMRPG.Label.encumbranceLoad"
-      }}
+      <div class="align-top">
 
-      {{formField
-        systemFields.cost
-        value=system.cost
-        localize=true
-        label="PRISMRPG.Label.cost"
-      }}
-      {{formField
-        systemFields.money
-        value=system.money
-        localize=true
-        label="PRISMRPG.Label.currency"
-      }}
+        {{formField
+          systemFields.encLoad
+          value=system.encLoad
+          localize=true
+          label="PRISMRPG.Label.encumbranceLoad"
+        }}
 
+        {{formField
+          systemFields.cost
+          value=system.cost
+          localize=true
+          label="PRISMRPG.Label.cost"
+        }}
+        {{formField
+          systemFields.money
+          value=system.money
+          localize=true
+          label="PRISMRPG.Label.currency"
+        }}
+
+      </div>
     </div>
   </div>
 
-  {{! Prism RPG: Block Augment }}
-  <fieldset class="shield-block-augment">
-    <legend>{{localize "PRISMRPG.Label.blockAugment"}}</legend>
-    {{formField
-      systemFields.blockAugment
-      value=system.blockAugment
-      localize=true
-      label="PRISMRPG.Label.blockAugmentName"
-    }}
-    <label>{{localize "PRISMRPG.Label.blockAugmentDescription"}}</label>
-    {{formInput
-      systemFields.blockAugmentDescription
-      enriched=enrichedBlockAugmentDescription
-      value=system.blockAugmentDescription
-      name="system.blockAugmentDescription"
-      toggled=true
-    }}
-  </fieldset>
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
+  </div>
 
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! Prism RPG: Block Augment }}
+    <fieldset class="shield-block-augment">
+      <legend>{{localize "PRISMRPG.Label.blockAugment"}}</legend>
+      {{formField
+        systemFields.blockAugment
+        value=system.blockAugment
+        localize=true
+        label="PRISMRPG.Label.blockAugmentName"
+      }}
+      <label>{{localize "PRISMRPG.Label.blockAugmentDescription"}}</label>
+      {{formInput
+        systemFields.blockAugmentDescription
+        enriched=enrichedBlockAugmentDescription
+        value=system.blockAugmentDescription
+        name="system.blockAugmentDescription"
+        toggled=true
+      }}
+    </fieldset>
+  </div>
 
 </section>

templates/spell.hbs

@@ -10,145 +10,180 @@
     {{formInput fields.name value=source.name}}
   </div>
 
-  {{! Prism RPG: Mana Cost }}
-  {{formField
-    systemFields.manaCost
-    value=system.manaCost
-    localize=true
-    label="PRISMRPG.Label.manaCost"
-  }}
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
 
-  {{! Prism RPG: Mana Upkeep }}
-  {{formField
-    systemFields.manaUpkeep
-    value=system.manaUpkeep
-    localize=true
-    label="PRISMRPG.Label.manaUpkeep"
-  }}
-
-  {{! Prism RPG: APC (Action Point Cost) }}
-  {{formField
-    systemFields.apc
-    value=system.apc
-    localize=true
-    label="PRISMRPG.Label.apc"
-  }}
-
-  {{! Prism RPG: Prism Color }}
-  {{formField
-    systemFields.color
-    value=system.color
-    localize=true
-    label="PRISMRPG.Label.prismColor"
-  }}
-
-  {{! Prism RPG: Color Effect }}
-  <fieldset class="spell-color-effect">
-    <legend>{{localize "PRISMRPG.Label.colorEffect"}}</legend>
-    {{formInput
-      systemFields.colorEffect
-      enriched=enrichedColorEffect
-      value=system.colorEffect
-      name="system.colorEffect"
-      toggled=true
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
+    {{! Prism RPG: Mana Cost }}
+    {{formField
+      systemFields.manaCost
+      value=system.manaCost
+      localize=true
+      label="PRISMRPG.Label.manaCost"
     }}
-  </fieldset>
 
-  {{! Prism RPG: Spell Ascension }}
-  <fieldset class="spell-ascension">
-    <legend>{{localize "PRISMRPG.Label.spellAscension"}}</legend>
-    <div class="form-group">
-      <label>{{localize "PRISMRPG.Label.canAscend"}}</label>
-      <input
-        type="checkbox"
-        name="system.canAscend"
-        {{checked system.canAscend}}
-      />
-      <p class="hint">{{localize "PRISMRPG.Hint.spellAscension"}}</p>
-    </div>
-    {{#if system.canAscend}}
-      <label>{{localize "PRISMRPG.Label.ascensionEffect"}}</label>
+    {{! Prism RPG: Mana Upkeep }}
+    {{formField
+      systemFields.manaUpkeep
+      value=system.manaUpkeep
+      localize=true
+      label="PRISMRPG.Label.manaUpkeep"
+    }}
+
+    {{! Prism RPG: APC (Action Point Cost) }}
+    {{formField
+      systemFields.apc
+      value=system.apc
+      localize=true
+      label="PRISMRPG.Label.apc"
+    }}
+
+    {{! Prism RPG: Prism Color }}
+    {{formField
+      systemFields.color
+      value=system.color
+      localize=true
+      label="PRISMRPG.Label.prismColor"
+    }}
+
+    {{! Spell Properties }}
+    {{formField
+      systemFields.memorized
+      value=system.memorized
+      localize=true
+      label="PRISMRPG.Label.memorized"
+    }}
+    {{formField
+      systemFields.level
+      value=system.level
+      localize=true
+      label="PRISMRPG.Label.level"
+    }}
+    {{formField
+      systemFields.targets
+      value=system.targets
+      localize=true
+      label="PRISMRPG.Label.targets"
+    }}
+    {{formField
+      systemFields.resolve
+      value=system.resolve
+      localize=true
+      label="PRISMRPG.Label.resolve"
+    }}
+    {{formField
+      systemFields.castingTime
+      value=system.castingTime
+      localize=true
+      label="PRISMRPG.Label.castingTime"
+    }}
+    {{formField
+      systemFields.spellRange
+      value=system.spellRange
+      localize=true
+      label="PRISMRPG.Label.range"
+    }}
+    {{formField
+      systemFields.areaAffected
+      value=system.areaAffected
+      localize=true
+      label="PRISMRPG.Label.areaAffected"
+    }}
+    {{formField
+      systemFields.duration
+      value=system.duration
+      localize=true
+      label="PRISMRPG.Label.duration"
+    }}
+    {{formField
+      systemFields.savingThrow
+      value=system.savingThrow
+      localize=true
+      label="PRISMRPG.Label.savingThrow"
+    }}
+    {{formField
+      systemFields.keywords
+      value=system.keywords
+      localize=true
+      label="PRISMRPG.Label.keywords"
+    }}
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
-        systemFields.ascensionEffect
-        enriched=enrichedAscensionEffect
-        value=system.ascensionEffect
-        name="system.ascensionEffect"
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
         toggled=true
       }}
-    {{/if}}
-  </fieldset>
+    </fieldset>
+  </div>
 
-  {{! Spell Properties }}
-  {{formField
-    systemFields.memorized
-    value=system.memorized
-    localize=true
-    label="PRISMRPG.Label.memorized"
-  }}
-  {{formField
-    systemFields.level
-    value=system.level
-    localize=true
-    label="PRISMRPG.Label.level"
-  }}
-  {{formField
-    systemFields.targets
-    value=system.targets
-    localize=true
-    label="PRISMRPG.Label.targets"
-  }}
-  {{formField
-    systemFields.resolve
-    value=system.resolve
-    localize=true
-    label="PRISMRPG.Label.resolve"
-  }}
-  {{formField
-    systemFields.castingTime
-    value=system.castingTime
-    localize=true
-    label="PRISMRPG.Label.castingTime"
-  }}
-  {{formField
-    systemFields.spellRange
-    value=system.spellRange
-    localize=true
-    label="PRISMRPG.Label.range"
-  }}
-  {{formField
-    systemFields.areaAffected
-    value=system.areaAffected
-    localize=true
-    label="PRISMRPG.Label.areaAffected"
-  }}
-  {{formField
-    systemFields.duration
-    value=system.duration
-    localize=true
-    label="PRISMRPG.Label.duration"
-  }}
-  {{formField
-    systemFields.savingThrow
-    value=system.savingThrow
-    localize=true
-    label="PRISMRPG.Label.savingThrow"
-  }}
-  {{formField
-    systemFields.keywords
-    value=system.keywords
-    localize=true
-    label="PRISMRPG.Label.keywords"
-  }}
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! Prism RPG: Color Effect }}
+    <fieldset class="spell-color-effect">
+      <legend>{{localize "PRISMRPG.Label.colorEffect"}}</legend>
+      {{formInput
+        systemFields.colorEffect
+        enriched=enrichedColorEffect
+        value=system.colorEffect
+        name="system.colorEffect"
+        toggled=true
+      }}
+    </fieldset>
 
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
+    {{! Prism RPG: Spell Ascension }}
+    <fieldset class="spell-ascension">
+      <legend>{{localize "PRISMRPG.Label.spellAscension"}}</legend>
+      <div class="form-group">
+        <label>{{localize "PRISMRPG.Label.canAscend"}}</label>
+        <input
+          type="checkbox"
+          name="system.canAscend"
+          {{checked system.canAscend}}
+        />
+        <p class="hint">{{localize "PRISMRPG.Hint.spellAscension"}}</p>
+      </div>
+      {{#if system.canAscend}}
+        <label>{{localize "PRISMRPG.Label.ascensionEffect"}}</label>
+        {{formInput
+          systemFields.ascensionEffect
+          enriched=enrichedAscensionEffect
+          value=system.ascensionEffect
+          name="system.ascensionEffect"
+          toggled=true
+        }}
+      {{/if}}
+    </fieldset>
+  </div>
 
 </section>

templates/weapon.hbs

@@ -10,6 +10,15 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
   <div class="flexrow">
     <div class="align-top">
 
@@ -100,7 +109,24 @@
       {{formField systemFields.money value=system.money localize=true}}
     </div>
   </div>
+  </div>
 
+  {{! Onglet Description }}
+  <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
   {{! Prism RPG: Weapon Passives }}
   <fieldset class="weapon-passives">
     <legend>
@@ -176,15 +202,6 @@
       <p class="hint">{{localize "PRISMRPG.Hint.noManeuvers"}}</p>
     {{/unless}}
   </fieldset>
+  </div>
 
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 </section>