@sb1/indeks-web 0.2.21 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sb1/indeks-web
 
+## 0.3.0
+
+### Minor Changes
+
+-   31fea2e: Legg til TextArea og oppdater TextField
+
+    Gå mer bort fra BEM der det ikke trengs.
+    Implementer IxField som wrapper inputkomponentene
+
 ## 0.2.21
 
 ### Patch Changes

package/dist/npm/index.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.120.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -8,7 +8,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.120.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -20,13 +20,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.120.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.120.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -42,6 +42,9 @@ var IxField = class extends HTMLElement {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_observer", null);
+		_defineProperty(this, "_stateObserver", null);
+		_defineProperty(this, "_charCountListener", null);
+		_defineProperty(this, "_charCountControl", null);
 	}
 	connectedCallback() {
 		this._wire();
@@ -49,15 +52,48 @@ var IxField = class extends HTMLElement {
 	disconnectedCallback() {
 		this._observer?.disconnect();
 		this._observer = null;
+		this._stateObserver?.disconnect();
+		this._stateObserver = null;
+		this._teardownCharCount();
 	}
 	_wire() {
 		const control = this.querySelector("input, select, textarea");
 		const label = this.querySelector("label");
 		const description = this.querySelector("[data-field=\"description\"]");
 		const error = this.querySelector("[data-field=\"error\"]");
-		if (!control) return;
+		if (!control) {
+			console.info("[ix-field] Fant ingen <input>, <select> eller <textarea>. ARIA-koblinger ble ikke satt opp.");
+			return;
+		}
+		this._syncControlState(control);
+		this._stateObserver = new MutationObserver((mutations) => {
+			this._syncControlState(control);
+			if (mutations.some((m) => m.attributeName === "maxlength" || m.attributeName === "minlength") && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement)) {
+				this._teardownCharCount();
+				const charCountEl = this._setupCharCount(control);
+				if (charCountEl) {
+					const existing = control.getAttribute("aria-describedby") ?? "";
+					const ids = existing ? existing.split(" ") : [];
+					if (!ids.includes(charCountEl.id)) {
+						ids.push(charCountEl.id);
+						control.setAttribute("aria-describedby", ids.join(" "));
+					}
+				}
+			}
+		});
+		this._stateObserver.observe(control, {
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"readonly",
+				"maxlength",
+				"minlength"
+			]
+		});
+		if (control instanceof HTMLInputElement && control.type === "number") console.warn("[ix-field] Unngå type=\"number\" — bruk inputMode=\"numeric\" i stedet.");
 		if (!control.id) control.id = `ix-field-${++fieldCounter}`;
 		if (label && !label.htmlFor) label.htmlFor = control.id;
+		if (!label && !control.getAttribute("aria-label") && !control.getAttribute("aria-labelledby")) console.warn("[ix-field] Kontrollen mangler tilgjengelig navn. Legg til <label>, aria-label eller aria-labelledby. Synlig label er anbefalt.");
 		const describedBy = [];
 		if (description) {
 			if (!description.id) description.id = `${control.id}-description`;
@@ -65,7 +101,6 @@ var IxField = class extends HTMLElement {
 		}
 		if (error) {
 			if (!error.id) error.id = `${control.id}-error`;
-			error.setAttribute("role", "alert");
 			error.setAttribute("aria-live", "polite");
 			describedBy.push(error.id);
 			this._observer = new MutationObserver(() => {
@@ -78,11 +113,59 @@ var IxField = class extends HTMLElement {
 			});
 			this._syncInvalid(control, error);
 		}
+		if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) {
+			const charCountEl = this._setupCharCount(control);
+			if (charCountEl) describedBy.push(charCountEl.id);
+		}
 		if (describedBy.length > 0) control.setAttribute("aria-describedby", describedBy.join(" "));
+		const prefix = this.querySelector("[data-field=\"prefix\"]");
+		const suffix = this.querySelector("[data-field=\"suffix\"]");
+		prefix?.setAttribute("aria-hidden", "true");
+		suffix?.setAttribute("aria-hidden", "true");
+		const textField = this.querySelector(".ix-text-field");
+		if (textField) {
+			textField.toggleAttribute("data-has-prefix", !!prefix);
+			textField.toggleAttribute("data-has-suffix", !!suffix);
+		}
+	}
+	_setupCharCount(control) {
+		const min = control.getAttribute("minlength");
+		const max = control.getAttribute("maxlength");
+		if (!min && !max) return null;
+		const el = document.createElement("span");
+		el.id = `${control.id}-char-count`;
+		el.setAttribute("data-field", "char-count");
+		el.setAttribute("aria-live", "off");
+		this._updateCharCount(el, control, min, max);
+		const error = this.querySelector("[data-field=\"error\"]");
+		if (error?.parentNode) error.parentNode.insertBefore(el, error.nextSibling);
+		else this.appendChild(el);
+		this._charCountControl = control;
+		this._charCountListener = () => this._updateCharCount(el, control, min, max);
+		control.addEventListener("input", this._charCountListener);
+		return el;
+	}
+	_teardownCharCount() {
+		if (this._charCountListener && this._charCountControl) this._charCountControl.removeEventListener("input", this._charCountListener);
+		this._charCountListener = null;
+		this._charCountControl = null;
+		this.querySelector("[data-field=\"char-count\"]")?.remove();
+	}
+	_updateCharCount(el, control, min, max) {
+		const current = control.value.length;
+		if (max) el.textContent = `${current}/${max}`;
+		else if (min) el.textContent = `${current} tegn (minimum ${min})`;
 	}
 	_syncInvalid(control, error) {
-		if (error.textContent?.trim()) control.setAttribute("aria-invalid", "true");
+		const hasError = !!error.textContent?.trim();
+		if (hasError) control.setAttribute("aria-invalid", "true");
 		else control.removeAttribute("aria-invalid");
+		control.closest(".ix-dropdown")?.toggleAttribute("data-invalid", hasError);
+	}
+	_syncControlState(control) {
+		this.toggleAttribute("data-disabled", control.disabled);
+		const readOnly = "readOnly" in control ? control.readOnly : false;
+		this.toggleAttribute("data-readonly", readOnly);
 	}
 };
 //#endregion

package/dist/npm/lib/components/field/IxField.d.ts

@@ -22,13 +22,17 @@
  * 2. Setter `aria-describedby` på input med IDer til description og
  *    error-elementet, slik at skjermlesere leser dem opp etter label og verdi.
  *
- * 3. Setter `role="alert"` og `aria-live="polite"` på error-elementet.
+ * 3. Setter `aria-live="polite"` på error-elementet.
  *    Error-elementet skal alltid ligge i DOM — tomt betyr ingen feil.
  *    Dette er et krav fra ARIA Live Regions: elementet må eksistere i DOM
  *    *før* innholdet settes inn for at skjermlesere skal fange opp endringen.
  *    Hadde vi injisert elementet dynamisk ville mange skjermlesere gått glipp
  *    av meldingen.
  *
+ *    Vi bruker *ikke* `role="alert"` fordi det impliserer `aria-live="assertive"`
+ *    som avbryter brukeren. Feilmeldinger i skjema er viktige, men ikke så
+ *    kritiske at de bør avbryte — `polite` venter til skjermleseren er ferdig.
+ *
  * 4. Bruker MutationObserver på error-elementet. Når innholdet endres:
  *    - Ikke-tomt → `aria-invalid="true"` på input (visuell og semantisk feil)
  *    - Tomt      → `aria-invalid` fjernes
@@ -42,6 +46,8 @@
  *   - `input | select | textarea`     → første native form-kontroll
  *   - `[data-field="description"]`    → hjelpetekst
  *   - `[data-field="error"]`          → feilmelding (alltid til stede, kan være tom)
+ *   - `[data-field="prefix"]`         → visuell prefix (skjules med aria-hidden)
+ *   - `[data-field="suffix"]`         → visuell suffix (skjules med aria-hidden)
  *
  * `data-field` brukes fremfor `slot`-attributtet selv om Shadow DOM ikke er i
  * bruk. `slot` er et reservert nøkkelord knytt til Shadow DOM og ville vært
@@ -72,8 +78,15 @@
  */
 export declare class IxField extends HTMLElement {
     private _observer;
+    private _stateObserver;
+    private _charCountListener;
+    private _charCountControl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _wire;
+    private _setupCharCount;
+    private _teardownCharCount;
+    private _updateCharCount;
     private _syncInvalid;
+    private _syncControlState;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",
@@ -40,16 +40,20 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
+    "jsdom": "^29.0.1",
     "typescript": "~5.9.3",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^8.0.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.2"
   },
   "scripts": {
+    "dev": "echo not implemented",
     "build": "rm -rf ./dist && pnpm run build:npm",
     "build:npm": "rm -rf ./dist/npm && vite build --mode npm",
     "build:cdn": "rm -rf ./dist/cdn && vite build --mode cdn",
     "lint": "eslint .",
-    "test": "echo \"Ingen tester\""
+    "update-packages": "echo not implemented",
+    "test": "vitest"
   }
 }