Get the item list styles finished, and start working on the weight summary / carry capacity for the tab

assets/icons/chevron.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M7.637 25.637a8.997 8.997 0 0 1 12.727 0L50 55.274l29.637-29.637c3.515-3.516 9.21-3.516 12.727 0s3.515 9.21 0 12.727l-36 36a8.997 8.997 0 0 1-12.727 0l-36-36a8.997 8.997 0 0 1 0-12.727" fill-rule="evenodd" fill="var(--colour, currentcolor)"/></svg>

module/apps/PlayerSheet.mjs

@@ -241,7 +241,14 @@ export class PlayerSheet extends
 			});
 		};
 
-		ctx.totalWeight = toPrecision(totalWeight, 2) + weightUnit;
+		totalWeight = toPrecision(totalWeight, 2);
+		ctx.totalWeight = totalWeight + weightUnit;
+		console.log({
+			totalWeight,
+			carryCapacity: this.actor.system.carryCapacity,
+			percent: Math.round(totalWeight / this.actor.system.carryCapacity * 100),
+		});
+		ctx.carryCapacityPercent = Math.round(totalWeight / this.actor.system.carryCapacity * 100);
 	};
 
 	async _prepareItem(item) {
@@ -319,19 +326,19 @@ export class PlayerSheet extends
 	 * @this {PlayerSheet}
 	 */
 	static async #toggleExpand(event, target) {
-		if (event.srcElement instanceof HTMLInputElement) { return };
-
-		const { itemUuid } = target.closest(`[data-item-uuid]`)?.dataset ?? {};
+		const element = target.closest(`[data-item-uuid]`);
+		const { itemUuid } = element?.dataset ?? {};
 		if (!itemUuid) { return };
 
 		const expanded = this.#expandedItems.has(itemUuid);
-		if (expanded) {
-			this.#expandedItems.delete(itemUuid);
-			target.nextElementSibling.dataset.expanded = false;
-		} else {
-			this.#expandedItems.add(itemUuid);
-			target.nextElementSibling.dataset.expanded = true;
-		}
+		const newExpanded = !expanded;
+
+		this.#expandedItems[newExpanded ? `add` : `delete`]?.(itemUuid);
+		target.dataset.expanded = newExpanded;
+		const collapses = element.querySelectorAll(`[data-expanded]`);
+		collapses.forEach(el => {
+			el.dataset.expanded = newExpanded;
+		});
 	};
 	// #endregion Actions
 };

styles/Apps/PlayerSheet.css

@@ -37,7 +37,21 @@
 		}
 	}
 
+	.item-list-header {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		border-radius: 6px 6px 0 0;
+		padding: 4px;
+		margin-bottom: 2px;
+		background: var(--item-list-header-background);
+		color: var(--item-list-header-color);
+	}
+
 	.item-list {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -46,8 +60,8 @@
 	.item {
 		background: var(--item-card-background);
 		color: var(--item-card-color);
-		border-radius: 4px;
 		overflow: hidden;
+		margin-bottom: 0;
 
 		.summary {
 			display: grid;
@@ -79,13 +93,27 @@
 				opacity: 90%;
 			}
 
-			input {
+			input, button {
 				background: var(--item-card-header-input-background);
 				color: var(--item-card-header-input-color);
 				text-align: center;
 			}
 		}
 
+		.expand-button {
+			border: none;
+			aspect-ratio: 1;
+
+			&:focus-visible {
+				filter: brightness(150%);
+				outline: none;
+			}
+
+			&[data-expanded="true"] {
+				rotate: 180deg;
+			}
+		}
+
 		.full-details {
 			padding: 4px;
 
@@ -93,6 +121,10 @@
 				display: none;
 			}
 		}
+
+		&:last-child {
+			border-radius: 0 0 6px 6px;
+		}
 	}
 
 	.content {

styles/resets/button.css

@@ -1,3 +1,8 @@
 .taf > .window-content button {
 	height: initial;
+
+	&:focus {
+		outline: none;
+		box-shadow: none;
+	}
 }

styles/themes/dark.css

@@ -7,6 +7,8 @@
 	--tab-button-active-border: rebeccapurple;
 	--tab-button-hover-bg: var(--color-cool-3);
 
+	--item-list-header-background: #171e26;
+	--item-list-header-color: white;
 	--item-card-background: #1d262f;
 	--item-card-color: white;
 	--item-card-header-background: #242d38;

styles/themes/variables.css

@@ -0,0 +1,3 @@
+:root {
+	--steel-650: #2b3642;
+}

templates/PlayerSheet/item-lists.hbs

@@ -3,14 +3,23 @@
 	data-group="primary"
 	data-tab="items"
 >
-	Total Weight: {{totalWeight}}
-	<hr>
+	<section>
+		Total Weight: {{totalWeight}}
+		/
+		<input
+			type="number"
+			name="system.carryCapacity"
+			value="{{system.carryCapacity}}"
+		>
+
+		({{ carryCapacityPercent }}%)
+	</section>
 	{{#each itemGroups as | group |}}
 		<section>
-			<div class="header">
-				<span class="name">
+			<div class="item-list-header">
+				<div class="grow">
 					{{ group.name }}
-				</span>
+				</div>
 				<span class="weight">
 					{{ group.weight }}
 				</span>

templates/PlayerSheet/item.hbs

@@ -2,12 +2,7 @@
 	class="item"
 	data-item-uuid="{{uuid}}"
 >
-	<div
-		class="summary"
-		{{#if canExpand}}
-		data-action="toggleExpand"
-		{{/if}}
-	>
+	<div class="summary">
 		<img
 			src="{{img}}"
 			alt=""
@@ -20,9 +15,24 @@
 			type="number"
 			value="{{quantity}}"
 		>
+		<button
+			type="button"
+			class="expand-button"
+			data-action="toggleExpand"
+			data-expanded="{{isExpanded}}"
+			{{disabled (not canExpand)}}
+		>
+			<taf-icon
+				name="icons/chevron"
+				var:colour="var(--item-card-header-input-color)"
+			></taf-icon>
+		</button>
 	</div>
 	{{#if canExpand}}
-		<div class="full-details" data-expanded="{{isExpanded}}">
+		<div
+			class="full-details"
+			data-expanded="{{isExpanded}}"
+		>
 			{{{ description }}}
 		</div>
 	{{/if}}