@rijkshuisstijl-community/components-angular 1.0.0

package/dist/heading/heading.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare const headingLevels: readonly [1, 2, 3, 4, 5];
+export type HeadingLevel = (typeof headingLevels)[number];
+export declare class HeadingComponent {
+    level: HeadingLevel;
+    appearanceLevel?: HeadingLevel;
+    stylingLevel: () => 1 | 2 | 3 | 4 | 5;
+    computedClasses: () => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeadingComponent, "rhc-heading", never, { "level": { "alias": "level"; "required": true; }; "appearanceLevel": { "alias": "appearanceLevel"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/icon/RHCIconIDs.d.ts

@@ -0,0 +1,2 @@
+export declare const rhcIconIDs: readonly ["aangifte-ondernemers", "aanrecht-met-kraan-en-koffiekan", "aar", "aar-met-bladeren", "accijns", "accu", "actieve-gevel", "activiteit", "adl-woning", "advocaat", "afbrokkelend-schild-met-capsule", "afhaaleten", "afhaalpunt", "afrit", "afsprakenstelsel", "afstand-houden", "afstand-houden-armen", "afvalcontainer-plastic", "agile-werken", "alert-circle", "alert-triangle", "algemeen-alarm", "ambassade-consulaat", "ambtenaar", "ambulance", "anker", "api-inrichting", "applicatie", "aquaduct", "aren", "arrows-sort", "arts", "atoom-wetenschap", "audio", "auto", "auto-", "auto-hulpdiensten-", "auto-met-3-personen", "auto-met-parkeermeter", "auto-met-pijlen-linksaf-en-rechtsaf", "auto-met-stekker", "auto-met-zender-op-dak", "auto-met-zender-voor", "auto-met-zenders-opzij", "auto-met-zenders-voor-en-opzij", "auto-onder-overkapping", "auto-onder-overkapping-met-broodje", "auto-op-zijn-kant-met-barst", "auto-op-zijn-kant-voor-vrachtauto-met-barst", "auto-voor-bestelbus", "auto-vooraanzicht", "autos-achter-elkaar", "autos-met-waarschuwingsbord", "avondklok-negen-uur", "baby", "baby-torso", "babypop", "backpack", "bacterie-dodende-gel", "baggeren", "bakfiets", "bakkerijketens", "ballonnen", "ballonstokjes", "baret", "basis-kantoorgebouw", "basisregistratie", "batterij", "beeldbellen", "beeldscherm-met-hart", "beeldscherm-met-streep-erdoor", "bel", "belegd-broodje", "benauwdheid", "benzinepomp", "beroepsvisser", "beschermde-woonomgeving", "bestelbus", "bestelbus-2", "bestelbus-rijdend", "beveiligingscamera", "beveiligingsscan", "bevestiging", "beweegbare-brug", "beweegbare-brugtijden", "bewerken", "bezoekersruimte-gedetineerden", "biddende-handen", "big-ben", "biobrandstof", "blad-met-wereldbol", "bloeddrukmeter", "bloem-met-uitroepteken", "blog", "blok-met-druppel", "boei", "boek", "boek-opengeslagen", "boeken-achter-elkaar", "boeket", "boer", "boerin", "bokaal", "bol-met-rasterpatroon", "bom", "bommelding", "boom-en-struiken", "boom-lachend", "boom-met-bank", "boom-met-picknicktafel", "boos", "boot-vol-mensen-op-water", "bord-15-km", "bord-30-km", "bord-40-km", "bord-5-km", "bord-50-km", "bord-met-grafieken", "bord-provincie", "bout-met-hap-eruit", "brandalarm", "brandblusser", "brandende-lamp-met-copyright-teken", "brandslang", "brandweerauto-met-klok", "brein", "brein-boven-uitgestoken-hand", "briefcase", "brievenbus-met-envelop", "brood", "brood-met-pijl-omhoog", "broodje-en-appel", "broodje-met-keurmerk", "btw-betalen", "budget", "buitenlandse-handel", "buitenzwembad", "bureaulamp", "bureaustoel", "bureaustoel-en-loep", "bureaustoel-met-tekst-arbo", "bureaustoel-met-thermometer", "burgemeester-voor-2-personen", "bus", "bushalte", "capsule-boven-uitgestoken-hand", "capsule-met-pijl-omhoog", "capsule-met-vinkje", "capsules", "car", "caribisch-nederland", "cateringbedrijven", "chevron-right", "chili-bonen-en-peper", "chip", "chirurg", "circle-check", "circulaire-bouw", "circulaire-economie", "coffeeshop", "coffeeshop-in-wijk", "colosseum", "comment", "communicatie", "computer", "computercode", "conducteur", "contactloos-betalen", "coronavaccin", "coupure", "crisisoverleg", "cruiseschip", "currency-euro", "cybersecurity", "dansen", "database", "datalek", "dataverkeer", "defensie", "delen", "delta-naar-links", "delta-naar-rechts", "delta-omhoog", "delta-omlaag", "diagonale-pijl", "dienblad-op-uitgestoken-hand", "dierentuin", "digitaal-onderzoek", "digitale-uitwisseling", "digitalisering", "dijk", "dijkversterking", "diploma-certificaat", "dna", "dna-op-beeldscherm", "docent-voor-klas", "document-blanco", "document-en-telefoon-met-vinkje", "document-en-telefoon-met-vinkjes", "document-met-golvende-lijnen-en-lint", "document-met-grafiek-boven-uitgestoken-hand", "document-met-lijnen", "document-met-lijnen-en-lint", "document-met-locatiemarker", "document-met-ontevreden-gezicht", "document-met-persoon", "document-met-potlood", "document-met-tekst-csv", "document-met-vinkje", "document-met-vinkje-en-persoon", "document-met-vinkjes-en-lijnen", "document-met-vlakken-en-lijnen-erop", "document-wisselen", "documenten-met-elkaar-verbonden", "doel-met-drie-circels", "doel-met-vijf-circels", "doos-met-pijlen-op-zijkant", "doosje-met-ce-keurmerk", "doping", "dorp", "douane", "douches", "downloaden", "draaideurlinks", "draaideurrechts", "draairichting-deur-naar-je-toe", "draairichting-deur-van-je-af", "drankverpakkingen", "dreiging-van-buitenaf", "drie-personen-in-huis", "drijvende-kraan", "drinkbeker", "drone", "drugs", "drugs-pillen", "druppel", "druppel-met-uitroepteken", "duim-omhoog", "duim-omlaag", "duurzaam-waterbeheer", "ecoduct", "eencelligen-onder-loep", "eend-zwemmend-bij-riet", "ehbo-aed", "ehbo-ruimte", "elektriciteit", "elleboognies", "enkelband", "enthousiast", "envelop", "erlenmeyer-chemie", "esculaap", "eurobiljetten", "evenement", "evenemententent", "excellente-scholen", "externe-link", "fabriek-aan-water", "fabriek-met-stapel-munten", "favoriet", "fazant", "festival-ehbo", "fiets", "fiets-met-krat", "fiets-met-stekker", "film-projector", "filmstrip-met-plusteken", "financien", "finish-vlag", "fiod", "flat", "fles-met-beer-en-tube", "fles-met-mes-en-vork", "fles-zuivel-sap", "flesje-met-tatoeage-inkt", "foto-met-plusteken", "foto-vergroten", "fotocamera", "foutmelding", "fruitschaal", "fysiotherapeut", "ga-naar-www", "gamecontroller", "gaspit-aan", "gaspit-uit", "gebouw-cak", "gebouw-cjib", "gebouw-cvz", "gebouw-ggz", "gebouw-igz", "gebouw-met-busje", "gebouw-nvwa", "gebouw-vws", "gebouw-zini", "gebouwenbeheer", "gedeelde-douche", "geen-handen-schudden", "geen-spatscherm", "gegevensuitwisseling", "geit", "geleidehond", "geluid-aan", "geluid-uit", "gemaal", "gemeente-en-provinciefonds", "gemeentehuis", "genderneutraal", "geplandoverleg", "gesprek-over-welzijn", "getij", "gevaarlijke-stoffen", "gevangene", "gevangenisdeur", "gevouwen-document", "gevouwen-document-met-kruis", "gevuld-wijnglas", "gewicht", "gewichtheffer-staand", "gezinszorg", "gezinszorg-met-oudere", "gijzeling", "glazen-op-tafel", "golven", "golvende-pijlen", "grafiek", "grafieken-op-beeldscherm", "grijparm", "groene-energie", "groep-3-personen", "groep-3-personen-torso", "groep-5-personen", "groep-personen-op-verhoging", "grootstedelijk", "grote-brand", "gum", "haakse-pijl", "haakse-pijl-linksboven", "haakse-pijl-linksonder", "haakse-pijl-rechtsboven", "haakse-pijl-rechtsonder", "haan", "haan-en-fazant", "half-tandwiel-half-brein", "halter", "hand", "hand-2-vingers-opgestoken", "hand-achter-oor", "hand-met-pen-", "hand-met-rekening", "hand-met-snee-en-druppel", "hand-met-vlek", "hand-met-wond", "hand-v-teken-voor-prikkeldraad", "handboeien", "handel", "handen-schudden", "handen-schudden-hartvorm", "handen-wassen", "handmicrofoon", "hangend-alarmsysteem", "hangende-plant-op-gebarsten-grond", "hangende-spot", "hanger-hart", "hangkaart-met-hand-erop", "hangslot-dicht", "hangslot-dicht-met-hart-erop", "harddrugs", "hart", "hart-met-oudere", "hart-met-vinkje-erin", "hart-onder-microscoop", "hart-tussen-2-uitgestoken-handen", "hashtag", "heffen-en-innen", "helikopter", "hert", "hijskraan", "hockeyer", "hoge-auto-voor-rolstoel", "hoge-gebouwen-met-pijl-naar-rechts", "hoge-golf-langs-vuurtoren", "home", "hond", "hond-met-kluif-en-klok", "hond-uitlaten", "hoofd-hoesten", "hoofd-met-brandende-lamp", "hoofd-met-brein", "hoofd-met-doolhof", "hoofd-met-krabbels", "hoofd-met-schedel", "hoofd-met-vinkje-en-wattenstaafje", "hoofd-met-wattenstaafje-bij-mond", "hoofd-met-wattenstaafje-bij-neus", "hoofd-met-zuidwester", "hoog-huis", "hoogbouw-transitie", "hoogspanningsmast", "hoogwater", "horecaketens", "huis-auditief-gehandicapten", "huis-lichamelijk-gehandicapten", "huis-psychiatrische-patienten", "huis-verstandelijk-gehandicapten", "huis-visueel-gehandicapten", "huisarts", "huiselijk-geweld", "huisvesting", "hulpverleners", "huurtoeslag", "huurwoning", "hybride-laptop", "iconen-toevoegen", "ict", "immigratie", "importtarief-verlaging", "inbox", "inclusiviteit", "industrie", "industrie-met-druppel-water", "info", "info-circle", "info-square", "informatie-op-internet", "injectienaald", "inkomstenbelasting", "inloggen", "instellingen", "instortingsgevaar", "interne-link", "internet", "internet-archief", "iris", "ius-opvang", "jacht-op-water", "jaloezie", "jeugdzorg", "jonge-plant-komt-uit-grond", "jonge-plant-op-hoop-aarde", "jonge-plant-op-uitgestoken-hand", "jongen-torso", "kaars-voor-grafsteen", "kaars-voor-grafsteen-wo2", "kade", "kalender", "kalender-met-2-personen", "kalender-met-bliksemschicht", "kalender-met-vinkje", "kalender-met-virus", "kalender-met-vlakken", "kan-met-druppel", "kantoor-vol-energie", "kapperbezoek", "kartonnen-doos", "kassa", "kat-en-hond", "kerncentrale", "kernongeval", "kernreactorgebouw-naast-schoorsteen", "ketting", "kikker", "kind-in-kinderstoel", "kind-springend-op-trampoline", "kind-vrouw-en-man", "kind-vrouw-en-man-met-wandelstok", "kind-vrouw-met-koffer-en-man-met-wandelstok", "kinderbescherming", "kinderen-springend-naar-bal", "kinderopvang", "kinderwagen", "kist-met-hamer-en-moersleutel", "klantencontactcenter", "kledinghanger", "kleedkamer", "kleedkamer-man", "kleedkamer-vrouw", "kleinschalig-wonen", "klembord-met-lijnen-met-kruis", "klembord-met-loep", "klembord-met-vinkje", "klembord-met-vinkjes-en-lijnen", "kleurenwaaier", "kliko", "kliko-dicht", "klimaatverandering", "klok", "klok-op-hand", "koe", "koe-gevlekt", "koe-met-tekst-co2", "koets", "koffer", "koffer-met-kruis", "koffiekan-met-beamer", "koffiezetapparaat", "kolfruimte", "kompas", "koninkrijk", "kookbrander", "koopwoning", "koorts", "kop-warme-drank", "kopieerapparaat", "koptelefoon", "koptelefoon-over-microfoon", "kraan-met-druppel-water", "kring-3-personen-torso", "kring-5-personen-staand", "kroon", "kroon-boven-uitgestoken-hand", "krop-sla-en-wortel", "kruis", "kruis-met-vergrootglas", "kwast-en-hark", "laag-huis", "laag-water", "laarzen", "label", "lachend-gezicht", "lade-archiefkast", "lamp", "landmacht", "landschapselement", "langdurige-zorg", "laptop", "laptop-met-huis", "ledikant", "leefbaarheid", "leegstand", "leegstand-en-tijdelijk-gebruik", "leren-handschoen", "let-op", "let-op-met-loep", "literfles", "locatiemarker", "locatiemarker-boven-uitgestoken-hand", "locatiemarker-met-blad", "locatiemarker-met-vinkje", "loep-en-water", "lokaal-welzijnswerk", "loonheffingen", "lopende-personen-met-koffer", "lorrie-gevuld", "loungewerkplek", "louvreluiken", "luchtmacht", "maandverband", "mail", "maiskolf", "man-en-vrouw-achter-buro-met-gordijn", "man-gelijk-aan-vrouw", "man-hoofd", "man-hoofd-leunend-op-hand", "man-lopend", "man-met-bril-torso", "man-met-cirkel-van-2-pijlen", "man-met-dubbele-pijl", "man-met-gebouw", "man-met-gebouwen", "man-met-hart", "man-met-headset-voor-raam-scherm", "man-met-laptop", "man-met-loep", "man-met-medicatie", "man-met-mondkapje", "man-met-nekkraag-en-munten", "man-met-puzzelstuk", "man-met-stropdas-en-sleutelbos", "man-met-stropdas-torso", "man-met-stropdas-voor-2-personen", "man-met-stropdas-voor-persoon-met-helm", "man-met-tekst-zzp", "man-met-wandelstok", "man-staand", "man-torso", "man-torso-voor-hoogbouw", "mantelzorg", "map", "map-met-loep", "map-vol-documenten", "marechaussee", "matrixbord-met-maximumsnelheid", "matroos", "medaille-met-hart-erop", "medisch-beroepsgeheim", "mee-eens", "meer", "megafoon", "megastallen", "meisje-torso", "menu", "metalen-vat-in-water", "microfoon", "mier", "milieu", "mobiel-in-hand", "moersleutel", "moersleutel-en-moer", "moersleutel-en-pen", "moersleutel-en-schroevendraaier", "molecuul", "mondkapje", "monument", "moskee", "motor", "motor-hulpdiensten", "motorrijtuigenbelasting", "muis", "nederland", "nederland-map", "nederland-met-auto", "nederland-met-locatie-grote-steden", "nederland-met-pijl-naar-rechts-beneden", "nederland-met-schip", "nederland-met-stapel-munten", "nederland-met-water", "nerts", "net-boven-vis", "netwerk", "neushoorn-met-uitroepteken", "neusverkoudheid", "nietmachine", "nieuwe-computer", "nieuws", "nl-alert", "noodopvang", "nooduitgang", "oever-met-rietkraag", "omgevallen-pot-met-capsules", "omzetbelasting", "ondernemingen", "ondernemingsklimaat", "ongeoorloofde-afwezigheid", "ongepland-overleg", "ongeval", "online-groepstraining", "online-leren", "ontruiming", "ontvluchting", "ontwerp", "oog", "oog-met-traan", "oogcremes", "oor", "oor-met-gehoorbeschermer", "oordopjes", "open-raam-met-pijlen", "opendeur-met-pijl-sluiten", "openraam-met-pijl-sluiten", "oprit", "opsomming", "opvang-en-nazorg", "oude-computer", "ouderenzorg", "overlijden-in-detentie", "overstroming-dreiging-1", "overstroming-dreiging-2", "overstroming-dreiging-3", "overval", "pagode", "pallet-met-dozen", "palmboom-met-weegschaal", "paperclip", "paspoort", "pauw", "pcm", "permanent-beta", "persconferentie", "personen-arm-op-schouder", "personen-armen-om-schouders", "personen-gooien-auto-omver", "personen-hand-op-rug", "personen-hand-op-schouder", "personen-in-gesprek", "personen-in-lift", "personen-staand-voor-auto", "personen-staand-voor-fiets", "personen-staand-voor-scooter", "personenweegschaal", "persoon-aan-balie", "persoon-achter-stuur", "persoon-armen-en-benen-gespreid", "persoon-bij-motorkap-auto", "persoon-boven-3-pijlen", "persoon-gooit-afval-weg", "persoon-handen-in-zij", "persoon-headset-voor-beeldschermen", "persoon-in-lift-1", "persoon-in-lift-2", "persoon-in-niqab-torso", "persoon-in-rolstoel", "persoon-in-rolstoel-en-munten", "persoon-in-starthouding-sprint", "persoon-in-stoel-bij-raam-scherm", "persoon-in-uniform-en-doos", "persoon-in-water", "persoon-kaal-in-gestreept-shirt-torso", "persoon-loopt-naar-trein", "persoon-lopend-met-koffer", "persoon-lopend-met-koffer-en-rolkoffer", "persoon-lopend-met-tassen", "persoon-lopend-op-zebrapad", "persoon-met-bedekt-gezicht-en-geweer", "persoon-met-bivakmuts-torso", "persoon-met-blinddoek", "persoon-met-bouwhelm-en-stapel-munten", "persoon-met-cape", "persoon-met-capuchon-en-slot", "persoon-met-capuchon-op-met-laptop", "persoon-met-capuchon-voor-persoon", "persoon-met-dicht-hangslot", "persoon-met-drone-besturing", "persoon-met-haarband", "persoon-met-hoofddoek-en-bloem", "persoon-met-hoofddoek-torso", "persoon-met-hoofddoek-voor-persoon-met-punthoed", "persoon-met-integraalhelm-torso", "persoon-met-kromme-pijl", "persoon-met-kronkelpijlen", "persoon-met-rugpijn", "persoon-met-schep-en-berg-aarde", "persoon-met-stapel-munten", "persoon-met-stethoscoop-voor-mensen", "persoon-met-verstelbaar-bureau", "persoon-met-vinkje", "persoon-met-weegschaal", "persoon-onder-tafel", "persoon-op-erepodium", "persoon-op-hoverboard", "persoon-op-loopband", "persoon-op-zonnebank", "persoon-rent-naar-bal", "persoon-rent-op-blades", "persoon-springend-naar-bal", "persoon-staand-met-hart", "persoon-staand-naast-auto-met-bestuurder", "persoon-stilte", "persoon-torso-onder-loep", "persoon-torso-tussen-2-personen", "persoon-tussen-4-pijlen", "persoon-voor-beeldschermen", "persoon-zittend-in-stoel", "pieper", "pijl-met-lijnen", "pijl-naar-rechts", "pijl-naar-rechtsboven", "pijl-omhoog", "pijl-omlaag", "pijlen-in-cirkel-om-document", "pillendoosje", "pistool", "plant-in-pot-met-kaartje", "plastic-fles", "plofkip", "pluim", "plumeau", "plus", "politieacademie-man", "politieacademie-vrouw", "politieagent", "politieagent-voor-personen", "politieagente", "politieagente-voor-personen", "pols-vastgrijpen", "pompfles-en-pot-met-deksel", "portemonnee", "pot-met-capsule", "potlood-en-liniaal", "prei-en-appel", "presentatie-voor-groep", "pretpark", "printer", "prop-papier", "psychologische-hulp", "puber-met-mondkapje", "publicatie", "puzzel", "pylon", "pyramides", "radiator", "radio", "radioactiviteit", "raket", "reageerbuis", "reageerbuis-met-wattenstaafje", "rechtbank", "rechte-pijl", "recycle-om-blad", "refresh", "refund", "regenboog-boven-wolk", "regievoerder", "rekening", "rekenmachine", "rennend-kind", "rennend-persoon-met-rugzak", "rentelasten", "restaurant", "richtingwijzer", "ridderzaal", "rij-mensen", "rijtjeshuis", "ring-met-gebroken-ring-erdoor", "ringband-met-silhouet", "rivierverruiming", "rokende-filtersigaret", "rol-papier-met-lijnen-en-veer", "rol-papier-met-punten-en-lijnen", "rol-papier-met-tekst-amvb", "rolkoffer", "rollator-bij-trap", "rolmaat", "rolstoel-toegankelijke-woning", "roltrap-omhoog", "roltrap-omlaag", "ronde-pijl-op-hand", "route-met-locatiemarker", "route-met-ster", "route-met-vlag", "rouw-met-mondkapje", "rouw-met-mondkapje-en-naald", "rozet-met-vinkje", "rss", "rubberen-handschoenen", "rugzak", "ruimtelijke-ordening", "rups", "samen-op-trap", "sauna", "save", "scan-document", "scan-gezicht", "scan-vingerafdruk", "schaap", "schaatser", "schade", "schade-wegdek", "schap-leeg", "schelp", "schelpdier", "scherm-navigatiesysteem", "schietschijf-met-pijl", "schild-met-vinkje-erop", "schilderij-met-bloemen-in-vaas", "schilderij-met-vrouw-met-stapel-munten", "schip-en-schuine-oever", "schip-hulpdiensten", "schip-in-sluis", "schip-in-sluis-met-klok", "schip-langs-dam", "schip-langs-kade", "schip-langs-kade-met-hijskraan", "schip-langs-kade-met-maan", "schip-met-waarschuwingsbord", "schip-op-water", "schip-op-water-boven-vaargeul", "schip-op-water-met-schuine-oevers-en-pijlen", "schip-scheef-in-water", "schip-spuit-zand-op", "schip-tussen-ijsschotsen", "schommelstoel-met-stapel-munten", "schone-handen", "schone-industrie", "school", "schoolbord", "schoolbord-met-puzzelstuk", "schoonmaakfles", "schoonmaakmiddel", "schuur-met-silo-erachter", "scooter", "scooter-met-stekker", "scootmobiel", "sector-speciaal-onderwijs", "secure-link", "server", "server-met-document", "servicedesk-ict", "servicedesk-telefonie", "shirt-met-label", "shirt-uv", "silhouet-met-schildklier", "silhouet-voor-beeldscherm", "silhouet-voor-scherm-raam-met-silhouet", "slagboom-halfopen", "slang", "slapend-persoon", "sleutel", "sleutelbos", "sluis-open", "smartphone", "smartphone-bedienen-met-vinger", "smartphone-met-streep-erdoor", "smoking-op-hanger", "snee-brood-met-hap-eruit", "snel-lopende-vrouw", "snelweg", "snelweg-met-boom", "snelweg-met-waarschuwingsbord", "snoepje-in-wikkel", "softijs", "sort-ascending", "sort-descending", "sourcing", "specialist", "speelgoedblokken", "speelgoedtrein", "speelkaarten", "spelend-kind-en-klimrek-onder-dak", "spitsstrook", "splitsen-perceel", "splitsen-water", "spray-en-bezem", "spray-en-kaas", "spreker-voor-publiek", "sprinkler", "stacaravan", "stapel-fotos", "stapel-kaarten", "stapel-munten", "stapel-munten-met-vinkje", "steekwagen-met-dozen", "stembiljet", "stemmen", "step", "ster", "stethoscoop", "stofzuiger", "storm", "straatroof", "strooibus", "strooiwagen", "strooiwagen-rijdend", "strooiwagen-strooiend", "stroomsnelheid", "stuk-vlees", "stuur", "stuurwiel", "suikerpot", "supermarktketens", "tablet", "tabletten", "takel-met-balk", "takel-met-container", "takelwagen", "tandarts", "tandwiel-met-vinkje", "tandwielen", "tank", "taxi", "technisch-manager", "teddybeer", "teddybeer-met-ce", "tegelweergave", "tekstballon-met-hart", "tekstballon-met-potlood", "tekstballon-met-wereldbol", "tekstballonnen", "tekstballonnen-met-internationaal-gesprek", "tekstballonnen-met-krul", "tekstballonnen-met-punten", "tekstballonnen-met-vraagteken", "telefoon", "televisie", "telraam", "tent-bij-boom", "terug", "teruggave-dividendbelasting", "thuisonderwijs", "thuiswerken", "tissuebox", "toegangspas", "toegankelijkheid", "toelichting", "toiletborstel", "toiletten", "toren", "touchdown-werkplek", "touringcar", "tractor", "tram", "trap-omhoog", "trap-omlaag", "traplift", "traplift-met-kruis", "traplift-met-vinkje", "trechter", "trein", "trein-met-stapel-munten", "trein-met-vinkje", "trein-op-spoorwegovergang", "trompet", "trouwen", "tuinder", "tulp", "tunnel", "twee-maskers", "twee-pijlen", "twee-vissen", "twee-zwembandjes", "tweede-kamer", "uil", "uit-aanknop", "uitgang", "uitval-persoon", "uitval-persoon-ziekte", "uitval-stroomvoorziening", "uitvoering", "upload", "usb-lader", "user", "ux-design", "vaantje", "vaas", "varken", "varken-en-koe", "vaste-brug", "veerpont-op-water", "veiligheidsspeld-open", "vennootschapsbelasting", "ventilatierooster", "verbod-fiets", "verbod-fotografie", "verbod-hond", "verbod-kinderwagen", "verbod-rolstoel", "verbod-softdrugs", "verbod-wapens", "verbodbellen", "verboden-te-roken", "verdrietig", "vergadertafel-met-stoelen", "verhuisdoos", "verhuurderheffing", "verloskundige", "vermindering-papier", "verpleeghuis", "verpleegkundige", "verrekijker", "versleutelen", "verwijderen", "verzenden", "verzorgingstehuis", "viaduct", "video", "videocamera", "vijzel-met-kruis", "villa", "vingerafdruk-1", "vingerafdruk-2", "vingerafdruk-3", "vinkje", "viool", "virtual-reality", "virus", "vis", "vis-met-klok", "visgraat-in-water", "vistrap", "vlag-canada", "vlag-driehoekig", "vlag-europese-unie", "vliegbelasting", "vliegtuig", "vliegtuig-en-auto", "vliegtuig-vliegt-bij-verkeerstoren", "vn-soldaat", "voedselverpakking", "voeten", "voor-elkaar-zorgen", "vork-en-mes", "vouwkaart", "vouwkaart-met-kruis", "vraagteken", "vrachtauto", "vrachtauto-in-gebouw-met-bel", "vrachtauto-met-lekke-band-en-barst-in-voorruit", "vrouw-achter-katheder", "vrouw-en-persoon-in-rolstoel", "vrouw-hoofd", "vrouw-lopend", "vrouw-met-blinddoek-en-weegschaal", "vrouw-met-halsketting-om-torso", "vrouw-met-ketting-om-torso", "vrouw-met-knot-en-bril-torso", "vrouw-met-knot-en-lipstick-voor-2-personen", "vrouw-met-laptop", "vrouw-met-medicatie", "vrouw-met-portemonnee", "vrouw-met-rollator", "vrouw-staand", "vrouw-torso", "vrouwelijke-arts", "vuilniszak", "vuist", "vuist-slaand", "vuurpijl", "vuurtoren", "waarschuwing", "waarschuwing-radioactiviteit-in-water", "waarschuwingsbord-met-schip-op-water", "waarschuwingsbord-met-snelweg", "waarschuwingsbord-radioactiviteit", "waarschuwingsbord-werkzaamheden", "wachtend-persoon", "warmte", "wasmachine", "water-en-begroeid-duin", "waterafvoer", "waterkering-dicht", "waterkering-open", "wateroverlast", "waterpijp", "waterschildpad", "waterstanden", "watertemperatuur", "waterwaarschuwing", "wattenstaafjes", "website", "webwinkel", "weegschaal", "weg-langs-huis", "weg-met-dichte-slagboom", "weg-met-halfopen-slagboom", "wegwerpaansteker", "welzijnswerk-ouderen", "wensballon", "wereldbol", "wereldbol-met-loep", "wereldbol-tussen-2-uitgestoken-handen", "werkdruk", "werkeloosheid-ww", "wervelwind", "wetboek", "wielrenner", "wiet", "wifi", "wijkagent", "wijkagente", "wijkverpleegkundige", "wijsvinger-en-deurbel", "wijzerplaat", "wiki", "windenergie", "windsurfer", "windvaan", "winkelwagen", "wolk", "wolk-met-regen-en-bliksem", "wolk-met-regen-voor-zon", "woning-gelijkvloers-wel-rollator", "woning-met-traplift", "woning-met-verdieping", "woninginbraak", "woordenboek", "worst-en-broodje", "worst-en-kaas", "worst-en-wortel", "zak-met-envelop", "zak-met-geld", "zandloper", "zeeleeuw", "zeilboot-op-water", "zelftest", "zendmast", "ziekenhuis", "zittend-persoon-achter-laptop", "zoek", "zon", "zon-boven-oppervlaktewater", "zon-boven-wolk", "zon-met-afbrokkelende-fles", "zonnepaneel", "zorgkantoor", "zoutgehalte-in-water", "zwaailicht", "zwangere-vooraanzicht", "zwangere-zijaanzicht", "zwitsers-zakmes"];
+export type RHCIconID = (typeof rhcIconIDs)[number];

package/dist/icon/dutch-map-icon/dutch-map-icon.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DutchMapIconComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DutchMapIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DutchMapIconComponent, "rhc-dutch-map-icon", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/bg-flag/bg-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class BgFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BgFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BgFlagComponent, "rhc-bg-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/de-flag/de-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DeFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DeFlagComponent, "rhc-de-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/es-flag/es-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class EsFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EsFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EsFlagComponent, "rhc-es-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/fr-flag/fr-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class FrFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FrFlagComponent, "rhc-fr-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/gr-flag/gr-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class GrFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<GrFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GrFlagComponent, "rhc-gr-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/hu-flag/hu-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class HuFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HuFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HuFlagComponent, "rhc-hu-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/it-flag/it-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ItFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ItFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ItFlagComponent, "rhc-it-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/lv-flag/lv-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class LvFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LvFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LvFlagComponent, "rhc-lv-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/nl-flag/nl-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class NlFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NlFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NlFlagComponent, "rhc-nl-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/pl-flag/pl-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class PlFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlFlagComponent, "rhc-pl-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/pt-flag/pt-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class PtFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PtFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PtFlagComponent, "rhc-pt-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/ro-flag/ro-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class RoFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RoFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RoFlagComponent, "rhc-ro-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/sk-flag/sk-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SkFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkFlagComponent, "rhc-sk-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/flag-icons/uk-flag/uk-flag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class UkFlagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UkFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UkFlagComponent, "rhc-uk-flag", never, {}, {}, never, never, true, never>;
+}

package/dist/icon/icon.component.d.ts

@@ -0,0 +1,10 @@
+import { RHCIconID } from './RHCIconIDs';
+import * as i0 from "@angular/core";
+export declare class IconComponent {
+    icon?: string;
+    static iconSet: Partial<Record<RHCIconID, string>>;
+    computedIconRender: () => string;
+    static iconSetKeys(): RHCIconID[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "rhc-icon", never, { "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/icon/public-api.d.ts

@@ -0,0 +1,16 @@
+export * from './flag-icons/bg-flag/bg-flag.component';
+export * from './flag-icons/de-flag/de-flag.component';
+export * from './flag-icons/es-flag/es-flag.component';
+export * from './flag-icons/fr-flag/fr-flag.component';
+export * from './flag-icons/gr-flag/gr-flag.component';
+export * from './flag-icons/hu-flag/hu-flag.component';
+export * from './flag-icons/it-flag/it-flag.component';
+export * from './flag-icons/lv-flag/lv-flag.component';
+export * from './flag-icons/nl-flag/nl-flag.component';
+export * from './flag-icons/pl-flag/pl-flag.component';
+export * from './flag-icons/pt-flag/pt-flag.component';
+export * from './flag-icons/ro-flag/ro-flag.component';
+export * from './flag-icons/sk-flag/sk-flag.component';
+export * from './flag-icons/uk-flag/uk-flag.component';
+export * from './dutch-map-icon/dutch-map-icon.component';
+export * from './icon.component';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@rijkshuisstijl-community/components-angular" />
+export * from './public-api';

package/dist/link/link.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class LinkComponent {
+    href: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "rhc-link", never, { "href": { "alias": "href"; "required": true; }; }, {}, never, ["*"], true, never>;
+}

package/dist/paragraph/paragraph.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare const appearanceOptions: readonly [undefined, "lead"];
+export type AppearanceType = (typeof appearanceOptions)[number];
+export declare class ParagraphComponent {
+    appearance?: AppearanceType;
+    computedClass: () => "nl-paragraph nl-paragraph--lead" | "nl-paragraph";
+    static ɵfac: i0.ɵɵFactoryDeclaration<ParagraphComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ParagraphComponent, "rhc-paragraph", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './heading/heading.component';
+export * from './paragraph/paragraph.component';
+export * from './link/link.component';
+export * from './button/button.component';
+export * from './action-group/action-group.component';
+export * from './icon/public-api';

package/jest.config.js

@@ -0,0 +1,5 @@
+export default {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  globalSetup: 'jest-preset-angular/global-setup',
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "./src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@rijkshuisstijl-community/components-angular",
+  "version": "1.0.0",
+  "author": "Community for NL Design System",
+  "description": "Angular component library for the Rijkshuisstijl Community repository, based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/components-angular"
+  },
+  "dependencies": {
+    "tslib": "2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "19.2.0",
+    "@angular/cli": "19.2.3",
+    "@angular/common": "19.2.0",
+    "@angular/compiler": "19.2.0",
+    "@angular/compiler-cli": "19.2.0",
+    "@angular/core": "19.2.0",
+    "@angular/forms": "19.2.0",
+    "@angular/platform-browser": "19.2.0",
+    "@angular/platform-browser-dynamic": "19.2.0",
+    "@angular/router": "19.2.0",
+    "@nl-design-system-candidate/heading-css": "1.0.0",
+    "@nl-design-system-candidate/link-css": "1.0.1",
+    "@nl-design-system-candidate/paragraph-css": "2.0.1",
+    "@testing-library/jest-dom": "5.17.0",
+    "@types/jest": "29.5.14",
+    "@types/testing-library__jest-dom": "5.14.9",
+    "angular-tabler-icons": "3.26.0",
+    "jest": "29.7.0",
+    "jest-preset-angular": "14.5.4",
+    "ng-packagr": "19.2.0",
+    "rxjs": "7.8.0",
+    "typescript": "5.7.2",
+    "zone.js": "0.15.0",
+    "@rijkshuisstijl-community/components-css": "1.1.0"
+  },
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test-results": "jest --json --outputFile=dist/.jest-test-results.json --silent",
+    "test": "jest --coverage --verbose"
+  }
+}

package/setup-jest.ts

@@ -0,0 +1,3 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+setupZoneTestEnv();
+import '@testing-library/jest-dom';

package/src/action-group/action-group.component.html

@@ -0,0 +1,9 @@
+<div
+  [class]="{
+    'utrecht-button-group': true,
+    'utrecht-button-group--column': direction === 'column',
+    'utrecht-button-group--row': direction === 'row',
+  }"
+>
+  <ng-content />
+</div>

package/src/action-group/action-group.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ActionGroupComponent } from './action-group.component';
+
+describe('ActionGroupComponent', () => {
+  let component: ActionGroupComponent;
+  let fixture: ComponentFixture<ActionGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ActionGroupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ActionGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have "utrecht-button-group--row" class by default', () => {
+    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
+    expect(divEl.classList).toContain('utrecht-button-group--row');
+    expect(divEl.classList).not.toContain('utrecht-button-group--column');
+  });
+
+  it('should apply "column" direction class when input is column', () => {
+    component.direction = 'column';
+    fixture.detectChanges();
+
+    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
+    expect(divEl.classList).toContain('utrecht-button-group--column');
+    expect(divEl.classList).not.toContain('utrecht-button-group--row');
+  });
+
+  it('should apply "row" direction class when input is row', () => {
+    component.direction = 'row';
+    fixture.detectChanges();
+
+    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
+    expect(divEl.classList).toContain('utrecht-button-group--row');
+    expect(divEl.classList).not.toContain('utrecht-button-group--column');
+  });
+});

package/src/action-group/action-group.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'rhc-action-group',
+  imports: [],
+  templateUrl: './action-group.component.html',
+})
+export class ActionGroupComponent {
+  @Input() direction: 'column' | 'row' = 'row';
+}

package/src/button/button.component.html

@@ -0,0 +1,3 @@
+<button class="{{ computedClasses() }}" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>

package/src/button/button.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a native <button>', () => {
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button).toBeTruthy();
+    expect(button.tagName.toLowerCase()).toBe('button');
+  });
+
+  it('should apply the primary-action class', () => {
+    component.appearance = 'primary-action';
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('utrecht-button--primary-action');
+  });
+
+  it('should be disabled when the disabled input is true', () => {
+    component.disabled = true;
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.disabled).toBe(true);
+  });
+});

package/src/button/button.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'rhc-button',
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+})
+export class ButtonComponent {
+  @Input() appearance?: '' | 'primary-action' | 'secondary-action' | 'subtle' = '';
+  @Input() disabled?: boolean = false;
+
+  computedClasses = () => `utrecht-button utrecht-button--${this.appearance}`;
+}

package/src/heading/heading.component.css

@@ -0,0 +1 @@
+@import "@nl-design-system-candidate/heading-css/heading.css";

package/src/heading/heading.component.html

@@ -0,0 +1,31 @@
+@switch (level) {
+  @case (1) {
+    <h1 class="{{ computedClasses() }}">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </h1>
+  }
+  @case (2) {
+    <h2 class="{{ computedClasses() }}">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </h2>
+  }
+  @case (3) {
+    <h3 class="{{ computedClasses() }}">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </h3>
+  }
+  @case (4) {
+    <h4 class="{{ computedClasses() }}">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </h4>
+  }
+  @case (5) {
+    <h5 class="{{ computedClasses() }}">
+      <ng-container [ngTemplateOutlet]="content"></ng-container>
+    </h5>
+  }
+}
+
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>

package/src/heading/heading.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { HeadingComponent, HeadingLevel } from './heading.component';
+
+describe('HeadingComponent', () => {
+  let component: HeadingComponent;
+  let fixture: ComponentFixture<HeadingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeadingComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should use the correct heading level', () => {
+    for (let level of [1, 2, 3, 4, 5] as HeadingLevel[]) {
+      component.level = level;
+      fixture.detectChanges();
+      const element = fixture.nativeElement.querySelector(`h${level}`);
+      expect(element).toBeTruthy();
+    }
+  });
+
+  it('should apply the css class according to appearance level', () => {
+    component.level = 5;
+    component.appearanceLevel = 2;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('.nl-heading--level-2'));
+    expect(element).toBeTruthy();
+  });
+
+  it('should contain the nl-heading class', () => {
+    component.level = 3;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('.nl-heading'));
+    expect(element).toBeTruthy();
+  });
+
+  it('should render rich text content', () => {
+    component.level = 1;
+    fixture.detectChanges();
+    const headingDebugElement = fixture.debugElement.query(By.css('.nl-heading--level-1'));
+    headingDebugElement.nativeElement.innerHTML = '<strong>Breaking</strong> news';
+    expect(fixture.nativeElement).toContainHTML('strong');
+  });
+});

package/src/heading/heading.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+export const headingLevels = [1, 2, 3, 4, 5] as const;
+export type HeadingLevel = (typeof headingLevels)[number];
+
+@Component({
+  selector: 'rhc-heading',
+  imports: [CommonModule],
+  templateUrl: './heading.component.html',
+  styleUrl: './heading.component.css',
+})
+export class HeadingComponent {
+  @Input({ required: true }) level!: HeadingLevel;
+  @Input() appearanceLevel?: HeadingLevel;
+
+  stylingLevel = () => this.appearanceLevel ?? this.level;
+  computedClasses = () => `nl-heading nl-heading--level-${this.stylingLevel()}`;
+}