Add the toggle for item equipped status and inventory properties

langs/en-ca.json

@@ -84,6 +84,13 @@
 				"manage-attributes": "Manage Attributes",
 				"current-value": "Current value",
 				"max-value": "Maximum value",
+				"carry-capacity-used": "({percent}% Used)",
+				"carrying-capacity": {
+					"title": "Carrying Capacity:",
+					"label": "Maximum carrying weight"
+				},
+				"total-weight": "Total weight",
+				"toggle-item-description": "Show/Hide Item Description",
 				"tab-names": {
 					"content": "Content",
 					"items": "Items"

styles/Apps/PlayerSheet.css

@@ -37,7 +37,7 @@
 		}
 	}
 
-	.items-tab {
+	.items-tab.active {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
@@ -49,7 +49,7 @@
 		gap: 4px;
 		align-items: center;
 		background: var(--inventory-summary-background);
-		color: var(--inventory-summary-color);
+		color: var(--inventory-summary-colour);
 		padding: 6px;
 		border-radius: 4px;
 
@@ -57,8 +57,13 @@
 			width: 75px;
 			text-align: center;
 			background: var(--inventory-input-background);
-			color: var(--inventory-input-color);
+			color: var(--inventory-input-colour);
 			text-align: center;
+
+			&:disabled {
+				color: var(--inventory-input-disabled-colour);
+				cursor: not-allowed;
+			}
 		}
 	}
 
@@ -90,7 +95,7 @@
 
 		.summary {
 			display: grid;
-			grid-template-columns: auto 1fr 50px auto;
+			grid-template-columns: min-content auto 1fr 50px auto;
 			align-items: center;
 			gap: 8px;
 			background: var(--item-card-header-background);
@@ -120,7 +125,7 @@
 
 			input, button {
 				background: var(--item-card-header-input-background);
-				color: var(--item-card-header-input-color);
+				color: var(--item-card-header-input-colour);
 				text-align: center;
 			}
 		}

styles/themes/dark.css

@@ -12,9 +12,10 @@
 	--tab-button-hover-bg: var(--color-cool-3);
 
 	--inventory-summary-background: #171e26;
-	--inventory-summary-color: white;
+	--inventory-summary-colour: white;
 	--inventory-input-background: #2b3642;
-	--inventory-input-color: white;
+	--inventory-input-colour: white;
+	--inventory-input-disabled-colour: gray;
 
 	--item-list-header-background: #171e26;
 	--item-list-header-color: white;

templates/PlayerSheet/item-lists.hbs

@@ -5,15 +5,21 @@
 >
 	<section class="inventory-summary">
 		<h3 class="grow">
-			Carrying Capacity:
+			{{localize "taf.Apps.PlayerSheet.carrying-capacity.title"}}
 		</h3>
 		<div>
-			({{carryCapacityPercent}}% Used)
+			{{localize
+				"taf.Apps.PlayerSheet.carry-capacity-used"
+				percent=carryCapacityPercent
+			}}
 		</div>
 		<input
 			type="text"
 			value="{{totalWeight}}"
 			disabled
+			aria-label="{{localize "taf.Apps.PlayerSheet.total-weight"}}"
+			data-tooltip
+			data-tooltip-direction="UP"
 		>
 		<div aria-hidden="true">
 			/
@@ -22,6 +28,9 @@
 			type="number"
 			name="system.carryCapacity"
 			value="{{system.carryCapacity}}"
+			aria-label="{{localize "taf.Apps.PlayerSheet.carrying-capacity.label"}}"
+			data-tooltip
+			data-tooltip-direction="UP"
 		>
 	</section>
 	{{#each itemGroups as | group |}}

templates/PlayerSheet/item.hbs

@@ -3,6 +3,11 @@
 	data-item-uuid="{{uuid}}"
 >
 	<div class="summary">
+		<taf-toggle
+			var:size="8px"
+			var:padding="2px"
+			{{checked equipped}}
+		></taf-toggle>
 		<img
 			src="{{img}}"
 			alt=""
@@ -21,6 +26,7 @@
 			data-action="toggleExpand"
 			data-expanded="{{isExpanded}}"
 			{{disabled (not canExpand)}}
+			aria-label="{{localize "taf.Apps.PlayerSheet.toggle-item-description"}}"
 		>
 			<taf-icon
 				name="icons/chevron"