@arbetsformedlingen/yrkesvaljaren 2.0.5

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2024 Arbetsförmedlingen
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License. 

package/README.md

@@ -0,0 +1,369 @@
+# Yrkesväljaren webbkomponent
+
+En robust och intelligent sökkomponent för svenska yrken, designad för hög prestanda och tillförlitlighet. Den integrerar yrken från Arbetsförmedlingens taxonomi i valfri webbapplikation.
+
+---
+
+
+### Beskrivning
+
+*   **Enkelt hitta rätt yrke för användaren** <br>Sökalgoritmen prioriterar exakta träffar, prefix, flerdelade direktträffar och innehåller-träffar. Om inga direktträffar finns kan upp till tre fuzzy-träffar visas. Viktdata används som sekundär sortering.
+*   **Hög prestanda:** <br>Sökningen sker lokalt i webbläsaren mot inläst yrkesdata. Komponenten gör inga sökanrop till Taxonomy API.
+*   **Flexibel datahantering:** <br>Välj mellan automatiskt uppdaterad data, ett versionerat npm-datapaket eller en egen URL.
+
+---
+
+### Installation
+
+Runtime-komponenten kräver inte `@designsystem-se/af`. Den följer Arbetsförmedlingens visuella designsystem via lokala tokens och primitives, men registrerar inga designsystem-webbkomponenter.
+
+1.  **Konfigurera NPM-scope:** Skapa en `.npmrc`-fil i roten av ditt projekt.
+    ```ini
+    @taxonomy:registry=https://gitlab.com/api/v4/projects/74569456/packages/npm/
+         
+    ```
+2.  **Installera komponenten med senaste data:**
+    ```bash
+    npm install @taxonomy/yrkesvaljaren
+    ```
+
+    När ingen datakälla anges hämtar komponenten senaste publicerade yrkesdata automatiskt.
+
+3.  **Alternativ: installera ett versionerat datapaket:**
+    ```bash
+    npm install @taxonomy/yrkesvaljaren @taxonomy/yrkesvaljaren-data-v30
+    ```
+
+    Detta låser taxonomiversionen vid build time. Registrera paketets data innan komponenten används:
+
+    ```javascript
+    import { registerTaxonomy } from '@taxonomy/yrkesvaljaren';
+    import {
+      taxonomyData,
+      metadata
+    } from '@taxonomy/yrkesvaljaren-data-v30';
+
+    registerTaxonomy({ data: taxonomyData, metadata });
+    ```
+
+`af-taxonomy-url` är ett tredje, avancerat alternativ. Ange då en fullständig, explicit URL till den datafil som ska användas.
+
+### Användning
+
+För att snabbt komma igång, här är ett komplett HTML-exempel som visar hur du inkluderar och använder Yrkesväljaren:
+
+```html
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Yrkesväljaren exempel</title>
+</head>
+<body>
+
+  <h1>Yrkesväljaren exempel</h1>
+
+<!-- Komponenten -->
+<digi-service-job-selector af-label="Välj yrke"></digi-service-job-selector>
+<script type="module">
+
+// Imports (sökväg beror på ditt byggverktyg)
+import { defineCustomElements as defineYrkesvaljaren } from "@taxonomy/yrkesvaljaren/loader";
+defineYrkesvaljaren(window);
+document.querySelector("digi-service-job-selector")
+.addEventListener("afJobSelected", (e) => {
+console.log("Valt yrke:", e.detail);
+});
+</script>
+
+</body>
+</html>
+```
+
+### Vite
+
+Yrkesväljaren använder en Stencil-loader som hämtar komponenternas entry-filer dynamiskt. I Vite ska loader-paketet därför undantas från dependency optimizer, annars kan Vite flytta loadern till `.vite/deps` och de dynamiska importerna får fel sökväg.
+
+```javascript
+// vite.config.js
+export default {
+  optimizeDeps: {
+    exclude: [
+      '@taxonomy/yrkesvaljaren/loader',
+    ],
+  },
+};
+```
+
+### Designsystem-kompatibilitet
+
+Runtime-komponenten kräver inte `@designsystem-se/af`, registrerar inga designsystem-webbkomponenter och krockar inte om host-appen redan använder det riktiga designsystemet. Komponenten innehåller en liten lokal kompatibilitetsyta med AF-liknande design tokens, typografi, färger, fokusramar och ikoner. Demosidan i repo:t använder fortfarande designsystemet för dokumentationslayout och visuell referens.
+
+De lokala tokenvärdena och primitive-stilarna är anpassade från Arbetsförmedlingens designsystem under Apache-2.0 och används bara för att runtime-komponenterna ska rendera fristående.
+
+### Attribut
+
+| Attribut | Beskrivning | Typ | Standardvärde |
+|:---|:---|:---|:---|
+| `af-label` | Etikettext som visas ovanför sökfältet. | `string` | `'Välj yrke'` |
+| `disabled` | Om satt till `true`, kan väljaren inte användas med mus eller tangentbord. | `boolean` | `false` |
+| `af-label-description`| En valfri beskrivningstext som visas under etiketten. | `string` | `undefined` |
+| `af-placeholder` | Hjälptext som visas inuti sökfältet. Denna är ett bra stöd för de med kognitiv funktionsvariation - rekommendationen är att behålla denna text, och att inte flytta den till `description`. | `string` | `'T.ex. frisör, vårdbiträde, snickare'` |
+| `af-error-message` | Ett anpassat felmeddelande som visas vid valideringsfel. | `string` | `undefined` |
+| `af-enable-multiple` | Om satt till `true`, tillåts val av flera yrken. | `boolean` | `false` |
+| `af-history` | Sparar användarval lokalt i webbläsarens Local Storage och visar historiken på samma domän. | `boolean` | `true` |
+| `af-required` | Om satt till `true`, måste användaren göra ett val för att fältet ska vara giltigt (obligatoriskt fält). | `boolean` | `false` |
+| `af-manual-input` | Om satt till `true`, tillåts användaren att ange ett yrke fritt via fritext som inte finns i listan. Om satt till `false` måste ett fördefinierat yrke väljas. | `boolean` | `false` |
+| `af-size` | Storleken på inputfältet. Möjliga värden: `'small'`, `'medium'`, `'large'`. | `string` | `'medium'` |
+| `af-popular` | Om satt till `true`, visas sektionen "Populära sökningar" när historiken är tom. | `boolean` | `true` |
+| `af-taxonomy-url` | Fullständig, explicit URL till en egenhostad datafil. Utelämna attributet för att använda senaste data automatiskt. | `string` | `undefined` |
+
+### Riktlinjer och rekommendationer
+
+Tre centrala inställningar styr användarupplevelsen och datakvaliteten i Yrkesväljaren:
+
+#### Obligatorisk (`af-required`)
+* **Hur man kan resonera:** När `af-required="true"` måste användaren välja minst ett yrke för att fältet ska betraktas som giltigt. Komponenten fungerar som ett standardenligt *Form-Associated Custom Element* (FACE). Det innebär att webbläsaren automatiskt validerar fältet vid formulärinskick, förhindrar att formuläret skickas in om det är tomt, och integrerar med formulärets `validity`-status.
+* **När det rekommenderas:** I formulär och flöden där ett yrkesval är ett obligatoriskt steg i ett ärende (t.ex. registrering av profil, jobbansökan eller behörighetskontroll).
+* **När det bör undvikas:** I öppna sök- eller filtreringsvyer där användaren ska kunna söka brett, filtrera på andra parametrar (t.ex. enbart ort/geografi) eller frivilligt specificera yrke.
+
+#### Tillåt fritext (`af-manual-input`)
+* **Hur man kan resonera:** Avgör om användaren strikt måste välja ett strukturerat yrkesbegrepp ur Arbetsförmedlingens taxonomi (vilket garanterar Concept ID och SSYK-kod), eller om användaren även tillåts mata in egna fritextvärden som inte finns i taxonomin. Vid fritext visas valet *"Använd '{inmatning}'"* i listan som användaren aktivt väljer eller bekräftar med Enter.
+* **När det rekommenderas:**
+  * **Strikt taxonomi (`af-manual-input="false"` – standard & rekommenderas):** När yrkesdatan ska användas för automatisk matchning, statistiska analyser, maskininlärning eller integration mot backend-system som förutsätter Concept ID. Detta säkerställer hög datakvalitet.
+  * **Fritext tillåten (`af-manual-input="true"`):** I öppna fritextprofiler, fritextenkäter eller intresseanmälningar där det är viktigare att fånga upp vad användaren själv kallar sin roll än att få ett taxonomi-ID, eller där man inte vill blockera användare med ovanliga, nischade eller internationella titlar.
+
+#### Tillåt historik (`af-history`)
+* **Hur man kan resonera:** Sparar gjorda val i webbläsarens `localStorage` per domän och visar dem som *"Tidigare val"* när användaren fokuserar ett tomt sökfält.
+* **När det rekommenderas:** I flöden där användaren ofta gör återkommande sökningar (t.ex. jobbsökare eller handläggare).
+* **När det bör undvikas:** På delade publika terminaler eller kioskdatorer (t.ex. på Arbetsförmedlingens servicekontor eller bibliotek) där personers tidigare sökningar inte ska sparas eller exponeras för efterföljande besökare på samma dator.
+
+### Välj datakälla
+
+Välj ett av följande sätt:
+
+1. Registrera ett versionerat datapaket med `registerTaxonomy(...)`.
+2. Ange en fullständig URL med `af-taxonomy-url` för en egenhostad datafil.
+3. Utelämna båda för att använda senaste data automatiskt.
+
+En angiven `af-taxonomy-url` är den valda datakällan. Om URL:en inte kan laddas
+går komponenten till felläge och skickar `afJobDataLoadFailed`.
+<br>
+
+### Events
+
+| Händelse | Beskrivning |
+|:---|:---|
+| `afJobSelected` | Skickas ut när användaren ändrar valet. `event.detail` innehåller `JobSelectionItem[]` som kan skickas tillbaka till `setSelection()`. |
+| `afJobDataLoadFailed` | Skickas när laddningen av yrkesdata misslyckas. |
+| `afJobValidationChange` | Skickas när komponenten kör validering efter att fältet har berörts. `event.detail` innehåller `{ isValid: boolean, errorType: 'required'|'invalidInput'|null }`. |
+
+### Metoder
+
+Yrkesväljaren exponerar några metoder för värdapplikationer som behöver styra
+komponenten från JavaScript. De vanligaste är `setSelection(...)` och
+`setFocus()`. Övriga metoder finns för formulärintegration och dynamisk
+dataladdning.
+
+#### Primära metoder
+
+| Metod | Returvärde | Beskrivning |
+|:---|:---|:---|
+| `setSelection(input)` | `Promise<JobSelectionItem[]>` | Sätter eller rensar ett programmatiskt val. Returnerar komponentens normaliserade selection. |
+| `setFocus()` | `Promise<void>` | Flyttar fokus till sökfältet. Används när värdappen till exempel öppnar en modal eller vill fokusera fältet efter ett fel. |
+
+#### Formulärvalidering
+
+Yrkesväljaren är ett form-associated custom element. Det betyder att den kan
+delta i vanliga HTML-formulär ungefär som ett inbyggt inputfält. Metoderna
+nedan är till för värdapplikationer som behöver läsa eller trigga den
+valideringen manuellt.
+
+| Metod | Returvärde | Beskrivning |
+|:---|:---|:---|
+| `validate(forceTouch?)` | `Promise<boolean>` | Kör Yrkesväljarens egen validering. Returnerar `true` om fältet är giltigt. Med `forceTouch=true` visas valideringsfel även om användaren inte hunnit interagera med fältet. |
+| `checkValidity()` | `Promise<boolean>` | Returnerar om komponenten är giltig enligt webbläsarens formulärvalidering. Visar inget felmeddelande i UI. |
+| `reportValidity()` | `Promise<boolean>` | Kör webbläsarens formulärvalidering och låter webbläsaren visa valideringsfeedback om fältet är ogiltigt. |
+| `getValidity()` | `Promise<ValidityState>` | Returnerar webbläsarens detaljerade giltighetsstatus, till exempel om värdet saknas eller om komponenten har satt ett eget fel. De flesta integrationer behöver bara `validate()` eller `checkValidity()`. |
+| `getValidationMessage()` | `Promise<string>` | Returnerar texten som webbläsaren skulle använda som valideringsmeddelande just nu. |
+
+#### Dynamisk dataladdning
+
+| Metod | Returvärde | Beskrivning |
+|:---|:---|:---|
+| `updateData()` | `Promise<void>` | Läser om data efter ett nytt anrop till `registerTaxonomy(...)`. Behövs bara om värdappen byter taxonomidata efter att komponenten redan har renderats. |
+<br>
+
+### Input och output - programmatisk värdesättning
+
+Programmatisk input går endast genom `setSelection()`. Metoden accepterar:
+
+* en sträng
+* en array där alla värden är strängar
+* den rika `JobSelectionItem[]` som `afJobSelected` tidigare har returnerat
+
+Output är alltid en rik `JobSelectionItem[]`, både från metodens returvärde och från `afJobSelected.detail`.
+
+```typescript
+type JobSelectionItem =
+  | {
+      type: 'job-title' | 'occupation-name';
+      id: string;
+      preferred_label: string;
+      ssyk_code_2012?: string;
+      related?: {
+        type: 'occupation-name';
+        id: string;
+        preferred_label: string;
+      };
+    }
+  | {
+      type: 'manual-input';
+      id: null;
+      preferred_label: string;
+    };
+```
+
+För vanliga formulär hämtas värdet lämpligen via `new FormData(form)`. För applikationsstate sparar värdappen metodens returvärde eller `afJobSelected.detail`.
+
+`afJobSelected` använder samma format som metoden returnerar. Output kan därför sparas av värdappen och senare skickas tillbaka utan konvertering:
+
+```javascript
+yrkesvaljaren.addEventListener("afJobSelected", async (event) => {
+  await annanYrkesvaljare.setSelection(event.detail);
+});
+```
+
+* **Inget valt:** `await yrkesvaljaren.setSelection([])`
+* **Taxonomival in:** `await yrkesvaljaren.setSelection('jrjV_wcz_fxg')`
+* **Taxonomival ut:** `{ type: 'job-title', id: 'jrjV_wcz_fxg', preferred_label: 'Sjuksköterska', ssyk_code_2012: '2221', related: { type: 'occupation-name', id: 'bXNH_MNX_dUR', preferred_label: 'Sjuksköterska, grundutbildad' } }`
+* **Fritext in:** `await yrkesvaljaren.setSelection('Pensionär')` kräver `af-manual-input="true"`
+* **Fritext ut:** `{ type: 'manual-input', id: null, preferred_label: 'Pensionär' }`
+
+En sträng som matchar Concept ID-formatet tolkas alltid som ett taxonomi-id och verifieras mot det laddade YV-datasetet. Övriga strängar tolkas som fritext. Fritext kräver `af-manual-input="true"`.
+
+Komponenten gör inget anrop till Taxonomy API. För ett rikt taxonomiobjekt identifierar `id` yrket; YV returnerar aktuell metadata från det redan laddade datasetet.
+`ssyk_code_2012` är SSYK 2012-koden när den finns i YV-datat. Komponenten returnerar inget fält som heter `ssyk` och returnerar inte SSYK-nivåns taxonomi-id.
+
+Samma input-array får inte blanda strängar och objekt. Flera värden kräver `af-enable-multiple="true"`; metoden aktiverar aldrig flervalsläge automatiskt.
+
+```javascript
+import { InvalidSelectionError } from '@taxonomy/yrkesvaljaren';
+
+const yrkesvaljaren = document.querySelector('digi-service-job-selector');
+
+try {
+  const selection = await yrkesvaljaren.setSelection([
+    'iW55_9hv_bNp',
+    'Pensionär'
+  ]);
+  console.log('Valda yrken:', selection);
+} catch (error) {
+  if (error instanceof InvalidSelectionError) {
+    console.error(error.code, error.invalidIds);
+  }
+}
+```
+
+Om inputen är ogiltig avvisas Promise-anropet med `InvalidSelectionError`. Senaste giltiga val behålls, ett tydligt fel skrivs med `console.error`, och Yrkesväljaren markeras som `invalidInput` via `afJobValidationChange`. `setSelection()` skickar inte `afJobSelected`; eventet representerar endast användarens val.
+
+<br>
+
+#### Rensa val (både singel- och flervalsläge)
+
+För att programmatiskt rensa gjorda val, anropa `setSelection([])`:
+
+```javascript
+const yrkesvaljaren = document.querySelector('digi-service-job-selector');
+await yrkesvaljaren.setSelection([]);
+```
+
+---
+<br>
+
+### Validering
+
+Komponenten har ett inbyggt, autonomt valideringssystem.
+
+#### Obligatoriskt fält
+
+För att göra fältet obligatoriskt, använd `af-required`-attributet och ställ in `af-manual-input` på `false`.
+
+```html
+<digi-service-job-selector
+  af-label="Välj ett yrke (obligatoriskt)"
+  af-required="true"
+  af-manual-input="false"
+></digi-service-job-selector>
+```
+
+När detta är inställt kommer komponenten att visa ett felmeddelande om användaren klickar i och sedan lämnar fältet utan att göra ett giltigt val. Om `af-manual-input` istället är satt till `true` tillåts användaren att ange ett yrke manuellt via fritext.
+<br>
+#### Lyssna på valideringsstatus (`afJobValidationChange`)
+
+För att i realtid veta om komponenten är giltig kan du lyssna på `afJobValidationChange`-händelsen.
+
+```javascript
+const yrkesvaljarenElement = document.querySelector('digi-service-job-selector');
+
+yrkesvaljarenElement.addEventListener('afJobValidationChange', (event) => {
+  const { isValid, errorType } = event.detail;
+  console.log(`Är komponenten giltig? ${isValid}`);
+  if (!isValid) {
+    console.log(`Typ av fel: ${errorType}`); // 'required' eller 'invalidInput'
+  }
+});
+```
+<br>
+#### Manuell validering (`validate()`)
+
+För att manuellt trigga en validering, till exempel vid ett formulär-submit, kan du anropa den publika metoden `validate()`.
+<br>
+#### Formulärstöd (FACE)
+
+Komponenten agerar som ett inbyggt HTML-formulärelement (`Form-Associated Custom Element`). Detta innebär att om komponenten ligger i ett `<form>` och har `af-required="true"` kommer webbläsaren automatiskt att stoppa inskick av formuläret om fältet är tomt. Det går även bra att hämta värdet via `new FormData(form)`.
+
+`name` följer HTML-standard och fungerar som på `<input name="...">`. Det är
+därför inte prefixat med `af-`. Värdet används som fältnamn och nyckel i
+`FormData`.
+
+```html
+<form id="job-form">
+  <digi-service-job-selector
+    name="occupation"
+    af-label="Välj yrke"
+    af-required="true">
+  </digi-service-job-selector>
+</form>
+```
+
+```javascript
+const form = document.querySelector('#job-form');
+const yrkesvaljarenElement = document.querySelector('digi-service-job-selector');
+
+form.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const isComponentValid = await yrkesvaljarenElement.validate();
+
+  if (isComponentValid) {
+    const formData = new FormData(form);
+    console.log(formData.get('occupation'));
+    console.log('Formuläret är giltigt och kan skickas!');
+    // Skicka formulär...
+  } else {
+    console.log('Formuläret är ogiltigt.');
+  }
+});
+```
+<br>
+### Utveckling och release
+
+Lokala utvecklingskommandon och releaseinstruktioner finns i [CONTRIBUTING.md](CONTRIBUTING.md).
+Komponentpaket publiceras automatiskt av CI från taggar:
+* `vX.Y.Z` publicerar Yrkesväljaren till officiella npm som `@arbetsformedlingen/yrkesvaljaren` (samt till GitLab som `@taxonomy/yrkesvaljaren`).
+* `kv-vX.Y.Z` publicerar Kompetensväljaren.
+
+`npm run build` använder endast versionshanterad data och kräver ingen
+nätverksåtkomst. `npm run refresh:data` bygger om samtliga versionerade
+data-workspaces och hämtar då YV-data från upstream.

package/dist/cjs/af-validation-message-BzY5H0xU.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var index = require('./index-BOuTGlEp.js');
+
+const AfValidationMessage = (props, children) => {
+    const extraClass = props.class || '';
+    return (index.h("div", { id: props.id, role: props.role, class: { [extraClass]: !!extraClass } }, index.h("div", { class: {
+            'af-validation-message': true,
+            [`af-validation-message--${props.variant}`]: true,
+        } }, index.h("span", { class: {
+            'af-validation-message__icon': true,
+            [`af-validation-message__icon--${props.variant}`]: true,
+        }, "aria-hidden": "true" }), index.h("span", { class: "af-validation-message__text" }, children))));
+};
+
+exports.AfValidationMessage = AfValidationMessage;