@sb1/indeks-web 0.2.20

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SpareBank 1 Utvikling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,192 @@
+# @sb1/indeks-web
+
+Web components for Indeks designsystemet. Komponenter som fungerer i alle rammeverk — og uten rammeverk.
+
+## 📦 Del av Indeks
+
+Denne pakken er en del av [Indeks designsystemet](https://github.com/SpareBank1/indeks). Komponentene bruker CSS-klasser fra `@sb1/indeks-css`, som må lastes separat.
+
+## 📥 Installasjon
+
+### Via CDN (anbefalt)
+
+```html
+<!-- Last inn CSS -->
+<link rel="stylesheet" href="https://cdn.sparebank1.no/indeks/css/<versjon>.css" />
+
+<!-- Last inn og registrer web components -->
+<script type="module" src="https://cdn.sparebank1.no/indeks/web/<versjon>/index.js"></script>
+```
+
+Etter at scriptet er lastet inn er alle komponenter tilgjengelige som HTML-elementer:
+
+```html
+<ix-field>
+    <label>E-postadresse</label>
+    <input type="email" name="email" />
+    <span data-field="error"></span>
+</ix-field>
+```
+
+### Via npm
+
+```bash
+npm install @sb1/indeks-web @sb1/indeks-css
+```
+
+```js
+import '@sb1/indeks-css';
+import '@sb1/indeks-web'; // registrerer alle custom elements
+```
+
+---
+
+## 🧩 Bidra — lage nye web components
+
+### Når hører noe hjemme i `indeks-web`?
+
+En komponent hører hjemme her når **begge** disse er sanne:
+
+1. **Rammeverk-agnostisk behov** — komponenten skal fungere i prosjekter som ikke bruker React, f.eks. Vue, Angular, vanilla JS eller server-rendered HTML.
+
+2. **Ingen god native HTML-ekvivalent** — behovet kan ikke løses ved å bare legge CSS-klasser på et eksisterende HTML-element. Det mangler enten et passende element, eller koblingen mellom flere elementer er kompleks nok til at en komponent gir reell verdi.
+
+Dersom behovet kun finnes i React-kontekst, hører komponenten hjemme i `indeks-react`. Dersom styling alene er nok, er en CSS-klasse i `indeks-css` riktig nivå.
+
+---
+
+### Designprinsipper
+
+#### Enhance, ikke erstatt native HTML
+
+Web components i denne pakken wrapper eller kobler native HTML-elementer — de erstatter dem ikke. Det betyr at:
+
+- Nettleserens native atferd (validering, fokushåndtering, form-tilstand) forblir intakt.
+- Alle native attributter (`required`, `disabled`, `name`, `value`, osv.) settes direkte på det native elementet av forfatteren.
+- Komponenten bidrar med det som mangler: ARIA-koblinger, reaktiv tilstand, og koordinering mellom flere elementer.
+
+#### Light DOM — ikke Shadow DOM
+
+Komponentene bruker ikke Shadow DOM. Årsaken er todelt:
+
+- CSS fra `@sb1/indeks-css` må nå inn til alle delelementer uten at forfatteren trenger å konfigurere noe.
+- ARIA-attributter som `aria-describedby` og `aria-labelledby` refererer til IDer. Disse IDene må eksistere i det samme DOM-treet som elementene de kobler — noe Shadow DOM bryter.
+
+#### `data-[komponent]="rolle"` som slot-konvensjon
+
+Siden Shadow DOM-slots ikke brukes, identifiserer komponenter delelementer via `data-`-attributter:
+
+```
+data-[komponentnavn]="rolle"
+```
+
+For en komponent som heter `IxField` (`ix-field`) ser det slik ut:
+
+```html
+<ix-field>
+    <label>Navn</label>
+    <span data-field="description">Fullt navn som det står i passet</span>
+    <input type="text" name="name" />
+    <span data-field="error"></span>
+</ix-field>
+```
+
+Bruk `slot`-attributtet til Shadow DOM-innhold er et reservert nøkkelord knytt til Shadow DOM. `data-[komponent]` er eksplisitt egendefinert og kolliderer ikke med noe nettleser-API.
+
+---
+
+### Slik lager du en ny komponent
+
+#### 1. Filstruktur
+
+```
+lib/
+└── components/
+    └── [navn]/
+        └── Ix[Navn].ts
+```
+
+Eksempel for en ny `IxTooltip`:
+
+```
+lib/
+└── components/
+    └── tooltip/
+        └── IxTooltip.ts
+```
+
+#### 2. Klassen
+
+Extend `HTMLElement` direkte. Ikke bruk basisklasser eller hjelpefunksjoner med mindre det er et dokumentert mønster i pakken.
+
+```ts
+export class IxTooltip extends HTMLElement {
+    connectedCallback(): void {
+        // Sett opp koblingene her
+    }
+
+    disconnectedCallback(): void {
+        // Rydd opp observers og event listeners her
+    }
+}
+```
+
+`connectedCallback` kalles når elementet kobles til DOM. `disconnectedCallback` kalles når det fjernes — rydd alltid opp `MutationObserver`, `ResizeObserver` og event listeners her for å unngå minnelekkasje.
+
+#### 3. Registrer i `index.ts`
+
+```ts
+// index.ts
+import { IxTooltip } from './lib/components/tooltip/IxTooltip.js';
+
+customElements.define('ix-tooltip', IxTooltip);
+
+export { IxTooltip };
+```
+
+Navnekonvensjon: klassen heter `Ix[PascalCase]`, custom element-taggen heter `ix-[kebab-case]`.
+
+---
+
+### CSS
+
+Komponenter skal bruke eksisterende CSS-klasser fra `@sb1/indeks-css`. Ikke bundle CSS inn i JS-en, og ikke skriv komponent-spesifikk CSS i denne pakken — CSS-en hører hjemme i `indeks-css`.
+
+Legg til CSS-klasser på elementer i `connectedCallback`:
+
+```ts
+this.classList.add('ix-input-wrapper');
+```
+
+---
+
+### Bygg og verifiser
+
+```bash
+# npm-bygg (med TypeScript-typer)
+pnpm --filter @sb1/indeks-web build
+
+# CDN-bygg (minifisert, self-contained bundle)
+pnpm --filter @sb1/indeks-web build:cdn
+```
+
+`build` produserer `dist/npm/index.js` og `dist/npm/index.d.ts`.
+`build:cdn` produserer `dist/cdn/index.js` — en minifisert ESM-bundle klar for opplasting til CDN.
+
+---
+
+## 🔗 Relaterte pakker
+
+- [@sb1/indeks-css](https://www.npmjs.com/package/@sb1/indeks-css) — CSS-styling (kreves på siden)
+- [@sb1/indeks-react](https://www.npmjs.com/package/@sb1/indeks-react) — React-komponenter
+- [@sb1/indeks-tokens](https://www.npmjs.com/package/@sb1/indeks-tokens) — Design tokens
+
+## 📚 Dokumentasjon
+
+Full dokumentasjon finnes på:
+
+**[Midlertidig lenke Indeks](https://automatic-meme-yv23n9e.pages.github.io/)**
+
+## 📄 Lisens
+
+MIT

package/dist/npm/index.d.ts

@@ -0,0 +1,2 @@
+import { IxField } from './lib/components/field/IxField.js';
+export { IxField };

package/dist/npm/index.js

@@ -0,0 +1,92 @@
+//#region \0@oxc-project+runtime@0.115.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.115.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.115.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region lib/components/field/IxField.ts
+var fieldCounter = 0;
+var IxField = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_observer", null);
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._observer?.disconnect();
+		this._observer = null;
+	}
+	_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.id) control.id = `ix-field-${++fieldCounter}`;
+		if (label && !label.htmlFor) label.htmlFor = control.id;
+		const describedBy = [];
+		if (description) {
+			if (!description.id) description.id = `${control.id}-description`;
+			describedBy.push(description.id);
+		}
+		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(() => {
+				this._syncInvalid(control, error);
+			});
+			this._observer.observe(error, {
+				childList: true,
+				characterData: true,
+				subtree: true
+			});
+			this._syncInvalid(control, error);
+		}
+		if (describedBy.length > 0) control.setAttribute("aria-describedby", describedBy.join(" "));
+	}
+	_syncInvalid(control, error) {
+		if (error.textContent?.trim()) control.setAttribute("aria-invalid", "true");
+		else control.removeAttribute("aria-invalid");
+	}
+};
+//#endregion
+//#region index.ts
+customElements.define("ix-field", IxField);
+//#endregion
+export { IxField };

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

@@ -0,0 +1,79 @@
+/**
+ * IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
+ *
+ * ## Designfilosofi
+ *
+ * Komponenten erstatter ingen native HTML-elementer. `<label>`, `<input>`,
+ * `<select>`, `<textarea>` og hjelpetekster skrives som vanlig HTML inne i
+ * `<ix-field>`. Komponenten sin eneste jobb er å sette opp ARIA-koblingene
+ * mellom dem — arbeid som er kjedelig å gjøre manuelt og lett å gjøre feil.
+ *
+ * Denne tilnærmingen betyr at:
+ *   - Native nettleser-atferd, validering og styling forblir intakt.
+ *   - Alle form-attributter (`required`, `disabled`, `name`, `value`, osv.)
+ *     settes direkte på native elementet — ikke som props til en wrapper.
+ *   - Komponenten kan brukes med alle typer input uten kodeendringer.
+ *
+ * ## Hva komponenten gjør
+ *
+ * 1. Kobler `<label>` til input via `for`/`id`-paret.
+ *    Genererer en stabil ID på input om den mangler en.
+ *
+ * 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.
+ *    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.
+ *
+ * 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
+ *    Applikasjonen styrer altså feilmelding ved å sette/tømme textContent —
+ *    komponenten holder input-tilstanden synkronisert automatisk.
+ *
+ * ## Identifisering av delelementer
+ *
+ * Komponenten finner delelementer via:
+ *   - `<label>`                       → første label-element
+ *   - `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` 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
+ * misvisende, samt kunne krasje om `<ix-field>` senere pakkes inn i en
+ * komponent med Shadow DOM.
+ *
+ * ## Ingen Shadow DOM
+ *
+ * Komponenten bruker light DOM. Det betyr at CSS fra `@sb1/indeks-css` når
+ * alle delelementer uten videre, og at ARIA-attributtene er fullt synlige i
+ * den tilgjengelighetstreet nettleseren eksponerer til hjelpemiddelteknologi.
+ *
+ * @example Grunnleggende bruk
+ * <ix-field>
+ *   <label>E-postadresse</label>
+ *   <span data-field="description">Vi sender kvittering til denne adressen</span>
+ *   <input type="email" name="email" />
+ *   <span data-field="error"></span>
+ * </ix-field>
+ *
+ * @example Sett feilmelding programmatisk
+ * const errorEl = document.querySelector('ix-field [data-field="error"]');
+ * errorEl.textContent = 'Oppgi en gyldig e-postadresse';
+ * // → input får automatisk aria-invalid="true"
+ *
+ * errorEl.textContent = '';
+ * // → aria-invalid fjernes
+ */
+export declare class IxField extends HTMLElement {
+    private _observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _wire;
+    private _syncInvalid;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sb1/indeks-web",
+  "version": "0.2.20",
+  "type": "module",
+  "description": "Web components for Indeks design system",
+  "homepage": "https://design.sparebank1.no",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SpareBank1/indeks",
+    "directory": "indeks-web"
+  },
+  "bugs": {
+    "url": "https://github.com/SpareBank1/indeks/issues"
+  },
+  "keywords": [
+    "indeks",
+    "design-system",
+    "web-components",
+    "custom-elements",
+    "sparebank1",
+    "ui"
+  ],
+  "main": "dist/npm/index.js",
+  "module": "dist/npm/index.js",
+  "types": "dist/npm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/npm/index.js",
+      "types": "./dist/npm/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/npm",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "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\""
+  }
+}