feat: Increase digits option and improve attribute observation #330

Summary of changes
- Updated the default digits option from 4 to 6 in the Digits component.
- Enhanced the option observer to react to changes in the digits option, ensuring the component updates appropriately when the digits value changes.
- Cleaned up the `attributeChangedCallback` method in CustomElement by adding a newline for better readability.

Changes
- `digits.mjs`
  - Changed the default value of `digits` from 4 to 6 to accommodate.
  - Added a check for digits changes in the option observer, ensuring that the digit controls are updated when the digits option is modified.

Changes
- `customelement.mjs`
  - Added a newline in the `attributeChangedCallback` method to improve code clarity and layout, making it easier for future developers to read and maintain the code.

source/components/form/digits.mjs

@@ -132,7 +132,7 @@ class Digits extends CustomControl {
 				main: getTemplate(),
 			},
 
-			digits: 4,
+			digits: 6,
 			characterSet: "0123456789",
 
 			digitsControls: [],
@@ -184,13 +184,20 @@ function initOptionObserver() {
 	const self = this;
 
 	let lastValue = this.getOption("value");
+	let lastDigits = this.getOption("digits");
 
 	self.attachObserver(
 		new Observer(function () {
+
 			if (lastValue !== self.getOption("value")) {
 				lastValue = self.getOption("value");
 				updateDigitControls.call(self);
 			}
+
+			if (lastDigits !== self.getOption("digits")) {
+				lastDigits = self.getOption("digits");
+				updateDigitControls.call(self);
+			}
 		}),
 	);
 }
@@ -237,6 +244,10 @@ function initEventHandler() {
 	const self = this;
 	const element = this[digitsElementSymbol];
 
+	// this[attributeObserverSymbol]['data-monster-option-digits'] = () => {
+	// 	this.setOption("digits", );
+	// }
+
 	element.addEventListener("keydown", function (event) {
 		if (event.target.tagName !== "INPUT") return;
 		const inputControl = event.target;

source/dom/customelement.mjs

@@ -713,6 +713,7 @@ class CustomElement extends HTMLElement {
 	 * @since 1.15.0
 	 */
 	attributeChangedCallback(attrName, oldVal, newVal) {
+
 		if (attrName.startsWith("data-monster-option-")) {
 			setOptionFromAttribute(
 				this,