@sb1/indeks-web 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sb1/indeks-web
 
+## 0.9.0
+
+### Minor Changes
+
+-   f0707b4: Legg til `RadioGroup` og `RadioButton` med full støtte for tilstander, orientering og a11y.
+
+    -   `@sb1/indeks-css`: `radio-group.css` skrevet om — alle tilstander (default, hover, focus, selected, error, readOnly, disabled), vertikal/horisontal orientering, touch-mål 44×44 px, `prefers-reduced-motion`.
+    -   `@sb1/indeks-web`: ny `<ix-radio-group>` web component (ARIA-lim) som setter `role="radiogroup"`, `aria-labelledby`, `aria-describedby`, `aria-live="polite"` og synkroniserer `aria-invalid`, `name`, `disabled`, `required` og `aria-required` på riktig nivå. Blokkerer tastatur-endringer i `readonly`-tilstand.
+    -   `@sb1/indeks-react`: `RadioGroup` skrevet om til compound-mønster med `RadioButton`-barn. Støtter kontrollert/ukontrollert bruk, `legend`, `description`, `errorMessage`, `orientation`, `hideLegend`, `disabled`, `readOnly`, `required`. Erstatter den gamle flat-array-API-en (breaking endring i komponentens API, men ikke i typenavn).
+
+## 0.8.0
+
 ## 0.7.0
 
 ## 0.6.0

package/dist/npm/index.d.ts

@@ -1,13 +1,16 @@
 import { IxField } from './lib/components/field/IxField.js';
 import { IxIcon, IconName } from './lib/components/icon/IxIcon.js';
+import { IxRadioGroup } from './lib/components/radio-group/IxRadioGroup.js';
 export { IxField };
 export { IxIcon };
+export { IxRadioGroup };
 export { ICON_NAMES } from './lib/components/icon/IxIcon.js';
 export type { IconName, IconValue } from './lib/components/icon/IxIcon.js';
 declare global {
     interface HTMLElementTagNameMap {
         'ix-field': IxField;
         'ix-icon': IxIcon;
+        'ix-radio-group': IxRadioGroup;
     }
     namespace JSX {
         interface IntrinsicElements {
@@ -16,6 +19,16 @@ declare global {
                 class?: string;
                 children?: unknown;
             };
+            'ix-radio-group': {
+                name?: string;
+                disabled?: boolean | '';
+                readonly?: boolean | '';
+                required?: boolean | '';
+                'data-orientation'?: 'vertical' | 'horizontal';
+                'data-state'?: 'error' | 'readonly' | 'disabled';
+                class?: string;
+                children?: unknown;
+            };
             'ix-icon': {
                 name?: IconName;
                 materialdesignname?: string;

package/dist/npm/index.js

@@ -281,6 +281,211 @@ var IxIcon = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/radio-group/IxRadioGroup.ts
+/**
+* IxRadioGroup — ARIA-lim for radioknapp-grupper.
+*
+* ## Designfilosofi
+*
+* Komponenten erstatter ingen native HTML-elementer. Forfatteren skriver
+* native <input type="radio">, <label> og hjelpetekster inni <ix-radio-group>.
+* Komponenten sin eneste jobb er å sette opp ARIA-koblingene mellom dem.
+*
+* ## Hva komponenten gjør
+*
+* 1. Setter role="radiogroup" på host slik at skjermlesere annonserer gruppen
+*    med riktig rolle og leser legend-teksten som gruppens tilgjengelige navn.
+*
+* 2. Kobler legend via aria-labelledby — genererer ID på [data-field="legend"]
+*    om nødvendig og peker host til den.
+*
+* 3. Setter aria-describedby på host med IDer til description og error
+*    (description alltid først). Hopper over elementer som mangler.
+*
+* 4. Genererer stabile IDer på hvert input og setter htmlFor på matchende label
+*    om label ikke allerede har det. Respekterer alltid eksisterende IDer.
+*
+* 5. Synkroniserer name-attributt på alle inputs — name er mekanismen
+*    nettleseren bruker for mutual exclusivity (ett valg av gangen) og
+*    ArrowKey-navigasjon mellom alternativene. Alle inputs i gruppen må ha
+*    samme name. Prioritet: name på host > name på input > auto-generert.
+*
+* 6. Setter aria-live="polite" på [data-field="error"] og observerer
+*    textContent-endringer: ikke-tomt innhold → aria-invalid="true" på host;
+*    tomt → aria-invalid fjernes. aria-invalid settes kun på host (ikke per
+*    input) — det er gruppens validitet som telles, og en duplisert flagg
+*    per input gir ingen merverdi for skjermlesere.
+*
+* 7. Propagerer disabled/readonly til alle inputs via attributeChangedCallback.
+*    Per-knapp disabled bevares — settes med en WeakMap ved første _wire().
+*
+* 8. Lytter på childList på host slik at nye <input type="radio">-elementer
+*    som legges til etter mount automatisk wires (id, name, htmlFor, disabled).
+*
+* ## Ingen Shadow DOM
+*
+* Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
+* delelementer direkte.
+*
+* @example
+* <ix-radio-group>
+*   <span data-field="legend">Velg kundetype</span>
+*   <span data-field="description">Beskrivelse</span>
+*   <div class="ix-radio-button">
+*     <input type="radio" value="privat" />
+*     <label>Privat</label>
+*   </div>
+*   <div class="ix-radio-button">
+*     <input type="radio" value="bedrift" />
+*     <label>Bedrift</label>
+*   </div>
+*   <span data-field="error"></span>
+* </ix-radio-group>
+*/
+var radioGroupCounter = 0;
+var radioInputCounter = 0;
+var IxRadioGroup = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_errorObserver", null);
+		_defineProperty(this, "_childObserver", null);
+		_defineProperty(this, "_keydownListener", null);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_ownDisabled", /* @__PURE__ */ new WeakMap());
+	}
+	static get observedAttributes() {
+		return [
+			"disabled",
+			"readonly",
+			"required",
+			"name"
+		];
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._errorObserver?.disconnect();
+		this._errorObserver = null;
+		this._childObserver?.disconnect();
+		this._childObserver = null;
+		if (this._keydownListener) this.removeEventListener("keydown", this._keydownListener);
+		this._keydownListener = null;
+	}
+	attributeChangedCallback(attr, _oldValue, _newValue) {
+		if (!this.isConnected) return;
+		if (attr === "disabled" || attr === "readonly") this._syncHostStateToInputs();
+		if (attr === "required") this._syncRequired();
+		if (attr === "name") this._wireInputs();
+	}
+	_wire() {
+		this.setAttribute("role", "radiogroup");
+		this._instanceId = ++radioGroupCounter;
+		const legend = this.querySelector("[data-field=\"legend\"]");
+		if (legend) {
+			if (!legend.id) legend.id = `ix-radio-group-legend-${this._instanceId}`;
+			this.setAttribute("aria-labelledby", legend.id);
+		}
+		const description = this.querySelector("[data-field=\"description\"]");
+		const error = this.querySelector("[data-field=\"error\"]");
+		const describedBy = [];
+		if (description) {
+			if (!description.id) description.id = `ix-radio-group-desc-${this._instanceId}`;
+			describedBy.push(description.id);
+		}
+		if (error) {
+			if (!error.id) error.id = `ix-radio-group-error-${this._instanceId}`;
+			describedBy.push(error.id);
+			error.setAttribute("aria-live", "polite");
+			this._errorObserver = new MutationObserver(() => {
+				this._syncInvalid(error);
+			});
+			this._errorObserver.observe(error, {
+				childList: true,
+				characterData: true,
+				subtree: true
+			});
+			this._syncInvalid(error);
+		}
+		if (describedBy.length > 0) this.setAttribute("aria-describedby", describedBy.join(" "));
+		this._wireInputs();
+		this._syncRequired();
+		this._keydownListener = (e) => {
+			if (this.hasAttribute("readonly") && [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				" "
+			].includes(e.key)) e.preventDefault();
+		};
+		this.addEventListener("keydown", this._keydownListener);
+		this._childObserver = new MutationObserver((mutations) => {
+			const hasInputChange = mutations.some((m) => Array.from(m.addedNodes).some((n) => this._containsRadioInput(n)) || Array.from(m.removedNodes).some((n) => this._containsRadioInput(n)));
+			const hasNameRemoval = mutations.some((m) => m.type === "attributes" && m.attributeName === "name" && m.target instanceof HTMLInputElement && m.target.type === "radio" && !m.target.name);
+			if (hasInputChange || hasNameRemoval) {
+				this._wireInputs();
+				this._syncRequired();
+			}
+		});
+		this._childObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["name"]
+		});
+	}
+	_containsRadioInput(node) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		const el = node;
+		if (el.matches?.("input[type=\"radio\"]")) return true;
+		return !!el.querySelector?.("input[type=\"radio\"]");
+	}
+	_wireInputs() {
+		const inputs = Array.from(this.querySelectorAll("input[type=\"radio\"]"));
+		if (inputs.length === 0) return;
+		for (const input of inputs) {
+			if (!input.id) input.id = `ix-radio-${++radioInputCounter}`;
+			const wrapper = input.closest(".ix-radio-button") ?? input.parentElement;
+			if (wrapper) {
+				const label = wrapper.querySelector("label");
+				if (label && !label.htmlFor) label.htmlFor = input.id;
+			}
+		}
+		const hostName = this.getAttribute("name");
+		const existingName = inputs.find((i) => i.name)?.name;
+		const groupName = hostName || existingName || `ix-radio-group-name-${this._instanceId}`;
+		for (const input of inputs) if (hostName || !input.name) input.name = groupName;
+		this._syncHostStateToInputs();
+	}
+	_syncInvalid(error) {
+		if (!!error.textContent?.trim()) this.setAttribute("aria-invalid", "true");
+		else this.removeAttribute("aria-invalid");
+	}
+	_syncHostStateToInputs() {
+		const inputs = Array.from(this.querySelectorAll("input[type=\"radio\"]"));
+		const isDisabled = this.hasAttribute("disabled");
+		for (const input of inputs) if (isDisabled) {
+			if (!this._ownDisabled.has(input)) this._ownDisabled.set(input, input.disabled);
+			input.disabled = true;
+		} else if (this._ownDisabled.has(input)) {
+			input.disabled = this._ownDisabled.get(input);
+			this._ownDisabled.delete(input);
+		}
+	}
+	_syncRequired() {
+		const inputs = Array.from(this.querySelectorAll("input[type=\"radio\"]"));
+		if (this.hasAttribute("required")) {
+			this.setAttribute("aria-required", "true");
+			if (inputs[0]) inputs[0].required = true;
+			for (const input of inputs.slice(1)) input.required = false;
+		} else {
+			this.removeAttribute("aria-required");
+			for (const input of inputs) input.required = false;
+		}
+	}
+};
+//#endregion
 //#region lib/tooltip/tooltip.ts
 var TOOLTIP_ID = "ix-tooltip-singleton";
 var ATTR = "data-tooltip";
@@ -402,5 +607,6 @@ document.addEventListener("keydown", handleKeydown);
 //#region index.ts
 customElements.define("ix-field", IxField);
 customElements.define("ix-icon", IxIcon);
+customElements.define("ix-radio-group", IxRadioGroup);
 //#endregion
-export { ICON_NAMES, IxField, IxIcon };
+export { ICON_NAMES, IxField, IxIcon, IxRadioGroup };

package/dist/npm/lib/components/radio-group/IxRadioGroup.d.ts

@@ -0,0 +1,77 @@
+/**
+ * IxRadioGroup — ARIA-lim for radioknapp-grupper.
+ *
+ * ## Designfilosofi
+ *
+ * Komponenten erstatter ingen native HTML-elementer. Forfatteren skriver
+ * native <input type="radio">, <label> og hjelpetekster inni <ix-radio-group>.
+ * Komponenten sin eneste jobb er å sette opp ARIA-koblingene mellom dem.
+ *
+ * ## Hva komponenten gjør
+ *
+ * 1. Setter role="radiogroup" på host slik at skjermlesere annonserer gruppen
+ *    med riktig rolle og leser legend-teksten som gruppens tilgjengelige navn.
+ *
+ * 2. Kobler legend via aria-labelledby — genererer ID på [data-field="legend"]
+ *    om nødvendig og peker host til den.
+ *
+ * 3. Setter aria-describedby på host med IDer til description og error
+ *    (description alltid først). Hopper over elementer som mangler.
+ *
+ * 4. Genererer stabile IDer på hvert input og setter htmlFor på matchende label
+ *    om label ikke allerede har det. Respekterer alltid eksisterende IDer.
+ *
+ * 5. Synkroniserer name-attributt på alle inputs — name er mekanismen
+ *    nettleseren bruker for mutual exclusivity (ett valg av gangen) og
+ *    ArrowKey-navigasjon mellom alternativene. Alle inputs i gruppen må ha
+ *    samme name. Prioritet: name på host > name på input > auto-generert.
+ *
+ * 6. Setter aria-live="polite" på [data-field="error"] og observerer
+ *    textContent-endringer: ikke-tomt innhold → aria-invalid="true" på host;
+ *    tomt → aria-invalid fjernes. aria-invalid settes kun på host (ikke per
+ *    input) — det er gruppens validitet som telles, og en duplisert flagg
+ *    per input gir ingen merverdi for skjermlesere.
+ *
+ * 7. Propagerer disabled/readonly til alle inputs via attributeChangedCallback.
+ *    Per-knapp disabled bevares — settes med en WeakMap ved første _wire().
+ *
+ * 8. Lytter på childList på host slik at nye <input type="radio">-elementer
+ *    som legges til etter mount automatisk wires (id, name, htmlFor, disabled).
+ *
+ * ## Ingen Shadow DOM
+ *
+ * Komponenten bruker light DOM slik at CSS fra @sb1/indeks-css når alle
+ * delelementer direkte.
+ *
+ * @example
+ * <ix-radio-group>
+ *   <span data-field="legend">Velg kundetype</span>
+ *   <span data-field="description">Beskrivelse</span>
+ *   <div class="ix-radio-button">
+ *     <input type="radio" value="privat" />
+ *     <label>Privat</label>
+ *   </div>
+ *   <div class="ix-radio-button">
+ *     <input type="radio" value="bedrift" />
+ *     <label>Bedrift</label>
+ *   </div>
+ *   <span data-field="error"></span>
+ * </ix-radio-group>
+ */
+export declare class IxRadioGroup extends HTMLElement {
+    private _errorObserver;
+    private _childObserver;
+    private _keydownListener;
+    private _instanceId;
+    private _ownDisabled;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, _oldValue: string | null, _newValue: string | null): void;
+    private _wire;
+    private _containsRadioInput;
+    private _wireInputs;
+    private _syncInvalid;
+    private _syncHostStateToInputs;
+    private _syncRequired;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",