Begin work on the Untyped item info

module/handlebars.mjs

@@ -32,6 +32,7 @@ export const partials = [
 
 export const icons = [
 	`caret-right.svg`,
+	`caret-down.svg`,
 	`garbage-bin.svg`,
 	`chat-bubble.svg`,
 	`dice/d4.svg`,

module/helpers/index.mjs

@@ -20,6 +20,7 @@ export default {
 	// Simple helpers
 	"dd-stringify": v => JSON.stringify(v, null, `  `),
 	"dd-empty": v => v.length == 0,
+	"dd-set-has": (s, k) => s.has(k),
 
 	// Logic helpers
 	"eq": (a, b) => a == b,

module/sheets/GenericActorSheet.mjs

@@ -40,7 +40,7 @@ export class GenericActorSheet extends ActorSheet {
 		if (!this.isEditable) return;
 		console.debug(`.dungeon | Generic sheet adding listeners`);
 
-		html.find(`summary`).on(`click`, this._handleSummaryToggle.bind(this));
+		html.find(`[data-collapse-id]`).on(`click`, this._handleSummaryToggle.bind(this));
 		html.find(`[data-roll-formula]`).on(`click`, this._handleRoll.bind(this));
 		html.find(`[data-embedded-update-on="change"]`)
 			.on(`change`, this.genericEmbeddedUpdate.bind(this));
@@ -102,21 +102,19 @@ export class GenericActorSheet extends ActorSheet {
 	};
 
 	async _handleSummaryToggle($e) {
-		let data = $e.currentTarget.dataset;
+		let target = $e.currentTarget;
-		let open = $e.currentTarget.parentNode.open;
+		let parent = target.parentElement;
-		console.debug(`.dungeon | Collapse ID: ${data.collapseId} (open: ${open})`);
+		let data = target.dataset;
+		console.debug(`.dungeon | Collapse ID: ${data.collapseId}`);
 
-		/*
+		if (!this._expanded.has(data.collapseId)) {
-		This seeming inversion of logic is due to the fact that this handler
-		gets called before the element is updated to include/reflect the
-		change, so if the parentNode doesn't actually have it, then we're
-		opening it and vice-versa.
-		*/
-		if (!open) {
 			this._expanded.add(data.collapseId);
 		} else {
 			this._expanded.delete(data.collapseId);
 		};
+		if (parent.nodeName !== "DETAILS") {
+			this.render();
+		}
 	};
 
 	async openEmbeddedSheet($event) {

styles/sheets/actor/char-sheet/v2/pages/inventory.scss

@@ -100,6 +100,12 @@
 			grid-template-columns: 1fr 1fr;
 			gap: 8px;
 		}
+
+		.untyped-list {
+			display: flex;
+			gap: 8px;
+			flex-direction: column;
+		}
 	}
 
 	.material {
@@ -112,6 +118,8 @@
 		border-radius: 4px;
 
 		&__label {
+			font-family: var(--inventory-item-name-font);
+			font-size: var(--inventory-item-name-font-size);
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -153,4 +161,29 @@
 			}
 		}
 	}
+
+	.untyped {
+		@include material.elevate(1);
+		padding: 8px;
+		border-radius: 4px;
+		color: var(--inventory-material-color);
+
+		&__header {
+			display: flex;
+			gap: 8px;
+			align-items: center;
+
+			button {
+				color: var(--inventory-material-color);
+			}
+		}
+		&__name {
+			flex-grow: 1;
+			font-family: var(--inventory-item-name-font);
+			font-size: var(--inventory-item-name-font-size);
+		}
+
+		&__content {
+		}
+	}
 }

styles/sheets/actor/char-sheet/v2/themes/dark.scss

@@ -43,7 +43,15 @@ $body-font: sans-serif;
 	--skill-training-select-text-color: #{$on-surface};
 	--skill-roll-button-text-color: #{$on-surface};
 
+	/* Common Inventory Item Variables */
+	--inventory-item-name-font: #{$body-font};
+	--inventory-item-name-font-size: 0.875rem;
+
+	/* Material inventory item details */
 	--inventory-material-color: white;
 	--inventory-material-hover-color: white;
 	--inventory-material-focus-color: white;
+
+	/* Untyped (custom) inventory item details */
+	--inventory-untyped-color: white;
 }

templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs

@@ -1,6 +1,33 @@
-<div class="untyped">
+<section class="untyped">
-	{{item.name}}
+	<div
-	<button type="button">-</button>
+		class="untyped__header"
-	X
+		data-collapse-id="{{item.uuid}}"
-	<button type="button">+</button>
+	>
+		<button
+			type="button"
+			class="equal-padding reduced-padding"
+			data-collapse-id="{{item.uuid}}"
+			aria-label="Toggle the extra information's visibility"
+		>
+			<div aria-hidden="true" class="icon icon--12">
+				{{#if (dd-set-has meta.expanded item.uuid)}}
+					{{{ icons.caret-down }}}
+				{{else}}
+					{{{ icons.caret-right }}}
+				{{/if}}
 			</div>
+		</button>
+		<h3 class="untyped__name">
+			{{item.name}}
+		</h3>
+		<div class="untyped__quantity">
+			(x {{item.system.quantity}})
+		</div>
+	</div>
+	{{#if (dd-set-has meta.expanded item.uuid)}}
+		<hr>
+		<div class="untyped__content">
+			Some Description
+		</div>
+	{{/if}}
+</section>