From e0a3b4985bf81a18b90f796aed58e6021bb72c92 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Thu, 4 Apr 2024 22:48:19 -0600
Subject: [PATCH] Begin making the proper CSS for the component

---
 module/components/incrementer.mjs                        | 9 ++++++---
 styles/components/incrementer.scss                       | 7 ++-----
 .../char-sheet/v2/partials/inventory/player.v2.pc.hbs    | 3 ++-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs
index d02aa68..3e5e55f 100644
--- a/module/components/incrementer.mjs
+++ b/module/components/incrementer.mjs
@@ -1,8 +1,11 @@
 /**
 Attributes:
-@property {number} value
-@property {number} stepSize
-@property {number} largeStepSize
+@property {string} name - The path to the value to update
+@property {number} value - The actual value of the input
+
+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`;
diff --git a/styles/components/incrementer.scss b/styles/components/incrementer.scss
index 55ca7fb..693e0ec 100644
--- a/styles/components/incrementer.scss
+++ b/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;
diff --git a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs
index e3a936c..0249748 100644
--- a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs
+++ b/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"