Get the material items finished

styles/root.scss

@@ -15,7 +15,7 @@
 @use "./sheets/partials/panel.scss";
 
 @use "./sheets/actor/mvp.scss";
-@use "./sheets/actor/char-sheet/v2.scss";
+@use "./sheets/actor/char-sheet/v2/v2.scss";
 @use "./sheets/actor/mob/mob.scss";
 @use "./sheets/actor/sync/basic.scss";
 @use "./sheets/items/custom.scss";

styles/sheets/actor/char-sheet/v2/material/inputs.scss

@@ -0,0 +1,15 @@
+.dotdungeon.material {
+	button {
+		padding: 8px 16px;
+
+		&.outline {
+			border-style: solid;
+			border-color: var(--outline-button-border);
+		}
+
+		&:disabled {
+			opacity: 37%;
+			cursor: default;
+		}
+	}
+}

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

@@ -1,4 +1,4 @@
-@use "../../../../mixins/material" as material;
+@use "../../../../../mixins/material" as material;
 
 .dotdungeon .actor--pc-v2 .active.inventory-page {
 	padding-bottom: 50px;
@@ -93,4 +93,64 @@
 			margin: 0;
 		}
 	}
+
+	.item-list {
+		.material-list {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 8px;
+		}
+	}
+
+	.material {
+		@include material.elevate(1);
+		padding: 8px;
+		gap: 8px;
+		display: grid;
+		grid-template-columns: 1fr min-content 50px min-content;
+		align-items: center;
+		border-radius: 4px;
+
+		&__label {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			justify-self: left;
+			max-width: 100%;
+		}
+
+		&__button {
+			--size: 28px;
+			@include material.elevate(2);
+			transition: all 400ms ease-in-out;
+			color: var(--inventory-material-color);
+			border-width: 0;
+			width: var(--size);
+			height: var(--size);
+
+			&:hover {
+				@include material.elevate(4);
+				color: var(--inventory-material-hover-color);
+			}
+		}
+
+		&__input {
+			@include material.elevate(2);
+			font-family: var(--input-font);
+			text-align: center;
+			border-radius: 4px;
+			transition: all 400ms ease-in-out;
+			color: var(--inventory-material-color);
+
+			&:hover {
+				@include material.elevate(4);
+				color: var(--inventory-material-hover-color);
+			}
+
+			&:focus {
+				@include material.elevate(8);
+				color: var(--inventory-material-focus-color);
+			}
+		}
+	}
 }

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

@@ -9,11 +9,17 @@ $on-surface: white;
 $on-primary: $t;
 $on-secondary: $t;
 
+$title-font: 'Pixelify Sans', sans-serif;
+$body-font: sans-serif;
+
 .actor--pc-v2 {
 	--sheet-bg: #{$background};
 	--nav-bg: #{$surface};
 	--nav-button-text: #{$on-surface};
 
+	--tab-font: #{$title-font};
+	--input-font: #{$body-font};
+
 	/* Elevation backgrounds to following Material design */
 	--elevation-0dp-bg: #{$surface};
 	--elevation-1dp-bg: color-mix(in lab, transparent, white 5%);
@@ -36,4 +42,8 @@ $on-secondary: $t;
 	--skill-training-select-bg: #{$surface};
 	--skill-training-select-text-color: #{$on-surface};
 	--skill-roll-button-text-color: #{$on-surface};
+
+	--inventory-material-color: white;
+	--inventory-material-hover-color: white;
+	--inventory-material-focus-color: white;
 }

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

@@ -1,6 +1,6 @@
 @use "./themes/dark.scss";
-@use "../../../mixins/material" as material;
+@use "../../../../mixins/material" as material;
-@use "../../../mixins/partials" as partials;
+@use "../../../../mixins/partials" as partials;
 
 @use "./pages/stats.scss";
 @use "./pages/inventory.scss";

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

@@ -1,6 +1,58 @@
 <div class="material">
-	Material Name
+	<label
-	<button type="button">-</button>
+		for="{{meta.idp}}-{{item.uuid}}-quantity-input"
-	X
+		class="material__label"
-	<button type="button">+</button>
+		data-tooltip="{{item.name}}"
-</div>
+		data-tooltip-direction="UP"
+	>
+		{{item.name}}
+	</label>
+	{{#if (eq item.system.quantity 0)}}
+		<button
+			type="button"
+			class="material__button material__button--delete equal-padding "
+			data-embedded-delete
+			data-embedded-id="{{item.uuid}}"
+		>
+			<div aria-hidden="true" class="icon icon--14">
+				{{{ icons.garbage-bin }}}
+			</div>
+		</button>
+	{{else}}
+		<button
+			type="button"
+			aria-hidden="true"
+			tabindex="-1"
+			class="material__button material__button--decrement equal-padding "
+			data-embedded-decrement="system.quantity"
+			data-embedded-id="{{item.uuid}}"
+		>
+			<div aria-hidden="true" class="icon icon--14">
+				{{{ icons.minus }}}
+			</div>
+		</button>
+	{{/if}}
+	<input
+		type="number"
+		id="{{meta.idp}}-{{item.uuid}}-quantity-input"
+		class="material__input"
+		min="0"
+		value="{{item.system.quantity}}"
+		aria-label="The number of {{item.name}} you have"
+		data-embedded-id="{{item.uuid}}"
+		data-embedded-update="system.quantity"
+		data-embedded-update-on="blur"
+	>
+	<button
+		type="button"
+		aria-hidden="true"
+		tabindex="-1"
+		class="material__button material__button--increment equal-padding "
+		data-embedded-increment="system.quantity"
+		data-embedded-id="{{item.uuid}}"
+	>
+		<div aria-hidden="true" class="icon icon--14">
+			{{{ icons.create }}}
+		</div>
+	</button>
+</div>