Begin making the proper CSS for the component

module/components/incrementer.mjs

@@ -1,8 +1,11 @@
 /**
 Attributes:
-@property {number} value
+@property {string} name - The path to the value to update
-@property {number} stepSize
+@property {number} value - The actual value of the input
-@property {number} largeStepSize
+
+Styling:
+- `--height`: Controls the height of the element + the width of the buttons (default: 1.25rem)
+- `--width`: Controls the width of the number input (default 50px)
 */
 export class DotDungeonIncrementer extends HTMLElement {
 	static elementName = `dd-incrementer`;

styles/components/incrementer.scss

@@ -6,13 +6,9 @@ the corresponding web component. Importing this into other files is forbidden.
 $default-border-radius: 4px;
 $default-height: 1.25rem;
 
-:host {
-	min-width: max-content;
-}
-
 div {
 	display: grid;
-	grid-template-columns: var(--height, $default-height) 50px var(--height, $default-height);
+	grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height);
 	// I dunno why this is needed for the height to not be calculated as 17px,
 	// but it is for some arcane reason
 	grid-template-rows: var(--height, $default-height);
@@ -41,6 +37,7 @@ button {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	background-color: color-mix(in lab, white 5%, transparent);
 
 	&:hover {
 		cursor: pointer;

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

@@ -15,7 +15,8 @@
 		>
 			Supplies
 		</label>
-		<dd-incrementer value="{{system.supplies}}"></dd-incrementer>
+		<dd-incrementer name="system.supplies" value="{{system.supplies}}"></dd-incrementer>
+		{{!-- <input is="dd-incrementer"> --}}
 		{{!-- <button
 			type="button"
 			class="icon"