rk-designsystem 1.1.89 → 1.1.91

package/dist/componentlibrary.es.js

@@ -504,6 +504,7 @@ const Vo = "_calendarContainer_htlea_1", Ko = "_calendarHeader_htlea_16", Yo = "
       componentsDesc: "Bibliotek med ferdige React-komponenter.",
       designDesc: "Farger, typografi og prinsipper.",
       codeDesc: "Dokumentasjon, arbeidsflyt og MCP.",
+      tokensDesc: "Design tokens, farger og spacing.",
       universalDesign: "Universell utforming",
       universalDesignText: "Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",
       readGuidelines: "Les retningslinjene",
@@ -1498,6 +1499,7 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       componentsDesc: "Library with ready-made React components.",
       designDesc: "Colors, typography, and principles.",
       codeDesc: "Documentation, workflow, and MCP.",
+      tokensDesc: "Design tokens, colors, and spacing.",
       universalDesign: "Universal Design",
       universalDesignText: "Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",
       readGuidelines: "Read guidelines",

package/dist/componentlibrary.umd.js

@@ -1,4 +1,4 @@
-(function(v,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@digdir/designsystemet-react"),require("date-fns"),require("@navikt/aksel-icons")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@digdir/designsystemet-react","date-fns","@navikt/aksel-icons"],n):(v=typeof globalThis<"u"?globalThis:v||self,n(v.ComponentLibrary={},v.jsxRuntime,v.React,v.designsystemetReact,v.dateFns,v.akselIcons))})(this,(function(v,n,x,S,O,ce){"use strict";const Re=x.forwardRef((t,e)=>n.jsx(S.Alert,{ref:e,...t}));Re.displayName="Alert";const ze=x.forwardRef((t,e)=>n.jsx(S.Avatar,{ref:e,...t}));ze.displayName="Avatar";const et=x.forwardRef((t,e)=>n.jsx(S.Badge,{ref:e,...t}));et.displayName="Badge";const Pt=S.BadgePosition,zt=S.Breadcrumbs,Gt=S.BreadcrumbsList,$t=S.BreadcrumbsItem,Wt=S.BreadcrumbsLink,he=S.Button;he.displayName="Button";const tt=S.Card,Ht=S.CardBlock;tt.displayName="Card";const nt=S.Checkbox,Ut=S.Fieldset,Ot=S.useCheckboxGroup;nt.displayName="Checkbox",Ut.displayName="Fieldset";const Vt=S.Chip;function Ge(t){return(e={})=>{const o=e.width?String(e.width):t.defaultWidth;return t.formats[o]||t.formats[t.defaultWidth]}}function Se(t){return(e,o)=>{const s=o!=null&&o.context?String(o.context):"standalone";let l;if(s==="formatting"&&t.formattingValues){const r=t.defaultFormattingWidth||t.defaultWidth,c=o!=null&&o.width?String(o.width):r;l=t.formattingValues[c]||t.formattingValues[r]}else{const r=t.defaultWidth,c=o!=null&&o.width?String(o.width):t.defaultWidth;l=t.values[c]||t.values[r]}const i=t.argumentCallback?t.argumentCallback(e):e;return l[i]}}function Ce(t){return(e,o={})=>{const s=o.width,l=s&&t.matchPatterns[s]||t.matchPatterns[t.defaultMatchWidth],i=e.match(l);if(!i)return null;const r=i[0],c=s&&t.parsePatterns[s]||t.parsePatterns[t.defaultParseWidth],d=Array.isArray(c)?Yt(c,g=>g.test(r)):Kt(c,g=>g.test(r));let u;u=t.valueCallback?t.valueCallback(d):d,u=o.valueCallback?o.valueCallback(u):u;const b=e.slice(r.length);return{value:u,rest:b}}}function Kt(t,e){for(const o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&e(t[o]))return o}function Yt(t,e){for(let o=0;o<t.length;o++)if(e(t[o]))return o}function qt(t){return(e,o={})=>{const s=e.match(t.matchPattern);if(!s)return null;const l=s[0],i=e.match(t.parsePattern);if(!i)return null;let r=t.valueCallback?t.valueCallback(i[0]):i[0];r=o.valueCallback?o.valueCallback(r):r;const c=e.slice(l.length);return{value:r,rest:c}}}const Zt={lessThanXSeconds:{one:"mindre enn ett sekund",other:"mindre enn {{count}} sekunder"},xSeconds:{one:"ett sekund",other:"{{count}} sekunder"},halfAMinute:"et halvt minutt",lessThanXMinutes:{one:"mindre enn ett minutt",other:"mindre enn {{count}} minutter"},xMinutes:{one:"ett minutt",other:"{{count}} minutter"},aboutXHours:{one:"omtrent en time",other:"omtrent {{count}} timer"},xHours:{one:"en time",other:"{{count}} timer"},xDays:{one:"en dag",other:"{{count}} dager"},aboutXWeeks:{one:"omtrent en uke",other:"omtrent {{count}} uker"},xWeeks:{one:"en uke",other:"{{count}} uker"},aboutXMonths:{one:"omtrent en måned",other:"omtrent {{count}} måneder"},xMonths:{one:"en måned",other:"{{count}} måneder"},aboutXYears:{one:"omtrent ett år",other:"omtrent {{count}} år"},xYears:{one:"ett år",other:"{{count}} år"},overXYears:{one:"over ett år",other:"over {{count}} år"},almostXYears:{one:"nesten ett år",other:"nesten {{count}} år"}},Xt=(t,e,o)=>{let s;const l=Zt[t];return typeof l=="string"?s=l:e===1?s=l.one:s=l.other.replace("{{count}}",String(e)),o!=null&&o.addSuffix?o.comparison&&o.comparison>0?"om "+s:s+" siden":s},Jt={full:"EEEE d. MMMM y",long:"d. MMMM y",medium:"d. MMM y",short:"dd.MM.y"},Qt={full:"'kl'. HH:mm:ss zzzz",long:"HH:mm:ss z",medium:"HH:mm:ss",short:"HH:mm"},Rt={full:"{{date}} 'kl.' {{time}}",long:"{{date}} 'kl.' {{time}}",medium:"{{date}} {{time}}",short:"{{date}} {{time}}"},en={date:Ge({formats:Jt,defaultWidth:"full"}),time:Ge({formats:Qt,defaultWidth:"full"}),dateTime:Ge({formats:Rt,defaultWidth:"full"})},tn={lastWeek:"'forrige' eeee 'kl.' p",yesterday:"'i går kl.' p",today:"'i dag kl.' p",tomorrow:"'i morgen kl.' p",nextWeek:"EEEE 'kl.' p",other:"P"},nn=(t,e,o,s)=>tn[t],on={narrow:["f.Kr.","e.Kr."],abbreviated:["f.Kr.","e.Kr."],wide:["før Kristus","etter Kristus"]},rn={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1. kvartal","2. kvartal","3. kvartal","4. kvartal"]},sn={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["jan.","feb.","mars","apr.","mai","juni","juli","aug.","sep.","okt.","nov.","des."],wide:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"]},an={narrow:["S","M","T","O","T","F","L"],short:["sø","ma","ti","on","to","fr","lø"],abbreviated:["søn","man","tir","ons","tor","fre","lør"],wide:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"]},ln={narrow:{am:"a",pm:"p",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},abbreviated:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morgenen",afternoon:"på ettermiddagen",evening:"på kvelden",night:"på natten"}},dn={ordinalNumber:(t,e)=>Number(t)+".",era:Se({values:on,defaultWidth:"wide"}),quarter:Se({values:rn,defaultWidth:"wide",argumentCallback:t=>t-1}),month:Se({values:sn,defaultWidth:"wide"}),day:Se({values:an,defaultWidth:"wide"}),dayPeriod:Se({values:ln,defaultWidth:"wide"})},cn=/^(\d+)\.?/i,un=/\d+/i,pn={narrow:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,abbreviated:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,wide:/^(før Kristus|før vår tid|etter Kristus|vår tid)/i},gn={any:[/^f/i,/^e/i]},mn={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](\.)? kvartal/i},fn={any:[/1/i,/2/i,/3/i,/4/i]},hn={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mars?|apr|mai|juni?|juli?|aug|sep|okt|nov|des)\.?/i,wide:/^(januar|februar|mars|april|mai|juni|juli|august|september|oktober|november|desember)/i},kn={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^mai/i,/^jun/i,/^jul/i,/^aug/i,/^s/i,/^o/i,/^n/i,/^d/i]},vn={narrow:/^[smtofl]/i,short:/^(sø|ma|ti|on|to|fr|lø)/i,abbreviated:/^(søn|man|tir|ons|tor|fre|lør)/i,wide:/^(søndag|mandag|tirsdag|onsdag|torsdag|fredag|lørdag)/i},bn={any:[/^s/i,/^m/i,/^ti/i,/^o/i,/^to/i,/^f/i,/^l/i]},yn={narrow:/^(midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten)|[ap])/i,any:/^([ap]\.?\s?m\.?|midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten))/i},xn={any:{am:/^a(\.?\s?m\.?)?$/i,pm:/^p(\.?\s?m\.?)?$/i,midnight:/^midn/i,noon:/^midd/i,morning:/morgen/i,afternoon:/ettermiddag/i,evening:/kveld/i,night:/natt/i}},Tn={ordinalNumber:qt({matchPattern:cn,parsePattern:un,valueCallback:t=>parseInt(t,10)}),era:Ce({matchPatterns:pn,defaultMatchWidth:"wide",parsePatterns:gn,defaultParseWidth:"any"}),quarter:Ce({matchPatterns:mn,defaultMatchWidth:"wide",parsePatterns:fn,defaultParseWidth:"any",valueCallback:t=>t+1}),month:Ce({matchPatterns:hn,defaultMatchWidth:"wide",parsePatterns:kn,defaultParseWidth:"any"}),day:Ce({matchPatterns:vn,defaultMatchWidth:"wide",parsePatterns:bn,defaultParseWidth:"any"}),dayPeriod:Ce({matchPatterns:yn,defaultMatchWidth:"any",parsePatterns:xn,defaultParseWidth:"any"})},ye={code:"nb",formatDistance:Xt,formatLong:en,formatRelative:nn,localize:dn,match:Tn,options:{weekStartsOn:1,firstWeekContainsDate:4}},ot=({title:t,...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&n.jsx("title",{children:t}),n.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",fill:"currentColor"})]});ot.displayName="ChevronLeftIcon";const rt=({title:t,...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&n.jsx("title",{children:t}),n.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",fill:"currentColor"})]});rt.displayName="ChevronRightIcon";const oe={calendarContainer:"_calendarContainer_htlea_1",calendarHeader:"_calendarHeader_htlea_16",monthYear:"_monthYear_htlea_23",navigationButtons:"_navigationButtons_htlea_34",grid:"_grid_htlea_43",dayNameCell:"_dayNameCell_htlea_51",dateCell:"_dateCell_htlea_69",dateNumberContainer:"_dateNumberContainer_htlea_95",otherMonth:"_otherMonth_htlea_108",disabled:"_disabled_htlea_108",selectedDate:"_selectedDate_htlea_134"},Sn={NO:{header:{darkMode:"Nattmodus",toggleTheme:"Bytt tema",language:"Språk:",search:"Søk",searchPlaceholder:"Søk etter innhold...",closeSearch:"Lukk søk",openSearch:"Åpne søk",clearSearch:"Tøm søk",close:"Lukk",menu:"Meny",closeMenu:"Lukk meny",openMenu:"Åpne meny",login:"Logg inn",supportUs:"Støtt oss",suggestions:"Forslag til søk",viewAll:"Vis alle resultater",noResults:"Ingen treff funnet for",selectLanguage:"Velg språk",homeAriaLabel:"Norges Røde Kors Hjem",nav:{design:"Design",components:"Komponenter",code:"Kode",tokens:"Tokens",work:"Vårt arbeid",volunteer:"Bli frivillig",courses:"Kurs og opplæring"}},home:{heroTitle:"Røde Kors Designsystem",heroLead:"Felles komponentbibliotek og retningslinjer for design og utvikling av digitale løsninger i Røde Kors.",searchComponents:"Søk i komponenter",exploreSystem:"Utforsk systemet",componentsDesc:"Bibliotek med ferdige React-komponenter.",designDesc:"Farger, typografi og prinsipper.",codeDesc:"Dokumentasjon, arbeidsflyt og MCP.",universalDesign:"Universell utforming",universalDesignText:"Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",readGuidelines:"Les retningslinjene",consistentBrand:"Konsistent merkevare",consistentBrandText:"Design tokens sikrer at Røde Kors sin visuelle profil ivaretas på alle flater.",seeColors:"Se farger",efficientDev:"Effektiv utvikling",efficientDevText:"Spar tid med ferdige komponenter. Fokuser på funksjonalitet, ikke CSS.",exploreComponents:"Utforsk komponenter",quickActionsTitle:"Hopp rett inn",quickActionCodeTitle:"Start i kode",quickActionCodeText:"Se oppsett, tokens og eksempler.",quickActionDesignTitle:"Designguiden",quickActionDesignText:"Farger, typografi og prinsipper.",quickActionComponentsTitle:"Komponentbibliotek",quickActionComponentsText:"Utforsk og gjenbruk ferdige komponenter.",openCode:"Åpne kode",openDesign:"Åpne design",openComponents:"Åpne komponenter",featureStripTitle:"Nyttig akkurat nå",featureToken:"Oppdaterte designtokens",featureFont:"Source Sans 3 inkludert",featureComponent:"Nye komponentvarianter",featureSeeAll:"Se alle oppdateringer",profile:"Profil",name:"Navn Navnesen",volunteer:"Frivillig",save:"Lagre",approved:"Godkjent",rejected:"Avvist",darkModeLabel:"Mørk modus",importantMessage:"Viktig melding",updateGuidelines:"Husk å oppdatere retningslinjene...",all:"Alle",active:"Aktive",alerts:"Varsler",status:"Status"},components:{title:"Komponenter",intro:"Designsystemet inneholder grunnleggende komponenter som kan settes sammen på mange ulike måter og i forskjellige mønstre.",searchPlaceholder:"Søk etter komponent...",searchAriaLabel:"Søk i komponenter",noResults:"Ingen komponenter funnet for"},code:{sidebar:{overview:"Oversikt",workflow:"Arbeidsflyt",structure:"Struktur",contribute:"Bidra",home:"Startside",getStarted:"Kom i gang",styling:"Styling",designTokens:"Designtokens",fonts:"Fonter",icons:"Bruk av ikoner",figmaMcp:"Fra Figma til Kode (MCP)",introduction:"Introduksjon",cursor:"Cursor",claudeCode:"Claude Code",componentCreation:"Komponent Kreasjon",metadataFiles:"Metadata filer",developerGuide:"Utviklerguide",aiGuide:"AI Guide for Assistanter"},overview:{title:"Røde Kors Designsystem",intro:"Velkommen til Røde Kors Designsystem! Dette repositoriet inneholder et bibliotek med gjenbrukbare UI-komponenter bygget med React, skreddersydd for Norges Røde Kors sine digitale prosjekter.",text1:"Det er utviklet ved å utnytte grunnkomponentene fra Digdirs Designsystemet. Denne tilnærmingen sikrer en helhetlig og gjenkjennelig visuell identitet på tvers av alle applikasjoner for Røde Kors. Systemet er forhåndskonfigurert med det offisielle Røde Kors-temaet, som leveres via en dedikert designtoken-pakke.",text2:"Hovedmålet er å sikre merkevarekonsistens, forbedre utviklingseffektiviteten og opprettholde høye standarder for tilgjengelighet i alle Røde Kors-applikasjoner.",text3:"Storybook fungerer som den interaktive dokumentasjonen og utviklingsmiljøet for å vise og teste disse komponentene.",getStartedCard:"Kom i gang",getStartedDesc:"Installasjon, oppsett og retningslinjer for utviklere.",getStartedLink:"Kom i gang",designTokensCard:"Designtokens",designTokensDesc:"Lær hvordan du bruker designtokens og fonter.",designTokensLink:"Les mer",workflowCard:"Arbeidsflyt",workflowDesc:"Lær hvordan du bruker MCP-verktøy for å hente komponenter direkte fra Figma.",workflowLink:"Les guide"},getStarted:{title:"Kom i gang",intro:"For å ta i bruk Røde Kors Designsystem i din Next.js (eller annen React) applikasjon:",installationTitle:"1. Installasjon",installationText:"Installer de nødvendige npm-pakkene for prosjektet ditt. Du trenger tre pakker: selve komponentbiblioteket (rk-designsystem), grunnstilene fra Digdir, og Røde Kors-temapakken (rk-design-tokens).",githubLink:"Gå til GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Merk: Du trenger ikke å installere @digdir/designsystemet-react separat, da alle nødvendige komponenter er inkludert i rk-designsystem-pakken.",stylesTitle:"2. Inkludering av stiler (CSS)",stylesText1:"For at komponentene skal styles riktig, må du importere stilarkene på øverste nivå i applikasjonen din, for eksempel i layout.tsx (for Next.js App Router) eller _app.tsx (for Next.js Pages Router).",stylesText2:"Viktig rekkefølge: Det er avgjørende at grunnstilarket (@digdir/designsystemet-css) lastes før Røde Kors-temafilen (rk-design-tokens). Dette sikrer at vårt temas tokens overstyrer standardverdiene korrekt.",appRouterExample:"Eksempel for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Eksempel for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Bruk av komponenter",usageText:"Når stilarkene er inkludert, kan du begynne å importere og bruke komponenter i prosjektet ditt. Alle komponenter du trenger er tilgjengelige direkte fra rk-designsystem-pakken.",importTitle:"3.1 Importer og bruk Røde Kors Designsystem-komponenter",nextjsExample:"3.2 Eksempel på bruk i en Next.js-side",updateText:"Utseendet til alle komponenter styres fullt ut av pakken rk-design-tokens. For å motta visuelle oppdateringer til merkevaretemaet (som en ny primærfarge), oppdaterer du ganske enkelt pakken til siste versjon:"},designTokens:{title:"Røde Kors Designtokens",intro:"Dette repositoriet er den sentrale kilden for alle designtokens (farger, typografi, avstander osv.) for Norges Røde Kors sine digitale produkter. Det fungerer som en sannhetskilde (single source of truth) som automatisk distribuerer stilendringer til alle tilkoblede prosjekter.",howToTitle:"Hvordan ta i bruk tokens",howToText:"For å bruke designtokens i ditt prosjekt, må du installere og konfigurere temapakken.",installTitle:"1. Installasjon",importTitle:"2. Importer CSS",importText:"I din applikasjons rot-layout (f.eks. layout.tsx), importer grunnstilarket før Røde Kors-temafilen.",fontTitle:"Hvordan legge til fonten",workflowTitle:"Automatisert arbeidsflyt for Designtokens (End-to-End)",workflowText:"Denne arbeidsflyten etablerer en helautomatisert pipeline som kobler designprosessen vår direkte til live produksjonsapplikasjoner. Når en designer oppdaterer stilen i Figma, bygger, versjonerer og publiserer dette systemet automatisk en ny stilpakke til npm. Deretter varsles Vercel-prosjektene våre, som oppdaterer seg selv og redeployer med de nye stilene.",phase1Title:"Fase 1: En Designer gjør en endring (Publisist)",phase1Item1:"Design i Figma: En designer gjør en endring på en farge, font eller annen designtoken.",phase1Item2:"Push til GitHub: Ved bruk av Token Studio-pluginet pusher designeren endringene. Dette committer automatisk de oppdaterte JSON-filene til main-branchen.",phase1Item3:"Trigge Publisher Workflow: Denne pushen trigger umiddelbart GitHub Action definert i .github/workflows/publish.yml.",phase1Item4:"Bygg & Commit Artefakter: Workflowen kjører npm run build for å generere CSS fra JSON-filene og committer resultatene.",phase1Item5:"Versjonering & Release: Workflowen kjører npm version patch for å øke versjonsnummeret, lage en release-commit, og tagge den.",phase1Item6:"Publiser til npm: Til slutt publiserer workflowen den nye versjonen av pakken til npm-registeret.",phase2Title:"Fase 2: Varsling av applikasjoner (Signalet)",phase2Text:"Send et Dispatch-signal: Etter en vellykket publisering, sender workflowen et repository_dispatch-signal til konsumentprosjekter som rk-designsystem for å varsle om den nye versjonen.",phase3Title:"Fase 3: Automatisk oppdatering og redeploy (Konsumentene)",phase3Item1:'Trigge Consumer Workflow: Dispatch-signalet starter en "Update"-workflow i konsumentprosjektene.',phase3Item2:"Oppdater Avhengigheter: Workflowen kjører npm update rk-design-tokens for å hente den siste versjonen.",phase3Item3:"Commit & Push Oppdateringen: Workflowen committer den oppdaterte package-lock.json-filen.",phase3Item4:"Vercel Auto-Deploys: Vercels Git-integrasjon oppdager den nye commiten og starter automatisk en ny deployment."},fonts:{title:"Fonter",intro:"Røde Kors Designsystem bruker fonten Source Sans 3. For at typografien skal vises korrekt i applikasjonen din, må denne fonten lastes inn.",howToTitle:"Hvordan legge til fonten",howToText:"Du kan inkludere fonten ved å legge til følgende linjer i <head>-elementet i din HTML eller i rot-layouten din:",afterLoadTitle:"Etter lasting",afterLoadText:"Når fonten er lastet, vil CSS-variablene fra rk-design-tokens automatisk ta den i bruk (--ds-font-family).",nextjsTitle:"Eksempel for Next.js",nextjsText:"For Next.js App Router, legg til fonten i layout.tsx:",nextjsPagesText:"For Next.js Pages Router, legg til fonten i _app.tsx eller _document.tsx:",cssVariablesTitle:"CSS-variabler",cssVariablesText:"Etter at fonten er lastet, bruker designsystemet automatisk CSS-variabelen --ds-font-family som er definert i rk-design-tokens pakken. Du trenger ikke å spesifisere fonten manuelt i komponentene dine."},icons:{title:"Bruk av Ikoner",intro:"Dette biblioteket er designet for å fungere sømløst med det offisielle ikonsettet fra NAV/Aksel.",installTitle:"Installasjon",importTitle:"Import og bruk",importText:"Ikoner eksporteres som navngitte React-komponenter. Importer kun de ikonene du trenger (tree‑shakable):",accessibilityTitle:"Tilgjengelighetsguide",accessibilityItem1:"Ikon + synlig tekst: sett aria-hidden på ikonet slik at skjermlesere ikke leser det opp to ganger.",accessibilityItem2:"Ikon-kun triggere (f.eks. en knapp): legg til en beskrivende aria-label på triggeren, behold ikonet aria-hidden.",accessibilityItem3:"Farge: ikoner arver currentColor; bruk komponentens variant/farge for å styre det (f.eks. knappevarianter, tag-farger).",accessibilityItem4:`Størrelse: sett fontSize (f.eks. fontSize="1.25rem") eller inline style (f.eks. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Ytelse",performanceText:"Bruk navngitte importer fra @navikt/aksel-icons for å holde pakkestørrelsen nede – ubrukte ikoner fjernes (tree-shaken) av moderne bundlere."},contributing:{title:"Bidra til Biblioteket",intro:"Denne guiden gir et sett med standarder og beste praksis for å lage nye komponenter. Å følge disse retningslinjene sikrer at komponentbiblioteket vårt forblir konsistent, tilgjengelig og enkelt å vedlikeholde.",getStartedTitle:"Kom i gang (for bidragsytere)",getStartedText:"Følg disse stegene for å kjøre det lokale utviklingsmiljøet. Alle kommandoer skal kjøres fra roten av prosjektet.",principlesTitle:"Kjerneprinsipper",principlesText:"Hver komponent vi bygger bør følge disse kjerneprinsippene:",principlesA11y:"Tilgjengelighet (A11y): Komponenter må kunne brukes av alle, inkludert personer med nedsatt funksjonsevne. Dette betyr korrekte ARIA-attributter, tastaturnavigasjon og semantisk HTML.",principlesReuse:"Gjenbrukbarhet: Komponenter bør være generiske nok til å brukes i flere kontekster uten modifikasjon.",principlesConsistency:"Konsistens: Komponenter skal følge våre etablerte designtokens (farger, avstander, typografi) og ha et konsistent API og struktur.",principlesDocs:"Dokumentasjon: Hver komponent må dokumenteres i Storybook for å gjøre den oppdagbar og enkel å bruke for andre utviklere.",whenTitle:"Når skal man lage en ny komponent",whenText:"Før du begynner å kode, avgjør hvilken type komponent du trenger. De fleste av våre behov faller inn i en av tre kategorier:",wrappedSimpleTitle:"Wrapped Component (Enkel):",wrappedSimpleWhat:"Hva det er: En komponent som direkte wrapper og re-eksporterer en komponent fra @digdir/designsystemet-react uten modifikasjoner.",wrappedSimpleWhen:"Når den skal brukes: Når den grunnleggende Digdir-komponenten dekker behovene våre perfekt, men vi ønsker å inkludere den i vårt eget bibliotek for en konsistent importkilde.",wrappedSimpleExample:"Eksempel: Buttons-komponenten er et perfekt eksempel på dette.",wrappedStyledTitle:"Wrapped Component (med stiloverstyringer):",wrappedStyledWhat:"Hva det er: En wrappet Digdir-komponent hvor vi bruker tilpasset CSS for å justere utseendet slik at det passer bedre til Røde Kors sitt spesifikke designspråk.",wrappedStyledWhen:"Når den skal brukes: Når en Digdir-komponent er funksjonelt korrekt, men trenger visuelle justeringer (f.eks. andre ikoner, border-radius, padding).",wrappedStyledExample:"Eksempel: Alert-komponenten, som bruker composes i CSS for å arve grunnstiler og deretter påføre egne overstyringer.",customTitle:"Custom Component (fra bunnen):",customWhat:"Hva det er: En helt ny komponent bygget når ingen eksisterende Digdir-komponent dekker kravene våre.",customWhen:"Når den skal brukes: For unike UI-mønstre eller funksjonalitet som ikke dekkes av grunnbiblioteket.",customExample:"Eksempel: DateInput-komponenten er en tilpasset komponent med egen tilstand, logikk og styling.",fileStructureTitle:"Filstruktur for komponenter",fileStructureText:"For å opprettholde konsistens, bør hver ny komponent følge denne filstrukturen. Lag en ny mappe under src/components/ med komponentens PascalCase-navn.",codingGuidelinesTitle:"Retningslinjer for koding",componentLogicTitle:"1. Komponentlogikk (MyNewComponent.tsx)",logicTypeScript:"TypeScript først: Alle komponenter må skrives i TypeScript. Definer et Props-interface for komponenten din, som utvider fra grunnleggende HTML-element eller Digdir-komponentprops hvis aktuelt.",logicForwardRef:"Forward Refs: Bruk alltid React.forwardRef for å tillate foreldrekomponenter å få en ref til det underliggende DOM-elementet.",logicA11y:"Tilgjengelighet er obligatorisk:",logicA11yItem1:"Bruk semantisk HTML (<button>, <label>, <nav>).",logicA11yItem2:"Sørg for at alle interaktive elementer kan fokuseres og betjenes med tastatur.",logicA11yItem3:"Gi aria-label for knapper som kun har ikon eller elementer hvor tekstetiketten ikke er synlig.",logicA11yItem4:"Bruk aria-invalid, aria-describedby, osv., for å kommunisere tilstand til hjelpemidler.",logicControlled:"Controlled vs. Uncontrolled: Hvis komponenten din har tilstand (som en input), bør den støtte både kontrollerte (value + onChange) og ukontrollerte (defaultValue) mønstre.",logicProps:"Props-navngiving: Bruk data-* attributter for stylingvarianter (f.eks. data-size, data-color) for å samkjøre med mønstrene i våre eksisterende komponenter.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For tilpassede komponenter må alle stiler plasseres i en styles.module.css-fil. Dette scoper klassenavn lokalt og forhindrer globale stilkonflikter.",stylingTokens:"Designtokens: Bruk alltid våre designtokens (var(--ds-...)) for farger, avstander, fonter, osv. Ikke bruk hardkodede verdier (f.eks. #FFF, 16px).",stylingOverride:"Overstyring av Wrapped Components: For wrapped components, bruk en standard CSS-fil. Bruk @layer og composes nøkkelord for å utvide grunnleggende Digdir-stiler uten å øke CSS-spesifisiteten unødvendig.",documentationTitle:"3. Dokumentasjon (MyNewComponent.stories.tsx)",docsStorybook:"Din Storybook-fil er den offisielle dokumentasjonen. Den må være tydelig og omfattende.",docsMeta:"meta Object: Definer komponentens tittel, komponentreferanse, og tags: ['autodocs'] for å aktivere automatisk dokumentasjon.",docsArgTypes:"argTypes: Dokumenter hver enkelt prop. Gi en beskrivelse, kontrolltype (f.eks. select, boolean, text), og alternativer hvis aktuelt. Dette driver de interaktive kontrollene i Storybook.",docsStories:"Lag flere Stories: Lag en egen story for hver nøkkeltilstand og variant av komponenten din (f.eks. Default, Disabled, WithError, WithIcon).",processTitle:"Bidragsprosess",processPRTitle:"Opprett en Pull Request (PR):",processBranch:"Opprett en Branch: Pull de siste endringene fra main-branchen og opprett en ny feature-branch: git checkout -b feat/min-nye-komponent.",processDraft:"Åpne en Draft PR: Så snart du starter, åpne en draft pull request på GitHub. Dette forhindrer dobbeltarbeid og lar andre se hva du jobber med.",processCommit:"Commit endringene dine: Mens du jobber, lag små, logiske commits.",processReview:'Klar for gjennomgang: Når utviklingen er ferdig og alle automatiserte sjekker passerer, merk PR-en som "Ready for review" og be om en gjennomgang fra designsystem-forvalterne.'},figmaMcp:{title:"Arbeidsflyt: Fra Figma til Kode med MCP",introTitle:"Introduksjon til MCP og Arbeidsflyt",intro:"Denne guiden beskriver hvordan vi bruker Model Context Protocol (MCP) for å koble Figma direkte til utviklingsmiljøet. Dette gjør det mulig å hente designspesifikasjoner, tokens og strukturer automatisk, validert mot vårt designsystem.",whatIsMcpTitle:"Hva er MCP?",whatIsMcpText1:"Model Context Protocol (MCP) er en åpen standard som lar AI-assistenter kommunisere direkte med eksterne datakilder og verktøy. I vår kontekst bruker vi MCP til å koble Figma-designfiler direkte til utviklingsmiljøet vårt.",whatIsMcpText2:"Dette betyr at når du gir AI-en en Figma-lenke, kan den automatisk:",whatIsMcpItem1:"Lese designspesifikasjoner direkte fra Figma",whatIsMcpItem2:"Hente eksakte farger, spacing, typografi og andre design tokens",whatIsMcpItem3:"Forstå komponentstrukturen og hierarkiet",whatIsMcpItem4:"Generere kode som matcher designet nøyaktig",whyUseMcpTitle:"Hvorfor bruke MCP?",whyUseMcpText1:"Tradisjonelt har utviklere måttet manuelt konvertere design til kode, noe som kan være tidkrevende og feilutsatt. Med MCP får vi:",whyUseMcpItem1Title:"Nøyaktighet:",whyUseMcpItem1Text:"AI-en leser designet direkte fra kilde, så ingen informasjon går tapt i oversettelsen.",whyUseMcpItem2Title:"Hastighet:",whyUseMcpItem2Text:"Automatisk konvertering fra design til kode sparer timer med manuelt arbeid.",whyUseMcpItem3Title:"Konsistens:",whyUseMcpItem3Text:"Alle design tokens og komponenter brukes konsekvent, validert mot designsystemet vårt.",whyUseMcpItem4Title:"Effektivitet:",whyUseMcpItem4Text:"Mindre tid på repetitivt arbeid, mer tid på å løse faktiske problemer.",howItWorksTitle:"Hvordan fungerer det?",howItWorksIntro:"Prosessen er enkel og følger disse stegene:",stepByStepTitle:"Steg-for-steg oversikt",stepByStep1Title:"1. Oppsett (kun én gang)",stepByStep1Text:"Du setter opp en lokal MCP-server som kobler Figma til AI-assistenten din. Dette krever en Figma Access Token og litt konfigurasjon.",stepByStep2Title:"2. Hent AI Design System Guide",stepByStep2Text:"Du laster ned en spesiallaget guide som inneholder all informasjon om komponenter, tokens og beste praksis. Dette gir AI-en full kontekst om designsystemet vårt.",stepByStep3Title:"3. Kopier Figma-lenke",stepByStep3Text:"I Figma markerer du den delen av designet du vil implementere og kopierer lenken til den spesifikke komponenten eller rammen.",stepByStep4Title:"4. Gi instruksjoner til AI-en",stepByStep4Text:"Du gir AI-en Figma-lenken sammen med instruksjoner om hva du vil lage. AI-en bruker MCP til å lese designet og genererer kode basert på designsystemet vårt.",stepByStep5Title:"5. Review og juster",stepByStep5Text:"AI-en genererer kode som du kan gjennomgå, teste og justere etter behov. Koden følger automatisk design tokens og komponenter fra designsystemet.",nextStepsTitle:"Neste steg",nextStepsText:"Nå som du forstår grunnleggende om MCP og arbeidsflyten, kan du velge mellom:",nextStepsItem1:"Cursor workflow - for brukere av Cursor IDE",nextStepsItem2:"Claude Code workflow - for brukere av Claude Code",part1Title:"Del 1: Oppsett av Figma MCP Server",part1Intro:"Dette gjøres kun én gang for å aktivere integrasjonen i Cursor/Windsurf.",part1Description:'For at AI-en skal kunne "lese" Figma-filene, må vi sette opp en lokal kobling.',setupStep1Title:"1. Hent Figma Access Token",setupStep1Item1:"Gå til Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Klikk Generate new token.",setupStep1Item3:'Navn: F.eks. "Cursor MCP".',setupStep1Item4:"Scopes: Velg File content: Read og File metadata: Read.",setupStep1Item5:"Kopier tokenet (du får ikke se det igjen).",setupStep2Title:"2. Konfigurer i Cursor",setupStep2Item1:"Åpne innstillinger i Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Gå til Features -> MCP.",setupStep2Item3:"Klikk + Add New MCP Server.",setupStep2Item4:"Fyll inn følgende:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Legg til Environment Variable (viktig!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Lim inn tokenet du kopierte i steg 1]",setupStep2Item11:'Når lyset ved siden av "figma" blir grønt, er verktøyet klart til bruk.',part2Title:"Del 2: Daglig Arbeidsflyt",step0Title:"Steg 0: Indeksering av Dokumentasjon",step0Description:"Gjør dette én gang per prosjekt for å gi AI-en full oversikt over designsystemet.",step0Intro:"For at Cursor skal forstå våre spesifikke tokens, komponentnavn og retningslinjer, må vi la den lese gjennom dokumentasjonen på forhånd.",step0Item1:"Åpne Chat i Cursor (Cmd + L / Ctrl + L).",step0Item2:'Skriv @Docs i tekstfeltet og velg "Add new doc" fra menyen som dukker opp.',step0Item3:"Lim inn URL-en til hovedsiden for dokumentasjonen: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Gi den et navn som er lett å huske, f.eks. RødeKors.",step0Item5:"Trykk Confirm.",step0WhatHappensTitle:"Hva skjer nå?",step0WhatHappensText:'Cursor vil automatisk "crawle" (lese) gjennom hovedsiden og alle undersider. Den lagrer informasjonen i en lokal database. Dette gjør at du senere kan referere til @RødeKors i chatten, og AI-en vil umiddelbart vite alle fargekoder, spacing-variabler og komponent-regler uten at du trenger å lime inn tekst manuelt. NB: Dette gjelder når du refererer til @RødeKors i chatten. Hvis du bruker .cursorrules, trenger du ikke å legge ved @RødeKors manuelt.',step0_5Title:"Steg 0.5: Hent AI Design System Guide",step0_5Description:"Før du begynner å konvertere Figma-design til kode, må du hente AI Design System Guide. Denne guiden inneholder komplett dokumentasjon om alle komponenter, design tokens, og beste praksis som AI-assistenten trenger for å produsere korrekt kode.",step0_5WhyCurlTitle:"Hvorfor bruke curl?",step0_5WhyCurlText:"curl er den anbefalte metoden fordi:",step0_5WhyCurlItem1:"Filen lastes ned lokalt - AI-assistenten har alltid tilgang til den uten internett",step0_5WhyCurlItem2:"Raskere referanse - Ingen behov for å laste ned på nytt ved hver prompt",step0_5WhyCurlItem3:"Fungerer offline - Etter nedlasting kan du jobbe uten internettforbindelse",step0_5WhyCurlItem4:"Konsistent kontekst - AI-en leser samme versjon av guiden hver gang",step0_5WhyCurlItem5:"Enklere referanse - Bare bruk filnavnet (@AI_DESIGN_SYSTEM_GUIDE.md) i stedet for lange URL-er",cursorWorkflowTitle:"Komplett arbeidsflyt: Cursor",cursorWorkflowIntro:"Følg disse stegene for å sette opp og bruke Figma MCP-arbeidsflyten i Cursor.",claudeWorkflowTitle:"Komplett arbeidsflyt: Claude Code",claudeWorkflowIntro:"Følg disse stegene for å sette opp og bruke Figma MCP-arbeidsflyten i Claude Code.",step0_5ClaudeTitle:"For Claude Code:",step0_5ClaudeIntro:"I Claude Code kan du hente guiden direkte i terminalen eller be Claude om å gjøre det:",step0_5ClaudeMethod1Title:"Metode 1: Hent via terminal",step0_5ClaudeMethod1Step1:"Åpne terminalen i Claude Code",step0_5ClaudeMethod1Step2:"Kjør denne kommandoen:",step0_5ClaudeMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod1Step3:"Verifiser at filen er lastet ned: ls -la AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod2Title:"Metode 2: Be Claude om å hente den",step0_5ClaudeMethod2Text:'Du kan også be Claude Code direkte: "Please fetch the AI Design System Guide from https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMethod2Note:"Merk: Dette laster ned filen lokalt, akkurat som curl-kommandoen.",step0_5ClaudeSetupTitle:"Steg 0.6: Be Claude om å lese guiden og sette opp prosjektet",step0_5ClaudeSetupIntro:"Før du begynner å konvertere Figma-design til kode, må du be Claude om å lese gjennom AI Design System Guide og verifisere at prosjektet er satt opp korrekt i henhold til guiden. Dette sikrer at alle nødvendige pakker, CSS-imports og font-oppsett er på plass før konvertering.",step0_5ClaudeSetupStep1:"Be Claude om å lese AI Design System Guide: Gi Claude en prompt som ber den lese filen @componentlibrary/AI_DESIGN_SYSTEM_GUIDE.md (eller den nedlastede filen hvis den er i prosjektroten)",step0_5ClaudeSetupStep2:"Be Claude om å verifisere CSS-imports: Gi Claude en prompt som ber den sjekke at CSS-filene er importert i riktig rekkefølge (base styles først, deretter theme)",step0_5ClaudeSetupStep3:"Be Claude om å verifisere font-oppsett: Gi Claude en prompt som ber den sjekke at Source Sans 3 er konfigurert korrekt (se Font Setup-seksjonen i guiden)",step0_5ClaudeSetupStep4:"Be Claude om å verifisere pakke-installasjon: Gi Claude en prompt som ber den sjekke at alle nødvendige pakker er installert (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)",step0_5ClaudeSetupStep5:"Be Claude om å verifisere prosjektstruktur: Gi Claude en prompt som ber den sjekke at prosjektstrukturen matcher anbefalingene i guiden",step0_5ClaudeSetupPromptTitle:"Ferdig prompt å kopiere:",step0_5ClaudeSetupPrompt:`Les gjennom AI_DESIGN_SYSTEM_GUIDE.md filen og verifiser at prosjektet mitt er satt opp korrekt i henhold til guiden. Sjekk spesifikt:
+(function(v,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@digdir/designsystemet-react"),require("date-fns"),require("@navikt/aksel-icons")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@digdir/designsystemet-react","date-fns","@navikt/aksel-icons"],n):(v=typeof globalThis<"u"?globalThis:v||self,n(v.ComponentLibrary={},v.jsxRuntime,v.React,v.designsystemetReact,v.dateFns,v.akselIcons))})(this,(function(v,n,x,S,O,ce){"use strict";const Re=x.forwardRef((t,e)=>n.jsx(S.Alert,{ref:e,...t}));Re.displayName="Alert";const ze=x.forwardRef((t,e)=>n.jsx(S.Avatar,{ref:e,...t}));ze.displayName="Avatar";const et=x.forwardRef((t,e)=>n.jsx(S.Badge,{ref:e,...t}));et.displayName="Badge";const Pt=S.BadgePosition,zt=S.Breadcrumbs,Gt=S.BreadcrumbsList,$t=S.BreadcrumbsItem,Wt=S.BreadcrumbsLink,he=S.Button;he.displayName="Button";const tt=S.Card,Ht=S.CardBlock;tt.displayName="Card";const nt=S.Checkbox,Ut=S.Fieldset,Ot=S.useCheckboxGroup;nt.displayName="Checkbox",Ut.displayName="Fieldset";const Vt=S.Chip;function Ge(t){return(e={})=>{const o=e.width?String(e.width):t.defaultWidth;return t.formats[o]||t.formats[t.defaultWidth]}}function Se(t){return(e,o)=>{const s=o!=null&&o.context?String(o.context):"standalone";let l;if(s==="formatting"&&t.formattingValues){const r=t.defaultFormattingWidth||t.defaultWidth,c=o!=null&&o.width?String(o.width):r;l=t.formattingValues[c]||t.formattingValues[r]}else{const r=t.defaultWidth,c=o!=null&&o.width?String(o.width):t.defaultWidth;l=t.values[c]||t.values[r]}const i=t.argumentCallback?t.argumentCallback(e):e;return l[i]}}function Ce(t){return(e,o={})=>{const s=o.width,l=s&&t.matchPatterns[s]||t.matchPatterns[t.defaultMatchWidth],i=e.match(l);if(!i)return null;const r=i[0],c=s&&t.parsePatterns[s]||t.parsePatterns[t.defaultParseWidth],d=Array.isArray(c)?Yt(c,g=>g.test(r)):Kt(c,g=>g.test(r));let u;u=t.valueCallback?t.valueCallback(d):d,u=o.valueCallback?o.valueCallback(u):u;const b=e.slice(r.length);return{value:u,rest:b}}}function Kt(t,e){for(const o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&e(t[o]))return o}function Yt(t,e){for(let o=0;o<t.length;o++)if(e(t[o]))return o}function qt(t){return(e,o={})=>{const s=e.match(t.matchPattern);if(!s)return null;const l=s[0],i=e.match(t.parsePattern);if(!i)return null;let r=t.valueCallback?t.valueCallback(i[0]):i[0];r=o.valueCallback?o.valueCallback(r):r;const c=e.slice(l.length);return{value:r,rest:c}}}const Zt={lessThanXSeconds:{one:"mindre enn ett sekund",other:"mindre enn {{count}} sekunder"},xSeconds:{one:"ett sekund",other:"{{count}} sekunder"},halfAMinute:"et halvt minutt",lessThanXMinutes:{one:"mindre enn ett minutt",other:"mindre enn {{count}} minutter"},xMinutes:{one:"ett minutt",other:"{{count}} minutter"},aboutXHours:{one:"omtrent en time",other:"omtrent {{count}} timer"},xHours:{one:"en time",other:"{{count}} timer"},xDays:{one:"en dag",other:"{{count}} dager"},aboutXWeeks:{one:"omtrent en uke",other:"omtrent {{count}} uker"},xWeeks:{one:"en uke",other:"{{count}} uker"},aboutXMonths:{one:"omtrent en måned",other:"omtrent {{count}} måneder"},xMonths:{one:"en måned",other:"{{count}} måneder"},aboutXYears:{one:"omtrent ett år",other:"omtrent {{count}} år"},xYears:{one:"ett år",other:"{{count}} år"},overXYears:{one:"over ett år",other:"over {{count}} år"},almostXYears:{one:"nesten ett år",other:"nesten {{count}} år"}},Xt=(t,e,o)=>{let s;const l=Zt[t];return typeof l=="string"?s=l:e===1?s=l.one:s=l.other.replace("{{count}}",String(e)),o!=null&&o.addSuffix?o.comparison&&o.comparison>0?"om "+s:s+" siden":s},Jt={full:"EEEE d. MMMM y",long:"d. MMMM y",medium:"d. MMM y",short:"dd.MM.y"},Qt={full:"'kl'. HH:mm:ss zzzz",long:"HH:mm:ss z",medium:"HH:mm:ss",short:"HH:mm"},Rt={full:"{{date}} 'kl.' {{time}}",long:"{{date}} 'kl.' {{time}}",medium:"{{date}} {{time}}",short:"{{date}} {{time}}"},en={date:Ge({formats:Jt,defaultWidth:"full"}),time:Ge({formats:Qt,defaultWidth:"full"}),dateTime:Ge({formats:Rt,defaultWidth:"full"})},tn={lastWeek:"'forrige' eeee 'kl.' p",yesterday:"'i går kl.' p",today:"'i dag kl.' p",tomorrow:"'i morgen kl.' p",nextWeek:"EEEE 'kl.' p",other:"P"},nn=(t,e,o,s)=>tn[t],on={narrow:["f.Kr.","e.Kr."],abbreviated:["f.Kr.","e.Kr."],wide:["før Kristus","etter Kristus"]},rn={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1. kvartal","2. kvartal","3. kvartal","4. kvartal"]},sn={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["jan.","feb.","mars","apr.","mai","juni","juli","aug.","sep.","okt.","nov.","des."],wide:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"]},an={narrow:["S","M","T","O","T","F","L"],short:["sø","ma","ti","on","to","fr","lø"],abbreviated:["søn","man","tir","ons","tor","fre","lør"],wide:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"]},ln={narrow:{am:"a",pm:"p",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},abbreviated:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morgenen",afternoon:"på ettermiddagen",evening:"på kvelden",night:"på natten"}},dn={ordinalNumber:(t,e)=>Number(t)+".",era:Se({values:on,defaultWidth:"wide"}),quarter:Se({values:rn,defaultWidth:"wide",argumentCallback:t=>t-1}),month:Se({values:sn,defaultWidth:"wide"}),day:Se({values:an,defaultWidth:"wide"}),dayPeriod:Se({values:ln,defaultWidth:"wide"})},cn=/^(\d+)\.?/i,un=/\d+/i,pn={narrow:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,abbreviated:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,wide:/^(før Kristus|før vår tid|etter Kristus|vår tid)/i},gn={any:[/^f/i,/^e/i]},mn={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](\.)? kvartal/i},fn={any:[/1/i,/2/i,/3/i,/4/i]},hn={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mars?|apr|mai|juni?|juli?|aug|sep|okt|nov|des)\.?/i,wide:/^(januar|februar|mars|april|mai|juni|juli|august|september|oktober|november|desember)/i},kn={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^mai/i,/^jun/i,/^jul/i,/^aug/i,/^s/i,/^o/i,/^n/i,/^d/i]},vn={narrow:/^[smtofl]/i,short:/^(sø|ma|ti|on|to|fr|lø)/i,abbreviated:/^(søn|man|tir|ons|tor|fre|lør)/i,wide:/^(søndag|mandag|tirsdag|onsdag|torsdag|fredag|lørdag)/i},bn={any:[/^s/i,/^m/i,/^ti/i,/^o/i,/^to/i,/^f/i,/^l/i]},yn={narrow:/^(midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten)|[ap])/i,any:/^([ap]\.?\s?m\.?|midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten))/i},xn={any:{am:/^a(\.?\s?m\.?)?$/i,pm:/^p(\.?\s?m\.?)?$/i,midnight:/^midn/i,noon:/^midd/i,morning:/morgen/i,afternoon:/ettermiddag/i,evening:/kveld/i,night:/natt/i}},Tn={ordinalNumber:qt({matchPattern:cn,parsePattern:un,valueCallback:t=>parseInt(t,10)}),era:Ce({matchPatterns:pn,defaultMatchWidth:"wide",parsePatterns:gn,defaultParseWidth:"any"}),quarter:Ce({matchPatterns:mn,defaultMatchWidth:"wide",parsePatterns:fn,defaultParseWidth:"any",valueCallback:t=>t+1}),month:Ce({matchPatterns:hn,defaultMatchWidth:"wide",parsePatterns:kn,defaultParseWidth:"any"}),day:Ce({matchPatterns:vn,defaultMatchWidth:"wide",parsePatterns:bn,defaultParseWidth:"any"}),dayPeriod:Ce({matchPatterns:yn,defaultMatchWidth:"any",parsePatterns:xn,defaultParseWidth:"any"})},ye={code:"nb",formatDistance:Xt,formatLong:en,formatRelative:nn,localize:dn,match:Tn,options:{weekStartsOn:1,firstWeekContainsDate:4}},ot=({title:t,...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&n.jsx("title",{children:t}),n.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",fill:"currentColor"})]});ot.displayName="ChevronLeftIcon";const rt=({title:t,...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&n.jsx("title",{children:t}),n.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",fill:"currentColor"})]});rt.displayName="ChevronRightIcon";const oe={calendarContainer:"_calendarContainer_htlea_1",calendarHeader:"_calendarHeader_htlea_16",monthYear:"_monthYear_htlea_23",navigationButtons:"_navigationButtons_htlea_34",grid:"_grid_htlea_43",dayNameCell:"_dayNameCell_htlea_51",dateCell:"_dateCell_htlea_69",dateNumberContainer:"_dateNumberContainer_htlea_95",otherMonth:"_otherMonth_htlea_108",disabled:"_disabled_htlea_108",selectedDate:"_selectedDate_htlea_134"},Sn={NO:{header:{darkMode:"Nattmodus",toggleTheme:"Bytt tema",language:"Språk:",search:"Søk",searchPlaceholder:"Søk etter innhold...",closeSearch:"Lukk søk",openSearch:"Åpne søk",clearSearch:"Tøm søk",close:"Lukk",menu:"Meny",closeMenu:"Lukk meny",openMenu:"Åpne meny",login:"Logg inn",supportUs:"Støtt oss",suggestions:"Forslag til søk",viewAll:"Vis alle resultater",noResults:"Ingen treff funnet for",selectLanguage:"Velg språk",homeAriaLabel:"Norges Røde Kors Hjem",nav:{design:"Design",components:"Komponenter",code:"Kode",tokens:"Tokens",work:"Vårt arbeid",volunteer:"Bli frivillig",courses:"Kurs og opplæring"}},home:{heroTitle:"Røde Kors Designsystem",heroLead:"Felles komponentbibliotek og retningslinjer for design og utvikling av digitale løsninger i Røde Kors.",searchComponents:"Søk i komponenter",exploreSystem:"Utforsk systemet",componentsDesc:"Bibliotek med ferdige React-komponenter.",designDesc:"Farger, typografi og prinsipper.",codeDesc:"Dokumentasjon, arbeidsflyt og MCP.",tokensDesc:"Design tokens, farger og spacing.",universalDesign:"Universell utforming",universalDesignText:"Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",readGuidelines:"Les retningslinjene",consistentBrand:"Konsistent merkevare",consistentBrandText:"Design tokens sikrer at Røde Kors sin visuelle profil ivaretas på alle flater.",seeColors:"Se farger",efficientDev:"Effektiv utvikling",efficientDevText:"Spar tid med ferdige komponenter. Fokuser på funksjonalitet, ikke CSS.",exploreComponents:"Utforsk komponenter",quickActionsTitle:"Hopp rett inn",quickActionCodeTitle:"Start i kode",quickActionCodeText:"Se oppsett, tokens og eksempler.",quickActionDesignTitle:"Designguiden",quickActionDesignText:"Farger, typografi og prinsipper.",quickActionComponentsTitle:"Komponentbibliotek",quickActionComponentsText:"Utforsk og gjenbruk ferdige komponenter.",openCode:"Åpne kode",openDesign:"Åpne design",openComponents:"Åpne komponenter",featureStripTitle:"Nyttig akkurat nå",featureToken:"Oppdaterte designtokens",featureFont:"Source Sans 3 inkludert",featureComponent:"Nye komponentvarianter",featureSeeAll:"Se alle oppdateringer",profile:"Profil",name:"Navn Navnesen",volunteer:"Frivillig",save:"Lagre",approved:"Godkjent",rejected:"Avvist",darkModeLabel:"Mørk modus",importantMessage:"Viktig melding",updateGuidelines:"Husk å oppdatere retningslinjene...",all:"Alle",active:"Aktive",alerts:"Varsler",status:"Status"},components:{title:"Komponenter",intro:"Designsystemet inneholder grunnleggende komponenter som kan settes sammen på mange ulike måter og i forskjellige mønstre.",searchPlaceholder:"Søk etter komponent...",searchAriaLabel:"Søk i komponenter",noResults:"Ingen komponenter funnet for"},code:{sidebar:{overview:"Oversikt",workflow:"Arbeidsflyt",structure:"Struktur",contribute:"Bidra",home:"Startside",getStarted:"Kom i gang",styling:"Styling",designTokens:"Designtokens",fonts:"Fonter",icons:"Bruk av ikoner",figmaMcp:"Fra Figma til Kode (MCP)",introduction:"Introduksjon",cursor:"Cursor",claudeCode:"Claude Code",componentCreation:"Komponent Kreasjon",metadataFiles:"Metadata filer",developerGuide:"Utviklerguide",aiGuide:"AI Guide for Assistanter"},overview:{title:"Røde Kors Designsystem",intro:"Velkommen til Røde Kors Designsystem! Dette repositoriet inneholder et bibliotek med gjenbrukbare UI-komponenter bygget med React, skreddersydd for Norges Røde Kors sine digitale prosjekter.",text1:"Det er utviklet ved å utnytte grunnkomponentene fra Digdirs Designsystemet. Denne tilnærmingen sikrer en helhetlig og gjenkjennelig visuell identitet på tvers av alle applikasjoner for Røde Kors. Systemet er forhåndskonfigurert med det offisielle Røde Kors-temaet, som leveres via en dedikert designtoken-pakke.",text2:"Hovedmålet er å sikre merkevarekonsistens, forbedre utviklingseffektiviteten og opprettholde høye standarder for tilgjengelighet i alle Røde Kors-applikasjoner.",text3:"Storybook fungerer som den interaktive dokumentasjonen og utviklingsmiljøet for å vise og teste disse komponentene.",getStartedCard:"Kom i gang",getStartedDesc:"Installasjon, oppsett og retningslinjer for utviklere.",getStartedLink:"Kom i gang",designTokensCard:"Designtokens",designTokensDesc:"Lær hvordan du bruker designtokens og fonter.",designTokensLink:"Les mer",workflowCard:"Arbeidsflyt",workflowDesc:"Lær hvordan du bruker MCP-verktøy for å hente komponenter direkte fra Figma.",workflowLink:"Les guide"},getStarted:{title:"Kom i gang",intro:"For å ta i bruk Røde Kors Designsystem i din Next.js (eller annen React) applikasjon:",installationTitle:"1. Installasjon",installationText:"Installer de nødvendige npm-pakkene for prosjektet ditt. Du trenger tre pakker: selve komponentbiblioteket (rk-designsystem), grunnstilene fra Digdir, og Røde Kors-temapakken (rk-design-tokens).",githubLink:"Gå til GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Merk: Du trenger ikke å installere @digdir/designsystemet-react separat, da alle nødvendige komponenter er inkludert i rk-designsystem-pakken.",stylesTitle:"2. Inkludering av stiler (CSS)",stylesText1:"For at komponentene skal styles riktig, må du importere stilarkene på øverste nivå i applikasjonen din, for eksempel i layout.tsx (for Next.js App Router) eller _app.tsx (for Next.js Pages Router).",stylesText2:"Viktig rekkefølge: Det er avgjørende at grunnstilarket (@digdir/designsystemet-css) lastes før Røde Kors-temafilen (rk-design-tokens). Dette sikrer at vårt temas tokens overstyrer standardverdiene korrekt.",appRouterExample:"Eksempel for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Eksempel for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Bruk av komponenter",usageText:"Når stilarkene er inkludert, kan du begynne å importere og bruke komponenter i prosjektet ditt. Alle komponenter du trenger er tilgjengelige direkte fra rk-designsystem-pakken.",importTitle:"3.1 Importer og bruk Røde Kors Designsystem-komponenter",nextjsExample:"3.2 Eksempel på bruk i en Next.js-side",updateText:"Utseendet til alle komponenter styres fullt ut av pakken rk-design-tokens. For å motta visuelle oppdateringer til merkevaretemaet (som en ny primærfarge), oppdaterer du ganske enkelt pakken til siste versjon:"},designTokens:{title:"Røde Kors Designtokens",intro:"Dette repositoriet er den sentrale kilden for alle designtokens (farger, typografi, avstander osv.) for Norges Røde Kors sine digitale produkter. Det fungerer som en sannhetskilde (single source of truth) som automatisk distribuerer stilendringer til alle tilkoblede prosjekter.",howToTitle:"Hvordan ta i bruk tokens",howToText:"For å bruke designtokens i ditt prosjekt, må du installere og konfigurere temapakken.",installTitle:"1. Installasjon",importTitle:"2. Importer CSS",importText:"I din applikasjons rot-layout (f.eks. layout.tsx), importer grunnstilarket før Røde Kors-temafilen.",fontTitle:"Hvordan legge til fonten",workflowTitle:"Automatisert arbeidsflyt for Designtokens (End-to-End)",workflowText:"Denne arbeidsflyten etablerer en helautomatisert pipeline som kobler designprosessen vår direkte til live produksjonsapplikasjoner. Når en designer oppdaterer stilen i Figma, bygger, versjonerer og publiserer dette systemet automatisk en ny stilpakke til npm. Deretter varsles Vercel-prosjektene våre, som oppdaterer seg selv og redeployer med de nye stilene.",phase1Title:"Fase 1: En Designer gjør en endring (Publisist)",phase1Item1:"Design i Figma: En designer gjør en endring på en farge, font eller annen designtoken.",phase1Item2:"Push til GitHub: Ved bruk av Token Studio-pluginet pusher designeren endringene. Dette committer automatisk de oppdaterte JSON-filene til main-branchen.",phase1Item3:"Trigge Publisher Workflow: Denne pushen trigger umiddelbart GitHub Action definert i .github/workflows/publish.yml.",phase1Item4:"Bygg & Commit Artefakter: Workflowen kjører npm run build for å generere CSS fra JSON-filene og committer resultatene.",phase1Item5:"Versjonering & Release: Workflowen kjører npm version patch for å øke versjonsnummeret, lage en release-commit, og tagge den.",phase1Item6:"Publiser til npm: Til slutt publiserer workflowen den nye versjonen av pakken til npm-registeret.",phase2Title:"Fase 2: Varsling av applikasjoner (Signalet)",phase2Text:"Send et Dispatch-signal: Etter en vellykket publisering, sender workflowen et repository_dispatch-signal til konsumentprosjekter som rk-designsystem for å varsle om den nye versjonen.",phase3Title:"Fase 3: Automatisk oppdatering og redeploy (Konsumentene)",phase3Item1:'Trigge Consumer Workflow: Dispatch-signalet starter en "Update"-workflow i konsumentprosjektene.',phase3Item2:"Oppdater Avhengigheter: Workflowen kjører npm update rk-design-tokens for å hente den siste versjonen.",phase3Item3:"Commit & Push Oppdateringen: Workflowen committer den oppdaterte package-lock.json-filen.",phase3Item4:"Vercel Auto-Deploys: Vercels Git-integrasjon oppdager den nye commiten og starter automatisk en ny deployment."},fonts:{title:"Fonter",intro:"Røde Kors Designsystem bruker fonten Source Sans 3. For at typografien skal vises korrekt i applikasjonen din, må denne fonten lastes inn.",howToTitle:"Hvordan legge til fonten",howToText:"Du kan inkludere fonten ved å legge til følgende linjer i <head>-elementet i din HTML eller i rot-layouten din:",afterLoadTitle:"Etter lasting",afterLoadText:"Når fonten er lastet, vil CSS-variablene fra rk-design-tokens automatisk ta den i bruk (--ds-font-family).",nextjsTitle:"Eksempel for Next.js",nextjsText:"For Next.js App Router, legg til fonten i layout.tsx:",nextjsPagesText:"For Next.js Pages Router, legg til fonten i _app.tsx eller _document.tsx:",cssVariablesTitle:"CSS-variabler",cssVariablesText:"Etter at fonten er lastet, bruker designsystemet automatisk CSS-variabelen --ds-font-family som er definert i rk-design-tokens pakken. Du trenger ikke å spesifisere fonten manuelt i komponentene dine."},icons:{title:"Bruk av Ikoner",intro:"Dette biblioteket er designet for å fungere sømløst med det offisielle ikonsettet fra NAV/Aksel.",installTitle:"Installasjon",importTitle:"Import og bruk",importText:"Ikoner eksporteres som navngitte React-komponenter. Importer kun de ikonene du trenger (tree‑shakable):",accessibilityTitle:"Tilgjengelighetsguide",accessibilityItem1:"Ikon + synlig tekst: sett aria-hidden på ikonet slik at skjermlesere ikke leser det opp to ganger.",accessibilityItem2:"Ikon-kun triggere (f.eks. en knapp): legg til en beskrivende aria-label på triggeren, behold ikonet aria-hidden.",accessibilityItem3:"Farge: ikoner arver currentColor; bruk komponentens variant/farge for å styre det (f.eks. knappevarianter, tag-farger).",accessibilityItem4:`Størrelse: sett fontSize (f.eks. fontSize="1.25rem") eller inline style (f.eks. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Ytelse",performanceText:"Bruk navngitte importer fra @navikt/aksel-icons for å holde pakkestørrelsen nede – ubrukte ikoner fjernes (tree-shaken) av moderne bundlere."},contributing:{title:"Bidra til Biblioteket",intro:"Denne guiden gir et sett med standarder og beste praksis for å lage nye komponenter. Å følge disse retningslinjene sikrer at komponentbiblioteket vårt forblir konsistent, tilgjengelig og enkelt å vedlikeholde.",getStartedTitle:"Kom i gang (for bidragsytere)",getStartedText:"Følg disse stegene for å kjøre det lokale utviklingsmiljøet. Alle kommandoer skal kjøres fra roten av prosjektet.",principlesTitle:"Kjerneprinsipper",principlesText:"Hver komponent vi bygger bør følge disse kjerneprinsippene:",principlesA11y:"Tilgjengelighet (A11y): Komponenter må kunne brukes av alle, inkludert personer med nedsatt funksjonsevne. Dette betyr korrekte ARIA-attributter, tastaturnavigasjon og semantisk HTML.",principlesReuse:"Gjenbrukbarhet: Komponenter bør være generiske nok til å brukes i flere kontekster uten modifikasjon.",principlesConsistency:"Konsistens: Komponenter skal følge våre etablerte designtokens (farger, avstander, typografi) og ha et konsistent API og struktur.",principlesDocs:"Dokumentasjon: Hver komponent må dokumenteres i Storybook for å gjøre den oppdagbar og enkel å bruke for andre utviklere.",whenTitle:"Når skal man lage en ny komponent",whenText:"Før du begynner å kode, avgjør hvilken type komponent du trenger. De fleste av våre behov faller inn i en av tre kategorier:",wrappedSimpleTitle:"Wrapped Component (Enkel):",wrappedSimpleWhat:"Hva det er: En komponent som direkte wrapper og re-eksporterer en komponent fra @digdir/designsystemet-react uten modifikasjoner.",wrappedSimpleWhen:"Når den skal brukes: Når den grunnleggende Digdir-komponenten dekker behovene våre perfekt, men vi ønsker å inkludere den i vårt eget bibliotek for en konsistent importkilde.",wrappedSimpleExample:"Eksempel: Buttons-komponenten er et perfekt eksempel på dette.",wrappedStyledTitle:"Wrapped Component (med stiloverstyringer):",wrappedStyledWhat:"Hva det er: En wrappet Digdir-komponent hvor vi bruker tilpasset CSS for å justere utseendet slik at det passer bedre til Røde Kors sitt spesifikke designspråk.",wrappedStyledWhen:"Når den skal brukes: Når en Digdir-komponent er funksjonelt korrekt, men trenger visuelle justeringer (f.eks. andre ikoner, border-radius, padding).",wrappedStyledExample:"Eksempel: Alert-komponenten, som bruker composes i CSS for å arve grunnstiler og deretter påføre egne overstyringer.",customTitle:"Custom Component (fra bunnen):",customWhat:"Hva det er: En helt ny komponent bygget når ingen eksisterende Digdir-komponent dekker kravene våre.",customWhen:"Når den skal brukes: For unike UI-mønstre eller funksjonalitet som ikke dekkes av grunnbiblioteket.",customExample:"Eksempel: DateInput-komponenten er en tilpasset komponent med egen tilstand, logikk og styling.",fileStructureTitle:"Filstruktur for komponenter",fileStructureText:"For å opprettholde konsistens, bør hver ny komponent følge denne filstrukturen. Lag en ny mappe under src/components/ med komponentens PascalCase-navn.",codingGuidelinesTitle:"Retningslinjer for koding",componentLogicTitle:"1. Komponentlogikk (MyNewComponent.tsx)",logicTypeScript:"TypeScript først: Alle komponenter må skrives i TypeScript. Definer et Props-interface for komponenten din, som utvider fra grunnleggende HTML-element eller Digdir-komponentprops hvis aktuelt.",logicForwardRef:"Forward Refs: Bruk alltid React.forwardRef for å tillate foreldrekomponenter å få en ref til det underliggende DOM-elementet.",logicA11y:"Tilgjengelighet er obligatorisk:",logicA11yItem1:"Bruk semantisk HTML (<button>, <label>, <nav>).",logicA11yItem2:"Sørg for at alle interaktive elementer kan fokuseres og betjenes med tastatur.",logicA11yItem3:"Gi aria-label for knapper som kun har ikon eller elementer hvor tekstetiketten ikke er synlig.",logicA11yItem4:"Bruk aria-invalid, aria-describedby, osv., for å kommunisere tilstand til hjelpemidler.",logicControlled:"Controlled vs. Uncontrolled: Hvis komponenten din har tilstand (som en input), bør den støtte både kontrollerte (value + onChange) og ukontrollerte (defaultValue) mønstre.",logicProps:"Props-navngiving: Bruk data-* attributter for stylingvarianter (f.eks. data-size, data-color) for å samkjøre med mønstrene i våre eksisterende komponenter.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For tilpassede komponenter må alle stiler plasseres i en styles.module.css-fil. Dette scoper klassenavn lokalt og forhindrer globale stilkonflikter.",stylingTokens:"Designtokens: Bruk alltid våre designtokens (var(--ds-...)) for farger, avstander, fonter, osv. Ikke bruk hardkodede verdier (f.eks. #FFF, 16px).",stylingOverride:"Overstyring av Wrapped Components: For wrapped components, bruk en standard CSS-fil. Bruk @layer og composes nøkkelord for å utvide grunnleggende Digdir-stiler uten å øke CSS-spesifisiteten unødvendig.",documentationTitle:"3. Dokumentasjon (MyNewComponent.stories.tsx)",docsStorybook:"Din Storybook-fil er den offisielle dokumentasjonen. Den må være tydelig og omfattende.",docsMeta:"meta Object: Definer komponentens tittel, komponentreferanse, og tags: ['autodocs'] for å aktivere automatisk dokumentasjon.",docsArgTypes:"argTypes: Dokumenter hver enkelt prop. Gi en beskrivelse, kontrolltype (f.eks. select, boolean, text), og alternativer hvis aktuelt. Dette driver de interaktive kontrollene i Storybook.",docsStories:"Lag flere Stories: Lag en egen story for hver nøkkeltilstand og variant av komponenten din (f.eks. Default, Disabled, WithError, WithIcon).",processTitle:"Bidragsprosess",processPRTitle:"Opprett en Pull Request (PR):",processBranch:"Opprett en Branch: Pull de siste endringene fra main-branchen og opprett en ny feature-branch: git checkout -b feat/min-nye-komponent.",processDraft:"Åpne en Draft PR: Så snart du starter, åpne en draft pull request på GitHub. Dette forhindrer dobbeltarbeid og lar andre se hva du jobber med.",processCommit:"Commit endringene dine: Mens du jobber, lag små, logiske commits.",processReview:'Klar for gjennomgang: Når utviklingen er ferdig og alle automatiserte sjekker passerer, merk PR-en som "Ready for review" og be om en gjennomgang fra designsystem-forvalterne.'},figmaMcp:{title:"Arbeidsflyt: Fra Figma til Kode med MCP",introTitle:"Introduksjon til MCP og Arbeidsflyt",intro:"Denne guiden beskriver hvordan vi bruker Model Context Protocol (MCP) for å koble Figma direkte til utviklingsmiljøet. Dette gjør det mulig å hente designspesifikasjoner, tokens og strukturer automatisk, validert mot vårt designsystem.",whatIsMcpTitle:"Hva er MCP?",whatIsMcpText1:"Model Context Protocol (MCP) er en åpen standard som lar AI-assistenter kommunisere direkte med eksterne datakilder og verktøy. I vår kontekst bruker vi MCP til å koble Figma-designfiler direkte til utviklingsmiljøet vårt.",whatIsMcpText2:"Dette betyr at når du gir AI-en en Figma-lenke, kan den automatisk:",whatIsMcpItem1:"Lese designspesifikasjoner direkte fra Figma",whatIsMcpItem2:"Hente eksakte farger, spacing, typografi og andre design tokens",whatIsMcpItem3:"Forstå komponentstrukturen og hierarkiet",whatIsMcpItem4:"Generere kode som matcher designet nøyaktig",whyUseMcpTitle:"Hvorfor bruke MCP?",whyUseMcpText1:"Tradisjonelt har utviklere måttet manuelt konvertere design til kode, noe som kan være tidkrevende og feilutsatt. Med MCP får vi:",whyUseMcpItem1Title:"Nøyaktighet:",whyUseMcpItem1Text:"AI-en leser designet direkte fra kilde, så ingen informasjon går tapt i oversettelsen.",whyUseMcpItem2Title:"Hastighet:",whyUseMcpItem2Text:"Automatisk konvertering fra design til kode sparer timer med manuelt arbeid.",whyUseMcpItem3Title:"Konsistens:",whyUseMcpItem3Text:"Alle design tokens og komponenter brukes konsekvent, validert mot designsystemet vårt.",whyUseMcpItem4Title:"Effektivitet:",whyUseMcpItem4Text:"Mindre tid på repetitivt arbeid, mer tid på å løse faktiske problemer.",howItWorksTitle:"Hvordan fungerer det?",howItWorksIntro:"Prosessen er enkel og følger disse stegene:",stepByStepTitle:"Steg-for-steg oversikt",stepByStep1Title:"1. Oppsett (kun én gang)",stepByStep1Text:"Du setter opp en lokal MCP-server som kobler Figma til AI-assistenten din. Dette krever en Figma Access Token og litt konfigurasjon.",stepByStep2Title:"2. Hent AI Design System Guide",stepByStep2Text:"Du laster ned en spesiallaget guide som inneholder all informasjon om komponenter, tokens og beste praksis. Dette gir AI-en full kontekst om designsystemet vårt.",stepByStep3Title:"3. Kopier Figma-lenke",stepByStep3Text:"I Figma markerer du den delen av designet du vil implementere og kopierer lenken til den spesifikke komponenten eller rammen.",stepByStep4Title:"4. Gi instruksjoner til AI-en",stepByStep4Text:"Du gir AI-en Figma-lenken sammen med instruksjoner om hva du vil lage. AI-en bruker MCP til å lese designet og genererer kode basert på designsystemet vårt.",stepByStep5Title:"5. Review og juster",stepByStep5Text:"AI-en genererer kode som du kan gjennomgå, teste og justere etter behov. Koden følger automatisk design tokens og komponenter fra designsystemet.",nextStepsTitle:"Neste steg",nextStepsText:"Nå som du forstår grunnleggende om MCP og arbeidsflyten, kan du velge mellom:",nextStepsItem1:"Cursor workflow - for brukere av Cursor IDE",nextStepsItem2:"Claude Code workflow - for brukere av Claude Code",part1Title:"Del 1: Oppsett av Figma MCP Server",part1Intro:"Dette gjøres kun én gang for å aktivere integrasjonen i Cursor/Windsurf.",part1Description:'For at AI-en skal kunne "lese" Figma-filene, må vi sette opp en lokal kobling.',setupStep1Title:"1. Hent Figma Access Token",setupStep1Item1:"Gå til Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Klikk Generate new token.",setupStep1Item3:'Navn: F.eks. "Cursor MCP".',setupStep1Item4:"Scopes: Velg File content: Read og File metadata: Read.",setupStep1Item5:"Kopier tokenet (du får ikke se det igjen).",setupStep2Title:"2. Konfigurer i Cursor",setupStep2Item1:"Åpne innstillinger i Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Gå til Features -> MCP.",setupStep2Item3:"Klikk + Add New MCP Server.",setupStep2Item4:"Fyll inn følgende:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Legg til Environment Variable (viktig!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Lim inn tokenet du kopierte i steg 1]",setupStep2Item11:'Når lyset ved siden av "figma" blir grønt, er verktøyet klart til bruk.',part2Title:"Del 2: Daglig Arbeidsflyt",step0Title:"Steg 0: Indeksering av Dokumentasjon",step0Description:"Gjør dette én gang per prosjekt for å gi AI-en full oversikt over designsystemet.",step0Intro:"For at Cursor skal forstå våre spesifikke tokens, komponentnavn og retningslinjer, må vi la den lese gjennom dokumentasjonen på forhånd.",step0Item1:"Åpne Chat i Cursor (Cmd + L / Ctrl + L).",step0Item2:'Skriv @Docs i tekstfeltet og velg "Add new doc" fra menyen som dukker opp.',step0Item3:"Lim inn URL-en til hovedsiden for dokumentasjonen: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Gi den et navn som er lett å huske, f.eks. RødeKors.",step0Item5:"Trykk Confirm.",step0WhatHappensTitle:"Hva skjer nå?",step0WhatHappensText:'Cursor vil automatisk "crawle" (lese) gjennom hovedsiden og alle undersider. Den lagrer informasjonen i en lokal database. Dette gjør at du senere kan referere til @RødeKors i chatten, og AI-en vil umiddelbart vite alle fargekoder, spacing-variabler og komponent-regler uten at du trenger å lime inn tekst manuelt. NB: Dette gjelder når du refererer til @RødeKors i chatten. Hvis du bruker .cursorrules, trenger du ikke å legge ved @RødeKors manuelt.',step0_5Title:"Steg 0.5: Hent AI Design System Guide",step0_5Description:"Før du begynner å konvertere Figma-design til kode, må du hente AI Design System Guide. Denne guiden inneholder komplett dokumentasjon om alle komponenter, design tokens, og beste praksis som AI-assistenten trenger for å produsere korrekt kode.",step0_5WhyCurlTitle:"Hvorfor bruke curl?",step0_5WhyCurlText:"curl er den anbefalte metoden fordi:",step0_5WhyCurlItem1:"Filen lastes ned lokalt - AI-assistenten har alltid tilgang til den uten internett",step0_5WhyCurlItem2:"Raskere referanse - Ingen behov for å laste ned på nytt ved hver prompt",step0_5WhyCurlItem3:"Fungerer offline - Etter nedlasting kan du jobbe uten internettforbindelse",step0_5WhyCurlItem4:"Konsistent kontekst - AI-en leser samme versjon av guiden hver gang",step0_5WhyCurlItem5:"Enklere referanse - Bare bruk filnavnet (@AI_DESIGN_SYSTEM_GUIDE.md) i stedet for lange URL-er",cursorWorkflowTitle:"Komplett arbeidsflyt: Cursor",cursorWorkflowIntro:"Følg disse stegene for å sette opp og bruke Figma MCP-arbeidsflyten i Cursor.",claudeWorkflowTitle:"Komplett arbeidsflyt: Claude Code",claudeWorkflowIntro:"Følg disse stegene for å sette opp og bruke Figma MCP-arbeidsflyten i Claude Code.",step0_5ClaudeTitle:"For Claude Code:",step0_5ClaudeIntro:"I Claude Code kan du hente guiden direkte i terminalen eller be Claude om å gjøre det:",step0_5ClaudeMethod1Title:"Metode 1: Hent via terminal",step0_5ClaudeMethod1Step1:"Åpne terminalen i Claude Code",step0_5ClaudeMethod1Step2:"Kjør denne kommandoen:",step0_5ClaudeMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod1Step3:"Verifiser at filen er lastet ned: ls -la AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod2Title:"Metode 2: Be Claude om å hente den",step0_5ClaudeMethod2Text:'Du kan også be Claude Code direkte: "Please fetch the AI Design System Guide from https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMethod2Note:"Merk: Dette laster ned filen lokalt, akkurat som curl-kommandoen.",step0_5ClaudeSetupTitle:"Steg 0.6: Be Claude om å lese guiden og sette opp prosjektet",step0_5ClaudeSetupIntro:"Før du begynner å konvertere Figma-design til kode, må du be Claude om å lese gjennom AI Design System Guide og verifisere at prosjektet er satt opp korrekt i henhold til guiden. Dette sikrer at alle nødvendige pakker, CSS-imports og font-oppsett er på plass før konvertering.",step0_5ClaudeSetupStep1:"Be Claude om å lese AI Design System Guide: Gi Claude en prompt som ber den lese filen @componentlibrary/AI_DESIGN_SYSTEM_GUIDE.md (eller den nedlastede filen hvis den er i prosjektroten)",step0_5ClaudeSetupStep2:"Be Claude om å verifisere CSS-imports: Gi Claude en prompt som ber den sjekke at CSS-filene er importert i riktig rekkefølge (base styles først, deretter theme)",step0_5ClaudeSetupStep3:"Be Claude om å verifisere font-oppsett: Gi Claude en prompt som ber den sjekke at Source Sans 3 er konfigurert korrekt (se Font Setup-seksjonen i guiden)",step0_5ClaudeSetupStep4:"Be Claude om å verifisere pakke-installasjon: Gi Claude en prompt som ber den sjekke at alle nødvendige pakker er installert (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)",step0_5ClaudeSetupStep5:"Be Claude om å verifisere prosjektstruktur: Gi Claude en prompt som ber den sjekke at prosjektstrukturen matcher anbefalingene i guiden",step0_5ClaudeSetupPromptTitle:"Ferdig prompt å kopiere:",step0_5ClaudeSetupPrompt:`Les gjennom AI_DESIGN_SYSTEM_GUIDE.md filen og verifiser at prosjektet mitt er satt opp korrekt i henhold til guiden. Sjekk spesifikt:
 
 1. At CSS-filene er importert i riktig rekkefølge (base styles først, deretter theme)
 2. At Source Sans 3 font er konfigurert korrekt (se Font Setup-seksjonen)
@@ -20,7 +20,7 @@ Create a React component for this section.
 
 Strictly use tokens found in the documentation (colors, spacing) - no magic numbers.
 
-Map design elements to our existing components where possible (e.g. Buttons, Headings)."`,step4Title:"Steg 4: Generering og Review",step4Item1:"AI-en bruker nå MCP til å lese nodedataene og genererer et kodeforslag.",step4ReviewTitle:"Review:",step4ReviewItem1:'Sjekk "Diff View" i Cursor.',step4ReviewItem2:"Er tokens brukt riktig? (f.eks. var(--spacing-md)).",step4ReviewItem3:"Er semantikken god?",step4Apply:'Apply: Trykk "Apply" for å legge koden inn i filen din.',proTipsTitle:"Tips for suksess",proTip1:'Lagre Docs som favoritter: I Cursor under "Docs"-fanen kan du indekserere norwegianredcross.github.io/.... Da kan du bruke @RødeKors som en snarvei i chatten hvis du ikke bruker .cursorrules.',proTip2:'Missing Auto Layout? Hvis Figma-noden mangler Auto Layout, kan AI-en slite med posisjonering. Nevn gjerne i prompten: "Infer layout logic based on visual proximity if Auto Layout is missing."'},metadataFiles:{title:"Metadata-filer",intro:"For å holde oversikt over komponentene og deres kobling til Figma, bruker vi metadata-filer.",whatTitle:"Hva inneholder de?",whatText:"Metadata-filene (som `metadata.json`) er ryggraden i dokumentasjonen vår. De definerer nøyaktig hvilke props hver komponent støtter, datatyper, standardverdier og beskrivelser. Dette gjør at vi kan generere dokumentasjon automatisk og sikre konsistens mellom design og kode.",whatItem1:'componentName: Navnet på komponenten (f.eks. "Button").',whatItem2:'importPath: Hvor komponenten importeres fra (f.eks. "rk-designsystem").',whatItem3:"props: En liste over alle tilgjengelige props, inkludert:",whatItem3Sub1:'name: Navnet på proppen (f.eks. "variant", "disabled").',whatItem3Sub2:'type: Datatypen (f.eks. "boolean", "enum", "string").',whatItem3Sub3:"description: Forklaring av hva proppen gjør.",whatItem3Sub4:"defaultValue: Standardverdien hvis proppen ikke settes.",whatItem3Sub5:"required: Om proppen er påkrevd eller valgfri.",howTitle:"Hvordan bruke dem?",howText:"Når du oppretter en ny komponent, bør du også oppdatere metadata-filen slik at automatiske verktøy og dokumentasjonssider (som denne) kan finne og vise riktig informasjon."},componentCreation:{title:"Komponent Kreasjon med MCP og Design Tokens",intro:"Vi bruker Model Context Protocol (MCP) og AI-assistanse for å oversette Figma-design direkte til produksjonsklare React-komponenter. Denne flyten sikrer at nye komponenter følger designsystemet, bruker CSS Modules, og gjenbruker eksisterende kode.",processTitle:"Prosess",processText:'Når du sender en prompt (f.eks. "make a version where you can have 4 cards below [url]"), håndterer Figma MCP følgende steg automatisk i bakgrunnen:',step1Title:"1. Identifisering og Metadata",step1Item1:'Identifiser kilden: MCP leser URL-en og finner Node-ID for komponenten i Figma (f.eks. 1:3539 for "Hero 3").',step1Item2:"Hent dimensjoner: MCP henter automatisk informasjon om nodens størrelse, struktur og posisjonering for å sette rammeverket for layouten.",step2Title:"2. Henting av Design Context og Kodeutkast",step2Item1:"Generer utkast: MCP analyserer Figma-noden og genererer et førsteutkast til React-kode.",step2Item2:"Automatisk gjenkjenning: Verktøyet identifiserer om designet inneholder elementer som allerede finnes i biblioteket vårt.",step2Item3:'Eksempel: Hvis Figma-noden inneholder en knapp, vil MCP foreslå `import Button from "src/components/Button.tsx"` i stedet for å generere ny HTML for knappen.',step2Item4:"Rensing: Systemet filtrerer bort unødvendige wrappers og absolutte stier før koden presenteres.",step3Title:"3. Token-Mapping og Variabel-definisjoner",step3Item1:"Analyser tokens: MCP analyserer automatisk hvilke design-tokens som er brukt i Figma-filen (via `get_variable_defs` logikk i bakgrunnen).",step3Item2:"Mapping til CSS: Den oversetter Figma-verdier til våre definerte CSS-variabler.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mappes til `var(--ds-color-primary-color-red-base-default)` (eller tilsvarende fra theme.css).",step3Item5:"Typografi: Font-definisjoner oversettes automatisk til korrekte typografi-klasser.",step4Title:"4. Automatisk Kobling mot Eksisterende Komponenter",step4Item1:"Verifisering: Figma MCP sjekker designet opp mot metadata.json og repositoryet vårt (via `get_code_connect_map` logikk i bakgrunnen).",step4Item2:"Implementasjon: Dette sikrer at koden som genereres automatisk tar i bruk rk-designsystem sine komponenter der det er mulig.",step4Item3:"Eksempel: Den ser at et element i Figma tilsvarer `src/components/Button.tsx` og genererer koden med korrekt komponent-import.",step5Title:"5. Struktur og Ferdigstilling",step5Text:"Resultat: Basert på analysen over, produserer AI-en de ferdige filene du trenger:",step5Item1:"`index.ts` (Eksport)",step5Item2:"`[KomponentNavn].tsx` (Logikk, prop-definisjoner fra metadata.json)",step5Item3:"`[KomponentNavn].module.css` (Styling basert på tokens)",step5Item4:"`[KomponentNavn].stories.tsx` (Dokumentasjon og varianter)",step5Variant:'Variant-håndtering: Logikk for varianter (f.eks. "stacked" vs "side-by-side") implementeres basert på din prompt og Figma-layouten.',automationTitle:"Automatisering vs. Manuell Kvalitetssikring",automationText1:"Selv om MCP-verktøyene automatiserer mye av kodingen ved å hente strukturer og tokens direkte fra Figma, er det ikke en 100% sømløs overføring. Den genererte koden fungerer som et solid fundament, men en utvikler må alltid se over, kvalitetssikre og tilpasse logikken.",automationText2:"Verktøyene fjerner det repetitive manuelle arbeidet med oppsett og styling, slik at utvikleren kan fokusere på funksjonalitet, tilgjengelighet og edge-cases. Det er en effektiviseringsprosess, ikke en erstatning for utviklerkompetanse.",benefitsTitle:"Fordeler med denne flyten",benefit1:'Presisjon: Automatisk uthenting av variabler forhindrer "magiske tall" og hardkodede hex-koder.',benefit2:"Gjenbruk: Automatisk sjekk mot eksisterende komponenter hindrer duplisering av kode.",benefit3:"Effektivitet: Du trenger kun å gi en URL og en intensjon; MCP håndterer de tekniske oppslagene.",benefit4:"Vedlikehold: Koblingen mot `theme.css` og `metadata.json` gjør at komponentene tåler oppdateringer i designsystemet."}},design:{sidebar:{forDesigners:"For Designere",getStarted:"Kom i gang",colors:"Farger",contribute:"Bidra med design",designElements:"Designelementer",designTokens:"Design Tokens",shadows:"Skygger",sizes:"Størrelse og avstander",typography:"Typografi",figmaConnect:"Figma tilkobling",startup:"Oppstart",newComponent:"Lage ett nytt komponent",examples:"Praktiske eksempler",tokenStudio:"Token Studio",colorSystem:"Sette opp ditt eget fargesystem",themeBuilder:"Designsystemets temagenerator",useColors:"Bruk fargene du har generert",proposeDesign:"Foreslå nytt design eller forbedringer",whatAreTokens:"Hva er design tokens",tokensInFigma:"Design tokens i Figma",colorStructure:"Navnestruktur",colorOverview:"Oversikt og forklaringer av farger",colorTokens:"Farge-tokens",shadowUsage:"Bruk av skygger i designet",shadowTokens:"Skygge-tokens",componentSizes:"Komponentstørrelser",sizeTokens:"Størrelse-tokens",fontFamily:"Font-family",typoTokens:"Typografi-tokens"},intro:{title:"Design i Røde Kors",welcome:"Velkommen til designdokumentasjonen.",getStarted:"Kom i gang",goToGuide:"Gå til guide",colors:"Farger",seeColors:"Se farger"},tokens:{whatIsTitle:"Hva er design tokens",whatIsText1:'"Design Tokens" styrer hvordan komponentene skal se ut i forhold til farger, typografi, størrelser, avstander, former osv. Design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene.',whatIsText2:"Noen av variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger. Vi jobber med en tema-bygger som skal gjøre det enklere for deg å tilpasse stilene.",whatIsText3:"Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.",figmaTitle:"Design tokens i Figma",figmaText1:'Vi bruker Figma-pluginen "Tokens Studio", da denne lar oss administrere flere stiler og egenskaper enn Figma i seg selv kan.',figmaText2:"Pluginen har som mål å være W3C-kompatibel og retter seg etter standarden som etableres av W3C Design Tokens Community Group. Tokens-verdiene er dermed ikke låst til et verktøy - JSON-filen kan flyttes til andre verktøy dersom det skulle bli aktuelt.",themesTitle:"Flere sett og themes",themesText:"Bruk av variabler og tokens gjør det mulig å ha ett designsystem med ulike identiteter. Vi kan lage en komponent i Figma kun èn gang og style den mange ganger - Med et klikk kan vi slå på et annet theme som for eksempel aktiverer en annen fargepalett eller et annet sett med størrelser. Ved å dele tokens inn i både sets og themes, kan vi tilby avanserte former for gjenbruk.",themesCaption:'Videoen over viser at når settet for "Tilsynet" slås på, overstyres både fargene som er i bruk i filen og stilene som er tilgjengelig i høyremargen byttes ut.'},colorStructure:{title:"Navnestruktur",intro:"Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).",structureTitle:"Navnestruktur",structureText1:"Fargene i Designsystemet er strukturert med en semantisk betydning. Dette betyr at de er definert etter funksjon og bruk, ikke bare etter hvordan de ser ut. Det gjør det lettere å velge riktig farge fordi du slipper å vurdere selve fargetonen og kan fokusere på hva fargen skal formidle i stedet.",structureText2:"Fargenavnene i Designsystemet er delt opp i 3 ledd: Navn på fargeskala, gruppe (bruksområde) og variant. Disse leddene beskriver hvordan fargene er bygget opp og hvordan de skal brukes.",structureCaption:"Viser oppdelingen av fargenavn i 3 ledd",nameLabel:"Navn:",nameText:"Det første leddet og navnet på fargeskalaen. Som standard kommer Designsystemet med fargeskalaene Success, Danger, Warning, Info og Neutral. Flere skalaer kan legges til ved hjelp av Temabyggeren.",groupLabel:"Gruppe:",groupText:"Hver fargeskala er delt inn i gruppene Background, Surface, Border, Text og Base. Disse gruppene beskriver bruksområdene til fargene. Text-gruppen skal for eksempel brukes på tekst og ikoner.",groupsCaption:"Viser en fargeskala og de 5 gruppene som fargene er delt inn i.",variantLabel:"Variant:",variantText:"Inne i hver gruppe finnes det varianter som beskriver hvordan fargene ser ut eller skal brukes. Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr at fargen er tenkt brukt for en interaktiv tilstand."},colorOverview:{title:"Oversikt og forklaring av farger",intro:"Hver fargeskala består av totalt 16 farger, utformet for å dekke ulike behov i designet. Nedenfor finner du en oversikt over de forskjellige fargene og deres tiltenkte bruksområder.",semanticCaption:"Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer: Danger, Neutral og to blåskalaer",tableName:"Navn",tableUsage:"Bruksområde",backgroundDefault:"Standard bakgrunnsfarge",backgroundTinted:"Bakgrunn med et hint av farge i seg",surfaceDefault:"Standardfarge for overflater / komponenter",surfaceTinted:"Overflater / komponenter med et hint av farge i seg",surfaceHover:"Hover-farge til overflater / komponenter",surfaceActive:"Active-farge til overflater / komponenter",borderSubtle:"Border-farge med lav kontrast til dekorativ bruk (skillelinjer)",borderDefault:"Standard border-farge til skjemakomponenter og meningsbærende elementer",borderStrong:"Border-farge med høy kontrast for ekstra synlighet",textSubtle:"Tekst- og ikonfarge med lavere kontrast",textDefault:"Tekst- og ikonfarge med høy kontrast og god synlighet",baseDefault:"Standardfarge for solide bakgrunner",baseHover:"Hover-farge for solide bakgrunner",baseActive:"Active-farge for solide bakgrunner",baseContrastSubtle:"Farge med god kontrast mot Base-default",baseContrastDefault:"Farge med god kontrast mot Base-default og Base-hover",backgroundTitle:"Background",backgroundText:"Background-fargene brukes for å fargelegge store flater og er ofte det bakerste laget på en nettside. Det er vanlig å bruke disse fargene på body-elementet.",backgroundDefaultDesc:"Background-default er den lyseste og mest nøytrale bakgrunnsfargen",backgroundTintedDesc:"Background-tinted får et hint av farge i seg og kan brukes for å skape variasjon i bakgrunnslaget",surfaceTitle:"Surface",surfaceText:"Surface-fargene brukes til å fargelegge elementer som ligger over background-fargene, som for eksempel paneler eller kort (cards). Disse fargene fungerer som forgrunnsfarger og bidrar til å skape dybde i designet ved å skille elementer fra bakgrunnen. I mørk modus blir disse fire fargene gradvis lysere, med Surface-active som den lyseste.",surfaceDefaultDesc:"Surface-default er helt hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.",surfaceTintedDesc:"Surface-tinted får et hint av farge i seg og kan brukes for å skille elementer fra bakgrunnen.",surfaceHoverDesc:"Surface-hover kan brukes til hover-tilstander for elementer eller til å skape visuelle hierarkier i Surface-laget når den kombineres med Surface-tinted og Surface-active.",surfaceActiveDesc:"Surface-active kan brukes til active-tilstander for elementer eller til å forsterke hierarkiet i Surface-laget sammen med Surface-tinted og Surface-hover.",surfaceTintedCaption:"Viser hvordan Surface-tinted ser ut for 7 fargeskalaer generert med Temabyggeren.",borderTitle:"Border",borderText:"Border-fargene brukes for å fargelegge rammer (strokes) til elementer.",borderSubtleDesc:"Border-subtle har lav kontrast mot background- og surface-fargene og bør kun brukes til dekorative formål. Vanlige bruksområder er skillelinjer og dekorative rammer. Fargen bør ikke være den eneste visuelle indikatoren på at et element er interaktivt.",borderDefaultDesc:"Border-default brukes på skjemakomponenter eller på andre meningsbærende rammer. Fargen har god kontrast (over 3:1) mot alle background-fargene, Surface-default og Surface-tinted.",borderStrongDesc:"Border-strong har god kontrast (over 3:1) mot alle background- og surface-fargene og kan brukes på rammer for å gjøre elementer ekstra synlige.",bordersCaption:"Første rad viser farger med Border-subtle, mens den andre raden viser Border-default.",textTitle:"Text",textText:"Text-fargene brukes på tekst og ikoner.",textSubtleDesc:"Text-subtle er en lys tekstfarge som kan brukes for å skape variasjon i typografien eller for å indikere hierarkiske nivåer av viktighet. Den forsøker også å bevare mest mulig av fargemetningen fra den opprinnelige fargen valgt i Temabyggeren. Fargen har god kontrast (4.5:1) mot alle background-fargene, Surface-default og Surface-tinted.",textDefaultDesc:"Text-default er en tekstfarge med høy kontrast, optimal for lesbarhet. Den bør brukes på hovedinnholdet og den primære teksten på en side. Denne fargen i Neutral varianten kan være en fin farge å bruke på mesteparten av teksten. Fargen har god kontrast (4.5:1) mot alle background- og surface-fargene.",textColorsCaption:"Viser hvordan Text-default og Text-subtle ser ut for 8 forskjellige fargeskalaer generert med Temabyggeren.",baseTitle:"Base",baseText1:"Base-fargene brukes for å fargelegge solide bakgrunner, som for eksempel knapper og andre interaktive elementer. Fargene bidrar til å lede oppmerksomheten mot viktige designelementer og etablere et visuelt hierarki i forhold til mindre fremtredende elementer. Samtidig skaper de kontrast mot background- og surface-fargene, noe som forsterker lesbarhet og visuell tydelighet.",baseText2:"Base-hover og Base-active fargene genereres ut fra lysheten eller mørkheten til Base-default fargen fra samme fargeskala for å skape jevne visuelle overganger mellom tilstandene. Kontrastfargene blir enten hvite eller svarte avhengig av lysstyrken til Base-default fargen for å sikre god kontrast og lesbarhet.",baseDefaultDesc:"Base-default kan brukes for å fargelegge solide bakgrunner til elementer. Fargen (hex-koden) som blir valgt i temabyggeren blir plassert under Base-default.",baseHoverDesc:"Base-hover kan brukes til hover-tilstander for solide elementer eller til å skape visuelle hierarkier i Base-laget når den kombineres med Base-default og Base-active.",baseActiveDesc:"Base-active kan brukes til active-tilstander for solide elementer eller til å forsterke hierarkiet i Base-laget sammen med Base-default og Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle har god kontrast (4.5:1) mot Base-default fargen fra samme fargeskala og kan trygt brukes som tekst-farge mot denne.",baseContrastDefaultDesc:"Base-contrast-default har god kontrast (4.5:1) mot Base-default og Base-hover fargene fra samme fargeskala, og kan trygt brukes som en tekst-farge mot disse.",baseColorsCaption:"Viser bokser med Base-default som bakgrunn og Base-contrast-default som tekstfarge."},colorTokens:{title:"Farge-tokens",intro:"Fargene under er eksempler fra et tilfeldig tema. Bruk temabyggeren for å generere dine egne farger og navn.",lightCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no",darkCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no, mørkt modus"},shadowUsage:{title:"Bruk av skygger i designet",intro1:"Skygger bør brukes bevisst og konsistent da de uttrykker at noe ligger over noe annet i løsningen.",intro2:"Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og konturer gjør det enklere og raskere å finne en komponent når du skanner sider. (Research: Material Design)",strengthsTitle:"Styrker",strengthsText:"Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem."},shadowTokens:{title:"Skygge-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge.",exampleCaption:"Popover komponentet dekker over the andre innholdet."},componentSizes:{title:"Komponentstørrelser",intro:"De fleste komponentene i designsystemet finnes i tre anbefalte størrelser: Small, Medium og Large (sm, md, lg). Disse er utviklet for å tilpasse seg ulike behov på tvers av skjermstørrelser og bruksområder.",sizesCaption:"Størrelser for komponenter i Designsystemet.",smallTitle:"Small",smallText:"Small er ideell for kompakte grensesnitt der plassutnyttelse er viktig, som på mobile enheter, ekspertverktøy eller administrasjonsgrensesnitt. Det er anbefalt å bruke denne størrelsen på nettsider med en basefont på 16px.",mediumTitle:"Medium",mediumText:"Medium fungerer som standard for de fleste vanlige bruksområder, og er anbefalt å bruke sammen med en basefont på 18px. Størrelsen gir en god balanse mellom lesbarhet og plassutnyttelse og egner seg spesielt godt for desktop-grensesnitt og større visningsflater.",largeTitle:"Large",largeText:"Large gir økt lesbarhet og tydelighet. Den kan brukes i desktop-grensesnitt eller når synlighet og tilgjengelighet er viktig. Den kan også brukes i en avgrenset kontekst på siden, for å fremheve sentrale elementer. Det er anbefalt å bruke størrelsen sammen med en basefont på 21px.",mediumSizeCaption:"Mange av medium-komponentene har en fast høyde på 48px.",harmonyText:"Komponenter innenfor en bestemt størrelse er designet for å fungere sammen. For eksempel har mange medium-komponenter en høyde på 48px og en basefont på 18px, noe som sikrer en harmonisk visuell balanse når de plasseres ved siden av hverandre.",combinedCaption:"Eksempel der Medium og Large komponenter er brukt sammen.",consistencyText:"For å opprettholde et helhetlig og oversiktlig design anbefales det å bruke faste størrelser innenfor en gitt nettside eller kontekst. Mange ulike kombinasjoner av størrelser kan føre til et rotete og uoversiktlig design.",combinationText:"I enkelte tilfeller kan komponenter i ulike størrelser kombineres for å skape bedre visuelle hierarkier og brukervennlighet. I eksempelet ovenfor er søkefeltseksjonen større og mer fremtredende enn komponentene i headeren, fordi søkefunksjonen er en sentral del av siden. Den økte størrelsen gjør den mer synlig og lett tilgjengelig for brukeren."},sizeTokens:{title:"Størrelse-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge."},fontFamily:{title:"Font-family",intro:"For å presentere tekst på korrekt måte er det laget stiler som har ulike kombinasjoner av størrelse, fontvekt og linjehøyde. Det er også laget et sett med typografi-komponenter som innkapsler disse stilene, slik at de enkelt kan brukes i ulike sammenhenger. Beskrivelse av hvordan typografi-komponenter brukes finner du i komponentartikkelen Typography."},typoTokens:{title:"Typografi-tokens",comingSoon:"Innhold kommer snart."},figmaConnect:{title:"Kom i gang med designsystemet (Figma)",intro:"Denne veiledningen hjelper deg med å komme i gang med å designe ved hjelp av det delte designsystemet i Figma. Du får en innføring i hvordan du bruker komponenter, tokens og stiler fra det sentrale biblioteket.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du starter trenger du:",figmaAccount:"Figma - En aktiv Figma-konto (gratis eller betalt)",access:"Access - Tilgang til Røde Kors sitt Figma-bibliotek (kontakt teamansvarlig hvis du mangler tilgang)",createFile:"Opprett eller åpne en arbeidsfil",createFileText:"Opprett en ny Figma-fil, eller åpne en eksisterende prosjektfil hvor du skal ta i bruk designsystemet.",activateLibraries:"Aktiver designsystemets biblioteker",goToAssets:"Gå til Assets-panelet i Figma",openLibrary:"Klikk på bok-ikonet (📚) øverst til høyre for å åpne Team Library",enableLibraries:"Slå på følgende biblioteker:",libraryComponent:"Designsystem – komponenter",libraryIcons:"Aksel ikonbibliotek",libraryActivationCaption:"Viser aktivering av biblioteker i Figma",insertComponents:"Sett inn komponenter fra biblioteket",goToAssetsPanel:"Gå til Assets-panelet",useSearch:"Bruk søkefeltet for å finne komponenter raskt, f.eks.:",dragComponent:"Dra komponenten inn i artboardet",customizeComponent:"🔄 Tilpass komponentene ved å bruke props og varianter i høyrepanelet. Dette gir fleksibilitet uten å bryte koblingen til hovedkomponenten.",tips:"Tips og god praksis",tipsText:`Unngå å "detache" komponenter. For å sikre gjenbruk og fremtidige oppdateringer, skal du ikke detach'e komponenter. Bruk heller varianter og egenskaper (props) for å tilpasse utseende og funksjon.`},startup:{title:"Oppstart: Oppsett av arbeidsområde",step1Title:"Trinn 1: Start med en ny frame",step1Text1:"Opprett en ny frame i Figma med ønsket størrelse.",step1Text2:"I dette tilfellet bruker vi 1728px i bredde.",step2Title:"Trinn 2: Legg til autolayout",step2Text:"Legg til autolayout på framen.",step3Title:"Trinn 3: Legg til tokens på framen",step3Text:"Legg til følgende tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Trinn 4: Legg til heading og footer",step4Text:"Legg til header og footer fra komponenter biblioteket. Sørg for at Auto Layout retning er satt til vertikal.",step5Title:"Trinn 5: Lage en seksjon",step5Text:'Lag en ny frame som du kaller "section".',step6Title:"Trinn 6: Legge til autolayout",step6Text:"Legg til autolayout på den nye seksjonen.",step7Title:"Trinn 7: Legge til seksjon i hovedframe",step7Text:'Legg til seksjonen i hovedframen og sørg for at seksjonen er satt til "fill container".',step8Title:"Trinn 8: Legge til tokens (side-marginer og bakgrunnsfarge)",step8Text:"Velg seksjonen og legg til følgende tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"Dette sørger for at siden din er koblet mot tokensene i koden og gjør det lettere for utviklere å utvikle det du designer da disse er lenket via GitHub.",step9Title:"Trinn 9: Test seksjonen",step9Text:"Legg til ett komponent fra biblioteket. I vårt tilfelle bruker vi card komponenten.",step10Title:"Trinn 10: Lag en nested layout",step10Text:"Legg til flere kort og sett de sammen ved hjelp av en auto layout. For å gjøre dette enkelt velg alle kortene og trykk shift + a.",step11Title:"Trinn 11: Set opp nested layout",step11Text1:"Velg alle kortene i seksjonen og sørg for at disse er satt til fill container.",step11Text2:"Dette gjør vi for at kortene skal ta like mye plass og holde seg innen for rammene til den nestede layouten.",step12Title:"Trinn 12: Legg til spacing tokens",step12Text:"Gå ett hakk ut og velg containeren til kortene. Sørg for at spacing er satt til size/6.",step13Title:"Trinn 13: Legg til spacing i seksjon",step13Text:"Legg til spacing mellom kort containeren og headingen ved å velge seksjonen og tilføye en spacing på size/6.",step14Title:"Trinn 14: gjenbruk",step14Text:"Dupliser seksjonen og gjør deg kjent med hvordan auto-layout og tokensene fungerer. Under ser du hvordan jeg enkelt laget en tabell ved å erstatte kortene med en tablecolumn komponent og satte spacing til size/0."},newComponent:{title:"Lage nye komponenter",intro:"Denne siden forklarer hvordan man bygger nye komponenter i designsystemet. Målet er å sikre at komponentene er konsistente, skalerbare, tilgjengelige og enkle å bruke både i design og utvikling.",tokensTitle:"Tokens som grunnlag",tokensText:"Alle komponenter skal bygges med tokens. Tokens er de grunnleggende verdiene i systemet og gjør det mulig å oppdatere eller tilpasse design uten å endre hver enkelt komponent.",tokensAutolayout:"Autolayout: Bruk alltid Autolayout i Figma. Det gir produksjonsklare filer og speiler hvordan kode er strukturert.",tokensSize:"Størrelsestokens: Bruk tokens for spacing, padding og dimensjoner. Unngå manuelle verdier.",tokensSemantic:"Semantiske tokens: Benytt semantiske tokens for farger, typografi og spacing. Dette sikrer støtte for lys og mørk modus, ulike størrelser og temaer – og gjør komponentene direkte koblet til kode.",atomicTitle:"Bygging med atomisk design",atomicText:"Komponenter settes sammen hierarkisk etter atomisk design:",atomicAtoms:"Atomer: de minste byggeklossene (f.eks. knapp, ikon, inputfelt).",atomicMolecules:"Molekyler: sammensatte atomer (f.eks. søkefelt = input + knapp).",atomicOrganisms:"Organismer: større helheter laget av molekyler (f.eks. skjema eller navigasjon).",atomicPrinciple:"Dette prinsippet gjør komponentene modulære og gjenbrukbare.",calendarTitle:"Eksempel Kalender Modul",calendarStep1Title:"Trinn 1: Begynn på atomisk nivå",calendarStep1Text:"Se for deg atomene som trengs når du lager en kalender. Eksempelvis kan det være:",calendarStep1TextLabel:"Tekst:",calendarStep1TextItems:'Måned/år (f.eks. "August 2025"), Ukedagsnavn (man, tir, ons …), Dato-nummer (1, 2, 3 …)',calendarStep1IconLabel:"Ikoner:",calendarStep1IconItems:"Piltaster for navigasjon (forrige/neste måned), Eventuelt ikon for «dagens dato» eller «reset»",calendarStep1ButtonLabel:"Knapper:",calendarStep1ButtonItems:"Navigasjonsknapper (forrige/neste måned), Dato-knapp (hver dato er en interaktiv knapp)",calendarStep1Note:"Vi vet at vi allerede har icon-button så den kan vi enkelt hente ut fra komponent bibiloteket.",calendarStep2Title:"Trinn 2: Start med å bygge ut atomene dine",calendarStep2Text1:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dato-nummer i en mnd. Her kan vi bruke samme atom for ukedagsnavn og dato-nummer.",calendarStep2Text2:'Vi lager to elementer som vi kaller "cell" og legger til autolayout og appellerer token verdiene.',calendarStep3Title:"Trinn 3: Lag variantene du trenger",calendarStep3Text:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dagene i en mnd.",calendarStep4Title:"Trinn 4: Sett sammen molekylet",calendarStep5Title:"Trinn 5: Bygg ut organismen",calendarStep5Text:"Her legger vi sammen molekylene til en tabell.",calendarStep6Title:"Trinn 6: Legg til riktig states",calendarStep7Title:"Trinn 7: Gjør ferdig organismen med eksisterende elementer",calendarStep8Title:"Trinn 8: Bygg ut med flere varianter hvis det gir mening",variantsTitle:"Varianter og tilstander",variantsText:"Alle komponenter skal ha definerte varianter og interaksjonstilstander:",variantsFigma:"Bruk Figma Variants i stedet for duplisering.",variantsStates:"Minimumstilstander: default, hover, pressed, disabled, focus. Litt ut fra kontekst.",variantsNew:"Opprett en ny variant når det gjelder en tilpasning av samme komponent, og en ny komponent kun når funksjonen er unik.",accessibilityTitle:"Tilgjengelighet",accessibilityText:"Tilgjengelighet skal alltid ivaretas:",accessibilityWCAG:"Følg WCAG-kontrastkrav (minimum 4.5:1 for tekst).",accessibilityTouch:"Interaktive flater skal ha minst 44 × 44 px treffflate.",accessibilityFocus:"Fokustilstand skal alltid være synlig, også uten hover.",responsiveTitle:"Responsivitet",responsiveText:"Komponenter skal fungere på tvers av skjermstørrelser og layouts:",responsiveTokens:"Bruk størrelsestokens for spacing og dimensjoner.",responsiveSizes:"Støtt små, mellomstore og store layoutvarianter.",responsiveBreak:"Sørg for at komponenter brytes eller stackes logisk i mindre formater.",reuseTitle:"Gjenbruk i kontekst",reuseText:"En komponent skal alltid kunne brukes i ulike sammenhenger. Vis derfor eksempler i dokumentasjonen, som:",reuseExample1:"knapp i et skjema",reuseExample2:"kort i et grid",reuseExample3:"inputfelt i en dialogboks"},examples:{title:"Praktiske eksempler",example1Title:"Eksempel 1: Påmeldingsskjema",example1Step1Title:"Trinn 1: Start med en ny frame",example1Step1Text:"Opprett en ny frame i Figma med ønsket størrelse. Bruk design tokens for å sette framefargen hvis nødvendig (f.eks. background-default).",example1Step2Title:"Trinn 2: Legg til overskrift",example1Step2Text:'Bruk komponenten Heading for å legge til en overskrift, som "Meld deg på vårt arrangement". Juster størrelsen med size-modusen, om nødvendig.',example1Step3Title:"Trinn 3: Legg til tekstfelt for navn og e-post",example1Step3Text:'Sett inn to Text Input-komponenter. Den første for "Fullt navn" og den andre for "E-postadresse". Sørg for å bruke placeholder-modusen for instruksjoner i tekstfeltene.',example1Step4Title:"Trinn 4: Legg til en dropdown for valg av arrangement",example1Step4Text:"Bruk komponenten Multisuggestion for å la brukeren velge mellom forskjellige arrangementer. Legg til nødvendige alternativer i dropdown-menyen.",example1Step5Title:"Trinn 5: Legg til en send-knapp",example1Step5Text:"Sett inn en Button-komponent og tilpass fargen ved å bruke color-modusen hvis knappen skal skille seg ut. Legg til ikon hvis ønskelig.",example1NoteTitle:"Obs!",example1NoteText:"Bruk color og sizetokens i framems rundt komponentene for å sikre at alle moduser fungerer som de skal.",example2Title:"Eksempel 2: Artikkelside",example2Step1Title:"Trinn 1: Opprett en ny frame",example2Step1Text:"Start med å lage en ny vertikal frame i Figma med ønsket bredde (f.eks. 8- eller 12-kolonne grid). Sett bakgrunnsfarge ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example2Step2Title:"Trinn 2: Legg til en hovedoverskrift",example2Step2Text:"Bruk Heading-komponenten for å legge til tittelen på artikkelen. Juster størrelsen med size-modus (f.eks. heading-xleller heading-lg).",example2Step3Title:"Trinn 3: Legg til ingress",example2Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort ingress som oppsummerer artikkelen. Plasser denne rett under overskriften, med tilstrekkelig spacing.",example2Step4Title:"Trinn 4: Sett inn hovedinnhold med tekstblokker",example2Step4Text:"Bruk Text-komponenter i body-default eller body-large for å bygge ut brødteksten. Del opp teksten i tydelige avsnitt og legg inn mellomtitler med Heading-komponenten i mindre størrelse (heading-md eller heading-sm).",example2Step5Title:"Trinn 5: Legg til et bilde i artikkelen",example2Step5Text1:"Bruk Image-komponenten for å plassere et illustrasjons- eller artikkelbilde midtstilt i teksten. Bruk size-modusen hvis du trenger å endre størrelse (f.eks. medium eller full-width).",example2Step5Text2:"Foreløpig har vi ingen Image -komponent så vi bruker derfor en frame i steden",example2Step6Title:"Trinn 6: Legg til lenker i teksten",example2Step6Text:"Bruk Link-komponenten der det er behov for hyperkoblinger til relaterte artikler, dokumenter eller eksterne kilder.",example2Step7Title:"Trinn 7: Avslutt med relaterte artikler eller deling",example2Step7Text:'Bruk Card-komponenter i et grid-layout for å vise relaterte artikler. Hver kort bør inneholde bilde, tittel og en "Les mer"-lenke. Alternativt kan du legge til Share-komponenter for sosiale medier nederst.',example3Title:"Eksempel 3: Planleggings verktøy",example3Step1Title:"Trinn 1: Opprett en frame",example3Step1Text:"Start med å lage en ny vertikal frame i Figma, med den ønskede bredden som passer til layouten for aktivitetskalenderen din (f.eks. 12-kolonne grid). Sett bakgrunnsfargen ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example3Step2Title:"Trinn 2: Legg til en hovedoverskrift",example3Step2Text:'Bruk Heading-komponenten for å legge til tittelen "Aktivitetskalender". Juster størrelsen med size-modus som passer (f.eks. heading-xl eller heading-lg).',example3Step3Title:"Trinn 3: Legg til en kort beskrivelse",example3Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort beskrivelse som forklarer formålet med kalenderen. Plasser denne rett under hovedoverskriften, med tilstrekkelig spacing for å sikre lesbarhet.",example3Step4Title:"Trinn 4: Sett inn kalenderoversikt",example3Step4Text:"Bruk en Table-komponent for å lage en oversikt over månedens aktiviteter. Sørg for at hver rad representerer en dag og inkluderer kolonner for dato, aktivitet, tid og sted. Juster størrelsen på tabellen etter behov.",example3Step5Title:"Trinn 5: Legg til detaljerte aktivitetskort",example3Step5Text:'Bruk Card-komponenter for å vise detaljerte beskrivelser av hver aktivitet. Hvert kort bør inneholde aktivitetens navn, beskrivelse, tid, sted og en "Mer info"-knapp som kan føre til en detaljert side om aktiviteten.',example3Step6Title:"Trinn 6: Sett inn bilder for hver aktivitet",example3Step6Text:"Bruk Image-komponenten innenfor hvert aktivitetskort for å inkludere relevante bilder. Bruk size-modusen for å tilpasse bildene til kortene (f.eks. medium eller full-width).",example3Step7Title:"Trinn 7: Legg til et filter eller søkefunksjon",example3Step7Text:"Bruk Search-komponenten for å legge til en søkefunksjon øverst på siden, slik at brukere enkelt kan finne aktiviteter basert på navn, dato eller kategori.",example3Step8Title:'Trinn 8: Inkluder en "Legg til i kalender" funksjon',example3Step8Text:"Bruk Button-komponenter for å tilby en funksjon der brukere kan legge aktiviteter til sin personlige kalender. Plasser denne knappen i nærheten av aktivitetsdetaljene.",example3Step9Title:"Trinn 9: Legg til lenker og navigasjon",example3Step9Text:"Bruk Link-komponenter for å legge til hyperkoblinger til relaterte aktiviteter eller eksterne ressurser, som for eksempel billetter eller mer informasjon. Sørg for tydelig kontrast og understreking i henhold til designreglene.",example3Step10Title:"Trinn 10: Avslutt med sosiale delingsmuligheter",example3Step10Text:"Bruk Share-komponenter for sosiale medier nederst på siden, slik at brukere kan dele interessante aktiviteter med venner og familie.",example3Step11Title:"Trinn 11: Tilpass for mobilvisning",example3Step11Text:"Sørg for at layouten er responsiv. Bruk layout grid og auto layout for å sikre at tekst, bilder og kort flyter riktig på små skjermer. Test designet på forskjellige skjermstørrelser for å sikre optimal brukeropplevelse."},tokenStudio:{title:"Kom i gang med Token Studio og GitHub-synkronisering",intro:"Denne veiledningen viser hvordan du kobler Token Studio i Figma til et GitHub-repositorium for å holde design tokens synkronisert på tvers av teamet.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du setter opp synkronisering trenger du:",figmaAccount:"Figma - En Figma-konto med Professional-plan eller høyere",tokenStudioAccount:"Token Studio - En Token Studio-konto med Premium-abonnement",generateToken:"Generer en GitHub Fine-grained access token",goToGithub:"Gå til: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Klikk på Generate new token",fillOut:"Fyll ut følgende:",tokenName:"Navn:",tokenNameExample:"F.eks. Red Cross Token",expiration:"Utløpsdato:",expirationText:"sett som ønsket",generateAndCopy:"Klikk Generate token og kopier den trygt (lagres ikke av GitHub etterpå)",configureSync:"Konfigurer GitHub-sync i Token Studio",openPlugin:"Åpne Token Studio-pluginen i Figma",goToSettings:"Gå til: Settings → Sync providers → Add new → GitHub",fillIn:"Fyll inn følgende:",syncName:"Name:",syncNameExample:"f.eks. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"lim inn tokenet fra GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: velg All repositories eller spesifikt repo",repoPermissions:"Repository permissions → Contents: velg Read & Write",setupCaption:"Konfigurer GitHub-sync",performSync:"Utfør første synkronisering",afterSave:"Etter at du har lagret innstillingene, vil pluginen vise en modal:",ifEmpty:"Hvis repoet er tomt → velg Push",ifExists:"Hvis tokens allerede finnes → velg Pull",chooseAction:"Velg handling basert på situasjonen.",syncCaption:"Utfør første synkronisering",workflow:"Løpende arbeidsflyt: Push og Pull",pushText:"Push når du gjør endringer i tokens i Figma → skriv inn commit-melding og gjennomgå endringer før du evt. åpner en Pull Request.",pullText:"Pull for å hente oppdateringer fra GitHub til Figma → du får mulighet til å gjennomgå og godkjenne før endringer tas inn.",tips:"Tips og god praksis",tip1:"Oppbevar tokenen sikkert – ikke lim den inn i offentlige dokumenter.",tip2:"Dokumenter innstillingene dine (navn, branch, sti osv.) for enklere oppsett senere.",tip3:"Synk ofte for å sikre konsistens mellom design og utvikling."},colorSystem:{title:"Sette opp ditt eget fargesystem",intro1:"Med et gjennomtenkt fargesystem kan vi sikre at tekst alltid har god nok kontrast mot våre bakgrunnsfarger og at det finnes nok ulike farger for alle tilstander.",intro2:"En profilveileder inneholder ofte kun et sett med primærfarger og sekundærfarger i et par forskjellige fargetoner. Å lage et digitalt produkt kun med disse fargene alene er vanskelig. For å kunne sikre riktig kontrast og korrekte farger for ulike tilstander, er vi avhengig av å definere flere variasjoner av profilfargene. Bare button komponenten består av 6 ulike blåfarger:",buttonCaption:"Som du ser i eksemplet trenger vi 6 ulike fargevariasjoner bare for Button-komponentet",systemText:'Fargesystemet er strukturert for å støtte multibranding og ulike modes (darkmode, contrastmode, etc.), og samtidig ivareta kontrastkrav. Vi har latt oss inspirere av USWDS sine "magic numbers" for å sikre tilgjengelige fargekombinasjoner fra hvilken som helst fargepalett. Vi har også blitt inspirert av Radix sitt fargesystem med tydelige intensjoner for de ulike fargene. For å sikre at en organisasjon skal kunne bruke sin faktiske brandfarge, har vi valgt å kombinere to tilnærminger til et helt nytt system.'},themeBuilder:{title:"Designsystemets temagenerator",intro:"For å generere en skala som fungerer kan du bruke Designsystemets temagenerator. Det eneste du trenger å gjøre er å lime inn hex-koden til merkevarens accent-farge og øvrige profil-farger.",generatorLink:"https://theme.designsystemet.no/no",caption:"Fargesystemet bruker brand-fargen til å generere flere fargevarianter, slik at vi kan sikre god kontrast mellom tekst og bakgrunnsfarger.",systemText:"Temageneratoren er basert på et fargesystem sørger for at både brand-farger ivaretas og kontrastkrav sikres gjennom de lineære fargene som genereres ut fra brand-fargen. Farger beregnet for tekst vil dermed alltid ha god nok kontrast mot bakgrunnsfarger.",examplesTitle:"Eksempler",example1:"Text-default har alltid god nok kontrast mot alle background og surface farger.",example2:"Text-subtle har alltid god nok kontrast mot alle background-farger og surface-default.",appliesText:"Dette vil gjelde uansett hva du har valgt som base-farge.",baseText:"Base-default-fargen vil alltid være den samme som fargen du har valgt. Dette er for å ivareta brandet ditt best mulig. Du må derfor selv passe på at fargen du velger oppfyller kontrastkravene i forhold til hvor den skal bli brukt. Designsystemets temagenerator vil informere deg om eventuelle kontrastbrudd."},useColors:{title:"Bruk fargene du har generert",intro:"Når du har generert skalaene, kan du bruke de nye fargekodene i Designsystemet, slik at alle komponenter følger din profil."},proposeDesign:{title:"Foreslå nytt design eller forbedringer",intro:"Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma. De beste løsningene kommer gjennom samarbeid.",newComponent:"Ny Komponent",newComponentText1:"Ønsker du å foreslå en ny komponent setter vi pris på om den blir registrert i Github.",newComponentText2:"Når en ny komponent blir foreslått må vi vurdere om den er verdifull nok til å være en del av designsystemet. Vi ønsker ikke å ende opp med hundrevis av komponenter med små forskjeller, da vi kan risikere uønsket kompleksitet, vedlikehold, samt design- og teknologigjeld.",newComponentText3:"For nye komponenter som tas inn må vi:",consider1:"Identifisere og utforske liknende behov hos andre produktteam og virksomheter. Hvor mange produkter/etater vil ha bruk for den?",consider2:"Vurdere problemet komponenten skal løse og verdien dette gir.",consider3:"Tenke på om den kan lages fleksibel og gjenbrukbar nok.",consider4:"Tenke på om den er i tråd med designprinsippene og om den passer inn i helheten",reportTitle:"Registrere feil eller mangler på en komponent i Figma",reportText:"Har du funnet en svakhet med noen av de eksisterende komponentene i Figma, setter vi pris på om du enten legger igjen en kommentar i Figma sammen med den aktuelle komponenten, eller at du oppretter en bug-report i Github som forklarer feilen, eventuelt en feature-request som forklarer ønsket tilleggsfunksjonalitet.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Snarveier",shortcutsLinks:{services:"Tilbudene",volunteer:"Bli frivillig",ourWork:"Vårt arbeid",about:"Om Røde Kors",support:"Støtt arbeidet",contact:"Kontakt oss"},contact:{visitingAddress:"Besøks adresse",organizationNumber:"Organisasjonsnummer",email:"E-post"},copyright:"Rødekors",legal:{privacy:"Personvern",press:"For presse",procurement:"Regler for innkjøp",whistleblowing:"Varsling/Misconduct"}},carousel:{loading:"Laster bilde",previousImage:"Forrige bilde",nextImage:"Neste bilde",imagePosition:"Bildeposisjon",goToImage:"Gå til bilde"},datePicker:{previousMonth:"Forrige måned",nextMonth:"Neste måned"},dateInput:{openDatePicker:"Åpne datovelger"}},EN:{header:{darkMode:"Dark Mode",toggleTheme:"Toggle theme",language:"Language:",search:"Search",searchPlaceholder:"Search content...",closeSearch:"Close search",openSearch:"Open search",clearSearch:"Clear search",close:"Close",menu:"Menu",closeMenu:"Close menu",openMenu:"Open menu",login:"Log in",supportUs:"Support us",suggestions:"Search suggestions",viewAll:"View all results",noResults:"No results found for",selectLanguage:"Select language",homeAriaLabel:"Norwegian Red Cross Home",nav:{design:"Design",components:"Components",code:"Code",tokens:"Tokens",work:"Our Work",volunteer:"Volunteer",courses:"Courses & Training"}},home:{heroTitle:"Red Cross Design System",heroLead:"Common component library and guidelines for design and development of digital solutions in Red Cross.",searchComponents:"Search components",exploreSystem:"Explore the system",componentsDesc:"Library with ready-made React components.",designDesc:"Colors, typography, and principles.",codeDesc:"Documentation, workflow, and MCP.",universalDesign:"Universal Design",universalDesignText:"Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",readGuidelines:"Read guidelines",consistentBrand:"Consistent Brand",consistentBrandText:"Design tokens ensure the Red Cross visual profile is maintained across all surfaces.",seeColors:"See colors",efficientDev:"Efficient Development",efficientDevText:"Save time with ready-made components. Focus on functionality, not CSS.",exploreComponents:"Explore components",quickActionsTitle:"Jump in fast",quickActionCodeTitle:"Start in code",quickActionCodeText:"See setup, tokens, and examples.",quickActionDesignTitle:"Design guide",quickActionDesignText:"Colors, typography, and principles.",quickActionComponentsTitle:"Component library",quickActionComponentsText:"Explore and reuse ready-made components.",openCode:"Open code",openDesign:"Open design",openComponents:"Open components",featureStripTitle:"Useful right now",featureToken:"Updated design tokens",featureFont:"Source Sans 3 included",featureComponent:"New component variants",featureSeeAll:"See all updates",profile:"Profile",name:"Name Namerson",volunteer:"Volunteer",save:"Save",approved:"Approved",rejected:"Rejected",darkModeLabel:"Dark mode",importantMessage:"Important message",updateGuidelines:"Remember to update the guidelines...",all:"All",active:"Active",alerts:"Alerts",status:"Status"},components:{title:"Components",intro:"The design system contains fundamental components that can be combined in many different ways and in different patterns.",searchPlaceholder:"Search for component...",searchAriaLabel:"Search components",noResults:"No components found for"},code:{sidebar:{overview:"Overview",workflow:"Workflow",structure:"Structure",contribute:"Contribute",home:"Home",getStarted:"Get Started",styling:"Styling",designTokens:"Design Tokens",fonts:"Fonts",icons:"Using Icons",figmaMcp:"From Figma to Code (MCP)",introduction:"Introduction",cursor:"Cursor",claudeCode:"Claude Code",componentCreation:"Component Creation",metadataFiles:"Metadata Files",developerGuide:"Developer Guide",aiGuide:"AI Guide for Assistants"},overview:{title:"Red Cross Design System",intro:"Welcome to Red Cross Design System! This repository contains a library of reusable UI components built with React, tailored for Norwegian Red Cross digital projects.",text1:"It is developed by leveraging the base components from Digdir's Design System. This approach ensures a cohesive and recognizable visual identity across all Red Cross applications. The system is pre-configured with the official Red Cross theme, delivered via a dedicated design token package.",text2:"The main goal is to ensure brand consistency, improve development efficiency, and maintain high standards for accessibility across all Red Cross applications.",text3:"Storybook serves as the interactive documentation and development environment to showcase and test these components.",getStartedCard:"Get Started",getStartedDesc:"Installation, setup, and guidelines for developers.",getStartedLink:"Get Started",designTokensCard:"Design Tokens",designTokensDesc:"Learn how to use design tokens and fonts.",designTokensLink:"Read more",workflowCard:"Workflow",workflowDesc:"Learn how to use MCP tools to fetch components directly from Figma.",workflowLink:"Read guide"},getStarted:{title:"Get Started",intro:"To use Red Cross Design System in your Next.js (or other React) application:",installationTitle:"1. Installation",installationText:"Install the necessary npm packages for your project. You need three packages: the component library itself (rk-designsystem), base styles from Digdir, and the Red Cross theme package (rk-design-tokens).",githubLink:"Go to GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Note: You do not need to install @digdir/designsystemet-react separately, as all necessary components are included in the rk-designsystem package.",stylesTitle:"2. Including Styles (CSS)",stylesText1:"For components to be styled correctly, you must import the stylesheets at the top level of your application, for example in layout.tsx (for Next.js App Router) or _app.tsx (for Next.js Pages Router).",stylesText2:"Important order: It is crucial that the base stylesheet (@digdir/designsystemet-css) loads before the Red Cross theme file (rk-design-tokens). This ensures that our theme tokens correctly override the default values.",appRouterExample:"Example for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Example for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Using Components",usageText:"Once the stylesheets are included, you can start importing and using components in your project. All components you need are available directly from the rk-designsystem package.",importTitle:"3.1 Import and use Red Cross Design System components",nextjsExample:"3.2 Example usage in a Next.js page",updateText:"The appearance of all components is fully controlled by the rk-design-tokens package. To receive visual updates to the brand theme (such as a new primary color), simply update the package to the latest version:"},designTokens:{title:"Red Cross Design Tokens",intro:"This repository is the central source for all design tokens (colors, typography, spacing, etc.) for Norwegian Red Cross digital products. It functions as a single source of truth that automatically distributes style changes to all connected projects.",howToTitle:"How to use tokens",howToText:"To use design tokens in your project, you must install and configure the theme package.",installTitle:"1. Installation",importTitle:"2. Import CSS",importText:"In your application's root layout (e.g. layout.tsx), import the base stylesheet before the Red Cross theme file.",fontTitle:"How to add the font",fontText1:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",fontText2:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",fontText3:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",workflowTitle:"Automated Workflow for Design Tokens (End-to-End)",workflowText:"This workflow establishes a fully automated pipeline that connects our design process directly to live production applications. When a designer updates the style in Figma, this system automatically builds, versions, and publishes a new style package to npm. Then our Vercel projects are notified, updating themselves and redeploying with the new styles.",phase1Title:"Phase 1: A Designer Makes a Change (Publisher)",phase1Item1:"Design in Figma: A designer makes a change to a color, font, or other design token.",phase1Item2:"Push to GitHub: Using the Token Studio plugin, the designer pushes the changes. This automatically commits the updated JSON files to the main branch.",phase1Item3:"Trigger Publisher Workflow: This push immediately triggers the GitHub Action defined in .github/workflows/publish.yml.",phase1Item4:"Build & Commit Artifacts: The workflow runs npm run build to generate CSS from JSON files and commits the results.",phase1Item5:"Versioning & Release: The workflow runs npm version patch to increment the version number, create a release commit, and tag it.",phase1Item6:"Publish to npm: Finally, the workflow publishes the new version of the package to the npm registry.",phase2Title:"Phase 2: Notifying Applications (Signal)",phase2Text:"Send a Dispatch signal: After a successful publication, the workflow sends a repository_dispatch signal to consumer projects like rk-designsystem to notify them of the new version.",phase3Title:"Phase 3: Automatic Update and Redeploy (Consumers)",phase3Item1:'Trigger Consumer Workflow: The dispatch signal starts an "Update" workflow in consumer projects.',phase3Item2:"Update Dependencies: The workflow runs npm update rk-design-tokens to fetch the latest version.",phase3Item3:"Commit & Push Update: The workflow commits the updated package-lock.json file.",phase3Item4:"Vercel Auto-Deploys: Vercel's Git integration detects the new commit and automatically starts a new deployment."},fonts:{title:"Fonts",intro:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",howToTitle:"How to add the font",howToText:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",afterLoadTitle:"After loading",afterLoadText:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",nextjsTitle:"Example for Next.js",nextjsText:"For Next.js App Router, add the font in layout.tsx:",nextjsPagesText:"For Next.js Pages Router, add the font in _app.tsx or _document.tsx:",cssVariablesTitle:"CSS Variables",cssVariablesText:"After the font is loaded, the design system automatically uses the CSS variable --ds-font-family defined in the rk-design-tokens package. You don't need to specify the font manually in your components."},icons:{title:"Using Icons",intro:"This library is designed to work seamlessly with the official icon set from NAV/Aksel.",installTitle:"Installation",importTitle:"Import and use",importText:"Icons are exported as named React components. Import only the icons you need (tree‑shakable):",accessibilityTitle:"Accessibility Guide",accessibilityItem1:"Icon + visible text: set aria-hidden on the icon so screen readers don't read it twice.",accessibilityItem2:"Icon-only triggers (e.g. a button): add a descriptive aria-label to the trigger, keep the icon aria-hidden.",accessibilityItem3:"Color: icons inherit currentColor; use the component's variant/color to control it (e.g. button variants, tag colors).",accessibilityItem4:`Size: set fontSize (e.g. fontSize="1.25rem") or inline style (e.g. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Performance",performanceText:"Use named imports from @navikt/aksel-icons to keep package size down – unused icons are removed (tree-shaken) by modern bundlers."},contributing:{title:"Contributing to the Library",intro:"This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures our component library remains consistent, accessible, and easy to maintain.",getStartedTitle:"Get Started (for contributors)",getStartedText:"Follow these steps to run the local development environment. All commands should be run from the root of the project.",principlesTitle:"Core Principles",principlesText:"Each component we build should follow these core principles:",principlesA11y:"Accessibility (A11y): Components must be usable by everyone, including people with disabilities. This means correct ARIA attributes, keyboard navigation, and semantic HTML.",principlesReuse:"Reusability: Components should be generic enough to be used in multiple contexts without modification.",principlesConsistency:"Consistency: Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.",principlesDocs:"Documentation: Each component must be documented in Storybook to make it discoverable and easy to use for other developers.",whenTitle:"When to create a new component",whenText:"Before you start coding, determine what type of component you need. Most of our needs fall into one of three categories:",wrappedSimpleTitle:"Wrapped Component (Simple):",wrappedSimpleWhat:"What it is: A component that directly wraps and re-exports a component from @digdir/designsystemet-react without modifications.",wrappedSimpleWhen:"When to use: When the basic Digdir component perfectly covers our needs, but we want to include it in our own library for a consistent import source.",wrappedSimpleExample:"Example: The Buttons component is a perfect example of this.",wrappedStyledTitle:"Wrapped Component (with style overrides):",wrappedStyledWhat:"What it is: A wrapped Digdir component where we use custom CSS to adjust the appearance to better fit Red Cross's specific design language.",wrappedStyledWhen:"When to use: When a Digdir component is functionally correct but needs visual adjustments (e.g. different icons, border-radius, padding).",wrappedStyledExample:"Example: The Alert component, which uses composes in CSS to inherit base styles and then apply its own overrides.",customTitle:"Custom Component (from scratch):",customWhat:"What it is: A completely new component built when no existing Digdir component covers our requirements.",customWhen:"When to use: For unique UI patterns or functionality not covered by the base library.",customExample:"Example: The DateInput component is a custom component with its own state, logic, and styling.",fileStructureTitle:"File structure for components",fileStructureText:"To maintain consistency, each new component should follow this file structure. Create a new folder under src/components/ with the component's PascalCase name.",codingGuidelinesTitle:"Coding Guidelines",componentLogicTitle:"1. Component Logic (MyNewComponent.tsx)",logicTypeScript:"TypeScript first: All components must be written in TypeScript. Define a Props interface for your component, extending from basic HTML element or Digdir component props if applicable.",logicForwardRef:"Forward Refs: Always use React.forwardRef to allow parent components to get a ref to the underlying DOM element.",logicA11y:"Accessibility is mandatory:",logicA11yItem1:"Use semantic HTML (<button>, <label>, <nav>).",logicA11yItem2:"Ensure all interactive elements can be focused and operated with keyboard.",logicA11yItem3:"Provide aria-label for buttons that only have icons or elements where the text label is not visible.",logicA11yItem4:"Use aria-invalid, aria-describedby, etc., to communicate state to assistive technologies.",logicControlled:"Controlled vs. Uncontrolled: If your component has state (like an input), it should support both controlled (value + onChange) and uncontrolled (defaultValue) patterns.",logicProps:"Props naming: Use data-* attributes for styling variants (e.g. data-size, data-color) to align with patterns in our existing components.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For custom components, all styles must be placed in a styles.module.css file. This scopes class names locally and prevents global style conflicts.",stylingTokens:"Design tokens: Always use our design tokens (var(--ds-...)) for colors, spacing, fonts, etc. Do not use hardcoded values (e.g. #FFF, 16px).",stylingOverride:"Overriding Wrapped Components: For wrapped components, use a standard CSS file. Use @layer and composes keywords to extend basic Digdir styles without unnecessarily increasing CSS specificity.",documentationTitle:"3. Documentation (MyNewComponent.stories.tsx)",docsStorybook:"Your Storybook file is the official documentation. It must be clear and comprehensive.",docsMeta:"meta Object: Define the component's title, component reference, and tags: ['autodocs'] to enable automatic documentation.",docsArgTypes:"argTypes: Document each prop. Provide a description, control type (e.g. select, boolean, text), and options if applicable. This drives the interactive controls in Storybook.",docsStories:"Create multiple Stories: Create a separate story for each key state and variant of your component (e.g. Default, Disabled, WithError, WithIcon).",processTitle:"Contribution Process",processPRTitle:"Create a Pull Request (PR):",processBranch:"Create a Branch: Pull the latest changes from the main branch and create a new feature branch: git checkout -b feat/my-new-component.",processDraft:"Open a Draft PR: As soon as you start, open a draft pull request on GitHub. This prevents duplicate work and lets others see what you're working on.",processCommit:"Commit your changes: While working, make small, logical commits.",processReview:'Ready for review: When development is complete and all automated checks pass, mark the PR as "Ready for review" and request a review from the design system maintainers.'},figmaMcp:{title:"Workflow: From Figma to Code with MCP",introTitle:"Introduction to MCP and Workflow",intro:"This guide describes how we use Model Context Protocol (MCP) to connect Figma directly to the development environment. This makes it possible to fetch design specifications, tokens, and structures automatically, validated against our design system.",whatIsMcpTitle:"What is MCP?",whatIsMcpText1:"Model Context Protocol (MCP) is an open standard that allows AI assistants to communicate directly with external data sources and tools. In our context, we use MCP to connect Figma design files directly to our development environment.",whatIsMcpText2:"This means that when you give the AI a Figma link, it can automatically:",whatIsMcpItem1:"Read design specifications directly from Figma",whatIsMcpItem2:"Fetch exact colors, spacing, typography, and other design tokens",whatIsMcpItem3:"Understand component structure and hierarchy",whatIsMcpItem4:"Generate code that matches the design accurately",whyUseMcpTitle:"Why use MCP?",whyUseMcpText1:"Traditionally, developers have had to manually convert designs to code, which can be time-consuming and error-prone. With MCP, we get:",whyUseMcpItem1Title:"Accuracy:",whyUseMcpItem1Text:"The AI reads the design directly from the source, so no information is lost in translation.",whyUseMcpItem2Title:"Speed:",whyUseMcpItem2Text:"Automatic conversion from design to code saves hours of manual work.",whyUseMcpItem3Title:"Consistency:",whyUseMcpItem3Text:"All design tokens and components are used consistently, validated against our design system.",whyUseMcpItem4Title:"Efficiency:",whyUseMcpItem4Text:"Less time on repetitive work, more time solving actual problems.",howItWorksTitle:"How does it work?",howItWorksIntro:"The process is simple and follows these steps:",stepByStepTitle:"Step-by-step overview",stepByStep1Title:"1. Setup (one time only)",stepByStep1Text:"You set up a local MCP server that connects Figma to your AI assistant. This requires a Figma Access Token and some configuration.",stepByStep2Title:"2. Fetch AI Design System Guide",stepByStep2Text:"You download a specially crafted guide containing all information about components, tokens, and best practices. This gives the AI full context about our design system.",stepByStep3Title:"3. Copy Figma link",stepByStep3Text:"In Figma, you mark the part of the design you want to implement and copy the link to that specific component or frame.",stepByStep4Title:"4. Give instructions to the AI",stepByStep4Text:"You give the AI the Figma link along with instructions about what you want to create. The AI uses MCP to read the design and generates code based on our design system.",stepByStep5Title:"5. Review and adjust",stepByStep5Text:"The AI generates code that you can review, test, and adjust as needed. The code automatically follows design tokens and components from our design system.",nextStepsTitle:"Next steps",nextStepsText:"Now that you understand the basics of MCP and the workflow, you can choose between:",nextStepsItem1:"Cursor workflow - for Cursor IDE users",nextStepsItem2:"Claude Code workflow - for Claude Code users",cursorWorkflowTitle:"Complete Workflow: Cursor",cursorWorkflowIntro:"Follow these steps to set up and use the Figma MCP workflow in Cursor.",claudeWorkflowTitle:"Complete Workflow: Claude Code",claudeWorkflowIntro:"Follow these steps to set up and use the Figma MCP workflow in Claude Code.",part1Title:"Part 1: Figma MCP Server Setup",part1Intro:"This is done only once to activate the integration in Cursor/Windsurf.",part1Description:'For the AI to be able to "read" Figma files, we need to set up a local connection.',setupStep1Title:"1. Get Figma Access Token",setupStep1Item1:"Go to Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Click Generate new token.",setupStep1Item3:'Name: E.g. "Cursor MCP".',setupStep1Item4:"Scopes: Select File content: Read and File metadata: Read.",setupStep1Item5:"Copy the token (you won't see it again).",setupStep2Title:"2. Configure in Cursor",setupStep2Item1:"Open settings in Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Go to Features -> MCP.",setupStep2Item3:"Click + Add New MCP Server.",setupStep2Item4:"Fill in the following:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Add Environment Variable (important!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Paste the token you copied in step 1]",setupStep2Item11:'When the light next to "figma" turns green, the tool is ready to use.',part2Title:"Part 2: Daily Workflow",step0Title:"Step 0: Indexing Documentation",step0Description:"Do this once per project to give the AI a complete overview of the design system.",step0Intro:"For Cursor to understand our specific tokens, component names, and guidelines, we need to let it read through the documentation in advance.",step0Item1:"Open Chat in Cursor (Cmd + L / Ctrl + L).",step0Item2:'Type @Docs in the text field and select "Add new doc" from the menu that appears.',step0Item3:"Paste the URL to the main page of the documentation: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Give it a name that's easy to remember, e.g. RedCross.",step0Item5:"Click Confirm.",step0WhatHappensTitle:"What happens now?",step0WhatHappensText:`Cursor will automatically "crawl" (read) through the main page and all subpages. It stores the information in a local database. This means you can later refer to @RedCross in the chat, and the AI will immediately know all color codes, spacing variables, and component rules without you needing to paste text manually. Note: This applies when you reference @RedCross in chat. If you use .cursorrules, you don't need to attach @RedCross manually.`,step0_5Title:"Step 0.5: Fetch AI Design System Guide",step0_5Description:"Before you start converting Figma designs to code, you must fetch the AI Design System Guide. This guide contains complete documentation about all components, design tokens, and best practices that the AI assistant needs to produce correct code.",step0_5WhyCurlTitle:"Why use curl?",step0_5WhyCurlText:"curl is the recommended method because:",step0_5WhyCurlItem1:"File is downloaded locally - AI assistant always has access without internet",step0_5WhyCurlItem2:"Faster reference - No need to download again with each prompt",step0_5WhyCurlItem3:"Works offline - After download, you can work without internet connection",step0_5WhyCurlItem4:"Consistent context - AI reads the same version of the guide every time",step0_5WhyCurlItem5:"Easier reference - Just use the filename (@AI_DESIGN_SYSTEM_GUIDE.md) instead of long URLs",step0_5ClaudeTitle:"For Claude Code:",step0_5ClaudeIntro:"In Claude Code, you can fetch the guide directly in the terminal or ask Claude to do it:",step0_5ClaudeMethod1Title:"Method 1: Fetch via terminal",step0_5ClaudeMethod1Step1:"Open the terminal in Claude Code",step0_5ClaudeMethod1Step2:"Run this command:",step0_5ClaudeMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod1Step3:"Verify the file is downloaded: ls -la AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod2Title:"Method 2: Ask Claude to fetch it",step0_5ClaudeMethod2Text:'You can also ask Claude Code directly: "Please fetch the AI Design System Guide from https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMethod2Note:"Note: This downloads the file locally, just like the curl command.",step0_5ClaudeSetupTitle:"Step 0.6: Ask Claude to read the guide and set up the project",step0_5ClaudeSetupIntro:"Before you start converting Figma designs to code, you need to ask Claude to read through the AI Design System Guide and verify that the project is set up correctly according to the guide. This ensures all necessary packages, CSS imports, and font setup are in place before conversion.",step0_5ClaudeSetupStep1:"Ask Claude to read AI Design System Guide: Give Claude a prompt asking it to read the file @componentlibrary/AI_DESIGN_SYSTEM_GUIDE.md (or the downloaded file if it's in the project root)",step0_5ClaudeSetupStep2:"Ask Claude to verify CSS imports: Give Claude a prompt asking it to check that CSS files are imported in the correct order (base styles first, then theme)",step0_5ClaudeSetupStep3:"Ask Claude to verify font setup: Give Claude a prompt asking it to check that Source Sans 3 is configured correctly (see Font Setup section in the guide)",step0_5ClaudeSetupStep4:"Ask Claude to verify package installation: Give Claude a prompt asking it to check that all necessary packages are installed (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)",step0_5ClaudeSetupStep5:"Ask Claude to verify project structure: Give Claude a prompt asking it to check that the project structure matches the recommendations in the guide",step0_5ClaudeSetupPromptTitle:"Ready-to-copy prompt:",step0_5ClaudeSetupPrompt:`Read through the AI_DESIGN_SYSTEM_GUIDE.md file and verify that my project is set up correctly according to the guide. Specifically check:
+Map design elements to our existing components where possible (e.g. Buttons, Headings)."`,step4Title:"Steg 4: Generering og Review",step4Item1:"AI-en bruker nå MCP til å lese nodedataene og genererer et kodeforslag.",step4ReviewTitle:"Review:",step4ReviewItem1:'Sjekk "Diff View" i Cursor.',step4ReviewItem2:"Er tokens brukt riktig? (f.eks. var(--spacing-md)).",step4ReviewItem3:"Er semantikken god?",step4Apply:'Apply: Trykk "Apply" for å legge koden inn i filen din.',proTipsTitle:"Tips for suksess",proTip1:'Lagre Docs som favoritter: I Cursor under "Docs"-fanen kan du indekserere norwegianredcross.github.io/.... Da kan du bruke @RødeKors som en snarvei i chatten hvis du ikke bruker .cursorrules.',proTip2:'Missing Auto Layout? Hvis Figma-noden mangler Auto Layout, kan AI-en slite med posisjonering. Nevn gjerne i prompten: "Infer layout logic based on visual proximity if Auto Layout is missing."'},metadataFiles:{title:"Metadata-filer",intro:"For å holde oversikt over komponentene og deres kobling til Figma, bruker vi metadata-filer.",whatTitle:"Hva inneholder de?",whatText:"Metadata-filene (som `metadata.json`) er ryggraden i dokumentasjonen vår. De definerer nøyaktig hvilke props hver komponent støtter, datatyper, standardverdier og beskrivelser. Dette gjør at vi kan generere dokumentasjon automatisk og sikre konsistens mellom design og kode.",whatItem1:'componentName: Navnet på komponenten (f.eks. "Button").',whatItem2:'importPath: Hvor komponenten importeres fra (f.eks. "rk-designsystem").',whatItem3:"props: En liste over alle tilgjengelige props, inkludert:",whatItem3Sub1:'name: Navnet på proppen (f.eks. "variant", "disabled").',whatItem3Sub2:'type: Datatypen (f.eks. "boolean", "enum", "string").',whatItem3Sub3:"description: Forklaring av hva proppen gjør.",whatItem3Sub4:"defaultValue: Standardverdien hvis proppen ikke settes.",whatItem3Sub5:"required: Om proppen er påkrevd eller valgfri.",howTitle:"Hvordan bruke dem?",howText:"Når du oppretter en ny komponent, bør du også oppdatere metadata-filen slik at automatiske verktøy og dokumentasjonssider (som denne) kan finne og vise riktig informasjon."},componentCreation:{title:"Komponent Kreasjon med MCP og Design Tokens",intro:"Vi bruker Model Context Protocol (MCP) og AI-assistanse for å oversette Figma-design direkte til produksjonsklare React-komponenter. Denne flyten sikrer at nye komponenter følger designsystemet, bruker CSS Modules, og gjenbruker eksisterende kode.",processTitle:"Prosess",processText:'Når du sender en prompt (f.eks. "make a version where you can have 4 cards below [url]"), håndterer Figma MCP følgende steg automatisk i bakgrunnen:',step1Title:"1. Identifisering og Metadata",step1Item1:'Identifiser kilden: MCP leser URL-en og finner Node-ID for komponenten i Figma (f.eks. 1:3539 for "Hero 3").',step1Item2:"Hent dimensjoner: MCP henter automatisk informasjon om nodens størrelse, struktur og posisjonering for å sette rammeverket for layouten.",step2Title:"2. Henting av Design Context og Kodeutkast",step2Item1:"Generer utkast: MCP analyserer Figma-noden og genererer et førsteutkast til React-kode.",step2Item2:"Automatisk gjenkjenning: Verktøyet identifiserer om designet inneholder elementer som allerede finnes i biblioteket vårt.",step2Item3:'Eksempel: Hvis Figma-noden inneholder en knapp, vil MCP foreslå `import Button from "src/components/Button.tsx"` i stedet for å generere ny HTML for knappen.',step2Item4:"Rensing: Systemet filtrerer bort unødvendige wrappers og absolutte stier før koden presenteres.",step3Title:"3. Token-Mapping og Variabel-definisjoner",step3Item1:"Analyser tokens: MCP analyserer automatisk hvilke design-tokens som er brukt i Figma-filen (via `get_variable_defs` logikk i bakgrunnen).",step3Item2:"Mapping til CSS: Den oversetter Figma-verdier til våre definerte CSS-variabler.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mappes til `var(--ds-color-primary-color-red-base-default)` (eller tilsvarende fra theme.css).",step3Item5:"Typografi: Font-definisjoner oversettes automatisk til korrekte typografi-klasser.",step4Title:"4. Automatisk Kobling mot Eksisterende Komponenter",step4Item1:"Verifisering: Figma MCP sjekker designet opp mot metadata.json og repositoryet vårt (via `get_code_connect_map` logikk i bakgrunnen).",step4Item2:"Implementasjon: Dette sikrer at koden som genereres automatisk tar i bruk rk-designsystem sine komponenter der det er mulig.",step4Item3:"Eksempel: Den ser at et element i Figma tilsvarer `src/components/Button.tsx` og genererer koden med korrekt komponent-import.",step5Title:"5. Struktur og Ferdigstilling",step5Text:"Resultat: Basert på analysen over, produserer AI-en de ferdige filene du trenger:",step5Item1:"`index.ts` (Eksport)",step5Item2:"`[KomponentNavn].tsx` (Logikk, prop-definisjoner fra metadata.json)",step5Item3:"`[KomponentNavn].module.css` (Styling basert på tokens)",step5Item4:"`[KomponentNavn].stories.tsx` (Dokumentasjon og varianter)",step5Variant:'Variant-håndtering: Logikk for varianter (f.eks. "stacked" vs "side-by-side") implementeres basert på din prompt og Figma-layouten.',automationTitle:"Automatisering vs. Manuell Kvalitetssikring",automationText1:"Selv om MCP-verktøyene automatiserer mye av kodingen ved å hente strukturer og tokens direkte fra Figma, er det ikke en 100% sømløs overføring. Den genererte koden fungerer som et solid fundament, men en utvikler må alltid se over, kvalitetssikre og tilpasse logikken.",automationText2:"Verktøyene fjerner det repetitive manuelle arbeidet med oppsett og styling, slik at utvikleren kan fokusere på funksjonalitet, tilgjengelighet og edge-cases. Det er en effektiviseringsprosess, ikke en erstatning for utviklerkompetanse.",benefitsTitle:"Fordeler med denne flyten",benefit1:'Presisjon: Automatisk uthenting av variabler forhindrer "magiske tall" og hardkodede hex-koder.',benefit2:"Gjenbruk: Automatisk sjekk mot eksisterende komponenter hindrer duplisering av kode.",benefit3:"Effektivitet: Du trenger kun å gi en URL og en intensjon; MCP håndterer de tekniske oppslagene.",benefit4:"Vedlikehold: Koblingen mot `theme.css` og `metadata.json` gjør at komponentene tåler oppdateringer i designsystemet."}},design:{sidebar:{forDesigners:"For Designere",getStarted:"Kom i gang",colors:"Farger",contribute:"Bidra med design",designElements:"Designelementer",designTokens:"Design Tokens",shadows:"Skygger",sizes:"Størrelse og avstander",typography:"Typografi",figmaConnect:"Figma tilkobling",startup:"Oppstart",newComponent:"Lage ett nytt komponent",examples:"Praktiske eksempler",tokenStudio:"Token Studio",colorSystem:"Sette opp ditt eget fargesystem",themeBuilder:"Designsystemets temagenerator",useColors:"Bruk fargene du har generert",proposeDesign:"Foreslå nytt design eller forbedringer",whatAreTokens:"Hva er design tokens",tokensInFigma:"Design tokens i Figma",colorStructure:"Navnestruktur",colorOverview:"Oversikt og forklaringer av farger",colorTokens:"Farge-tokens",shadowUsage:"Bruk av skygger i designet",shadowTokens:"Skygge-tokens",componentSizes:"Komponentstørrelser",sizeTokens:"Størrelse-tokens",fontFamily:"Font-family",typoTokens:"Typografi-tokens"},intro:{title:"Design i Røde Kors",welcome:"Velkommen til designdokumentasjonen.",getStarted:"Kom i gang",goToGuide:"Gå til guide",colors:"Farger",seeColors:"Se farger"},tokens:{whatIsTitle:"Hva er design tokens",whatIsText1:'"Design Tokens" styrer hvordan komponentene skal se ut i forhold til farger, typografi, størrelser, avstander, former osv. Design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene.',whatIsText2:"Noen av variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger. Vi jobber med en tema-bygger som skal gjøre det enklere for deg å tilpasse stilene.",whatIsText3:"Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.",figmaTitle:"Design tokens i Figma",figmaText1:'Vi bruker Figma-pluginen "Tokens Studio", da denne lar oss administrere flere stiler og egenskaper enn Figma i seg selv kan.',figmaText2:"Pluginen har som mål å være W3C-kompatibel og retter seg etter standarden som etableres av W3C Design Tokens Community Group. Tokens-verdiene er dermed ikke låst til et verktøy - JSON-filen kan flyttes til andre verktøy dersom det skulle bli aktuelt.",themesTitle:"Flere sett og themes",themesText:"Bruk av variabler og tokens gjør det mulig å ha ett designsystem med ulike identiteter. Vi kan lage en komponent i Figma kun èn gang og style den mange ganger - Med et klikk kan vi slå på et annet theme som for eksempel aktiverer en annen fargepalett eller et annet sett med størrelser. Ved å dele tokens inn i både sets og themes, kan vi tilby avanserte former for gjenbruk.",themesCaption:'Videoen over viser at når settet for "Tilsynet" slås på, overstyres både fargene som er i bruk i filen og stilene som er tilgjengelig i høyremargen byttes ut.'},colorStructure:{title:"Navnestruktur",intro:"Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).",structureTitle:"Navnestruktur",structureText1:"Fargene i Designsystemet er strukturert med en semantisk betydning. Dette betyr at de er definert etter funksjon og bruk, ikke bare etter hvordan de ser ut. Det gjør det lettere å velge riktig farge fordi du slipper å vurdere selve fargetonen og kan fokusere på hva fargen skal formidle i stedet.",structureText2:"Fargenavnene i Designsystemet er delt opp i 3 ledd: Navn på fargeskala, gruppe (bruksområde) og variant. Disse leddene beskriver hvordan fargene er bygget opp og hvordan de skal brukes.",structureCaption:"Viser oppdelingen av fargenavn i 3 ledd",nameLabel:"Navn:",nameText:"Det første leddet og navnet på fargeskalaen. Som standard kommer Designsystemet med fargeskalaene Success, Danger, Warning, Info og Neutral. Flere skalaer kan legges til ved hjelp av Temabyggeren.",groupLabel:"Gruppe:",groupText:"Hver fargeskala er delt inn i gruppene Background, Surface, Border, Text og Base. Disse gruppene beskriver bruksområdene til fargene. Text-gruppen skal for eksempel brukes på tekst og ikoner.",groupsCaption:"Viser en fargeskala og de 5 gruppene som fargene er delt inn i.",variantLabel:"Variant:",variantText:"Inne i hver gruppe finnes det varianter som beskriver hvordan fargene ser ut eller skal brukes. Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr at fargen er tenkt brukt for en interaktiv tilstand."},colorOverview:{title:"Oversikt og forklaring av farger",intro:"Hver fargeskala består av totalt 16 farger, utformet for å dekke ulike behov i designet. Nedenfor finner du en oversikt over de forskjellige fargene og deres tiltenkte bruksområder.",semanticCaption:"Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer: Danger, Neutral og to blåskalaer",tableName:"Navn",tableUsage:"Bruksområde",backgroundDefault:"Standard bakgrunnsfarge",backgroundTinted:"Bakgrunn med et hint av farge i seg",surfaceDefault:"Standardfarge for overflater / komponenter",surfaceTinted:"Overflater / komponenter med et hint av farge i seg",surfaceHover:"Hover-farge til overflater / komponenter",surfaceActive:"Active-farge til overflater / komponenter",borderSubtle:"Border-farge med lav kontrast til dekorativ bruk (skillelinjer)",borderDefault:"Standard border-farge til skjemakomponenter og meningsbærende elementer",borderStrong:"Border-farge med høy kontrast for ekstra synlighet",textSubtle:"Tekst- og ikonfarge med lavere kontrast",textDefault:"Tekst- og ikonfarge med høy kontrast og god synlighet",baseDefault:"Standardfarge for solide bakgrunner",baseHover:"Hover-farge for solide bakgrunner",baseActive:"Active-farge for solide bakgrunner",baseContrastSubtle:"Farge med god kontrast mot Base-default",baseContrastDefault:"Farge med god kontrast mot Base-default og Base-hover",backgroundTitle:"Background",backgroundText:"Background-fargene brukes for å fargelegge store flater og er ofte det bakerste laget på en nettside. Det er vanlig å bruke disse fargene på body-elementet.",backgroundDefaultDesc:"Background-default er den lyseste og mest nøytrale bakgrunnsfargen",backgroundTintedDesc:"Background-tinted får et hint av farge i seg og kan brukes for å skape variasjon i bakgrunnslaget",surfaceTitle:"Surface",surfaceText:"Surface-fargene brukes til å fargelegge elementer som ligger over background-fargene, som for eksempel paneler eller kort (cards). Disse fargene fungerer som forgrunnsfarger og bidrar til å skape dybde i designet ved å skille elementer fra bakgrunnen. I mørk modus blir disse fire fargene gradvis lysere, med Surface-active som den lyseste.",surfaceDefaultDesc:"Surface-default er helt hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.",surfaceTintedDesc:"Surface-tinted får et hint av farge i seg og kan brukes for å skille elementer fra bakgrunnen.",surfaceHoverDesc:"Surface-hover kan brukes til hover-tilstander for elementer eller til å skape visuelle hierarkier i Surface-laget når den kombineres med Surface-tinted og Surface-active.",surfaceActiveDesc:"Surface-active kan brukes til active-tilstander for elementer eller til å forsterke hierarkiet i Surface-laget sammen med Surface-tinted og Surface-hover.",surfaceTintedCaption:"Viser hvordan Surface-tinted ser ut for 7 fargeskalaer generert med Temabyggeren.",borderTitle:"Border",borderText:"Border-fargene brukes for å fargelegge rammer (strokes) til elementer.",borderSubtleDesc:"Border-subtle har lav kontrast mot background- og surface-fargene og bør kun brukes til dekorative formål. Vanlige bruksområder er skillelinjer og dekorative rammer. Fargen bør ikke være den eneste visuelle indikatoren på at et element er interaktivt.",borderDefaultDesc:"Border-default brukes på skjemakomponenter eller på andre meningsbærende rammer. Fargen har god kontrast (over 3:1) mot alle background-fargene, Surface-default og Surface-tinted.",borderStrongDesc:"Border-strong har god kontrast (over 3:1) mot alle background- og surface-fargene og kan brukes på rammer for å gjøre elementer ekstra synlige.",bordersCaption:"Første rad viser farger med Border-subtle, mens den andre raden viser Border-default.",textTitle:"Text",textText:"Text-fargene brukes på tekst og ikoner.",textSubtleDesc:"Text-subtle er en lys tekstfarge som kan brukes for å skape variasjon i typografien eller for å indikere hierarkiske nivåer av viktighet. Den forsøker også å bevare mest mulig av fargemetningen fra den opprinnelige fargen valgt i Temabyggeren. Fargen har god kontrast (4.5:1) mot alle background-fargene, Surface-default og Surface-tinted.",textDefaultDesc:"Text-default er en tekstfarge med høy kontrast, optimal for lesbarhet. Den bør brukes på hovedinnholdet og den primære teksten på en side. Denne fargen i Neutral varianten kan være en fin farge å bruke på mesteparten av teksten. Fargen har god kontrast (4.5:1) mot alle background- og surface-fargene.",textColorsCaption:"Viser hvordan Text-default og Text-subtle ser ut for 8 forskjellige fargeskalaer generert med Temabyggeren.",baseTitle:"Base",baseText1:"Base-fargene brukes for å fargelegge solide bakgrunner, som for eksempel knapper og andre interaktive elementer. Fargene bidrar til å lede oppmerksomheten mot viktige designelementer og etablere et visuelt hierarki i forhold til mindre fremtredende elementer. Samtidig skaper de kontrast mot background- og surface-fargene, noe som forsterker lesbarhet og visuell tydelighet.",baseText2:"Base-hover og Base-active fargene genereres ut fra lysheten eller mørkheten til Base-default fargen fra samme fargeskala for å skape jevne visuelle overganger mellom tilstandene. Kontrastfargene blir enten hvite eller svarte avhengig av lysstyrken til Base-default fargen for å sikre god kontrast og lesbarhet.",baseDefaultDesc:"Base-default kan brukes for å fargelegge solide bakgrunner til elementer. Fargen (hex-koden) som blir valgt i temabyggeren blir plassert under Base-default.",baseHoverDesc:"Base-hover kan brukes til hover-tilstander for solide elementer eller til å skape visuelle hierarkier i Base-laget når den kombineres med Base-default og Base-active.",baseActiveDesc:"Base-active kan brukes til active-tilstander for solide elementer eller til å forsterke hierarkiet i Base-laget sammen med Base-default og Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle har god kontrast (4.5:1) mot Base-default fargen fra samme fargeskala og kan trygt brukes som tekst-farge mot denne.",baseContrastDefaultDesc:"Base-contrast-default har god kontrast (4.5:1) mot Base-default og Base-hover fargene fra samme fargeskala, og kan trygt brukes som en tekst-farge mot disse.",baseColorsCaption:"Viser bokser med Base-default som bakgrunn og Base-contrast-default som tekstfarge."},colorTokens:{title:"Farge-tokens",intro:"Fargene under er eksempler fra et tilfeldig tema. Bruk temabyggeren for å generere dine egne farger og navn.",lightCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no",darkCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no, mørkt modus"},shadowUsage:{title:"Bruk av skygger i designet",intro1:"Skygger bør brukes bevisst og konsistent da de uttrykker at noe ligger over noe annet i løsningen.",intro2:"Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og konturer gjør det enklere og raskere å finne en komponent når du skanner sider. (Research: Material Design)",strengthsTitle:"Styrker",strengthsText:"Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem."},shadowTokens:{title:"Skygge-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge.",exampleCaption:"Popover komponentet dekker over the andre innholdet."},componentSizes:{title:"Komponentstørrelser",intro:"De fleste komponentene i designsystemet finnes i tre anbefalte størrelser: Small, Medium og Large (sm, md, lg). Disse er utviklet for å tilpasse seg ulike behov på tvers av skjermstørrelser og bruksområder.",sizesCaption:"Størrelser for komponenter i Designsystemet.",smallTitle:"Small",smallText:"Small er ideell for kompakte grensesnitt der plassutnyttelse er viktig, som på mobile enheter, ekspertverktøy eller administrasjonsgrensesnitt. Det er anbefalt å bruke denne størrelsen på nettsider med en basefont på 16px.",mediumTitle:"Medium",mediumText:"Medium fungerer som standard for de fleste vanlige bruksområder, og er anbefalt å bruke sammen med en basefont på 18px. Størrelsen gir en god balanse mellom lesbarhet og plassutnyttelse og egner seg spesielt godt for desktop-grensesnitt og større visningsflater.",largeTitle:"Large",largeText:"Large gir økt lesbarhet og tydelighet. Den kan brukes i desktop-grensesnitt eller når synlighet og tilgjengelighet er viktig. Den kan også brukes i en avgrenset kontekst på siden, for å fremheve sentrale elementer. Det er anbefalt å bruke størrelsen sammen med en basefont på 21px.",mediumSizeCaption:"Mange av medium-komponentene har en fast høyde på 48px.",harmonyText:"Komponenter innenfor en bestemt størrelse er designet for å fungere sammen. For eksempel har mange medium-komponenter en høyde på 48px og en basefont på 18px, noe som sikrer en harmonisk visuell balanse når de plasseres ved siden av hverandre.",combinedCaption:"Eksempel der Medium og Large komponenter er brukt sammen.",consistencyText:"For å opprettholde et helhetlig og oversiktlig design anbefales det å bruke faste størrelser innenfor en gitt nettside eller kontekst. Mange ulike kombinasjoner av størrelser kan føre til et rotete og uoversiktlig design.",combinationText:"I enkelte tilfeller kan komponenter i ulike størrelser kombineres for å skape bedre visuelle hierarkier og brukervennlighet. I eksempelet ovenfor er søkefeltseksjonen større og mer fremtredende enn komponentene i headeren, fordi søkefunksjonen er en sentral del av siden. Den økte størrelsen gjør den mer synlig og lett tilgjengelig for brukeren."},sizeTokens:{title:"Størrelse-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge."},fontFamily:{title:"Font-family",intro:"For å presentere tekst på korrekt måte er det laget stiler som har ulike kombinasjoner av størrelse, fontvekt og linjehøyde. Det er også laget et sett med typografi-komponenter som innkapsler disse stilene, slik at de enkelt kan brukes i ulike sammenhenger. Beskrivelse av hvordan typografi-komponenter brukes finner du i komponentartikkelen Typography."},typoTokens:{title:"Typografi-tokens",comingSoon:"Innhold kommer snart."},figmaConnect:{title:"Kom i gang med designsystemet (Figma)",intro:"Denne veiledningen hjelper deg med å komme i gang med å designe ved hjelp av det delte designsystemet i Figma. Du får en innføring i hvordan du bruker komponenter, tokens og stiler fra det sentrale biblioteket.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du starter trenger du:",figmaAccount:"Figma - En aktiv Figma-konto (gratis eller betalt)",access:"Access - Tilgang til Røde Kors sitt Figma-bibliotek (kontakt teamansvarlig hvis du mangler tilgang)",createFile:"Opprett eller åpne en arbeidsfil",createFileText:"Opprett en ny Figma-fil, eller åpne en eksisterende prosjektfil hvor du skal ta i bruk designsystemet.",activateLibraries:"Aktiver designsystemets biblioteker",goToAssets:"Gå til Assets-panelet i Figma",openLibrary:"Klikk på bok-ikonet (📚) øverst til høyre for å åpne Team Library",enableLibraries:"Slå på følgende biblioteker:",libraryComponent:"Designsystem – komponenter",libraryIcons:"Aksel ikonbibliotek",libraryActivationCaption:"Viser aktivering av biblioteker i Figma",insertComponents:"Sett inn komponenter fra biblioteket",goToAssetsPanel:"Gå til Assets-panelet",useSearch:"Bruk søkefeltet for å finne komponenter raskt, f.eks.:",dragComponent:"Dra komponenten inn i artboardet",customizeComponent:"🔄 Tilpass komponentene ved å bruke props og varianter i høyrepanelet. Dette gir fleksibilitet uten å bryte koblingen til hovedkomponenten.",tips:"Tips og god praksis",tipsText:`Unngå å "detache" komponenter. For å sikre gjenbruk og fremtidige oppdateringer, skal du ikke detach'e komponenter. Bruk heller varianter og egenskaper (props) for å tilpasse utseende og funksjon.`},startup:{title:"Oppstart: Oppsett av arbeidsområde",step1Title:"Trinn 1: Start med en ny frame",step1Text1:"Opprett en ny frame i Figma med ønsket størrelse.",step1Text2:"I dette tilfellet bruker vi 1728px i bredde.",step2Title:"Trinn 2: Legg til autolayout",step2Text:"Legg til autolayout på framen.",step3Title:"Trinn 3: Legg til tokens på framen",step3Text:"Legg til følgende tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Trinn 4: Legg til heading og footer",step4Text:"Legg til header og footer fra komponenter biblioteket. Sørg for at Auto Layout retning er satt til vertikal.",step5Title:"Trinn 5: Lage en seksjon",step5Text:'Lag en ny frame som du kaller "section".',step6Title:"Trinn 6: Legge til autolayout",step6Text:"Legg til autolayout på den nye seksjonen.",step7Title:"Trinn 7: Legge til seksjon i hovedframe",step7Text:'Legg til seksjonen i hovedframen og sørg for at seksjonen er satt til "fill container".',step8Title:"Trinn 8: Legge til tokens (side-marginer og bakgrunnsfarge)",step8Text:"Velg seksjonen og legg til følgende tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"Dette sørger for at siden din er koblet mot tokensene i koden og gjør det lettere for utviklere å utvikle det du designer da disse er lenket via GitHub.",step9Title:"Trinn 9: Test seksjonen",step9Text:"Legg til ett komponent fra biblioteket. I vårt tilfelle bruker vi card komponenten.",step10Title:"Trinn 10: Lag en nested layout",step10Text:"Legg til flere kort og sett de sammen ved hjelp av en auto layout. For å gjøre dette enkelt velg alle kortene og trykk shift + a.",step11Title:"Trinn 11: Set opp nested layout",step11Text1:"Velg alle kortene i seksjonen og sørg for at disse er satt til fill container.",step11Text2:"Dette gjør vi for at kortene skal ta like mye plass og holde seg innen for rammene til den nestede layouten.",step12Title:"Trinn 12: Legg til spacing tokens",step12Text:"Gå ett hakk ut og velg containeren til kortene. Sørg for at spacing er satt til size/6.",step13Title:"Trinn 13: Legg til spacing i seksjon",step13Text:"Legg til spacing mellom kort containeren og headingen ved å velge seksjonen og tilføye en spacing på size/6.",step14Title:"Trinn 14: gjenbruk",step14Text:"Dupliser seksjonen og gjør deg kjent med hvordan auto-layout og tokensene fungerer. Under ser du hvordan jeg enkelt laget en tabell ved å erstatte kortene med en tablecolumn komponent og satte spacing til size/0."},newComponent:{title:"Lage nye komponenter",intro:"Denne siden forklarer hvordan man bygger nye komponenter i designsystemet. Målet er å sikre at komponentene er konsistente, skalerbare, tilgjengelige og enkle å bruke både i design og utvikling.",tokensTitle:"Tokens som grunnlag",tokensText:"Alle komponenter skal bygges med tokens. Tokens er de grunnleggende verdiene i systemet og gjør det mulig å oppdatere eller tilpasse design uten å endre hver enkelt komponent.",tokensAutolayout:"Autolayout: Bruk alltid Autolayout i Figma. Det gir produksjonsklare filer og speiler hvordan kode er strukturert.",tokensSize:"Størrelsestokens: Bruk tokens for spacing, padding og dimensjoner. Unngå manuelle verdier.",tokensSemantic:"Semantiske tokens: Benytt semantiske tokens for farger, typografi og spacing. Dette sikrer støtte for lys og mørk modus, ulike størrelser og temaer – og gjør komponentene direkte koblet til kode.",atomicTitle:"Bygging med atomisk design",atomicText:"Komponenter settes sammen hierarkisk etter atomisk design:",atomicAtoms:"Atomer: de minste byggeklossene (f.eks. knapp, ikon, inputfelt).",atomicMolecules:"Molekyler: sammensatte atomer (f.eks. søkefelt = input + knapp).",atomicOrganisms:"Organismer: større helheter laget av molekyler (f.eks. skjema eller navigasjon).",atomicPrinciple:"Dette prinsippet gjør komponentene modulære og gjenbrukbare.",calendarTitle:"Eksempel Kalender Modul",calendarStep1Title:"Trinn 1: Begynn på atomisk nivå",calendarStep1Text:"Se for deg atomene som trengs når du lager en kalender. Eksempelvis kan det være:",calendarStep1TextLabel:"Tekst:",calendarStep1TextItems:'Måned/år (f.eks. "August 2025"), Ukedagsnavn (man, tir, ons …), Dato-nummer (1, 2, 3 …)',calendarStep1IconLabel:"Ikoner:",calendarStep1IconItems:"Piltaster for navigasjon (forrige/neste måned), Eventuelt ikon for «dagens dato» eller «reset»",calendarStep1ButtonLabel:"Knapper:",calendarStep1ButtonItems:"Navigasjonsknapper (forrige/neste måned), Dato-knapp (hver dato er en interaktiv knapp)",calendarStep1Note:"Vi vet at vi allerede har icon-button så den kan vi enkelt hente ut fra komponent bibiloteket.",calendarStep2Title:"Trinn 2: Start med å bygge ut atomene dine",calendarStep2Text1:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dato-nummer i en mnd. Her kan vi bruke samme atom for ukedagsnavn og dato-nummer.",calendarStep2Text2:'Vi lager to elementer som vi kaller "cell" og legger til autolayout og appellerer token verdiene.',calendarStep3Title:"Trinn 3: Lag variantene du trenger",calendarStep3Text:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dagene i en mnd.",calendarStep4Title:"Trinn 4: Sett sammen molekylet",calendarStep5Title:"Trinn 5: Bygg ut organismen",calendarStep5Text:"Her legger vi sammen molekylene til en tabell.",calendarStep6Title:"Trinn 6: Legg til riktig states",calendarStep7Title:"Trinn 7: Gjør ferdig organismen med eksisterende elementer",calendarStep8Title:"Trinn 8: Bygg ut med flere varianter hvis det gir mening",variantsTitle:"Varianter og tilstander",variantsText:"Alle komponenter skal ha definerte varianter og interaksjonstilstander:",variantsFigma:"Bruk Figma Variants i stedet for duplisering.",variantsStates:"Minimumstilstander: default, hover, pressed, disabled, focus. Litt ut fra kontekst.",variantsNew:"Opprett en ny variant når det gjelder en tilpasning av samme komponent, og en ny komponent kun når funksjonen er unik.",accessibilityTitle:"Tilgjengelighet",accessibilityText:"Tilgjengelighet skal alltid ivaretas:",accessibilityWCAG:"Følg WCAG-kontrastkrav (minimum 4.5:1 for tekst).",accessibilityTouch:"Interaktive flater skal ha minst 44 × 44 px treffflate.",accessibilityFocus:"Fokustilstand skal alltid være synlig, også uten hover.",responsiveTitle:"Responsivitet",responsiveText:"Komponenter skal fungere på tvers av skjermstørrelser og layouts:",responsiveTokens:"Bruk størrelsestokens for spacing og dimensjoner.",responsiveSizes:"Støtt små, mellomstore og store layoutvarianter.",responsiveBreak:"Sørg for at komponenter brytes eller stackes logisk i mindre formater.",reuseTitle:"Gjenbruk i kontekst",reuseText:"En komponent skal alltid kunne brukes i ulike sammenhenger. Vis derfor eksempler i dokumentasjonen, som:",reuseExample1:"knapp i et skjema",reuseExample2:"kort i et grid",reuseExample3:"inputfelt i en dialogboks"},examples:{title:"Praktiske eksempler",example1Title:"Eksempel 1: Påmeldingsskjema",example1Step1Title:"Trinn 1: Start med en ny frame",example1Step1Text:"Opprett en ny frame i Figma med ønsket størrelse. Bruk design tokens for å sette framefargen hvis nødvendig (f.eks. background-default).",example1Step2Title:"Trinn 2: Legg til overskrift",example1Step2Text:'Bruk komponenten Heading for å legge til en overskrift, som "Meld deg på vårt arrangement". Juster størrelsen med size-modusen, om nødvendig.',example1Step3Title:"Trinn 3: Legg til tekstfelt for navn og e-post",example1Step3Text:'Sett inn to Text Input-komponenter. Den første for "Fullt navn" og den andre for "E-postadresse". Sørg for å bruke placeholder-modusen for instruksjoner i tekstfeltene.',example1Step4Title:"Trinn 4: Legg til en dropdown for valg av arrangement",example1Step4Text:"Bruk komponenten Multisuggestion for å la brukeren velge mellom forskjellige arrangementer. Legg til nødvendige alternativer i dropdown-menyen.",example1Step5Title:"Trinn 5: Legg til en send-knapp",example1Step5Text:"Sett inn en Button-komponent og tilpass fargen ved å bruke color-modusen hvis knappen skal skille seg ut. Legg til ikon hvis ønskelig.",example1NoteTitle:"Obs!",example1NoteText:"Bruk color og sizetokens i framems rundt komponentene for å sikre at alle moduser fungerer som de skal.",example2Title:"Eksempel 2: Artikkelside",example2Step1Title:"Trinn 1: Opprett en ny frame",example2Step1Text:"Start med å lage en ny vertikal frame i Figma med ønsket bredde (f.eks. 8- eller 12-kolonne grid). Sett bakgrunnsfarge ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example2Step2Title:"Trinn 2: Legg til en hovedoverskrift",example2Step2Text:"Bruk Heading-komponenten for å legge til tittelen på artikkelen. Juster størrelsen med size-modus (f.eks. heading-xleller heading-lg).",example2Step3Title:"Trinn 3: Legg til ingress",example2Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort ingress som oppsummerer artikkelen. Plasser denne rett under overskriften, med tilstrekkelig spacing.",example2Step4Title:"Trinn 4: Sett inn hovedinnhold med tekstblokker",example2Step4Text:"Bruk Text-komponenter i body-default eller body-large for å bygge ut brødteksten. Del opp teksten i tydelige avsnitt og legg inn mellomtitler med Heading-komponenten i mindre størrelse (heading-md eller heading-sm).",example2Step5Title:"Trinn 5: Legg til et bilde i artikkelen",example2Step5Text1:"Bruk Image-komponenten for å plassere et illustrasjons- eller artikkelbilde midtstilt i teksten. Bruk size-modusen hvis du trenger å endre størrelse (f.eks. medium eller full-width).",example2Step5Text2:"Foreløpig har vi ingen Image -komponent så vi bruker derfor en frame i steden",example2Step6Title:"Trinn 6: Legg til lenker i teksten",example2Step6Text:"Bruk Link-komponenten der det er behov for hyperkoblinger til relaterte artikler, dokumenter eller eksterne kilder.",example2Step7Title:"Trinn 7: Avslutt med relaterte artikler eller deling",example2Step7Text:'Bruk Card-komponenter i et grid-layout for å vise relaterte artikler. Hver kort bør inneholde bilde, tittel og en "Les mer"-lenke. Alternativt kan du legge til Share-komponenter for sosiale medier nederst.',example3Title:"Eksempel 3: Planleggings verktøy",example3Step1Title:"Trinn 1: Opprett en frame",example3Step1Text:"Start med å lage en ny vertikal frame i Figma, med den ønskede bredden som passer til layouten for aktivitetskalenderen din (f.eks. 12-kolonne grid). Sett bakgrunnsfargen ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example3Step2Title:"Trinn 2: Legg til en hovedoverskrift",example3Step2Text:'Bruk Heading-komponenten for å legge til tittelen "Aktivitetskalender". Juster størrelsen med size-modus som passer (f.eks. heading-xl eller heading-lg).',example3Step3Title:"Trinn 3: Legg til en kort beskrivelse",example3Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort beskrivelse som forklarer formålet med kalenderen. Plasser denne rett under hovedoverskriften, med tilstrekkelig spacing for å sikre lesbarhet.",example3Step4Title:"Trinn 4: Sett inn kalenderoversikt",example3Step4Text:"Bruk en Table-komponent for å lage en oversikt over månedens aktiviteter. Sørg for at hver rad representerer en dag og inkluderer kolonner for dato, aktivitet, tid og sted. Juster størrelsen på tabellen etter behov.",example3Step5Title:"Trinn 5: Legg til detaljerte aktivitetskort",example3Step5Text:'Bruk Card-komponenter for å vise detaljerte beskrivelser av hver aktivitet. Hvert kort bør inneholde aktivitetens navn, beskrivelse, tid, sted og en "Mer info"-knapp som kan føre til en detaljert side om aktiviteten.',example3Step6Title:"Trinn 6: Sett inn bilder for hver aktivitet",example3Step6Text:"Bruk Image-komponenten innenfor hvert aktivitetskort for å inkludere relevante bilder. Bruk size-modusen for å tilpasse bildene til kortene (f.eks. medium eller full-width).",example3Step7Title:"Trinn 7: Legg til et filter eller søkefunksjon",example3Step7Text:"Bruk Search-komponenten for å legge til en søkefunksjon øverst på siden, slik at brukere enkelt kan finne aktiviteter basert på navn, dato eller kategori.",example3Step8Title:'Trinn 8: Inkluder en "Legg til i kalender" funksjon',example3Step8Text:"Bruk Button-komponenter for å tilby en funksjon der brukere kan legge aktiviteter til sin personlige kalender. Plasser denne knappen i nærheten av aktivitetsdetaljene.",example3Step9Title:"Trinn 9: Legg til lenker og navigasjon",example3Step9Text:"Bruk Link-komponenter for å legge til hyperkoblinger til relaterte aktiviteter eller eksterne ressurser, som for eksempel billetter eller mer informasjon. Sørg for tydelig kontrast og understreking i henhold til designreglene.",example3Step10Title:"Trinn 10: Avslutt med sosiale delingsmuligheter",example3Step10Text:"Bruk Share-komponenter for sosiale medier nederst på siden, slik at brukere kan dele interessante aktiviteter med venner og familie.",example3Step11Title:"Trinn 11: Tilpass for mobilvisning",example3Step11Text:"Sørg for at layouten er responsiv. Bruk layout grid og auto layout for å sikre at tekst, bilder og kort flyter riktig på små skjermer. Test designet på forskjellige skjermstørrelser for å sikre optimal brukeropplevelse."},tokenStudio:{title:"Kom i gang med Token Studio og GitHub-synkronisering",intro:"Denne veiledningen viser hvordan du kobler Token Studio i Figma til et GitHub-repositorium for å holde design tokens synkronisert på tvers av teamet.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du setter opp synkronisering trenger du:",figmaAccount:"Figma - En Figma-konto med Professional-plan eller høyere",tokenStudioAccount:"Token Studio - En Token Studio-konto med Premium-abonnement",generateToken:"Generer en GitHub Fine-grained access token",goToGithub:"Gå til: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Klikk på Generate new token",fillOut:"Fyll ut følgende:",tokenName:"Navn:",tokenNameExample:"F.eks. Red Cross Token",expiration:"Utløpsdato:",expirationText:"sett som ønsket",generateAndCopy:"Klikk Generate token og kopier den trygt (lagres ikke av GitHub etterpå)",configureSync:"Konfigurer GitHub-sync i Token Studio",openPlugin:"Åpne Token Studio-pluginen i Figma",goToSettings:"Gå til: Settings → Sync providers → Add new → GitHub",fillIn:"Fyll inn følgende:",syncName:"Name:",syncNameExample:"f.eks. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"lim inn tokenet fra GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: velg All repositories eller spesifikt repo",repoPermissions:"Repository permissions → Contents: velg Read & Write",setupCaption:"Konfigurer GitHub-sync",performSync:"Utfør første synkronisering",afterSave:"Etter at du har lagret innstillingene, vil pluginen vise en modal:",ifEmpty:"Hvis repoet er tomt → velg Push",ifExists:"Hvis tokens allerede finnes → velg Pull",chooseAction:"Velg handling basert på situasjonen.",syncCaption:"Utfør første synkronisering",workflow:"Løpende arbeidsflyt: Push og Pull",pushText:"Push når du gjør endringer i tokens i Figma → skriv inn commit-melding og gjennomgå endringer før du evt. åpner en Pull Request.",pullText:"Pull for å hente oppdateringer fra GitHub til Figma → du får mulighet til å gjennomgå og godkjenne før endringer tas inn.",tips:"Tips og god praksis",tip1:"Oppbevar tokenen sikkert – ikke lim den inn i offentlige dokumenter.",tip2:"Dokumenter innstillingene dine (navn, branch, sti osv.) for enklere oppsett senere.",tip3:"Synk ofte for å sikre konsistens mellom design og utvikling."},colorSystem:{title:"Sette opp ditt eget fargesystem",intro1:"Med et gjennomtenkt fargesystem kan vi sikre at tekst alltid har god nok kontrast mot våre bakgrunnsfarger og at det finnes nok ulike farger for alle tilstander.",intro2:"En profilveileder inneholder ofte kun et sett med primærfarger og sekundærfarger i et par forskjellige fargetoner. Å lage et digitalt produkt kun med disse fargene alene er vanskelig. For å kunne sikre riktig kontrast og korrekte farger for ulike tilstander, er vi avhengig av å definere flere variasjoner av profilfargene. Bare button komponenten består av 6 ulike blåfarger:",buttonCaption:"Som du ser i eksemplet trenger vi 6 ulike fargevariasjoner bare for Button-komponentet",systemText:'Fargesystemet er strukturert for å støtte multibranding og ulike modes (darkmode, contrastmode, etc.), og samtidig ivareta kontrastkrav. Vi har latt oss inspirere av USWDS sine "magic numbers" for å sikre tilgjengelige fargekombinasjoner fra hvilken som helst fargepalett. Vi har også blitt inspirert av Radix sitt fargesystem med tydelige intensjoner for de ulike fargene. For å sikre at en organisasjon skal kunne bruke sin faktiske brandfarge, har vi valgt å kombinere to tilnærminger til et helt nytt system.'},themeBuilder:{title:"Designsystemets temagenerator",intro:"For å generere en skala som fungerer kan du bruke Designsystemets temagenerator. Det eneste du trenger å gjøre er å lime inn hex-koden til merkevarens accent-farge og øvrige profil-farger.",generatorLink:"https://theme.designsystemet.no/no",caption:"Fargesystemet bruker brand-fargen til å generere flere fargevarianter, slik at vi kan sikre god kontrast mellom tekst og bakgrunnsfarger.",systemText:"Temageneratoren er basert på et fargesystem sørger for at både brand-farger ivaretas og kontrastkrav sikres gjennom de lineære fargene som genereres ut fra brand-fargen. Farger beregnet for tekst vil dermed alltid ha god nok kontrast mot bakgrunnsfarger.",examplesTitle:"Eksempler",example1:"Text-default har alltid god nok kontrast mot alle background og surface farger.",example2:"Text-subtle har alltid god nok kontrast mot alle background-farger og surface-default.",appliesText:"Dette vil gjelde uansett hva du har valgt som base-farge.",baseText:"Base-default-fargen vil alltid være den samme som fargen du har valgt. Dette er for å ivareta brandet ditt best mulig. Du må derfor selv passe på at fargen du velger oppfyller kontrastkravene i forhold til hvor den skal bli brukt. Designsystemets temagenerator vil informere deg om eventuelle kontrastbrudd."},useColors:{title:"Bruk fargene du har generert",intro:"Når du har generert skalaene, kan du bruke de nye fargekodene i Designsystemet, slik at alle komponenter følger din profil."},proposeDesign:{title:"Foreslå nytt design eller forbedringer",intro:"Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma. De beste løsningene kommer gjennom samarbeid.",newComponent:"Ny Komponent",newComponentText1:"Ønsker du å foreslå en ny komponent setter vi pris på om den blir registrert i Github.",newComponentText2:"Når en ny komponent blir foreslått må vi vurdere om den er verdifull nok til å være en del av designsystemet. Vi ønsker ikke å ende opp med hundrevis av komponenter med små forskjeller, da vi kan risikere uønsket kompleksitet, vedlikehold, samt design- og teknologigjeld.",newComponentText3:"For nye komponenter som tas inn må vi:",consider1:"Identifisere og utforske liknende behov hos andre produktteam og virksomheter. Hvor mange produkter/etater vil ha bruk for den?",consider2:"Vurdere problemet komponenten skal løse og verdien dette gir.",consider3:"Tenke på om den kan lages fleksibel og gjenbrukbar nok.",consider4:"Tenke på om den er i tråd med designprinsippene og om den passer inn i helheten",reportTitle:"Registrere feil eller mangler på en komponent i Figma",reportText:"Har du funnet en svakhet med noen av de eksisterende komponentene i Figma, setter vi pris på om du enten legger igjen en kommentar i Figma sammen med den aktuelle komponenten, eller at du oppretter en bug-report i Github som forklarer feilen, eventuelt en feature-request som forklarer ønsket tilleggsfunksjonalitet.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Snarveier",shortcutsLinks:{services:"Tilbudene",volunteer:"Bli frivillig",ourWork:"Vårt arbeid",about:"Om Røde Kors",support:"Støtt arbeidet",contact:"Kontakt oss"},contact:{visitingAddress:"Besøks adresse",organizationNumber:"Organisasjonsnummer",email:"E-post"},copyright:"Rødekors",legal:{privacy:"Personvern",press:"For presse",procurement:"Regler for innkjøp",whistleblowing:"Varsling/Misconduct"}},carousel:{loading:"Laster bilde",previousImage:"Forrige bilde",nextImage:"Neste bilde",imagePosition:"Bildeposisjon",goToImage:"Gå til bilde"},datePicker:{previousMonth:"Forrige måned",nextMonth:"Neste måned"},dateInput:{openDatePicker:"Åpne datovelger"}},EN:{header:{darkMode:"Dark Mode",toggleTheme:"Toggle theme",language:"Language:",search:"Search",searchPlaceholder:"Search content...",closeSearch:"Close search",openSearch:"Open search",clearSearch:"Clear search",close:"Close",menu:"Menu",closeMenu:"Close menu",openMenu:"Open menu",login:"Log in",supportUs:"Support us",suggestions:"Search suggestions",viewAll:"View all results",noResults:"No results found for",selectLanguage:"Select language",homeAriaLabel:"Norwegian Red Cross Home",nav:{design:"Design",components:"Components",code:"Code",tokens:"Tokens",work:"Our Work",volunteer:"Volunteer",courses:"Courses & Training"}},home:{heroTitle:"Red Cross Design System",heroLead:"Common component library and guidelines for design and development of digital solutions in Red Cross.",searchComponents:"Search components",exploreSystem:"Explore the system",componentsDesc:"Library with ready-made React components.",designDesc:"Colors, typography, and principles.",codeDesc:"Documentation, workflow, and MCP.",tokensDesc:"Design tokens, colors, and spacing.",universalDesign:"Universal Design",universalDesignText:"Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",readGuidelines:"Read guidelines",consistentBrand:"Consistent Brand",consistentBrandText:"Design tokens ensure the Red Cross visual profile is maintained across all surfaces.",seeColors:"See colors",efficientDev:"Efficient Development",efficientDevText:"Save time with ready-made components. Focus on functionality, not CSS.",exploreComponents:"Explore components",quickActionsTitle:"Jump in fast",quickActionCodeTitle:"Start in code",quickActionCodeText:"See setup, tokens, and examples.",quickActionDesignTitle:"Design guide",quickActionDesignText:"Colors, typography, and principles.",quickActionComponentsTitle:"Component library",quickActionComponentsText:"Explore and reuse ready-made components.",openCode:"Open code",openDesign:"Open design",openComponents:"Open components",featureStripTitle:"Useful right now",featureToken:"Updated design tokens",featureFont:"Source Sans 3 included",featureComponent:"New component variants",featureSeeAll:"See all updates",profile:"Profile",name:"Name Namerson",volunteer:"Volunteer",save:"Save",approved:"Approved",rejected:"Rejected",darkModeLabel:"Dark mode",importantMessage:"Important message",updateGuidelines:"Remember to update the guidelines...",all:"All",active:"Active",alerts:"Alerts",status:"Status"},components:{title:"Components",intro:"The design system contains fundamental components that can be combined in many different ways and in different patterns.",searchPlaceholder:"Search for component...",searchAriaLabel:"Search components",noResults:"No components found for"},code:{sidebar:{overview:"Overview",workflow:"Workflow",structure:"Structure",contribute:"Contribute",home:"Home",getStarted:"Get Started",styling:"Styling",designTokens:"Design Tokens",fonts:"Fonts",icons:"Using Icons",figmaMcp:"From Figma to Code (MCP)",introduction:"Introduction",cursor:"Cursor",claudeCode:"Claude Code",componentCreation:"Component Creation",metadataFiles:"Metadata Files",developerGuide:"Developer Guide",aiGuide:"AI Guide for Assistants"},overview:{title:"Red Cross Design System",intro:"Welcome to Red Cross Design System! This repository contains a library of reusable UI components built with React, tailored for Norwegian Red Cross digital projects.",text1:"It is developed by leveraging the base components from Digdir's Design System. This approach ensures a cohesive and recognizable visual identity across all Red Cross applications. The system is pre-configured with the official Red Cross theme, delivered via a dedicated design token package.",text2:"The main goal is to ensure brand consistency, improve development efficiency, and maintain high standards for accessibility across all Red Cross applications.",text3:"Storybook serves as the interactive documentation and development environment to showcase and test these components.",getStartedCard:"Get Started",getStartedDesc:"Installation, setup, and guidelines for developers.",getStartedLink:"Get Started",designTokensCard:"Design Tokens",designTokensDesc:"Learn how to use design tokens and fonts.",designTokensLink:"Read more",workflowCard:"Workflow",workflowDesc:"Learn how to use MCP tools to fetch components directly from Figma.",workflowLink:"Read guide"},getStarted:{title:"Get Started",intro:"To use Red Cross Design System in your Next.js (or other React) application:",installationTitle:"1. Installation",installationText:"Install the necessary npm packages for your project. You need three packages: the component library itself (rk-designsystem), base styles from Digdir, and the Red Cross theme package (rk-design-tokens).",githubLink:"Go to GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Note: You do not need to install @digdir/designsystemet-react separately, as all necessary components are included in the rk-designsystem package.",stylesTitle:"2. Including Styles (CSS)",stylesText1:"For components to be styled correctly, you must import the stylesheets at the top level of your application, for example in layout.tsx (for Next.js App Router) or _app.tsx (for Next.js Pages Router).",stylesText2:"Important order: It is crucial that the base stylesheet (@digdir/designsystemet-css) loads before the Red Cross theme file (rk-design-tokens). This ensures that our theme tokens correctly override the default values.",appRouterExample:"Example for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Example for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Using Components",usageText:"Once the stylesheets are included, you can start importing and using components in your project. All components you need are available directly from the rk-designsystem package.",importTitle:"3.1 Import and use Red Cross Design System components",nextjsExample:"3.2 Example usage in a Next.js page",updateText:"The appearance of all components is fully controlled by the rk-design-tokens package. To receive visual updates to the brand theme (such as a new primary color), simply update the package to the latest version:"},designTokens:{title:"Red Cross Design Tokens",intro:"This repository is the central source for all design tokens (colors, typography, spacing, etc.) for Norwegian Red Cross digital products. It functions as a single source of truth that automatically distributes style changes to all connected projects.",howToTitle:"How to use tokens",howToText:"To use design tokens in your project, you must install and configure the theme package.",installTitle:"1. Installation",importTitle:"2. Import CSS",importText:"In your application's root layout (e.g. layout.tsx), import the base stylesheet before the Red Cross theme file.",fontTitle:"How to add the font",fontText1:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",fontText2:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",fontText3:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",workflowTitle:"Automated Workflow for Design Tokens (End-to-End)",workflowText:"This workflow establishes a fully automated pipeline that connects our design process directly to live production applications. When a designer updates the style in Figma, this system automatically builds, versions, and publishes a new style package to npm. Then our Vercel projects are notified, updating themselves and redeploying with the new styles.",phase1Title:"Phase 1: A Designer Makes a Change (Publisher)",phase1Item1:"Design in Figma: A designer makes a change to a color, font, or other design token.",phase1Item2:"Push to GitHub: Using the Token Studio plugin, the designer pushes the changes. This automatically commits the updated JSON files to the main branch.",phase1Item3:"Trigger Publisher Workflow: This push immediately triggers the GitHub Action defined in .github/workflows/publish.yml.",phase1Item4:"Build & Commit Artifacts: The workflow runs npm run build to generate CSS from JSON files and commits the results.",phase1Item5:"Versioning & Release: The workflow runs npm version patch to increment the version number, create a release commit, and tag it.",phase1Item6:"Publish to npm: Finally, the workflow publishes the new version of the package to the npm registry.",phase2Title:"Phase 2: Notifying Applications (Signal)",phase2Text:"Send a Dispatch signal: After a successful publication, the workflow sends a repository_dispatch signal to consumer projects like rk-designsystem to notify them of the new version.",phase3Title:"Phase 3: Automatic Update and Redeploy (Consumers)",phase3Item1:'Trigger Consumer Workflow: The dispatch signal starts an "Update" workflow in consumer projects.',phase3Item2:"Update Dependencies: The workflow runs npm update rk-design-tokens to fetch the latest version.",phase3Item3:"Commit & Push Update: The workflow commits the updated package-lock.json file.",phase3Item4:"Vercel Auto-Deploys: Vercel's Git integration detects the new commit and automatically starts a new deployment."},fonts:{title:"Fonts",intro:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",howToTitle:"How to add the font",howToText:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",afterLoadTitle:"After loading",afterLoadText:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",nextjsTitle:"Example for Next.js",nextjsText:"For Next.js App Router, add the font in layout.tsx:",nextjsPagesText:"For Next.js Pages Router, add the font in _app.tsx or _document.tsx:",cssVariablesTitle:"CSS Variables",cssVariablesText:"After the font is loaded, the design system automatically uses the CSS variable --ds-font-family defined in the rk-design-tokens package. You don't need to specify the font manually in your components."},icons:{title:"Using Icons",intro:"This library is designed to work seamlessly with the official icon set from NAV/Aksel.",installTitle:"Installation",importTitle:"Import and use",importText:"Icons are exported as named React components. Import only the icons you need (tree‑shakable):",accessibilityTitle:"Accessibility Guide",accessibilityItem1:"Icon + visible text: set aria-hidden on the icon so screen readers don't read it twice.",accessibilityItem2:"Icon-only triggers (e.g. a button): add a descriptive aria-label to the trigger, keep the icon aria-hidden.",accessibilityItem3:"Color: icons inherit currentColor; use the component's variant/color to control it (e.g. button variants, tag colors).",accessibilityItem4:`Size: set fontSize (e.g. fontSize="1.25rem") or inline style (e.g. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Performance",performanceText:"Use named imports from @navikt/aksel-icons to keep package size down – unused icons are removed (tree-shaken) by modern bundlers."},contributing:{title:"Contributing to the Library",intro:"This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures our component library remains consistent, accessible, and easy to maintain.",getStartedTitle:"Get Started (for contributors)",getStartedText:"Follow these steps to run the local development environment. All commands should be run from the root of the project.",principlesTitle:"Core Principles",principlesText:"Each component we build should follow these core principles:",principlesA11y:"Accessibility (A11y): Components must be usable by everyone, including people with disabilities. This means correct ARIA attributes, keyboard navigation, and semantic HTML.",principlesReuse:"Reusability: Components should be generic enough to be used in multiple contexts without modification.",principlesConsistency:"Consistency: Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.",principlesDocs:"Documentation: Each component must be documented in Storybook to make it discoverable and easy to use for other developers.",whenTitle:"When to create a new component",whenText:"Before you start coding, determine what type of component you need. Most of our needs fall into one of three categories:",wrappedSimpleTitle:"Wrapped Component (Simple):",wrappedSimpleWhat:"What it is: A component that directly wraps and re-exports a component from @digdir/designsystemet-react without modifications.",wrappedSimpleWhen:"When to use: When the basic Digdir component perfectly covers our needs, but we want to include it in our own library for a consistent import source.",wrappedSimpleExample:"Example: The Buttons component is a perfect example of this.",wrappedStyledTitle:"Wrapped Component (with style overrides):",wrappedStyledWhat:"What it is: A wrapped Digdir component where we use custom CSS to adjust the appearance to better fit Red Cross's specific design language.",wrappedStyledWhen:"When to use: When a Digdir component is functionally correct but needs visual adjustments (e.g. different icons, border-radius, padding).",wrappedStyledExample:"Example: The Alert component, which uses composes in CSS to inherit base styles and then apply its own overrides.",customTitle:"Custom Component (from scratch):",customWhat:"What it is: A completely new component built when no existing Digdir component covers our requirements.",customWhen:"When to use: For unique UI patterns or functionality not covered by the base library.",customExample:"Example: The DateInput component is a custom component with its own state, logic, and styling.",fileStructureTitle:"File structure for components",fileStructureText:"To maintain consistency, each new component should follow this file structure. Create a new folder under src/components/ with the component's PascalCase name.",codingGuidelinesTitle:"Coding Guidelines",componentLogicTitle:"1. Component Logic (MyNewComponent.tsx)",logicTypeScript:"TypeScript first: All components must be written in TypeScript. Define a Props interface for your component, extending from basic HTML element or Digdir component props if applicable.",logicForwardRef:"Forward Refs: Always use React.forwardRef to allow parent components to get a ref to the underlying DOM element.",logicA11y:"Accessibility is mandatory:",logicA11yItem1:"Use semantic HTML (<button>, <label>, <nav>).",logicA11yItem2:"Ensure all interactive elements can be focused and operated with keyboard.",logicA11yItem3:"Provide aria-label for buttons that only have icons or elements where the text label is not visible.",logicA11yItem4:"Use aria-invalid, aria-describedby, etc., to communicate state to assistive technologies.",logicControlled:"Controlled vs. Uncontrolled: If your component has state (like an input), it should support both controlled (value + onChange) and uncontrolled (defaultValue) patterns.",logicProps:"Props naming: Use data-* attributes for styling variants (e.g. data-size, data-color) to align with patterns in our existing components.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For custom components, all styles must be placed in a styles.module.css file. This scopes class names locally and prevents global style conflicts.",stylingTokens:"Design tokens: Always use our design tokens (var(--ds-...)) for colors, spacing, fonts, etc. Do not use hardcoded values (e.g. #FFF, 16px).",stylingOverride:"Overriding Wrapped Components: For wrapped components, use a standard CSS file. Use @layer and composes keywords to extend basic Digdir styles without unnecessarily increasing CSS specificity.",documentationTitle:"3. Documentation (MyNewComponent.stories.tsx)",docsStorybook:"Your Storybook file is the official documentation. It must be clear and comprehensive.",docsMeta:"meta Object: Define the component's title, component reference, and tags: ['autodocs'] to enable automatic documentation.",docsArgTypes:"argTypes: Document each prop. Provide a description, control type (e.g. select, boolean, text), and options if applicable. This drives the interactive controls in Storybook.",docsStories:"Create multiple Stories: Create a separate story for each key state and variant of your component (e.g. Default, Disabled, WithError, WithIcon).",processTitle:"Contribution Process",processPRTitle:"Create a Pull Request (PR):",processBranch:"Create a Branch: Pull the latest changes from the main branch and create a new feature branch: git checkout -b feat/my-new-component.",processDraft:"Open a Draft PR: As soon as you start, open a draft pull request on GitHub. This prevents duplicate work and lets others see what you're working on.",processCommit:"Commit your changes: While working, make small, logical commits.",processReview:'Ready for review: When development is complete and all automated checks pass, mark the PR as "Ready for review" and request a review from the design system maintainers.'},figmaMcp:{title:"Workflow: From Figma to Code with MCP",introTitle:"Introduction to MCP and Workflow",intro:"This guide describes how we use Model Context Protocol (MCP) to connect Figma directly to the development environment. This makes it possible to fetch design specifications, tokens, and structures automatically, validated against our design system.",whatIsMcpTitle:"What is MCP?",whatIsMcpText1:"Model Context Protocol (MCP) is an open standard that allows AI assistants to communicate directly with external data sources and tools. In our context, we use MCP to connect Figma design files directly to our development environment.",whatIsMcpText2:"This means that when you give the AI a Figma link, it can automatically:",whatIsMcpItem1:"Read design specifications directly from Figma",whatIsMcpItem2:"Fetch exact colors, spacing, typography, and other design tokens",whatIsMcpItem3:"Understand component structure and hierarchy",whatIsMcpItem4:"Generate code that matches the design accurately",whyUseMcpTitle:"Why use MCP?",whyUseMcpText1:"Traditionally, developers have had to manually convert designs to code, which can be time-consuming and error-prone. With MCP, we get:",whyUseMcpItem1Title:"Accuracy:",whyUseMcpItem1Text:"The AI reads the design directly from the source, so no information is lost in translation.",whyUseMcpItem2Title:"Speed:",whyUseMcpItem2Text:"Automatic conversion from design to code saves hours of manual work.",whyUseMcpItem3Title:"Consistency:",whyUseMcpItem3Text:"All design tokens and components are used consistently, validated against our design system.",whyUseMcpItem4Title:"Efficiency:",whyUseMcpItem4Text:"Less time on repetitive work, more time solving actual problems.",howItWorksTitle:"How does it work?",howItWorksIntro:"The process is simple and follows these steps:",stepByStepTitle:"Step-by-step overview",stepByStep1Title:"1. Setup (one time only)",stepByStep1Text:"You set up a local MCP server that connects Figma to your AI assistant. This requires a Figma Access Token and some configuration.",stepByStep2Title:"2. Fetch AI Design System Guide",stepByStep2Text:"You download a specially crafted guide containing all information about components, tokens, and best practices. This gives the AI full context about our design system.",stepByStep3Title:"3. Copy Figma link",stepByStep3Text:"In Figma, you mark the part of the design you want to implement and copy the link to that specific component or frame.",stepByStep4Title:"4. Give instructions to the AI",stepByStep4Text:"You give the AI the Figma link along with instructions about what you want to create. The AI uses MCP to read the design and generates code based on our design system.",stepByStep5Title:"5. Review and adjust",stepByStep5Text:"The AI generates code that you can review, test, and adjust as needed. The code automatically follows design tokens and components from our design system.",nextStepsTitle:"Next steps",nextStepsText:"Now that you understand the basics of MCP and the workflow, you can choose between:",nextStepsItem1:"Cursor workflow - for Cursor IDE users",nextStepsItem2:"Claude Code workflow - for Claude Code users",cursorWorkflowTitle:"Complete Workflow: Cursor",cursorWorkflowIntro:"Follow these steps to set up and use the Figma MCP workflow in Cursor.",claudeWorkflowTitle:"Complete Workflow: Claude Code",claudeWorkflowIntro:"Follow these steps to set up and use the Figma MCP workflow in Claude Code.",part1Title:"Part 1: Figma MCP Server Setup",part1Intro:"This is done only once to activate the integration in Cursor/Windsurf.",part1Description:'For the AI to be able to "read" Figma files, we need to set up a local connection.',setupStep1Title:"1. Get Figma Access Token",setupStep1Item1:"Go to Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Click Generate new token.",setupStep1Item3:'Name: E.g. "Cursor MCP".',setupStep1Item4:"Scopes: Select File content: Read and File metadata: Read.",setupStep1Item5:"Copy the token (you won't see it again).",setupStep2Title:"2. Configure in Cursor",setupStep2Item1:"Open settings in Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Go to Features -> MCP.",setupStep2Item3:"Click + Add New MCP Server.",setupStep2Item4:"Fill in the following:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Add Environment Variable (important!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Paste the token you copied in step 1]",setupStep2Item11:'When the light next to "figma" turns green, the tool is ready to use.',part2Title:"Part 2: Daily Workflow",step0Title:"Step 0: Indexing Documentation",step0Description:"Do this once per project to give the AI a complete overview of the design system.",step0Intro:"For Cursor to understand our specific tokens, component names, and guidelines, we need to let it read through the documentation in advance.",step0Item1:"Open Chat in Cursor (Cmd + L / Ctrl + L).",step0Item2:'Type @Docs in the text field and select "Add new doc" from the menu that appears.',step0Item3:"Paste the URL to the main page of the documentation: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Give it a name that's easy to remember, e.g. RedCross.",step0Item5:"Click Confirm.",step0WhatHappensTitle:"What happens now?",step0WhatHappensText:`Cursor will automatically "crawl" (read) through the main page and all subpages. It stores the information in a local database. This means you can later refer to @RedCross in the chat, and the AI will immediately know all color codes, spacing variables, and component rules without you needing to paste text manually. Note: This applies when you reference @RedCross in chat. If you use .cursorrules, you don't need to attach @RedCross manually.`,step0_5Title:"Step 0.5: Fetch AI Design System Guide",step0_5Description:"Before you start converting Figma designs to code, you must fetch the AI Design System Guide. This guide contains complete documentation about all components, design tokens, and best practices that the AI assistant needs to produce correct code.",step0_5WhyCurlTitle:"Why use curl?",step0_5WhyCurlText:"curl is the recommended method because:",step0_5WhyCurlItem1:"File is downloaded locally - AI assistant always has access without internet",step0_5WhyCurlItem2:"Faster reference - No need to download again with each prompt",step0_5WhyCurlItem3:"Works offline - After download, you can work without internet connection",step0_5WhyCurlItem4:"Consistent context - AI reads the same version of the guide every time",step0_5WhyCurlItem5:"Easier reference - Just use the filename (@AI_DESIGN_SYSTEM_GUIDE.md) instead of long URLs",step0_5ClaudeTitle:"For Claude Code:",step0_5ClaudeIntro:"In Claude Code, you can fetch the guide directly in the terminal or ask Claude to do it:",step0_5ClaudeMethod1Title:"Method 1: Fetch via terminal",step0_5ClaudeMethod1Step1:"Open the terminal in Claude Code",step0_5ClaudeMethod1Step2:"Run this command:",step0_5ClaudeMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod1Step3:"Verify the file is downloaded: ls -la AI_DESIGN_SYSTEM_GUIDE.md",step0_5ClaudeMethod2Title:"Method 2: Ask Claude to fetch it",step0_5ClaudeMethod2Text:'You can also ask Claude Code directly: "Please fetch the AI Design System Guide from https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMethod2Note:"Note: This downloads the file locally, just like the curl command.",step0_5ClaudeSetupTitle:"Step 0.6: Ask Claude to read the guide and set up the project",step0_5ClaudeSetupIntro:"Before you start converting Figma designs to code, you need to ask Claude to read through the AI Design System Guide and verify that the project is set up correctly according to the guide. This ensures all necessary packages, CSS imports, and font setup are in place before conversion.",step0_5ClaudeSetupStep1:"Ask Claude to read AI Design System Guide: Give Claude a prompt asking it to read the file @componentlibrary/AI_DESIGN_SYSTEM_GUIDE.md (or the downloaded file if it's in the project root)",step0_5ClaudeSetupStep2:"Ask Claude to verify CSS imports: Give Claude a prompt asking it to check that CSS files are imported in the correct order (base styles first, then theme)",step0_5ClaudeSetupStep3:"Ask Claude to verify font setup: Give Claude a prompt asking it to check that Source Sans 3 is configured correctly (see Font Setup section in the guide)",step0_5ClaudeSetupStep4:"Ask Claude to verify package installation: Give Claude a prompt asking it to check that all necessary packages are installed (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)",step0_5ClaudeSetupStep5:"Ask Claude to verify project structure: Give Claude a prompt asking it to check that the project structure matches the recommendations in the guide",step0_5ClaudeSetupPromptTitle:"Ready-to-copy prompt:",step0_5ClaudeSetupPrompt:`Read through the AI_DESIGN_SYSTEM_GUIDE.md file and verify that my project is set up correctly according to the guide. Specifically check:
 
 1. That CSS files are imported in the correct order (base styles first, then theme)
 2. That Source Sans 3 font is configured correctly (see Font Setup section)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rk-designsystem",
-  "version": "1.1.89",
+  "version": "1.1.91",
   "description": "A React component library built on top of Digdir Design System",
   "author": "daniel@tunetek.no",
   "license": "MIT",