[{"data":1,"prerenderedAt":5502},["ShallowReactive",2],{"content-\u002Fdocs\u002Fdeveloper\u002Fweb-components":3,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":4416,"$f8f5lnJ37FCtouC_Q-20Y_lk47T8QT59vG2H3NVA0ikU":4771,"$fH8KF6TaNm7Prkw5PjE_U_K0_jhwqU4rL9IgcxTR8qEY":4886,"nord-asset-highlight-css":5353,"nord-asset-highlight-themes-nord-dark":5354,"nord-asset-highlight-components":5355,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":5356,"sidebar-component-doc-meta":5372},{"id":4,"title":5,"badge":6,"body":7,"description":4406,"excludeFromSearch":4407,"extension":4408,"external":4407,"icon":4409,"keywords":6,"menuSection":6,"meta":4410,"native":4407,"navTitle":6,"navigation":478,"order":6,"path":4411,"railLabel":6,"seo":4412,"sidebar":4407,"sitemap":4413,"stem":4414,"tabs":6,"__hash__":4415},"docs\u002Fdocs\u002F01.developer\u002F02.web-components.md","Using Web Components",null,{"type":8,"value":9,"toc":4364},"minimark",[10,17,28,36,51,67,70,75,78,83,102,106,109,112,350,360,362,366,374,377,382,389,391,393,401,403,406,408,412,421,440,443,498,502,519,528,535,572,576,579,582,598,601,627,630,634,642,644,648,652,662,665,808,830,864,867,869,873,880,902,914,930,933,935,939,973,991,1004,1007,1009,1013,1021,1032,1038,1046,1056,1071,1082,1085,1092,1095,1097,1101,1119,1244,1247,1249,1253,1260,1276,1288,1295,1314,1322,1329,1331,1335,1354,1391,1407,1409,1413,1416,1430,1437,1448,1458,1460,1464,1467,1476,1478,1482,1497,1512,1541,1552,1571,1582,1601,1603,1607,1614,1626,1632,1636,1638,1641,1655,1662,1664,1667,1670,1687,1690,1706,1709,1719,1793,1796,1977,1983,2133,2136,2221,2255,2484,2495,2499,2502,2516,2558,2561,2565,2572,2579,2586,2589,2593,2606,2627,2629,2647,2649,2664,2673,2780,2790,2792,2905,2909,2912,2954,2969,2973,2979,2981,2984,2992,2998,3000,3003,3005,3021,3023,3037,3041,3044,3158,3166,3169,3175,3248,3251,3357,3361,3464,3475,3587,3621,3742,3750,3868,3878,3889,3892,4002,4005,4074,4083,4087,4107,4189,4196,4203,4207,4210,4218,4252,4255,4272,4276,4281,4290,4292,4294,4298,4312,4314,4318,4326,4328,4332,4335,4361],[11,12,13],"nord-intro",{},[14,15,16],"p",{},"Nord makes it effortless to implement and use its components across any framework or no framework at all. We accomplish this by using standardized web platform APIs and Web Components.",[14,18,19,20,27],{},"Web Components are a set of technologies that provide a standards based component model for the Web. They allow us to create reusable ",[21,22,26],"a",{"href":23,"rel":24},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\u002FUsing_custom_elements",[25],"nofollow","Custom Elements"," with their functionality encapsulated away from the rest of the code.",[14,29,30,31,35],{},"This page covers setup, installation, bundling, and usage patterns. Looking for the reference pages for each Nord component? Browse the ",[21,32,34],{"href":33},"\u002Fcomponents\u002F","Components library",".",[14,37,38,39,44,45,50],{},"We've chosen to use Web Components because there is a strong requirement for Nord to be used in many different contexts and with varying technologies — from static HTML pages to server-rendered apps, through to single page applications authored with frameworks such as ",[21,40,43],{"href":41,"rel":42},"https:\u002F\u002Freactjs.org\u002F",[25],"React"," and ",[21,46,49],{"href":47,"rel":48},"https:\u002F\u002Fvuejs.org\u002F",[25],"Vue",". Web Components work great for Nord, because they:",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"Are tech-agnostic instead of tech-specific",[55,59,60],{},"Future proof our system with Web Standards",[55,62,63],{},"Allow us to use any framework or no framework at all",[55,65,66],{},"Provide great encapsulation for styles and functionality",[68,69],"br",{},[71,72,74],"nord-button",{"size":73,"href":33},"l","\n  Browse components\n",[76,77],"hr",{},[79,80,82],"h2",{"id":81},"quick-start","Quick start",[14,84,85,86,88,89,93,94,44,98,101],{},"There are two necessary parts to using Nord's components — the ",[21,87,34],{"href":33}," itself, and the ",[21,90,92],{"href":91},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F","CSS Framework",". Everything else is optional. The fastest way to get started is to include the following directly into your page with ",[95,96,97],"code",{},"\u003Cscript>",[95,99,100],{},"\u003Clink>"," tags:",[103,104],"nord-asset",{"name":105},"css",[103,107],{"name":108},"components",[14,110,111],{},"With these, you now have access to all of Nord's components! You can now for example add a button to your page:",[113,114,119],"pre",{"className":115,"code":116,"language":117,"meta":118,"style":118},"language-html shiki shiki-themes github-light github-dark","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\" \u002F>\n    \u003Ctitle>Nord Design System\u003C\u002Ftitle>\n    \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F4.2.0\u002Fnord.min.css\" \u002F>\n    \u003Cscript type=\"module\" src=\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F4.11.0\u002Findex.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cnord-button variant=\"primary\">Hello Nordie\u003C\u002Fnord-button>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[95,120,121,141,161,172,192,217,232,258,289,299,309,331,340],{"__ignoreMap":118},[122,123,126,130,134,138],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"sVt8B","\u003C!",[122,131,133],{"class":132},"s9eBZ","doctype",[122,135,137],{"class":136},"sScJk"," html",[122,139,140],{"class":128},">\n",[122,142,144,147,149,152,155,159],{"class":124,"line":143},2,[122,145,146],{"class":128},"\u003C",[122,148,117],{"class":132},[122,150,151],{"class":136}," lang",[122,153,154],{"class":128},"=",[122,156,158],{"class":157},"sZZnC","\"en\"",[122,160,140],{"class":128},[122,162,164,167,170],{"class":124,"line":163},3,[122,165,166],{"class":128},"  \u003C",[122,168,169],{"class":132},"head",[122,171,140],{"class":128},[122,173,175,178,181,184,186,189],{"class":124,"line":174},4,[122,176,177],{"class":128},"    \u003C",[122,179,180],{"class":132},"meta",[122,182,183],{"class":136}," charset",[122,185,154],{"class":128},[122,187,188],{"class":157},"\"UTF-8\"",[122,190,191],{"class":128}," \u002F>\n",[122,193,195,197,199,202,204,207,210,212,215],{"class":124,"line":194},5,[122,196,177],{"class":128},[122,198,180],{"class":132},[122,200,201],{"class":136}," name",[122,203,154],{"class":128},[122,205,206],{"class":157},"\"viewport\"",[122,208,209],{"class":136}," content",[122,211,154],{"class":128},[122,213,214],{"class":157},"\"width=device-width,initial-scale=1.0\"",[122,216,191],{"class":128},[122,218,220,222,225,228,230],{"class":124,"line":219},6,[122,221,177],{"class":128},[122,223,224],{"class":132},"title",[122,226,227],{"class":128},">Nord Design System\u003C\u002F",[122,229,224],{"class":132},[122,231,140],{"class":128},[122,233,235,237,240,243,245,248,251,253,256],{"class":124,"line":234},7,[122,236,177],{"class":128},[122,238,239],{"class":132},"link",[122,241,242],{"class":136}," rel",[122,244,154],{"class":128},[122,246,247],{"class":157},"\"stylesheet\"",[122,249,250],{"class":136}," href",[122,252,154],{"class":128},[122,254,255],{"class":157},"\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F4.2.0\u002Fnord.min.css\"",[122,257,191],{"class":128},[122,259,261,263,266,269,271,274,277,279,282,285,287],{"class":124,"line":260},8,[122,262,177],{"class":128},[122,264,265],{"class":132},"script",[122,267,268],{"class":136}," type",[122,270,154],{"class":128},[122,272,273],{"class":157},"\"module\"",[122,275,276],{"class":136}," src",[122,278,154],{"class":128},[122,280,281],{"class":157},"\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F4.11.0\u002Findex.js\"",[122,283,284],{"class":128},">\u003C\u002F",[122,286,265],{"class":132},[122,288,140],{"class":128},[122,290,292,295,297],{"class":124,"line":291},9,[122,293,294],{"class":128},"  \u003C\u002F",[122,296,169],{"class":132},[122,298,140],{"class":128},[122,300,302,304,307],{"class":124,"line":301},10,[122,303,166],{"class":128},[122,305,306],{"class":132},"body",[122,308,140],{"class":128},[122,310,312,314,316,319,321,324,327,329],{"class":124,"line":311},11,[122,313,177],{"class":128},[122,315,71],{"class":132},[122,317,318],{"class":136}," variant",[122,320,154],{"class":128},[122,322,323],{"class":157},"\"primary\"",[122,325,326],{"class":128},">Hello Nordie\u003C\u002F",[122,328,71],{"class":132},[122,330,140],{"class":128},[122,332,334,336,338],{"class":124,"line":333},12,[122,335,294],{"class":128},[122,337,306],{"class":132},[122,339,140],{"class":128},[122,341,343,346,348],{"class":124,"line":342},13,[122,344,345],{"class":128},"\u003C\u002F",[122,347,117],{"class":132},[122,349,140],{"class":128},[351,352,354,355,359],"nord-banner",{"variant":353},"warning","\nWhilst this is a fast way to get started, the above method is not recommended for production since it will result in many small HTTP requests. This has a negative effect on page load times. We recommend using a \n",[21,356,358],{"href":357},"#bundling","\nbundler\n","\n for production, for optimal performance.\n",[76,361],{},[79,363,365],{"id":364},"installation","Installation",[14,367,368,369,44,371,373],{},"We strive to support as many use-cases as possible for consuming Nord's components. In its purest form, you can include our components and styles via ",[95,370,97],{},[95,372,100],{}," tags served from our CDN.",[14,375,376],{},"This approach is best for rapid prototyping, for use in static HTML pages, or for integrating into existing apps which do not have a JavaScript build step. For all other cases we recommend installing the packages locally via npm\u002Fyarn.",[378,379,381],"h3",{"id":380},"cdn-installation","CDN installation",[14,383,384,385,388],{},"Include the following in the ",[95,386,387],{},"\u003Chead>"," of your web page:",[103,390],{"name":105},[103,392],{"name":108},[14,394,395,396,400],{},"If working on a custom themed app, you should also include the ",[21,397,399],{"href":398},"\u002Fdesign\u002Fthemes\u002F","theme"," after the CSS Framework:",[103,402],{"name":105},[103,404],{"name":405},"themes-nord-dark",[103,407],{"name":108},[378,409,411],{"id":410},"local-installation","Local installation",[14,413,414,415,420],{},"Before moving further with the installation, please make sure you have ",[21,416,419],{"href":417,"rel":418},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[25],"Node.js"," installed on your machine. You can install the latest version through their website.",[14,422,423,424,429,430,435,436,439],{},"If you're planning on using Nord's Web Components in a project that doesn't yet use ",[21,425,428],{"href":426,"rel":427},"https:\u002F\u002Fwww.npmjs.com",[25],"Node Package Manager",", you'll have to first create a ",[21,431,434],{"href":432,"rel":433},"https:\u002F\u002Fdocs.npmjs.com\u002Ffiles\u002Fpackage.json",[25],"package.json"," file. To do this, run ",[95,437,438],{},"npm init"," and follow the steps provided. Once finished, you can install Nord's Web Components by following the instructions below.",[14,441,442],{},"Run in your project or website root directory (where package.json lives):",[113,444,448],{"className":445,"code":446,"language":447,"meta":118,"style":118},"language-bash shiki shiki-themes github-light github-dark","# With NPM\nnpm install @nordhealth\u002Fcss @nordhealth\u002Fcomponents --save\n\n# With Yarn\nyarn add @nordhealth\u002Fcss @nordhealth\u002Fcomponents\n","bash",[95,449,450,456,474,480,485],{"__ignoreMap":118},[122,451,452],{"class":124,"line":125},[122,453,455],{"class":454},"sJ8bj","# With NPM\n",[122,457,458,461,464,467,470],{"class":124,"line":143},[122,459,460],{"class":136},"npm",[122,462,463],{"class":157}," install",[122,465,466],{"class":157}," @nordhealth\u002Fcss",[122,468,469],{"class":157}," @nordhealth\u002Fcomponents",[122,471,473],{"class":472},"sj4cs"," --save\n",[122,475,476],{"class":124,"line":163},[122,477,479],{"emptyLinePlaceholder":478},true,"\n",[122,481,482],{"class":124,"line":174},[122,483,484],{"class":454},"# With Yarn\n",[122,486,487,490,493,495],{"class":124,"line":194},[122,488,489],{"class":136},"yarn",[122,491,492],{"class":157}," add",[122,494,466],{"class":157},[122,496,497],{"class":157}," @nordhealth\u002Fcomponents\n",[378,499,501],{"id":500},"required-styles","Required styles",[14,503,504,505,509,510,514,515,518],{},"It's a requirement that you use our ",[21,506,508],{"href":507},"\u002Fcore\u002Fcss\u002F","CSS framework"," alongside the Web Components. The CSS framework includes all our ",[21,511,513],{"href":512},"\u002Fcore\u002Ftokens\u002F","design tokens",", a ",[21,516,517],{"href":398},"default theme"," for the components, as well as a number of helpful utility classes.",[14,520,521,522,44,524,527],{},"Outside of the components themselves, we recommend leveraging the included ",[21,523,513],{"href":512},[21,525,526],{"href":507},"utility classes"," as much as possible to achieve a consistent look and feel.",[14,529,530,531,534],{},"If working in Veterinary or Healthcare space, you will also need a specific theme from our ",[21,532,533],{"href":398},"themes package"," in your application:",[113,536,538],{"className":445,"code":537,"language":447,"meta":118,"style":118},"# With NPM\nnpm install @nordhealth\u002Fthemes --save\n\n# With Yarn\nyarn add @nordhealth\u002Fthemes\n",[95,539,540,544,555,559,563],{"__ignoreMap":118},[122,541,542],{"class":124,"line":125},[122,543,455],{"class":454},[122,545,546,548,550,553],{"class":124,"line":143},[122,547,460],{"class":136},[122,549,463],{"class":157},[122,551,552],{"class":157}," @nordhealth\u002Fthemes",[122,554,473],{"class":472},[122,556,557],{"class":124,"line":163},[122,558,479],{"emptyLinePlaceholder":478},[122,560,561],{"class":124,"line":174},[122,562,484],{"class":454},[122,564,565,567,569],{"class":124,"line":194},[122,566,489],{"class":136},[122,568,492],{"class":157},[122,570,571],{"class":157}," @nordhealth\u002Fthemes\n",[378,573,575],{"id":574},"bundling","Bundling",[14,577,578],{},"Bundling and transpiling are considered application concerns. We cannot anticipate all requirements, loading strategies, and so on. So we publish our components as ES modules, written for modern browsers. These can then be bundled, tree shaken, and optimized by individual applications.",[14,580,581],{},"To import all components:",[113,583,587],{"className":584,"code":585,"language":586,"meta":118,"style":118},"language-js shiki shiki-themes github-light github-dark","import '@nordhealth\u002Fcomponents'\n","js",[95,588,589],{"__ignoreMap":118},[122,590,591,595],{"class":124,"line":125},[122,592,594],{"class":593},"szBVR","import",[122,596,597],{"class":157}," '@nordhealth\u002Fcomponents'\n",[14,599,600],{},"To import specific components, which allows for optimal tree shaking:",[113,602,604],{"className":584,"code":603,"language":586,"meta":118,"style":118},"import '@nordhealth\u002Fcomponents\u002Flib\u002FBadge'\nimport '@nordhealth\u002Fcomponents\u002Flib\u002FButton'\nimport '@nordhealth\u002Fcomponents\u002Flib\u002FInput'\n",[95,605,606,613,620],{"__ignoreMap":118},[122,607,608,610],{"class":124,"line":125},[122,609,594],{"class":593},[122,611,612],{"class":157}," '@nordhealth\u002Fcomponents\u002Flib\u002FBadge'\n",[122,614,615,617],{"class":124,"line":143},[122,616,594],{"class":593},[122,618,619],{"class":157}," '@nordhealth\u002Fcomponents\u002Flib\u002FButton'\n",[122,621,622,624],{"class":124,"line":163},[122,623,594],{"class":593},[122,625,626],{"class":157}," '@nordhealth\u002Fcomponents\u002Flib\u002FInput'\n",[14,628,629],{},"These imports automatically register the Web Components (side effects).",[378,631,633],{"id":632},"browser-support","Browser support",[14,635,636,637,641],{},"Nord is tested in the latest two versions of all major browsers. See ",[21,638,640],{"href":639},"\u002Fdocs\u002Fdeveloper\u002F#browser-support","browser support"," on the Getting Started page for the full list and our policy on older versions.",[76,643],{},[79,645,647],{"id":646},"usage","Usage",[378,649,651],{"id":650},"properties","Properties",[14,653,654,655,658,659,35],{},"In browsers, elements have attributes in HTML and properties in JavaScript. Our attributes are always in ",[95,656,657],{},"dash-case",", and the properties are in ",[95,660,661],{},"camelCase",[14,663,664],{},"All attributes have corresponding underlying properties, but not all properties have corresponding attributes. Since HTML only has two types of values, strings and booleans, any property which is not a string or a boolean cannot exist as an attribute. For instance, a function cannot be passed via an attribute, so it must be passed via JavaScript:",[113,666,668],{"className":115,"code":667,"language":117,"meta":118,"style":118},"\u003Cnord-calendar>\u003C\u002Fnord-calendar>\n\n\u003Cscript type=\"module\">\n  const calendar = document.querySelector('nord-calendar')\n\n  \u002F\u002F this could not be set via an attribute\n  calendar.isDateDisabled = function isWeekend(date) {\n    return date.getDay() === 0 || date.getDay() === 6\n  }\n\u003C\u002Fscript>\n",[95,669,670,683,687,701,727,731,736,761,795,800],{"__ignoreMap":118},[122,671,672,674,677,679,681],{"class":124,"line":125},[122,673,146],{"class":128},[122,675,676],{"class":132},"nord-calendar",[122,678,284],{"class":128},[122,680,676],{"class":132},[122,682,140],{"class":128},[122,684,685],{"class":124,"line":143},[122,686,479],{"emptyLinePlaceholder":478},[122,688,689,691,693,695,697,699],{"class":124,"line":163},[122,690,146],{"class":128},[122,692,265],{"class":132},[122,694,268],{"class":136},[122,696,154],{"class":128},[122,698,273],{"class":157},[122,700,140],{"class":128},[122,702,703,706,709,712,715,718,721,724],{"class":124,"line":174},[122,704,705],{"class":593},"  const",[122,707,708],{"class":472}," calendar",[122,710,711],{"class":593}," =",[122,713,714],{"class":128}," document.",[122,716,717],{"class":136},"querySelector",[122,719,720],{"class":128},"(",[122,722,723],{"class":157},"'nord-calendar'",[122,725,726],{"class":128},")\n",[122,728,729],{"class":124,"line":194},[122,730,479],{"emptyLinePlaceholder":478},[122,732,733],{"class":124,"line":219},[122,734,735],{"class":454},"  \u002F\u002F this could not be set via an attribute\n",[122,737,738,741,744,746,749,752,754,758],{"class":124,"line":234},[122,739,740],{"class":128},"  calendar.",[122,742,743],{"class":136},"isDateDisabled",[122,745,711],{"class":593},[122,747,748],{"class":593}," function",[122,750,751],{"class":136}," isWeekend",[122,753,720],{"class":128},[122,755,757],{"class":756},"s4XuR","date",[122,759,760],{"class":128},") {\n",[122,762,763,766,769,772,775,778,781,784,786,788,790,792],{"class":124,"line":260},[122,764,765],{"class":593},"    return",[122,767,768],{"class":128}," date.",[122,770,771],{"class":136},"getDay",[122,773,774],{"class":128},"() ",[122,776,777],{"class":593},"===",[122,779,780],{"class":472}," 0",[122,782,783],{"class":593}," ||",[122,785,768],{"class":128},[122,787,771],{"class":136},[122,789,774],{"class":128},[122,791,777],{"class":593},[122,793,794],{"class":472}," 6\n",[122,796,797],{"class":124,"line":291},[122,798,799],{"class":128},"  }\n",[122,801,802,804,806],{"class":124,"line":301},[122,803,345],{"class":128},[122,805,265],{"class":132},[122,807,140],{"class":128},[14,809,810,811,814,815,818,819,822,823,825,826,829],{},"Boolean attributes are considered ",[95,812,813],{},"false"," by omission, and ",[95,816,817],{},"true"," by inclusion. For instance, to set the ",[95,820,821],{},"hideLabel"," property of an input to ",[95,824,817],{},", you include the ",[95,827,828],{},"hide-label"," attribute without a value:",[113,831,833],{"className":115,"code":832,"language":117,"meta":118,"style":118},"\u003C!-- hideLabel property is set to true -->\n\u003Cnord-input label=\"Name\" hide-label>\u003C\u002Fnord-input>\n",[95,834,835,840],{"__ignoreMap":118},[122,836,837],{"class":124,"line":125},[122,838,839],{"class":454},"\u003C!-- hideLabel property is set to true -->\n",[122,841,842,844,847,850,852,855,858,860,862],{"class":124,"line":143},[122,843,146],{"class":128},[122,845,846],{"class":132},"nord-input",[122,848,849],{"class":136}," label",[122,851,154],{"class":128},[122,853,854],{"class":157},"\"Name\"",[122,856,857],{"class":136}," hide-label",[122,859,284],{"class":128},[122,861,846],{"class":132},[122,863,140],{"class":128},[14,865,866],{},"It's recommended, as much as possible, to leverage attributes in HTML rather than properties in JavaScript.",[76,868],{},[378,870,872],{"id":871},"events","Events",[14,874,875,876,879],{},"Components emit custom DOM events, which can be listened to via ",[95,877,878],{},"addEventListener"," or whatever mechanism your framework of choice offers. It's worth noting that all our events bubble.",[14,881,882,883,887,888,891,892,891,895,891,898,901],{},"Where our components are drop-in replacements for native elements we follow native event names. For instance, our ",[21,884,886],{"href":885},"\u002Fcomponents\u002Finput\u002F#events","Input"," and other form components, emit ",[95,889,890],{},"change",", ",[95,893,894],{},"input",[95,896,897],{},"blur",[95,899,900],{},"focus"," events.",[903,904,906,910],"example-usage",{"name":905},"Events example",[846,907],{"id":908,"label":909},"events-example","Name",[265,911,913],{"type":912},"module","\n  document.querySelector(\"#events-example\").addEventListener(\"focus\", e => {\n    console.log(\"focus\", e.target)\n  })\n",[14,915,916,917,920,921,925,926,929],{},"Where there is no equivalent native event, we prefix our event names with ",[95,918,919],{},"nord-",". For instance, the ",[21,922,924],{"href":923},"\u002Fcomponents\u002Fcommand-menu\u002F#events","Command Menu"," emits a ",[95,927,928],{},"nord-select"," event when a command is chosen from the menu.",[351,931,932],{"variant":353},"\nIt's best to consult the documentation for each component to be sure of event names.\n",[76,934],{},[378,936,938],{"id":937},"methods","Methods",[14,940,941,942,891,945,949,950,891,953,956,957,960,961,965,966,44,969,972],{},"Some components offer methods which you can call to invoke behavior. Interactive components like ",[21,943,886],{"href":944},"\u002Fcomponents\u002Finput\u002F#methods",[21,946,948],{"href":947},"\u002Fcomponents\u002Fbutton\u002F#methods","Button"," etc. offer ",[95,951,952],{},"focus()",[95,954,955],{},"blur()",", and ",[95,958,959],{},"click()"," methods, which behave like the native equivalents. Some components offer methods for which there is no native equivalent. For instance, ",[21,962,964],{"href":963},"\u002Fcomponents\u002Fdate-picker\u002F#methods","Date Picker"," offers a ",[95,967,968],{},"show()",[95,970,971],{},"hide()"," method:",[903,974,976,988],{"name":975},"Methods example",[977,978,979,983],"nord-stack",{},[71,980,982],{"id":981},"methods-example-button","Open date picker",[984,985],"nord-date-picker",{"id":986,"label":987},"methods-example-picker","Date of birth",[265,989,990],{"type":912},"\n  const button = document.querySelector(\"#methods-example-button\")\n  const picker = document.querySelector(\"#methods-example-picker\")\n\n  button.addEventListener(\"click\", () => {\n    picker.show()\n  })\n",[14,992,993,994,998,999,1003],{},"If you are using a framework like React or Vue, you will need to get a reference to the DOM element to call the methods on. Please refer to the ",[21,995,49],{"href":996,"rel":997},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Ftemplate-refs.html",[25]," or ",[21,1000,43],{"href":1001,"rel":1002},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Frefs-and-the-dom.html",[25]," docs for further information.",[351,1005,1006],{"variant":353},"\nIt's best to consult the documentation for each component to get a full description of methods and their parameters.\n",[76,1008],{},[378,1010,1012],{"id":1011},"slots","Slots",[14,1014,1015,1016,1020],{},"Web Components offer a feature called ",[21,1017,1011],{"href":1018,"rel":1019},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\u002FUsing_templates_and_slots#adding_flexibility_with_slots",[25],". As with events, properties and methods, slots form part of the public API of a component. Slots allow web components to receive content as children, and place the content into their internal DOM.",[14,1022,1023,1024,1027,1028,1031],{},"The most common slot is the default slot, which captures any content placed as a child of a component that does not have a ",[95,1025,1026],{},"slot"," attribute. For instance, the ",[21,1029,948],{"href":1030},"\u002Fcomponents\u002Fbutton\u002F#slots"," component has a default slot:",[903,1033,1035],{"name":1034},"Default slot example 1",[71,1036,1037],{},"Log in",[14,1039,1040,1041,1045],{},"In the above example the text \"Log in\" is placed into the Button's default slot. You can also place elements inside the default slot, as can be seen here with the ",[21,1042,1044],{"href":1043},"\u002Fcomponents\u002Fcard\u002F","Card"," component:",[903,1047,1049],{"name":1048},"Default slot example 2",[1050,1051,1052,1053],"nord-card",{},"  ",[14,1054,1055],{},"Hello world",[14,1057,1058,1059,1062,1063,1066,1067,1070],{},"Some components also offer named slots. Slot names are decided by the components themselves. Named slots are used to differentiate certain types of content, giving components control over style and position. Here we use the ",[21,1060,948],{"href":1061},"\u002Fcomponents\u002Fbutton\u002F"," component's ",[95,1064,1065],{},"start"," slot to position an icon. Notice the ",[95,1068,1069],{},"slot=\"start\""," attribute:",[903,1072,1074],{"name":1073},"Named slot example 1",[71,1075,1077,1081],{"variant":1076},"danger",[1078,1079],"nord-icon",{"slot":1065,"name":1080},"interface-delete","\nDelete\n",[14,1083,1084],{},"Slotted elements can be placed anywhere inside a component. The component will always place it in the correct place internally. Therefore, the below example will produce the exact same result as above, despite the order being changed:",[903,1086,1088],{"name":1087},"Named slot example 2",[71,1089,1081,1090],{"variant":1076},[1078,1091],{"slot":1065,"name":1080},[351,1093,1094],{"variant":353},"\nRefer to a component's documentation for a complete list of available slots.\n",[76,1096],{},[378,1098,1100],{"id":1099},"composition","Composition",[14,1102,1103,1104,1108,1109,1113,1114,1118],{},"Composition is how we give you more flexibility and customisability. Rather than configuring a single element through a long list of properties, many of our presentational components are built to be assembled by nesting dedicated child components — for example ",[21,1105,1107],{"href":1106},"\u002Fcomponents\u002Faccordion\u002F","Accordion"," with its accordion items, ",[21,1110,1112],{"href":1111},"\u002Fcomponents\u002Fitem\u002F","Item"," with its media, content and action parts, or ",[21,1115,1117],{"href":1116},"\u002Fcomponents\u002Fpagination\u002F","Pagination"," with its links and controls:",[113,1120,1122],{"className":115,"code":1121,"language":117,"meta":118,"style":118},"\u003Cnord-item variant=\"outline\">\n  \u003Cnord-item-media variant=\"icon\">\n    \u003C!-- icon, avatar or image -->\n  \u003C\u002Fnord-item-media>\n  \u003Cnord-item-content>\n    \u003Cnord-item-title>Title\u003C\u002Fnord-item-title>\n    \u003Cnord-item-description>Secondary line of text.\u003C\u002Fnord-item-description>\n  \u003C\u002Fnord-item-content>\n  \u003Cnord-item-actions>\n    \u003C!-- buttons or a chevron -->\n  \u003C\u002Fnord-item-actions>\n\u003C\u002Fnord-item>\n",[95,1123,1124,1140,1156,1161,1169,1178,1192,1206,1214,1223,1228,1236],{"__ignoreMap":118},[122,1125,1126,1128,1131,1133,1135,1138],{"class":124,"line":125},[122,1127,146],{"class":128},[122,1129,1130],{"class":132},"nord-item",[122,1132,318],{"class":136},[122,1134,154],{"class":128},[122,1136,1137],{"class":157},"\"outline\"",[122,1139,140],{"class":128},[122,1141,1142,1144,1147,1149,1151,1154],{"class":124,"line":143},[122,1143,166],{"class":128},[122,1145,1146],{"class":132},"nord-item-media",[122,1148,318],{"class":136},[122,1150,154],{"class":128},[122,1152,1153],{"class":157},"\"icon\"",[122,1155,140],{"class":128},[122,1157,1158],{"class":124,"line":163},[122,1159,1160],{"class":454},"    \u003C!-- icon, avatar or image -->\n",[122,1162,1163,1165,1167],{"class":124,"line":174},[122,1164,294],{"class":128},[122,1166,1146],{"class":132},[122,1168,140],{"class":128},[122,1170,1171,1173,1176],{"class":124,"line":194},[122,1172,166],{"class":128},[122,1174,1175],{"class":132},"nord-item-content",[122,1177,140],{"class":128},[122,1179,1180,1182,1185,1188,1190],{"class":124,"line":219},[122,1181,177],{"class":128},[122,1183,1184],{"class":132},"nord-item-title",[122,1186,1187],{"class":128},">Title\u003C\u002F",[122,1189,1184],{"class":132},[122,1191,140],{"class":128},[122,1193,1194,1196,1199,1202,1204],{"class":124,"line":234},[122,1195,177],{"class":128},[122,1197,1198],{"class":132},"nord-item-description",[122,1200,1201],{"class":128},">Secondary line of text.\u003C\u002F",[122,1203,1198],{"class":132},[122,1205,140],{"class":128},[122,1207,1208,1210,1212],{"class":124,"line":260},[122,1209,294],{"class":128},[122,1211,1175],{"class":132},[122,1213,140],{"class":128},[122,1215,1216,1218,1221],{"class":124,"line":291},[122,1217,166],{"class":128},[122,1219,1220],{"class":132},"nord-item-actions",[122,1222,140],{"class":128},[122,1224,1225],{"class":124,"line":301},[122,1226,1227],{"class":454},"    \u003C!-- buttons or a chevron -->\n",[122,1229,1230,1232,1234],{"class":124,"line":311},[122,1231,294],{"class":128},[122,1233,1220],{"class":132},[122,1235,140],{"class":128},[122,1237,1238,1240,1242],{"class":124,"line":333},[122,1239,345],{"class":128},[122,1241,1130],{"class":132},[122,1243,140],{"class":128},[14,1245,1246],{},"Because these are real elements in your own markup, you can arrange, restyle and extend them, and interleave your own content — customisation that a single fixed element can't offer. This is the direction we favour for new presentational components.",[76,1248],{},[378,1250,1252],{"id":1251},"css-properties","CSS Properties",[14,1254,1255,1256,1259],{},"Our Web Components offer CSS Custom Properties to allow for fine grained control over their presentation. These aren't offered as an alternative to ",[21,1257,650],{"href":1258},"#properties",", you should use properties whenever possible, but more as an \"escape hatch\" for when a component needs to meet an edge case.",[14,1261,1262,1263,1266,1267,1271,1272,1275],{},"Component custom properties are prefixed with ",[95,1264,1265],{},"--n-"," followed by the name of the component and the property in question. For example consider this ",[21,1268,1270],{"href":1269},"\u002Fcomponents\u002Fbanner\u002F","Banner"," component that we want to add a ",[95,1273,1274],{},"box-shadow"," to:",[903,1277,1279],{"name":1278},"CSS Custom Property example 1",[977,1280,1281,1284],{},[351,1282,1283],{"variant":353},"\nDefault banner presentation\n",[351,1285,1287],{"variant":353,"style":1286},"--n-banner-box-shadow: var(--n-box-shadow)","\nBanner with box-shadow added\n",[14,1289,1290,1291,1294],{},"Custom properties are inheritable as well which means they can be applied to any parent, or even the ",[95,1292,1293],{},":root"," element, and their respective component will inherit the value(s).",[903,1296,1298,1310],{"name":1297},"CSS Custom Property example 2",[977,1299,1302,1306,1308],{"className":1300},[1301],"custom-property-banners",[351,1303,1305],{"variant":1304},"info","\nExample banner\n",[351,1307,1305],{"variant":353},[351,1309,1305],{"variant":1076},[1311,1312,1313],"style",{},"\n  .custom-property-banners {\n    --n-banner-box-shadow: var(--n-box-shadow);\n  }\n",[14,1315,1316,1317,1321],{},"You can see all the available custom properties for the Banner component on ",[21,1318,1320],{"href":1319},"\u002Fcomponents\u002Fbanner\u002F?example=inside+card#css-properties","its respective docs page",". Custom properties differ from component to component, refer to the component's documentation for a complete list of available custom properties.",[351,1323,1324,1325,1328],{"variant":353},"\nAlways use a component's properties over a CSS custom property wherever possible. CSS Custom properties are built with a counterpart \"private\" property, prefixed with \n",[95,1326,1327],{},"\n--_n-\n","\n. Please refrain from using private properties as they are always subject to change and intended for internal component use only.\n",[76,1330],{},[378,1332,1334],{"id":1333},"themes","Themes",[14,1336,1337,1338,1340,1341,1343,1344,1347,1348,1353],{},"We offer light and dark ",[21,1339,1333],{"href":398}," for components in addition to high contrast variants. Themes operate at a global level, rather than per component. The ",[21,1342,92],{"href":91}," includes the light theme by default. For theme specific documentation, please see ",[21,1345,1346],{"href":398},"themes documentation",". Make sure to try ",[21,1349,1352],{"href":1350,"target":1351},"\u002Ftheme-builder\u002F","_blank","theme builder"," as well to get familiar with theming and how to customize it.",[113,1355,1357],{"className":445,"code":1356,"language":447,"meta":118,"style":118},"# Install themes using NPM\nnpm install @nordhealth\u002Fthemes --save\n\n# Install themes using Yarn\nyarn add @nordhealth\u002Fthemes\n",[95,1358,1359,1364,1374,1378,1383],{"__ignoreMap":118},[122,1360,1361],{"class":124,"line":125},[122,1362,1363],{"class":454},"# Install themes using NPM\n",[122,1365,1366,1368,1370,1372],{"class":124,"line":143},[122,1367,460],{"class":136},[122,1369,463],{"class":157},[122,1371,552],{"class":157},[122,1373,473],{"class":472},[122,1375,1376],{"class":124,"line":163},[122,1377,479],{"emptyLinePlaceholder":478},[122,1379,1380],{"class":124,"line":174},[122,1381,1382],{"class":454},"# Install themes using Yarn\n",[122,1384,1385,1387,1389],{"class":124,"line":194},[122,1386,489],{"class":136},[122,1388,492],{"class":157},[122,1390,571],{"class":157},[977,1392,1393,1403],{},[21,1394,1395],{"href":398},[1396,1397],"img",{"src":1398,"style":1399,"height":1400,"width":1401,"alt":1402},"\u002Fimg\u002Fthemes.png","margin: 2rem 0 0;",443,1500,"Nord Themes",[71,1404,1406],{"variant":1405,"href":398},"primary","\n  Themes documentation\n",[76,1408],{},[378,1410,1412],{"id":1411},"waiting-for-components-to-load","Waiting for components to load",[14,1414,1415],{},"Web Components are entirely self-contained (both styles and behavior), and can be loaded\u002Fdefined asynchronously. Therefore a component may not be ready for use immediately.",[14,1417,1418,1419,1424,1425,1429],{},"When a component is loading, it should be hidden from view to avoid a Flash Of Un-styled Component (see ",[21,1420,1423],{"href":1421,"rel":1422},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFlash_of_unstyled_content",[25],"FOUC","). Our CSS framework will do this for you, as long as it is loaded ",[1426,1427,1428],"em",{},"before"," the components.",[14,1431,1432,1433,1436],{},"If you set a property\u002Fattribute on a custom element before it's loaded, it will be applied correctly and will use the values once it's loaded. However, you ",[1426,1434,1435],{},"cannot"," call a method on a component before the component is loaded.",[14,1438,1439,1440,1447],{},"Most of the time this is not an issue, as you will be calling methods in event handlers etc, when the component has already loaded. In cases where you want to call a method as soon as possible, for example on page load, you need to wait for the component to be defined, using ",[21,1441,1444],{"href":1442,"rel":1443},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCustomElementRegistry\u002FwhenDefined",[25],[95,1445,1446],{},"customElements.whenDefined",":",[903,1449,1451,1455],{"name":1450},"Waiting for component to load",[984,1452],{"id":1453,"label":1454},"loading-example","Enter date",[265,1456,1457],{"type":912},"\n  const picker = document.querySelector(\"#loading-example\")\n\n  \u002F\u002F It's fine to set properties while components are still loading\n  picker.isDateDisabled = function isWeekend(date) {\n    return date.getDay() === 0 || date.getDay() === 6\n  }\n\n  \u002F\u002F but if you want to immediately call a method,\n  \u002F\u002F you should wait for the component to be defined\n  await customElements.whenDefined(\"nord-date-picker\")\n  picker.click()\n",[76,1459],{},[378,1461,1463],{"id":1462},"code-completion-for-vs-code","Code completion for VS Code",[14,1465,1466],{},"We generate TypeScript type definitions for all our Web Components. This will allow VS Code, and other editors, to offer code completion and type information for properties and methods, whether using TypeScript or not.",[14,1468,1469,1470,44,1473,35],{},"Refer to our specific instructions for ",[21,1471,43],{"href":1472},"#types-and-editor-integration-with-react",[21,1474,49],{"href":1475},"#types-and-editor-integration-with-vue",[76,1477],{},[378,1479,1481],{"id":1480},"form-controls","Form controls",[14,1483,1484,1485,1487,1488,1490,1491,998,1494,35],{},"All our input components raise ",[95,1486,890],{}," events, and where it makes sense ",[95,1489,894],{}," events. These are useful for client-side validation, or for gathering values in javascript-based apps like with ",[21,1492,49],{"href":1493},"#vue",[21,1495,43],{"href":1496},"#react",[14,1498,1499,1500,1503,1504,1508,1509,1511],{},"Data inputs take a different approach to composition: they are standalone by default. A single element such as ",[21,1501,886],{"href":1502},"\u002Fcomponents\u002Finput\u002F"," bundles its label, hint and error message, so the common case works with no extra markup. When you need more control over layout, you can opt out of this built-in chrome and compose the parts yourself — place the control inside a ",[21,1505,1507],{"href":1506},"\u002Fcomponents\u002Ffield\u002F","Field",", which supplies the label, helper text and error, or hide individual parts with attributes like ",[95,1510,828],{},". Convenient by default, composable when you need it.",[903,1513,1515,1538],{"name":1514},"Form control events",[1516,1517,1519,1520],"form",{"id":1518},"form-events-example","\n  ",[977,1521,1522,1523,1522,1527,1522,1531,1522,1535,1519],{},"\n    ",[846,1524],{"label":1525,"name":1526},"First name","firstName",[846,1528],{"label":1529,"name":1530},"Last name","lastName",[71,1532,1534],{"variant":1405,"type":1533},"submit","Submit",[1536,1537],"output",{},[265,1539,1540],{"type":912},"\n  const data = {}\n  const form = document.querySelector(\"#form-events-example\")\n  const output = form.querySelector(\"output\")\n\n  \u002F\u002F Input events bubbling up from input components\n  form.addEventListener(\"input\", e => {\n    data[e.target.name] = e.target.value\n  })\n\n  form.addEventListener(\"submit\", e=> {\n    e.preventDefault()\n    output.innerHTML = `\u003Ccode>${JSON.stringify(data)}\u003C\u002Fcode>`\n  })\n",[14,1542,1543,1544,1551],{},"For server-rendered apps, our components hook into the browser's ",[21,1545,1548],{"href":1546,"rel":1547},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLFormElement\u002Fformdata_event",[25],[95,1549,1550],{},"formdata"," event, which means that our components' values will be submitted as part of POST\u002FGET traditional form submissions, like native HTML elements:",[903,1553,1555,1568],{"name":1554},"Traditional form submissions",[1516,1556,1519,1558],{"id":1557},"form-submission-example",[977,1559,1522,1560,1522,1562,1522,1564,1522,1566,1519],{},[846,1561],{"label":1525,"name":1526},[846,1563],{"label":1529,"name":1530},[71,1565,1534],{"variant":1405,"type":1533},[1536,1567],{},[265,1569,1570],{"type":912},"\n  const form = document.querySelector(\"#form-submission-example\")\n  const output = form.querySelector(\"output\")\n\n  const url = new URL(location.href)\n\n  if (url.searchParams) {\n    output.innerHTML = `\u003Ccode>${url.searchParams}\u003C\u002Fcode>`\n  }\n",[14,1572,1573,1574,1581],{},"The browser's built-in ",[21,1575,1578],{"href":1576,"rel":1577},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FFormData",[25],[95,1579,1580],{},"FormData"," object can also be used to get all values from a form via JavaScript:",[903,1583,1585,1598],{"name":1584},"FormData object",[1516,1586,1519,1588],{"id":1587},"form-data-example",[977,1589,1522,1590,1522,1592,1522,1594,1522,1596,1519],{},[846,1591],{"label":1525,"name":1526},[846,1593],{"label":1529,"name":1530},[71,1595,1534],{"variant":1405,"type":1533},[1536,1597],{},[265,1599,1600],{"type":912},"\n  const form = document.querySelector(\"#form-data-example\")\n  const output = form.querySelector(\"output\")\n\n  form.addEventListener(\"submit\", e => {\n    e.preventDefault()\n    const data = new FormData(form)\n\n    \u002F\u002F This is an example, refer to MDN for more info about FormData.\n    output.innerHTML = `\u003Ccode>${JSON.stringify(Object.fromEntries(data))}\u003C\u002Fcode>`\n  })\n",[76,1602],{},[378,1604,1606],{"id":1605},"localization","Localization",[14,1608,1609,1610,1613],{},"Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For example, the label on an ",[21,1611,886],{"href":1612},"\u002Fcomponents\u002Finput"," will likely be changed every time you use it. Those cases are an app-level concern.",[14,1615,1616,1617,1621,1622,35],{},"However, some components have text which has no reason to change per instance. For example, the usage instructions in the footer of the ",[21,1618,1620],{"href":1619},"\u002Fcomponents\u002Fcommand-menu\u002F","Command menu",", or the accessible labels for next\u002Fprevious month buttons of the ",[21,1623,1625],{"href":1624},"\u002Fcomponents\u002Fcalendar\u002F","Calendar",[14,1627,1628,1629,35],{},"For the latter cases, we provide a localization mechanism. It is not possible or feasible for Nord to anticipate every locale in which the components might be consumed, so we rely on individual teams and applications to translate and configure localization. To ensure Nord components work out of the box, we bundle translations for ",[95,1630,1631],{},"en-US",[71,1633,1635],{"variant":1405,"href":1634},"\u002Fdocs\u002Fdeveloper\u002Flocalization\u002F","\n  View localization documentation\n",[76,1637],{},[79,1639,43],{"id":1640},"react",[14,1642,1643,1644,1649,1650,1654],{},"As of version 19, React has ",[21,1645,1648],{"href":1646,"rel":1647},"https:\u002F\u002Fcustom-elements-everywhere.com\u002F#react",[25],"excellent support"," for Web Components. They can now be used directly, with no ",[21,1651,1653],{"href":1652},"#react-wrappers","wrappers"," or setup necessary.",[71,1656,1519,1658,1661],{"variant":1405,"href":1657,"target":1351},"https:\u002F\u002Fgithub.com\u002Fnordhealth\u002Freact-example-project",[1078,1659],{"name":1660,"slot":1065},"generic-github","\n  View example React project\n",[68,1663],{},[378,1665,365],{"id":1666},"installation-1",[14,1668,1669],{},"Install with npm:",[113,1671,1673],{"className":445,"code":1672,"language":447,"meta":118,"style":118},"npm install @nordhealth\u002Fcomponents @nordhealth\u002Fcss --save\n",[95,1674,1675],{"__ignoreMap":118},[122,1676,1677,1679,1681,1683,1685],{"class":124,"line":125},[122,1678,460],{"class":136},[122,1680,463],{"class":157},[122,1682,469],{"class":157},[122,1684,466],{"class":157},[122,1686,473],{"class":472},[14,1688,1689],{},"or yarn:",[113,1691,1693],{"className":445,"code":1692,"language":447,"meta":118,"style":118},"yarn add @nordhealth\u002Fcomponents @nordhealth\u002Fcss\n",[95,1694,1695],{"__ignoreMap":118},[122,1696,1697,1699,1701,1703],{"class":124,"line":125},[122,1698,489],{"class":136},[122,1700,492],{"class":157},[122,1702,469],{"class":157},[122,1704,1705],{"class":157}," @nordhealth\u002Fcss\n",[378,1707,647],{"id":1708},"usage-1",[14,1710,1711,1712,44,1715,1718],{},"Import the ",[95,1713,1714],{},"@nordhealth\u002Fcomponents",[95,1716,1717],{},"@nordhealth\u002Fcss"," packages in your main entry point:",[113,1720,1724],{"className":1721,"code":1722,"language":1723,"meta":118,"style":118},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F main.jsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport App from '.\u002FApp.jsx'\nimport '.\u002Findex.css'\n\nimport '@nordhealth\u002Fcss'\nimport '@nordhealth\u002Fcomponents'\n\ncreateRoot(document.getElementById('root')).render(\n  \u003CStrictMode>\n    \u003CApp \u002F>\n  \u003C\u002FStrictMode>\n)\n","jsx",[95,1725,1726,1731,1736,1741,1746,1751,1755,1760,1764,1768,1773,1778,1783,1788],{"__ignoreMap":118},[122,1727,1728],{"class":124,"line":125},[122,1729,1730],{},"\u002F\u002F main.jsx\n",[122,1732,1733],{"class":124,"line":143},[122,1734,1735],{},"import { StrictMode } from 'react'\n",[122,1737,1738],{"class":124,"line":163},[122,1739,1740],{},"import { createRoot } from 'react-dom\u002Fclient'\n",[122,1742,1743],{"class":124,"line":174},[122,1744,1745],{},"import App from '.\u002FApp.jsx'\n",[122,1747,1748],{"class":124,"line":194},[122,1749,1750],{},"import '.\u002Findex.css'\n",[122,1752,1753],{"class":124,"line":219},[122,1754,479],{"emptyLinePlaceholder":478},[122,1756,1757],{"class":124,"line":234},[122,1758,1759],{},"import '@nordhealth\u002Fcss'\n",[122,1761,1762],{"class":124,"line":260},[122,1763,585],{},[122,1765,1766],{"class":124,"line":291},[122,1767,479],{"emptyLinePlaceholder":478},[122,1769,1770],{"class":124,"line":301},[122,1771,1772],{},"createRoot(document.getElementById('root')).render(\n",[122,1774,1775],{"class":124,"line":311},[122,1776,1777],{},"  \u003CStrictMode>\n",[122,1779,1780],{"class":124,"line":333},[122,1781,1782],{},"    \u003CApp \u002F>\n",[122,1784,1785],{"class":124,"line":342},[122,1786,1787],{},"  \u003C\u002FStrictMode>\n",[122,1789,1791],{"class":124,"line":1790},14,[122,1792,726],{},[14,1794,1795],{},"Then you can use the Nord's components throughout your app. For instance, here is an example using a JSX component:",[113,1797,1799],{"className":584,"code":1798,"language":586,"meta":118,"style":118},"import { useState } from 'react'\n\nfunction CounterButton() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003C>\n      \u003Cnord-button variant=\"primary\" onClick={() => setCount(count + 1)}>\n        Clicks:\n        {' '}\n        {count}\n      \u003C\u002Fnord-button>\n    \u003C\u002F>\n  )\n}\n\nexport default CounterButton\n",[95,1800,1801,1814,1818,1829,1859,1863,1871,1876,1915,1920,1931,1936,1945,1950,1955,1960,1965],{"__ignoreMap":118},[122,1802,1803,1805,1808,1811],{"class":124,"line":125},[122,1804,594],{"class":593},[122,1806,1807],{"class":128}," { useState } ",[122,1809,1810],{"class":593},"from",[122,1812,1813],{"class":157}," 'react'\n",[122,1815,1816],{"class":124,"line":143},[122,1817,479],{"emptyLinePlaceholder":478},[122,1819,1820,1823,1826],{"class":124,"line":163},[122,1821,1822],{"class":593},"function",[122,1824,1825],{"class":136}," CounterButton",[122,1827,1828],{"class":128},"() {\n",[122,1830,1831,1833,1836,1839,1841,1844,1847,1849,1852,1854,1857],{"class":124,"line":174},[122,1832,705],{"class":593},[122,1834,1835],{"class":128}," [",[122,1837,1838],{"class":472},"count",[122,1840,891],{"class":128},[122,1842,1843],{"class":472},"setCount",[122,1845,1846],{"class":128},"] ",[122,1848,154],{"class":593},[122,1850,1851],{"class":136}," useState",[122,1853,720],{"class":128},[122,1855,1856],{"class":472},"0",[122,1858,726],{"class":128},[122,1860,1861],{"class":124,"line":194},[122,1862,479],{"emptyLinePlaceholder":478},[122,1864,1865,1868],{"class":124,"line":219},[122,1866,1867],{"class":593},"  return",[122,1869,1870],{"class":128}," (\n",[122,1872,1873],{"class":124,"line":234},[122,1874,1875],{"class":128},"    \u003C>\n",[122,1877,1878,1881,1883,1885,1887,1889,1892,1894,1897,1900,1903,1906,1909,1912],{"class":124,"line":260},[122,1879,1880],{"class":128},"      \u003C",[122,1882,71],{"class":472},[122,1884,318],{"class":136},[122,1886,154],{"class":593},[122,1888,323],{"class":157},[122,1890,1891],{"class":136}," onClick",[122,1893,154],{"class":593},[122,1895,1896],{"class":128},"{() ",[122,1898,1899],{"class":593},"=>",[122,1901,1902],{"class":136}," setCount",[122,1904,1905],{"class":128},"(count ",[122,1907,1908],{"class":593},"+",[122,1910,1911],{"class":472}," 1",[122,1913,1914],{"class":128},")}>\n",[122,1916,1917],{"class":124,"line":291},[122,1918,1919],{"class":128},"        Clicks:\n",[122,1921,1922,1925,1928],{"class":124,"line":301},[122,1923,1924],{"class":128},"        {",[122,1926,1927],{"class":157},"' '",[122,1929,1930],{"class":128},"}\n",[122,1932,1933],{"class":124,"line":311},[122,1934,1935],{"class":128},"        {count}\n",[122,1937,1938,1941,1943],{"class":124,"line":333},[122,1939,1940],{"class":128},"      \u003C\u002F",[122,1942,71],{"class":472},[122,1944,140],{"class":128},[122,1946,1947],{"class":124,"line":342},[122,1948,1949],{"class":128},"    \u003C\u002F>\n",[122,1951,1952],{"class":124,"line":1790},[122,1953,1954],{"class":128},"  )\n",[122,1956,1958],{"class":124,"line":1957},15,[122,1959,1930],{"class":128},[122,1961,1963],{"class":124,"line":1962},16,[122,1964,479],{"emptyLinePlaceholder":478},[122,1966,1968,1971,1974],{"class":124,"line":1967},17,[122,1969,1970],{"class":593},"export",[122,1972,1973],{"class":593}," default",[122,1975,1976],{"class":128}," CounterButton\n",[14,1978,1979,1980,1982],{},"For optimal tree shaking, don't import the ",[95,1981,1714],{}," package in the main entry point. Instead, import the specific Nord components you're using in each component. For example:",[113,1984,1986],{"className":584,"code":1985,"language":586,"meta":118,"style":118},"import { useState } from 'react'\nimport '@nordhealth\u002Fcomponents\u002Flib\u002FButton'\n\nfunction CounterButton() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003C>\n      \u003Cnord-button variant=\"primary\" onClick={() => setCount(count + 1)}>\n        Clicks:\n        {' '}\n        {count}\n      \u003C\u002Fnord-button>\n    \u003C\u002F>\n  )\n}\n\nexport default CounterButton\n",[95,1987,1988,1998,2004,2008,2016,2040,2044,2050,2054,2084,2088,2096,2100,2108,2112,2116,2120,2124],{"__ignoreMap":118},[122,1989,1990,1992,1994,1996],{"class":124,"line":125},[122,1991,594],{"class":593},[122,1993,1807],{"class":128},[122,1995,1810],{"class":593},[122,1997,1813],{"class":157},[122,1999,2000,2002],{"class":124,"line":143},[122,2001,594],{"class":593},[122,2003,619],{"class":157},[122,2005,2006],{"class":124,"line":163},[122,2007,479],{"emptyLinePlaceholder":478},[122,2009,2010,2012,2014],{"class":124,"line":174},[122,2011,1822],{"class":593},[122,2013,1825],{"class":136},[122,2015,1828],{"class":128},[122,2017,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038],{"class":124,"line":194},[122,2019,705],{"class":593},[122,2021,1835],{"class":128},[122,2023,1838],{"class":472},[122,2025,891],{"class":128},[122,2027,1843],{"class":472},[122,2029,1846],{"class":128},[122,2031,154],{"class":593},[122,2033,1851],{"class":136},[122,2035,720],{"class":128},[122,2037,1856],{"class":472},[122,2039,726],{"class":128},[122,2041,2042],{"class":124,"line":219},[122,2043,479],{"emptyLinePlaceholder":478},[122,2045,2046,2048],{"class":124,"line":234},[122,2047,1867],{"class":593},[122,2049,1870],{"class":128},[122,2051,2052],{"class":124,"line":260},[122,2053,1875],{"class":128},[122,2055,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082],{"class":124,"line":291},[122,2057,1880],{"class":128},[122,2059,71],{"class":472},[122,2061,318],{"class":136},[122,2063,154],{"class":593},[122,2065,323],{"class":157},[122,2067,1891],{"class":136},[122,2069,154],{"class":593},[122,2071,1896],{"class":128},[122,2073,1899],{"class":593},[122,2075,1902],{"class":136},[122,2077,1905],{"class":128},[122,2079,1908],{"class":593},[122,2081,1911],{"class":472},[122,2083,1914],{"class":128},[122,2085,2086],{"class":124,"line":301},[122,2087,1919],{"class":128},[122,2089,2090,2092,2094],{"class":124,"line":311},[122,2091,1924],{"class":128},[122,2093,1927],{"class":157},[122,2095,1930],{"class":128},[122,2097,2098],{"class":124,"line":333},[122,2099,1935],{"class":128},[122,2101,2102,2104,2106],{"class":124,"line":342},[122,2103,1940],{"class":128},[122,2105,71],{"class":472},[122,2107,140],{"class":128},[122,2109,2110],{"class":124,"line":1790},[122,2111,1949],{"class":128},[122,2113,2114],{"class":124,"line":1957},[122,2115,1954],{"class":128},[122,2117,2118],{"class":124,"line":1962},[122,2119,1930],{"class":128},[122,2121,2122],{"class":124,"line":1967},[122,2123,479],{"emptyLinePlaceholder":478},[122,2125,2127,2129,2131],{"class":124,"line":2126},18,[122,2128,1970],{"class":593},[122,2130,1973],{"class":593},[122,2132,1976],{"class":128},[14,2134,2135],{},"The following example shows how to use refs in a TypeScript application:",[113,2137,2141],{"className":2138,"code":2139,"language":2140,"meta":118,"style":118},"language-tsx shiki shiki-themes github-light github-dark","import type { Input } from '@nordhealth\u002Fcomponents'\nimport { useRef } from 'react'\n\nfunction FocusInput() {\n  const inputRef = useRef\u003CInput>(null)\n\n  return (\n    \u003C>\n      \u003Cnord-button onClick={() => inputRef.current?.focus()} variant=\"primary\">\n        Focus input\n      \u003C\u002Fnord-button>\n      \u003Cnord-input label=\"Name\" ref={inputRef}>\u003C\u002Fnord-input>\n    \u003C\u002F>\n  )\n}\n\nexport default FocusInput\n","tsx",[95,2142,2143,2148,2153,2157,2162,2167,2171,2176,2180,2185,2190,2195,2200,2204,2208,2212,2216],{"__ignoreMap":118},[122,2144,2145],{"class":124,"line":125},[122,2146,2147],{},"import type { Input } from '@nordhealth\u002Fcomponents'\n",[122,2149,2150],{"class":124,"line":143},[122,2151,2152],{},"import { useRef } from 'react'\n",[122,2154,2155],{"class":124,"line":163},[122,2156,479],{"emptyLinePlaceholder":478},[122,2158,2159],{"class":124,"line":174},[122,2160,2161],{},"function FocusInput() {\n",[122,2163,2164],{"class":124,"line":194},[122,2165,2166],{},"  const inputRef = useRef\u003CInput>(null)\n",[122,2168,2169],{"class":124,"line":219},[122,2170,479],{"emptyLinePlaceholder":478},[122,2172,2173],{"class":124,"line":234},[122,2174,2175],{},"  return (\n",[122,2177,2178],{"class":124,"line":260},[122,2179,1875],{},[122,2181,2182],{"class":124,"line":291},[122,2183,2184],{},"      \u003Cnord-button onClick={() => inputRef.current?.focus()} variant=\"primary\">\n",[122,2186,2187],{"class":124,"line":301},[122,2188,2189],{},"        Focus input\n",[122,2191,2192],{"class":124,"line":311},[122,2193,2194],{},"      \u003C\u002Fnord-button>\n",[122,2196,2197],{"class":124,"line":333},[122,2198,2199],{},"      \u003Cnord-input label=\"Name\" ref={inputRef}>\u003C\u002Fnord-input>\n",[122,2201,2202],{"class":124,"line":342},[122,2203,1949],{},[122,2205,2206],{"class":124,"line":1790},[122,2207,1954],{},[122,2209,2210],{"class":124,"line":1957},[122,2211,1930],{},[122,2213,2214],{"class":124,"line":1962},[122,2215,479],{"emptyLinePlaceholder":478},[122,2217,2218],{"class":124,"line":1967},[122,2219,2220],{},"export default FocusInput\n",[14,2222,2223,2224,2228,2229,2232,2233,2236,2237,2232,2240,2243,2244,2247,2248,1447],{},"React requires that event listeners for Web Components use the event name ",[2225,2226,2227],"strong",{},"verbatim",". For instance, if a Web Component has an event named ",[95,2230,2231],{},"exampleEvent",", you must listen for the ",[95,2234,2235],{},"onexampleEvent"," event. If a Web Component has an event named ",[95,2238,2239],{},"example-event",[95,2241,2242],{},"onexample-event"," event. This is unusual for React, which typically expects events to be like ",[95,2245,2246],{},"onExampleEvent",". For example, this is how you would listen to the ",[21,2249,2251,2254],{"href":2250},"\u002Fcomponents\u002Fcalendar#events",[95,2252,2253],{},"nord-focus-date"," event of the Calendar component",[113,2256,2258],{"className":584,"code":2257,"language":586,"meta":118,"style":118},"import { useState } from 'react'\n\nfunction Calendar() {\n  const [focusedDate, setFocusedDate] = useState('')\n\n  return (\n    \u003C>\n      \u003Cp>\n        Focused date:\n        {focusedDate}\n      \u003C\u002Fp>\n      \u003Cnord-calendar\n        onnord-focus-date={e =>\n          setFocusedDate(\n            e.date.toLocaleDateString('en', {\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n            })\n          )}\n      >\n      \u003C\u002Fnord-calendar>\n    \u003C\u002F>\n  )\n}\n\nexport default Calendar\n",[95,2259,2260,2270,2274,2283,2310,2314,2320,2324,2332,2337,2342,2350,2357,2373,2381,2397,2408,2418,2427,2433,2439,2445,2454,2459,2464,2469,2474],{"__ignoreMap":118},[122,2261,2262,2264,2266,2268],{"class":124,"line":125},[122,2263,594],{"class":593},[122,2265,1807],{"class":128},[122,2267,1810],{"class":593},[122,2269,1813],{"class":157},[122,2271,2272],{"class":124,"line":143},[122,2273,479],{"emptyLinePlaceholder":478},[122,2275,2276,2278,2281],{"class":124,"line":163},[122,2277,1822],{"class":593},[122,2279,2280],{"class":136}," Calendar",[122,2282,1828],{"class":128},[122,2284,2285,2287,2289,2292,2294,2297,2299,2301,2303,2305,2308],{"class":124,"line":174},[122,2286,705],{"class":593},[122,2288,1835],{"class":128},[122,2290,2291],{"class":472},"focusedDate",[122,2293,891],{"class":128},[122,2295,2296],{"class":472},"setFocusedDate",[122,2298,1846],{"class":128},[122,2300,154],{"class":593},[122,2302,1851],{"class":136},[122,2304,720],{"class":128},[122,2306,2307],{"class":157},"''",[122,2309,726],{"class":128},[122,2311,2312],{"class":124,"line":194},[122,2313,479],{"emptyLinePlaceholder":478},[122,2315,2316,2318],{"class":124,"line":219},[122,2317,1867],{"class":593},[122,2319,1870],{"class":128},[122,2321,2322],{"class":124,"line":234},[122,2323,1875],{"class":128},[122,2325,2326,2328,2330],{"class":124,"line":260},[122,2327,1880],{"class":128},[122,2329,14],{"class":132},[122,2331,140],{"class":128},[122,2333,2334],{"class":124,"line":291},[122,2335,2336],{"class":128},"        Focused date:\n",[122,2338,2339],{"class":124,"line":301},[122,2340,2341],{"class":128},"        {focusedDate}\n",[122,2343,2344,2346,2348],{"class":124,"line":311},[122,2345,1940],{"class":128},[122,2347,14],{"class":132},[122,2349,140],{"class":128},[122,2351,2352,2354],{"class":124,"line":333},[122,2353,1880],{"class":128},[122,2355,2356],{"class":472},"nord-calendar\n",[122,2358,2359,2362,2364,2367,2370],{"class":124,"line":342},[122,2360,2361],{"class":136},"        onnord-focus-date",[122,2363,154],{"class":593},[122,2365,2366],{"class":128},"{",[122,2368,2369],{"class":756},"e",[122,2371,2372],{"class":593}," =>\n",[122,2374,2375,2378],{"class":124,"line":1790},[122,2376,2377],{"class":136},"          setFocusedDate",[122,2379,2380],{"class":128},"(\n",[122,2382,2383,2386,2389,2391,2394],{"class":124,"line":1957},[122,2384,2385],{"class":128},"            e.date.",[122,2387,2388],{"class":136},"toLocaleDateString",[122,2390,720],{"class":128},[122,2392,2393],{"class":157},"'en'",[122,2395,2396],{"class":128},", {\n",[122,2398,2399,2402,2405],{"class":124,"line":1962},[122,2400,2401],{"class":128},"              year: ",[122,2403,2404],{"class":157},"'numeric'",[122,2406,2407],{"class":128},",\n",[122,2409,2410,2413,2416],{"class":124,"line":1967},[122,2411,2412],{"class":128},"              month: ",[122,2414,2415],{"class":157},"'long'",[122,2417,2407],{"class":128},[122,2419,2420,2423,2425],{"class":124,"line":2126},[122,2421,2422],{"class":128},"              day: ",[122,2424,2404],{"class":157},[122,2426,2407],{"class":128},[122,2428,2430],{"class":124,"line":2429},19,[122,2431,2432],{"class":128},"            })\n",[122,2434,2436],{"class":124,"line":2435},20,[122,2437,2438],{"class":128},"          )}\n",[122,2440,2442],{"class":124,"line":2441},21,[122,2443,2444],{"class":128},"      >\n",[122,2446,2448,2450,2452],{"class":124,"line":2447},22,[122,2449,1940],{"class":128},[122,2451,676],{"class":472},[122,2453,140],{"class":128},[122,2455,2457],{"class":124,"line":2456},23,[122,2458,1949],{"class":128},[122,2460,2462],{"class":124,"line":2461},24,[122,2463,1954],{"class":128},[122,2465,2467],{"class":124,"line":2466},25,[122,2468,1930],{"class":128},[122,2470,2472],{"class":124,"line":2471},26,[122,2473,479],{"emptyLinePlaceholder":478},[122,2475,2477,2479,2481],{"class":124,"line":2476},27,[122,2478,1970],{"class":593},[122,2480,1973],{"class":593},[122,2482,2483],{"class":128}," Calendar\n",[351,2485,2486,2487,2490,2491,2494],{"variant":353},"\nNote: For events that have the same name as a native event, you can still use the syntax you would expect. For example, \n",[95,2488,2489],{},"\nonChange\n","\n or \n",[95,2492,2493],{},"\nonInput\n","\n.\n",[378,2496,2498],{"id":2497},"types-and-editor-integration-with-react","Types and editor integration with React",[14,2500,2501],{},"Nord's components work out of the box with React, but they don't provide any TypeScript support or editor integration. To improve the developer experience, we offer React-specific types for our components. They allow you to get IntelliSense for Nord components in JSX. Both in TypeScript and JavaScript projects.",[14,2503,2504,2505,2507,2508,2511,2512,2515],{},"To integrate these into your project, install ",[95,2506,1714],{}," as you normally would. Then add the following to your ",[95,2509,2510],{},"tsconfig.json"," in a TypeScript project, or ",[95,2513,2514],{},"jsconfig.json"," in a JavaScript project:",[113,2517,2521],{"className":2518,"code":2519,"language":2520,"meta":118,"style":118},"language-json shiki shiki-themes github-light github-dark","{\n  \"compilerOptions\": {\n    \"types\": [\"@nordhealth\u002Fcomponents\u002Flib\u002Freact.d.ts\"]\n  }\n}\n","json",[95,2522,2523,2528,2536,2550,2554],{"__ignoreMap":118},[122,2524,2525],{"class":124,"line":125},[122,2526,2527],{"class":128},"{\n",[122,2529,2530,2533],{"class":124,"line":143},[122,2531,2532],{"class":472},"  \"compilerOptions\"",[122,2534,2535],{"class":128},": {\n",[122,2537,2538,2541,2544,2547],{"class":124,"line":163},[122,2539,2540],{"class":472},"    \"types\"",[122,2542,2543],{"class":128},": [",[122,2545,2546],{"class":157},"\"@nordhealth\u002Fcomponents\u002Flib\u002Freact.d.ts\"",[122,2548,2549],{"class":128},"]\n",[122,2551,2552],{"class":124,"line":174},[122,2553,799],{"class":128},[122,2555,2556],{"class":124,"line":194},[122,2557,1930],{"class":128},[14,2559,2560],{},"Now you should get full type support for Nord components in your React project. Including IntelliSense for Nord components in JSX.",[378,2562,2564],{"id":2563},"server-side-rendering-ssr-with-react","Server-side rendering (SSR) with React",[14,2566,2567,2568,2571],{},"Nord components can be imported in non-browser environments, for ",[1426,2569,2570],{},"shallowly"," rendering on the server (within Next.js, for example). That is, the Nord component's tag and attributes set via JSX will be rendered, but the component's shadow DOM with all the styles and HTML in it will not be rendered on the server.",[14,2573,2574,2575,2578],{},"You might get hydration mismatch errors for some components, since Nord components reflect default values for properties to attributes after being defined, and some render to the light DOM. You can resolve these hydration mismatch errors by disabling server-side rendering for the component, or by adding ",[95,2576,2577],{},"suppressHydrationWarning"," to the component.",[14,2580,2581,2582,2585],{},"If you are using Next.js App Router, you must make sure any Nord components you import are beyond the ",[95,2583,2584],{},"\"use client\";"," boundary.",[351,2587,2588],{"variant":353},"\nNote: we currently don't support server-side rendering of Nord components with the shadow DOM included.\n",[378,2590,2592],{"id":2591},"react-wrappers","React wrappers",[14,2594,2595,2596,2601,2602,2605],{},"Whilst React supports Web Components, they were very awkward to use as-is ",[21,2597,2600],{"href":2598,"rel":2599},"https:\u002F\u002Freact.dev\u002Fblog\u002F2024\u002F12\u002F05\u002Freact-19#support-for-custom-elements",[25],"before React 19",". For this reason, we provide React-specific wrapper components in the package ",[95,2603,2604],{},"@nordhealth\u002Freact",". This will allow you to use the Nord components as you would any other React component.",[351,2607,2608,2609,2611,2612,2614,2615,2617,2618,2620,2621,2623,2624,2494],{"variant":353},"\nNote: React 19 makes these wrapper components unnecessary, so the \n",[95,2610,2604],{},"\n package has been deprecated and will be removed in the next major release.\n\n",[68,2613],{},"\nFor now, \n",[95,2616,2604],{},"\n will continue to receive updates as its build is fully automated, but you should start planning on utilizing the \n",[95,2619,1714],{},"\n package directly where possible.\n\n",[68,2622],{},"\nTo continue having full type checking and auto-completion in your JSX, you can use \n",[21,2625,2626],{"href":1472},"the new type definition file for React",[14,2628,1669],{},[113,2630,2632],{"className":445,"code":2631,"language":447,"meta":118,"style":118},"npm install @nordhealth\u002Freact @nordhealth\u002Fcss --save\n",[95,2633,2634],{"__ignoreMap":118},[122,2635,2636,2638,2640,2643,2645],{"class":124,"line":125},[122,2637,460],{"class":136},[122,2639,463],{"class":157},[122,2641,2642],{"class":157}," @nordhealth\u002Freact",[122,2644,466],{"class":157},[122,2646,473],{"class":472},[14,2648,1689],{},[113,2650,2652],{"className":445,"code":2651,"language":447,"meta":118,"style":118},"yarn add @nordhealth\u002Freact @nordhealth\u002Fcss\n",[95,2653,2654],{"__ignoreMap":118},[122,2655,2656,2658,2660,2662],{"class":124,"line":125},[122,2657,489],{"class":136},[122,2659,492],{"class":157},[122,2661,2642],{"class":157},[122,2663,1705],{"class":157},[14,2665,2666,2667,2669,2670,2672],{},"You must import ",[95,2668,1717],{}," once in your main entry point, then import components from ",[95,2671,2604],{}," wherever they are needed:",[113,2674,2676],{"className":1721,"code":2675,"language":1723,"meta":118,"style":118},"import { Button } from '@nordhealth\u002Freact'\nimport { useState } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport '@nordhealth\u002Fcss'\n\nfunction App() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003CButton\n      variant=\"primary\"\n      onClick={() => setCount(count + 1)}\n    >\n      Clicks:\n      {' '}\n      {count}\n    \u003C\u002FButton>\n  )\n}\n\nconst root = createRoot(document.querySelector('#app'))\nroot.render(\u003CApp \u002F>)\n",[95,2677,2678,2683,2688,2692,2696,2700,2705,2710,2714,2718,2723,2728,2733,2738,2743,2748,2753,2758,2762,2766,2770,2775],{"__ignoreMap":118},[122,2679,2680],{"class":124,"line":125},[122,2681,2682],{},"import { Button } from '@nordhealth\u002Freact'\n",[122,2684,2685],{"class":124,"line":143},[122,2686,2687],{},"import { useState } from 'react'\n",[122,2689,2690],{"class":124,"line":163},[122,2691,1740],{},[122,2693,2694],{"class":124,"line":174},[122,2695,1759],{},[122,2697,2698],{"class":124,"line":194},[122,2699,479],{"emptyLinePlaceholder":478},[122,2701,2702],{"class":124,"line":219},[122,2703,2704],{},"function App() {\n",[122,2706,2707],{"class":124,"line":234},[122,2708,2709],{},"  const [count, setCount] = useState(0)\n",[122,2711,2712],{"class":124,"line":260},[122,2713,479],{"emptyLinePlaceholder":478},[122,2715,2716],{"class":124,"line":291},[122,2717,2175],{},[122,2719,2720],{"class":124,"line":301},[122,2721,2722],{},"    \u003CButton\n",[122,2724,2725],{"class":124,"line":311},[122,2726,2727],{},"      variant=\"primary\"\n",[122,2729,2730],{"class":124,"line":333},[122,2731,2732],{},"      onClick={() => setCount(count + 1)}\n",[122,2734,2735],{"class":124,"line":342},[122,2736,2737],{},"    >\n",[122,2739,2740],{"class":124,"line":1790},[122,2741,2742],{},"      Clicks:\n",[122,2744,2745],{"class":124,"line":1957},[122,2746,2747],{},"      {' '}\n",[122,2749,2750],{"class":124,"line":1962},[122,2751,2752],{},"      {count}\n",[122,2754,2755],{"class":124,"line":1967},[122,2756,2757],{},"    \u003C\u002FButton>\n",[122,2759,2760],{"class":124,"line":2126},[122,2761,1954],{},[122,2763,2764],{"class":124,"line":2429},[122,2765,1930],{},[122,2767,2768],{"class":124,"line":2435},[122,2769,479],{"emptyLinePlaceholder":478},[122,2771,2772],{"class":124,"line":2441},[122,2773,2774],{},"const root = createRoot(document.querySelector('#app'))\n",[122,2776,2777],{"class":124,"line":2447},[122,2778,2779],{},"root.render(\u003CApp \u002F>)\n",[14,2781,2782,2783,2786,2787,2789],{},"The React wrapper components forward their refs, so that you can get access to the underlying web component instance with ",[95,2784,2785],{},"useRef",". The ",[95,2788,2604],{}," package also exports types for all the Web Components for convenience.",[14,2791,2135],{},[113,2793,2795],{"className":2138,"code":2794,"language":2140,"meta":118,"style":118},"import type { InputWC } from '@nordhealth\u002Freact'\nimport { Button, Input } from '@nordhealth\u002Freact'\nimport { useRef } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport '@nordhealth\u002Fcss'\n\nfunction App() {\n  const inputRef = useRef\u003CInputWC>(null)\n\n  function handleClick() {\n    inputRef.current?.focus()\n  }\n\n  return (\n    \u003C>\n      \u003CButton variant=\"primary\" onClick={handleClick}>\n        Focus input\n      \u003C\u002FButton>\n      \u003CInput label=\"Name\" ref={inputRef} \u002F>\n    \u003C\u002F>\n  )\n}\n\nconst root = createRoot(document.querySelector('#app'))\nroot.render(\u003CApp \u002F>)\n",[95,2796,2797,2802,2807,2811,2815,2819,2823,2827,2832,2836,2841,2846,2850,2854,2858,2862,2867,2871,2876,2881,2885,2889,2893,2897,2901],{"__ignoreMap":118},[122,2798,2799],{"class":124,"line":125},[122,2800,2801],{},"import type { InputWC } from '@nordhealth\u002Freact'\n",[122,2803,2804],{"class":124,"line":143},[122,2805,2806],{},"import { Button, Input } from '@nordhealth\u002Freact'\n",[122,2808,2809],{"class":124,"line":163},[122,2810,2152],{},[122,2812,2813],{"class":124,"line":174},[122,2814,1740],{},[122,2816,2817],{"class":124,"line":194},[122,2818,1759],{},[122,2820,2821],{"class":124,"line":219},[122,2822,479],{"emptyLinePlaceholder":478},[122,2824,2825],{"class":124,"line":234},[122,2826,2704],{},[122,2828,2829],{"class":124,"line":260},[122,2830,2831],{},"  const inputRef = useRef\u003CInputWC>(null)\n",[122,2833,2834],{"class":124,"line":291},[122,2835,479],{"emptyLinePlaceholder":478},[122,2837,2838],{"class":124,"line":301},[122,2839,2840],{},"  function handleClick() {\n",[122,2842,2843],{"class":124,"line":311},[122,2844,2845],{},"    inputRef.current?.focus()\n",[122,2847,2848],{"class":124,"line":333},[122,2849,799],{},[122,2851,2852],{"class":124,"line":342},[122,2853,479],{"emptyLinePlaceholder":478},[122,2855,2856],{"class":124,"line":1790},[122,2857,2175],{},[122,2859,2860],{"class":124,"line":1957},[122,2861,1875],{},[122,2863,2864],{"class":124,"line":1962},[122,2865,2866],{},"      \u003CButton variant=\"primary\" onClick={handleClick}>\n",[122,2868,2869],{"class":124,"line":1967},[122,2870,2189],{},[122,2872,2873],{"class":124,"line":2126},[122,2874,2875],{},"      \u003C\u002FButton>\n",[122,2877,2878],{"class":124,"line":2429},[122,2879,2880],{},"      \u003CInput label=\"Name\" ref={inputRef} \u002F>\n",[122,2882,2883],{"class":124,"line":2435},[122,2884,1949],{},[122,2886,2887],{"class":124,"line":2441},[122,2888,1954],{},[122,2890,2891],{"class":124,"line":2447},[122,2892,1930],{},[122,2894,2895],{"class":124,"line":2456},[122,2896,479],{"emptyLinePlaceholder":478},[122,2898,2899],{"class":124,"line":2461},[122,2900,2774],{},[122,2902,2903],{"class":124,"line":2466},[122,2904,2779],{},[378,2906,2908],{"id":2907},"disabling-server-side-rendering-within-nextjs","Disabling server-side rendering within Next.js",[14,2910,2911],{},"If you are using the React wrapper components within Next.js, then the easiest way of disabling server-side rendering is by importing them from our Next.js specific integration:",[113,2913,2915],{"className":584,"code":2914,"language":586,"meta":118,"style":118},"\u002F\u002F instead of:\nimport { Button } from \"@nordhealth\u002Freact\"\n\n\u002F\u002F do this:\nimport { Button } from \"@nordhealth\u002Freact\u002Flib\u002Fnext.js\"\n",[95,2916,2917,2922,2934,2938,2943],{"__ignoreMap":118},[122,2918,2919],{"class":124,"line":125},[122,2920,2921],{"class":454},"\u002F\u002F instead of:\n",[122,2923,2924,2926,2929,2931],{"class":124,"line":143},[122,2925,594],{"class":593},[122,2927,2928],{"class":128}," { Button } ",[122,2930,1810],{"class":593},[122,2932,2933],{"class":157}," \"@nordhealth\u002Freact\"\n",[122,2935,2936],{"class":124,"line":163},[122,2937,479],{"emptyLinePlaceholder":478},[122,2939,2940],{"class":124,"line":174},[122,2941,2942],{"class":454},"\u002F\u002F do this:\n",[122,2944,2945,2947,2949,2951],{"class":124,"line":194},[122,2946,594],{"class":593},[122,2948,2928],{"class":128},[122,2950,1810],{"class":593},[122,2952,2953],{"class":157}," \"@nordhealth\u002Freact\u002Flib\u002Fnext.js\"\n",[14,2955,2956,2957,2968],{},"This creates ",[21,2958,2961,2962,2965,2966],{"href":2959,"rel":2960},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Foptimizing\u002Flazy-loading#skipping-ssr",[25],"dynamic imports with ",[95,2963,2964],{},"ssr"," set to ",[95,2967,813],{}," for you, so they only get loaded on the client side.",[14,2970,2581,2971,2585],{},[95,2972,2584],{},[351,2974,2975,2976,2978],{"variant":353},"\nNote: the \n",[95,2977,2604],{},"\n package (which includes the Next.js integration) has been deprecated and will be removed in the next major release.\n",[76,2980],{},[79,2982,49],{"id":2983},"vue",[14,2985,2986,2987,2991],{},"Vue has ",[21,2988,1648],{"href":2989,"rel":2990},"https:\u002F\u002Fcustom-elements-everywhere.com\u002F#vue",[25]," for Web Components out of the box, it only requires a little configuration.",[71,2993,1519,2995,2997],{"variant":1405,"href":2994,"target":1351},"https:\u002F\u002Fgithub.com\u002Fnordhealth\u002Fvue-example-project",[1078,2996],{"name":1660,"slot":1065},"\n  View example Vue project\n",[68,2999],{},[378,3001,365],{"id":3002},"installation-2",[14,3004,1669],{},[113,3006,3007],{"className":445,"code":1672,"language":447,"meta":118,"style":118},[95,3008,3009],{"__ignoreMap":118},[122,3010,3011,3013,3015,3017,3019],{"class":124,"line":125},[122,3012,460],{"class":136},[122,3014,463],{"class":157},[122,3016,469],{"class":157},[122,3018,466],{"class":157},[122,3020,473],{"class":472},[14,3022,1689],{},[113,3024,3025],{"className":445,"code":1692,"language":447,"meta":118,"style":118},[95,3026,3027],{"__ignoreMap":118},[122,3028,3029,3031,3033,3035],{"class":124,"line":125},[122,3030,489],{"class":136},[122,3032,492],{"class":157},[122,3034,469],{"class":157},[122,3036,1705],{"class":157},[378,3038,3040],{"id":3039},"configuration","Configuration",[14,3042,3043],{},"Vue needs to be configured to recognize Web Components. If you're using Vite, it can be done like this:",[113,3045,3047],{"className":584,"code":3046,"language":586,"meta":118,"style":118},"\u002F\u002F vite.config.js\nimport vue from '@vitejs\u002Fplugin-vue'\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          \u002F\u002F treat all tags with a dash as custom elements\n          isCustomElement: tag => tag.includes('-')\n        }\n      }\n    })\n  ]\n}\n",[95,3048,3049,3054,3066,3070,3079,3084,3092,3097,3102,3107,3134,3139,3144,3149,3154],{"__ignoreMap":118},[122,3050,3051],{"class":124,"line":125},[122,3052,3053],{"class":454},"\u002F\u002F vite.config.js\n",[122,3055,3056,3058,3061,3063],{"class":124,"line":143},[122,3057,594],{"class":593},[122,3059,3060],{"class":128}," vue ",[122,3062,1810],{"class":593},[122,3064,3065],{"class":157}," '@vitejs\u002Fplugin-vue'\n",[122,3067,3068],{"class":124,"line":163},[122,3069,479],{"emptyLinePlaceholder":478},[122,3071,3072,3074,3076],{"class":124,"line":174},[122,3073,1970],{"class":593},[122,3075,1973],{"class":593},[122,3077,3078],{"class":128}," {\n",[122,3080,3081],{"class":124,"line":194},[122,3082,3083],{"class":128},"  plugins: [\n",[122,3085,3086,3089],{"class":124,"line":219},[122,3087,3088],{"class":136},"    vue",[122,3090,3091],{"class":128},"({\n",[122,3093,3094],{"class":124,"line":234},[122,3095,3096],{"class":128},"      template: {\n",[122,3098,3099],{"class":124,"line":260},[122,3100,3101],{"class":128},"        compilerOptions: {\n",[122,3103,3104],{"class":124,"line":291},[122,3105,3106],{"class":454},"          \u002F\u002F treat all tags with a dash as custom elements\n",[122,3108,3109,3112,3115,3118,3121,3124,3127,3129,3132],{"class":124,"line":301},[122,3110,3111],{"class":136},"          isCustomElement",[122,3113,3114],{"class":128},": ",[122,3116,3117],{"class":756},"tag",[122,3119,3120],{"class":593}," =>",[122,3122,3123],{"class":128}," tag.",[122,3125,3126],{"class":136},"includes",[122,3128,720],{"class":128},[122,3130,3131],{"class":157},"'-'",[122,3133,726],{"class":128},[122,3135,3136],{"class":124,"line":311},[122,3137,3138],{"class":128},"        }\n",[122,3140,3141],{"class":124,"line":333},[122,3142,3143],{"class":128},"      }\n",[122,3145,3146],{"class":124,"line":342},[122,3147,3148],{"class":128},"    })\n",[122,3150,3151],{"class":124,"line":1790},[122,3152,3153],{"class":128},"  ]\n",[122,3155,3156],{"class":124,"line":1957},[122,3157,1930],{"class":128},[14,3159,3160,3161,35],{},"For more information, and how to configure for other setups (e.g. Vue CLI), please see the ",[21,3162,3165],{"href":3163,"rel":3164},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fextras\u002Fweb-components.html#using-custom-elements-in-vue",[25],"Vue docs",[378,3167,647],{"id":3168},"usage-2",[14,3170,1711,3171,44,3173,1718],{},[95,3172,1714],{},[95,3174,1717],{},[113,3176,3178],{"className":584,"code":3177,"language":586,"meta":118,"style":118},"import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\n\u002F\u002F main.js\nimport '@nordhealth\u002Fcss'\nimport '@nordhealth\u002Fcomponents'\n\ncreateApp(App).mount('#app')\n",[95,3179,3180,3192,3204,3208,3213,3220,3226,3230],{"__ignoreMap":118},[122,3181,3182,3184,3187,3189],{"class":124,"line":125},[122,3183,594],{"class":593},[122,3185,3186],{"class":128}," { createApp } ",[122,3188,1810],{"class":593},[122,3190,3191],{"class":157}," 'vue'\n",[122,3193,3194,3196,3199,3201],{"class":124,"line":143},[122,3195,594],{"class":593},[122,3197,3198],{"class":128}," App ",[122,3200,1810],{"class":593},[122,3202,3203],{"class":157}," '.\u002FApp.vue'\n",[122,3205,3206],{"class":124,"line":163},[122,3207,479],{"emptyLinePlaceholder":478},[122,3209,3210],{"class":124,"line":174},[122,3211,3212],{"class":454},"\u002F\u002F main.js\n",[122,3214,3215,3217],{"class":124,"line":194},[122,3216,594],{"class":593},[122,3218,3219],{"class":157}," '@nordhealth\u002Fcss'\n",[122,3221,3222,3224],{"class":124,"line":219},[122,3223,594],{"class":593},[122,3225,597],{"class":157},[122,3227,3228],{"class":124,"line":234},[122,3229,479],{"emptyLinePlaceholder":478},[122,3231,3232,3235,3238,3241,3243,3246],{"class":124,"line":260},[122,3233,3234],{"class":136},"createApp",[122,3236,3237],{"class":128},"(App).",[122,3239,3240],{"class":136},"mount",[122,3242,720],{"class":128},[122,3244,3245],{"class":157},"'#app'",[122,3247,726],{"class":128},[14,3249,3250],{},"Then you can use the Nord's components throughout your app. For instance, here is an example using a single-file component:",[113,3252,3254],{"className":115,"code":3253,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-button variant=\"primary\" @click=\"count++\"> Count is: {{ count }} \u003C\u002Fnord-button>\n\u003C\u002Ftemplate>\n",[95,3255,3256,3267,3279,3283,3301,3309,3313,3322,3349],{"__ignoreMap":118},[122,3257,3258,3260,3262,3265],{"class":124,"line":125},[122,3259,146],{"class":128},[122,3261,265],{"class":132},[122,3263,3264],{"class":136}," setup",[122,3266,140],{"class":128},[122,3268,3269,3272,3275,3277],{"class":124,"line":143},[122,3270,3271],{"class":593},"  import",[122,3273,3274],{"class":128}," { ref } ",[122,3276,1810],{"class":593},[122,3278,3191],{"class":157},[122,3280,3281],{"class":124,"line":163},[122,3282,479],{"emptyLinePlaceholder":478},[122,3284,3285,3287,3290,3292,3295,3297,3299],{"class":124,"line":174},[122,3286,705],{"class":593},[122,3288,3289],{"class":472}," count",[122,3291,711],{"class":593},[122,3293,3294],{"class":136}," ref",[122,3296,720],{"class":128},[122,3298,1856],{"class":472},[122,3300,726],{"class":128},[122,3302,3303,3305,3307],{"class":124,"line":194},[122,3304,345],{"class":128},[122,3306,265],{"class":132},[122,3308,140],{"class":128},[122,3310,3311],{"class":124,"line":219},[122,3312,479],{"emptyLinePlaceholder":478},[122,3314,3315,3317,3320],{"class":124,"line":234},[122,3316,146],{"class":128},[122,3318,3319],{"class":132},"template",[122,3321,140],{"class":128},[122,3323,3324,3326,3328,3330,3332,3334,3337,3339,3342,3345,3347],{"class":124,"line":260},[122,3325,166],{"class":128},[122,3327,71],{"class":132},[122,3329,318],{"class":136},[122,3331,154],{"class":128},[122,3333,323],{"class":157},[122,3335,3336],{"class":136}," @click",[122,3338,154],{"class":128},[122,3340,3341],{"class":157},"\"count++\"",[122,3343,3344],{"class":128},"> Count is: {{ count }} \u003C\u002F",[122,3346,71],{"class":132},[122,3348,140],{"class":128},[122,3350,3351,3353,3355],{"class":124,"line":291},[122,3352,345],{"class":128},[122,3354,3319],{"class":132},[122,3356,140],{"class":128},[14,3358,1979,3359,1982],{},[95,3360,1714],{},[113,3362,3364],{"className":115,"code":3363,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  import { ref } from 'vue'\n  import '@nordhealth\u002Fcomponents\u002Flib\u002FButton'\n\n  const count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-button variant=\"primary\" @click=\"count++\"> Count is: {{ count }} \u003C\u002Fnord-button>\n\u003C\u002Ftemplate>\n",[95,3365,3366,3376,3386,3392,3396,3412,3420,3424,3432,3456],{"__ignoreMap":118},[122,3367,3368,3370,3372,3374],{"class":124,"line":125},[122,3369,146],{"class":128},[122,3371,265],{"class":132},[122,3373,3264],{"class":136},[122,3375,140],{"class":128},[122,3377,3378,3380,3382,3384],{"class":124,"line":143},[122,3379,3271],{"class":593},[122,3381,3274],{"class":128},[122,3383,1810],{"class":593},[122,3385,3191],{"class":157},[122,3387,3388,3390],{"class":124,"line":163},[122,3389,3271],{"class":593},[122,3391,619],{"class":157},[122,3393,3394],{"class":124,"line":174},[122,3395,479],{"emptyLinePlaceholder":478},[122,3397,3398,3400,3402,3404,3406,3408,3410],{"class":124,"line":194},[122,3399,705],{"class":593},[122,3401,3289],{"class":472},[122,3403,711],{"class":593},[122,3405,3294],{"class":136},[122,3407,720],{"class":128},[122,3409,1856],{"class":472},[122,3411,726],{"class":128},[122,3413,3414,3416,3418],{"class":124,"line":219},[122,3415,345],{"class":128},[122,3417,265],{"class":132},[122,3419,140],{"class":128},[122,3421,3422],{"class":124,"line":234},[122,3423,479],{"emptyLinePlaceholder":478},[122,3425,3426,3428,3430],{"class":124,"line":260},[122,3427,146],{"class":128},[122,3429,3319],{"class":132},[122,3431,140],{"class":128},[122,3433,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454],{"class":124,"line":291},[122,3435,166],{"class":128},[122,3437,71],{"class":132},[122,3439,318],{"class":136},[122,3441,154],{"class":128},[122,3443,323],{"class":157},[122,3445,3336],{"class":136},[122,3447,154],{"class":128},[122,3449,3341],{"class":157},[122,3451,3344],{"class":128},[122,3453,71],{"class":132},[122,3455,140],{"class":128},[122,3457,3458,3460,3462],{"class":124,"line":301},[122,3459,345],{"class":128},[122,3461,3319],{"class":132},[122,3463,140],{"class":128},[14,3465,3466,3467,3474],{},"Our components also support the ",[21,3468,3471],{"href":3469,"rel":3470},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fbuilt-in-directives.html#v-model",[25],[95,3472,3473],{},"v-model"," directive for two-way data binding:",[113,3476,3478],{"className":115,"code":3477,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const name = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-input v-model=\"name\" label=\"Name\">\u003C\u002Fnord-input>\n  \u003Coutput>{{ name }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n",[95,3479,3480,3490,3500,3504,3520,3528,3532,3540,3566,3579],{"__ignoreMap":118},[122,3481,3482,3484,3486,3488],{"class":124,"line":125},[122,3483,146],{"class":128},[122,3485,265],{"class":132},[122,3487,3264],{"class":136},[122,3489,140],{"class":128},[122,3491,3492,3494,3496,3498],{"class":124,"line":143},[122,3493,3271],{"class":593},[122,3495,3274],{"class":128},[122,3497,1810],{"class":593},[122,3499,3191],{"class":157},[122,3501,3502],{"class":124,"line":163},[122,3503,479],{"emptyLinePlaceholder":478},[122,3505,3506,3508,3510,3512,3514,3516,3518],{"class":124,"line":174},[122,3507,705],{"class":593},[122,3509,201],{"class":472},[122,3511,711],{"class":593},[122,3513,3294],{"class":136},[122,3515,720],{"class":128},[122,3517,2307],{"class":157},[122,3519,726],{"class":128},[122,3521,3522,3524,3526],{"class":124,"line":194},[122,3523,345],{"class":128},[122,3525,265],{"class":132},[122,3527,140],{"class":128},[122,3529,3530],{"class":124,"line":219},[122,3531,479],{"emptyLinePlaceholder":478},[122,3533,3534,3536,3538],{"class":124,"line":234},[122,3535,146],{"class":128},[122,3537,3319],{"class":132},[122,3539,140],{"class":128},[122,3541,3542,3544,3546,3549,3551,3554,3556,3558,3560,3562,3564],{"class":124,"line":260},[122,3543,166],{"class":128},[122,3545,846],{"class":132},[122,3547,3548],{"class":136}," v-model",[122,3550,154],{"class":128},[122,3552,3553],{"class":157},"\"name\"",[122,3555,849],{"class":136},[122,3557,154],{"class":128},[122,3559,854],{"class":157},[122,3561,284],{"class":128},[122,3563,846],{"class":132},[122,3565,140],{"class":128},[122,3567,3568,3570,3572,3575,3577],{"class":124,"line":291},[122,3569,166],{"class":128},[122,3571,1536],{"class":132},[122,3573,3574],{"class":128},">{{ name }}\u003C\u002F",[122,3576,1536],{"class":132},[122,3578,140],{"class":128},[122,3580,3581,3583,3585],{"class":124,"line":301},[122,3582,345],{"class":128},[122,3584,3319],{"class":132},[122,3586,140],{"class":128},[14,3588,3589,3590,891,3594,956,3598,3602,3603,3606,3607,3612,3613,3616,3617,3620],{},"However, for our ",[21,3591,3593],{"href":3592},"\u002Fcomponents\u002Fcheckbox\u002F","Checkbox",[21,3595,3597],{"href":3596},"\u002Fcomponents\u002Ftoggle\u002F","Toggle",[21,3599,3601],{"href":3600},"\u002Fcomponents\u002Ftag\u002F","Tag"," components you need to add ",[95,3604,3605],{},"type=\"checkbox\""," to get ",[21,3608,3610],{"href":3469,"rel":3609},[25],[95,3611,3473],{}," working. Otherwise, Vue has no way of knowing that it should bind to the ",[95,3614,3615],{},"checked"," property instead of the ",[95,3618,3619],{},"value"," property. For example:",[113,3622,3624],{"className":115,"code":3623,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const selected = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-checkbox v-model=\"selected\" type=\"checkbox\" label=\"Label\">\u003C\u002Fnord-checkbox>\n  \u003Coutput>{{ selected }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n",[95,3625,3626,3636,3646,3650,3667,3675,3679,3687,3721,3734],{"__ignoreMap":118},[122,3627,3628,3630,3632,3634],{"class":124,"line":125},[122,3629,146],{"class":128},[122,3631,265],{"class":132},[122,3633,3264],{"class":136},[122,3635,140],{"class":128},[122,3637,3638,3640,3642,3644],{"class":124,"line":143},[122,3639,3271],{"class":593},[122,3641,3274],{"class":128},[122,3643,1810],{"class":593},[122,3645,3191],{"class":157},[122,3647,3648],{"class":124,"line":163},[122,3649,479],{"emptyLinePlaceholder":478},[122,3651,3652,3654,3657,3659,3661,3663,3665],{"class":124,"line":174},[122,3653,705],{"class":593},[122,3655,3656],{"class":472}," selected",[122,3658,711],{"class":593},[122,3660,3294],{"class":136},[122,3662,720],{"class":128},[122,3664,813],{"class":472},[122,3666,726],{"class":128},[122,3668,3669,3671,3673],{"class":124,"line":194},[122,3670,345],{"class":128},[122,3672,265],{"class":132},[122,3674,140],{"class":128},[122,3676,3677],{"class":124,"line":219},[122,3678,479],{"emptyLinePlaceholder":478},[122,3680,3681,3683,3685],{"class":124,"line":234},[122,3682,146],{"class":128},[122,3684,3319],{"class":132},[122,3686,140],{"class":128},[122,3688,3689,3691,3694,3696,3698,3701,3703,3705,3708,3710,3712,3715,3717,3719],{"class":124,"line":260},[122,3690,166],{"class":128},[122,3692,3693],{"class":132},"nord-checkbox",[122,3695,3548],{"class":136},[122,3697,154],{"class":128},[122,3699,3700],{"class":157},"\"selected\"",[122,3702,268],{"class":136},[122,3704,154],{"class":128},[122,3706,3707],{"class":157},"\"checkbox\"",[122,3709,849],{"class":136},[122,3711,154],{"class":128},[122,3713,3714],{"class":157},"\"Label\"",[122,3716,284],{"class":128},[122,3718,3693],{"class":132},[122,3720,140],{"class":128},[122,3722,3723,3725,3727,3730,3732],{"class":124,"line":291},[122,3724,166],{"class":128},[122,3726,1536],{"class":132},[122,3728,3729],{"class":128},">{{ selected }}\u003C\u002F",[122,3731,1536],{"class":132},[122,3733,140],{"class":128},[122,3735,3736,3738,3740],{"class":124,"line":301},[122,3737,345],{"class":128},[122,3739,3319],{"class":132},[122,3741,140],{"class":128},[14,3743,3744,3745,1447],{},"Alternatively, you can always use the more verbose equivalent to ",[21,3746,3748],{"href":3469,"rel":3747},[25],[95,3749,3473],{},[113,3751,3753],{"className":115,"code":3752,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const selected = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-checkbox :checked=\"selected\" label=\"Label\" @change=\"selected = $event.target.checked\">\u003C\u002Fnord-checkbox>\n  \u003Coutput>{{ selected }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n",[95,3754,3755,3765,3775,3779,3795,3803,3807,3815,3848,3860],{"__ignoreMap":118},[122,3756,3757,3759,3761,3763],{"class":124,"line":125},[122,3758,146],{"class":128},[122,3760,265],{"class":132},[122,3762,3264],{"class":136},[122,3764,140],{"class":128},[122,3766,3767,3769,3771,3773],{"class":124,"line":143},[122,3768,3271],{"class":593},[122,3770,3274],{"class":128},[122,3772,1810],{"class":593},[122,3774,3191],{"class":157},[122,3776,3777],{"class":124,"line":163},[122,3778,479],{"emptyLinePlaceholder":478},[122,3780,3781,3783,3785,3787,3789,3791,3793],{"class":124,"line":174},[122,3782,705],{"class":593},[122,3784,3656],{"class":472},[122,3786,711],{"class":593},[122,3788,3294],{"class":136},[122,3790,720],{"class":128},[122,3792,813],{"class":472},[122,3794,726],{"class":128},[122,3796,3797,3799,3801],{"class":124,"line":194},[122,3798,345],{"class":128},[122,3800,265],{"class":132},[122,3802,140],{"class":128},[122,3804,3805],{"class":124,"line":219},[122,3806,479],{"emptyLinePlaceholder":478},[122,3808,3809,3811,3813],{"class":124,"line":234},[122,3810,146],{"class":128},[122,3812,3319],{"class":132},[122,3814,140],{"class":128},[122,3816,3817,3819,3821,3824,3826,3828,3830,3832,3834,3837,3839,3842,3844,3846],{"class":124,"line":260},[122,3818,166],{"class":128},[122,3820,3693],{"class":132},[122,3822,3823],{"class":136}," :checked",[122,3825,154],{"class":128},[122,3827,3700],{"class":157},[122,3829,849],{"class":136},[122,3831,154],{"class":128},[122,3833,3714],{"class":157},[122,3835,3836],{"class":136}," @change",[122,3838,154],{"class":128},[122,3840,3841],{"class":157},"\"selected = $event.target.checked\"",[122,3843,284],{"class":128},[122,3845,3693],{"class":132},[122,3847,140],{"class":128},[122,3849,3850,3852,3854,3856,3858],{"class":124,"line":291},[122,3851,166],{"class":128},[122,3853,1536],{"class":132},[122,3855,3729],{"class":128},[122,3857,1536],{"class":132},[122,3859,140],{"class":128},[122,3861,3862,3864,3866],{"class":124,"line":301},[122,3863,345],{"class":128},[122,3865,3319],{"class":132},[122,3867,140],{"class":128},[14,3869,3870,3871,3873,3874,3877],{},"Sometimes, you may need to pass complex data such as objects, arrays, and functions. These must be passed to a Web Component as ",[1426,3872,650],{}," rather than ",[1426,3875,3876],{},"attributes",". For the most part, Vue does the correct thing, and will handle this without any particular treatment.",[14,3879,3880,3881,3884,3885,3888],{},"However, there may be rare cases where you need to be more explicit that you're supplying a property. For this, Vue has the syntax ",[95,3882,3883],{},".propName=\"value\"",", where ",[95,3886,3887],{},"propName"," is the name of the property.",[14,3890,3891],{},"For instance, here is an example of passing a function to a component:",[113,3893,3895],{"className":115,"code":3894,"language":117,"meta":118,"style":118},"\u003Cscript setup>\n  const isWeekend = (date) => date.getDay() === 0 || date.getDay() === 6\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnord-date-picker label=\"Date of birth\" .isDateDisabled=\"isWeekend\">\u003C\u002Fnord-date-picker>\n\u003C\u002Ftemplate>\n",[95,3896,3897,3907,3947,3955,3959,3967,3994],{"__ignoreMap":118},[122,3898,3899,3901,3903,3905],{"class":124,"line":125},[122,3900,146],{"class":128},[122,3902,265],{"class":132},[122,3904,3264],{"class":136},[122,3906,140],{"class":128},[122,3908,3909,3911,3913,3915,3918,3920,3923,3925,3927,3929,3931,3933,3935,3937,3939,3941,3943,3945],{"class":124,"line":143},[122,3910,705],{"class":593},[122,3912,751],{"class":136},[122,3914,711],{"class":593},[122,3916,3917],{"class":128}," (",[122,3919,757],{"class":756},[122,3921,3922],{"class":128},") ",[122,3924,1899],{"class":593},[122,3926,768],{"class":128},[122,3928,771],{"class":136},[122,3930,774],{"class":128},[122,3932,777],{"class":593},[122,3934,780],{"class":472},[122,3936,783],{"class":593},[122,3938,768],{"class":128},[122,3940,771],{"class":136},[122,3942,774],{"class":128},[122,3944,777],{"class":593},[122,3946,794],{"class":472},[122,3948,3949,3951,3953],{"class":124,"line":163},[122,3950,345],{"class":128},[122,3952,265],{"class":132},[122,3954,140],{"class":128},[122,3956,3957],{"class":124,"line":174},[122,3958,479],{"emptyLinePlaceholder":478},[122,3960,3961,3963,3965],{"class":124,"line":194},[122,3962,146],{"class":128},[122,3964,3319],{"class":132},[122,3966,140],{"class":128},[122,3968,3969,3971,3973,3975,3977,3980,3983,3985,3988,3990,3992],{"class":124,"line":219},[122,3970,166],{"class":128},[122,3972,984],{"class":132},[122,3974,849],{"class":136},[122,3976,154],{"class":128},[122,3978,3979],{"class":157},"\"Date of birth\"",[122,3981,3982],{"class":136}," .isDateDisabled",[122,3984,154],{"class":128},[122,3986,3987],{"class":157},"\"isWeekend\"",[122,3989,284],{"class":128},[122,3991,984],{"class":132},[122,3993,140],{"class":128},[122,3995,3996,3998,4000],{"class":124,"line":234},[122,3997,345],{"class":128},[122,3999,3319],{"class":132},[122,4001,140],{"class":128},[14,4003,4004],{},"You can integrate Nord components with RouterLink components from Vue Router like this:",[113,4006,4008],{"className":115,"code":4007,"language":117,"meta":118,"style":118},"\u003Crouter-link to=\"\u002Fhome\" custom v-slot=\"{ navigate, href, route }\">\n  \u003Cnord-button :href=\"href\" @click=\"navigate\">{{ route.fullPath }}\u003C\u002Fnord-button>\n\u003C\u002Frouter-link>\n",[95,4009,4010,4038,4066],{"__ignoreMap":118},[122,4011,4012,4014,4017,4020,4022,4025,4028,4031,4033,4036],{"class":124,"line":125},[122,4013,146],{"class":128},[122,4015,4016],{"class":132},"router-link",[122,4018,4019],{"class":136}," to",[122,4021,154],{"class":128},[122,4023,4024],{"class":157},"\"\u002Fhome\"",[122,4026,4027],{"class":136}," custom",[122,4029,4030],{"class":136}," v-slot",[122,4032,154],{"class":128},[122,4034,4035],{"class":157},"\"{ navigate, href, route }\"",[122,4037,140],{"class":128},[122,4039,4040,4042,4044,4047,4049,4052,4054,4056,4059,4062,4064],{"class":124,"line":143},[122,4041,166],{"class":128},[122,4043,71],{"class":132},[122,4045,4046],{"class":136}," :href",[122,4048,154],{"class":128},[122,4050,4051],{"class":157},"\"href\"",[122,4053,3336],{"class":136},[122,4055,154],{"class":128},[122,4057,4058],{"class":157},"\"navigate\"",[122,4060,4061],{"class":128},">{{ route.fullPath }}\u003C\u002F",[122,4063,71],{"class":132},[122,4065,140],{"class":128},[122,4067,4068,4070,4072],{"class":124,"line":163},[122,4069,345],{"class":128},[122,4071,4016],{"class":132},[122,4073,140],{"class":128},[14,4075,4076,4077,4082],{},"Check out ",[21,4078,4081],{"href":4079,"rel":4080},"https:\u002F\u002Frouter.vuejs.org\u002Fapi\u002F#custom",[25],"the Vue Router"," documentation for more information.",[378,4084,4086],{"id":4085},"styling","Styling",[14,4088,4089,4090,4092,4093,4097,4098,4101,4102,1447],{},"Because our Web Components come with their styles built in, and our ",[21,4091,92],{"href":91}," comes with ",[21,4094,4096],{"href":4095},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#utilities","utility helpers",", you should very rarely need to add CSS to Vue components. However, if you need to add custom styles, please use our ",[21,4099,4100],{"href":512},"tokens"," instead of fixed values and add scoped CSS within ",[21,4103,4106],{"href":4104,"rel":4105},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fsfc.html",[25],"Single-File Components",[113,4108,4110],{"className":115,"code":4109,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cnord-badge>Status\u003C\u002Fnord-badge>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n  nord-badge {\n    text-transform: capitalize;\n  }\n\u003C\u002Fstyle>\n",[95,4111,4112,4120,4134,4142,4146,4157,4164,4177,4181],{"__ignoreMap":118},[122,4113,4114,4116,4118],{"class":124,"line":125},[122,4115,146],{"class":128},[122,4117,3319],{"class":132},[122,4119,140],{"class":128},[122,4121,4122,4124,4127,4130,4132],{"class":124,"line":143},[122,4123,166],{"class":128},[122,4125,4126],{"class":132},"nord-badge",[122,4128,4129],{"class":128},">Status\u003C\u002F",[122,4131,4126],{"class":132},[122,4133,140],{"class":128},[122,4135,4136,4138,4140],{"class":124,"line":163},[122,4137,345],{"class":128},[122,4139,3319],{"class":132},[122,4141,140],{"class":128},[122,4143,4144],{"class":124,"line":174},[122,4145,479],{"emptyLinePlaceholder":478},[122,4147,4148,4150,4152,4155],{"class":124,"line":194},[122,4149,146],{"class":128},[122,4151,1311],{"class":132},[122,4153,4154],{"class":136}," scoped",[122,4156,140],{"class":128},[122,4158,4159,4162],{"class":124,"line":219},[122,4160,4161],{"class":132},"  nord-badge",[122,4163,3078],{"class":128},[122,4165,4166,4169,4171,4174],{"class":124,"line":234},[122,4167,4168],{"class":472},"    text-transform",[122,4170,3114],{"class":128},[122,4172,4173],{"class":472},"capitalize",[122,4175,4176],{"class":128},";\n",[122,4178,4179],{"class":124,"line":260},[122,4180,799],{"class":128},[122,4182,4183,4185,4187],{"class":124,"line":291},[122,4184,345],{"class":128},[122,4186,1311],{"class":132},[122,4188,140],{"class":128},[14,4190,4191,4192,4195],{},"Using the ",[95,4193,4194],{},"scoped"," attribute will ensure the styles don't leak out of your component and affect other components.",[14,4197,4076,4198,4082],{},[21,4199,4202],{"href":4200,"rel":4201},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fsfc-css-features.html",[25],"the official Vue",[378,4204,4206],{"id":4205},"types-and-editor-integration-with-vue","Types and editor integration with Vue",[14,4208,4209],{},"Nord's components work out of the box with Vue, but they don't provide any TypeScript support or editor integration. To improve the developer experience, we offer Vue-specific types for our components. They allow you to get IntelliSense for Nord components in templates of Vue Single-File Components. Both in TypeScript and JavaScript projects.",[14,4211,2504,4212,2507,4214,2511,4216,2515],{},[95,4213,1714],{},[95,4215,2510],{},[95,4217,2514],{},[113,4219,4221],{"className":2518,"code":4220,"language":2520,"meta":118,"style":118},"{\n  \"compilerOptions\": {\n    \"types\": [\"@nordhealth\u002Fcomponents\u002Flib\u002Fvue.d.ts\"]\n  }\n}\n",[95,4222,4223,4227,4233,4244,4248],{"__ignoreMap":118},[122,4224,4225],{"class":124,"line":125},[122,4226,2527],{"class":128},[122,4228,4229,4231],{"class":124,"line":143},[122,4230,2532],{"class":472},[122,4232,2535],{"class":128},[122,4234,4235,4237,4239,4242],{"class":124,"line":163},[122,4236,2540],{"class":472},[122,4238,2543],{"class":128},[122,4240,4241],{"class":157},"\"@nordhealth\u002Fcomponents\u002Flib\u002Fvue.d.ts\"",[122,4243,2549],{"class":128},[122,4245,4246],{"class":124,"line":174},[122,4247,799],{"class":128},[122,4249,4250],{"class":124,"line":194},[122,4251,1930],{"class":128},[14,4253,4254],{},"Now you should get full type support for Nord components in your Vue project. Including IntelliSense for Nord components in templates of Vue Single-File Components.",[351,4256,4257,4258,4261,4262,2614,4264,4267,4268,4271],{"variant":353},"\nNote: previously these types lived in a dedicated \n",[95,4259,4260],{},"\n@nordhealth\u002Fvue\n","\n package, but this package has been deprecated and will be removed in the next major version.\n\n",[68,4263],{},[95,4265,4266],{},"@nordhealth\u002Fvue","\n will continue to receive updates as its build is fully automated, but you should start planning on utilizing the new \n",[95,4269,4270],{},"@nordhealth\u002Fcomponents\u002Flib\u002Fvue.d.ts","\n type definition file instead.\n",[378,4273,4275],{"id":4274},"server-side-rendering-ssr-with-vue","Server-side rendering (SSR) with Vue",[14,4277,2567,4278,4280],{},[1426,4279,2570],{}," rendering on the server (within Nuxt, for example). That is, the Nord component's tag and attributes set via the Vue template will be rendered, but the component's shadow DOM with all the styles and HTML in it will not be rendered on the server.",[14,4282,4283,4284,4289],{},"You might get hydration mismatch errors for some components, since Nord components reflect default values for properties to attributes after being defined, and some render to the light DOM. You can resolve these hydration mismatch errors by disabling server-side rendering for the component, or by using the ",[21,4285,4288],{"href":4286,"rel":4287},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fssr.html#data-allow-mismatch",[25],"data-allow-mismatch"," attribute on the component.",[351,4291,2588],{"variant":353},[76,4293],{},[79,4295,4297],{"id":4296},"can-i-use-this-in-my-own-project","Can I use this in my own project?",[14,4299,4300,4301,4306,4307,4311],{},"Nord Design System is solely meant for building digital products and experiences for ",[21,4302,4305],{"href":4303,"rel":4304},"https:\u002F\u002Fnordhealth.com\u002F",[25],"Nordhealth",". Please see the ",[21,4308,4310],{"href":4309},"\u002Fresources\u002Fterms\u002F","terms of use"," for full license details.",[76,4313],{},[79,4315,4317],{"id":4316},"support","Support",[14,4319,4320,4321,4325],{},"Need help with our Web Components? Please head over to the ",[21,4322,4324],{"href":4323},"\u002Fresources\u002Fsupport\u002F","Support page"," for more guidelines and ways to contact us.",[76,4327],{},[79,4329,4331],{"id":4330},"attribution","Attribution",[14,4333,4334],{},"Special thanks to the following projects that help make Nord possible.",[52,4336,4337,4345,4353],{},[55,4338,4339,4340,35],{},"Components are built with ",[21,4341,4344],{"href":4342,"rel":4343},"https:\u002F\u002Flit.dev\u002F",[25],"Lit",[55,4346,4347,4348,35],{},"Component metadata is generated by the ",[21,4349,4352],{"href":4350,"rel":4351},"https:\u002F\u002Fgithub.com\u002Fopen-wc\u002Fcustom-elements-manifest",[25],"Custom Elements Manifest Analyzer",[55,4354,4355,4356,35],{},"Documentation is powered by ",[21,4357,4360],{"href":4358,"rel":4359},"https:\u002F\u002Fcontent.nuxt.com\u002F",[25],"Nuxt Content",[1311,4362,4363],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":118,"searchDepth":143,"depth":143,"links":4365},[4366,4367,4374,4387,4395,4403,4404,4405],{"id":81,"depth":143,"text":82},{"id":364,"depth":143,"text":365,"children":4368},[4369,4370,4371,4372,4373],{"id":380,"depth":163,"text":381},{"id":410,"depth":163,"text":411},{"id":500,"depth":163,"text":501},{"id":574,"depth":163,"text":575},{"id":632,"depth":163,"text":633},{"id":646,"depth":143,"text":647,"children":4375},[4376,4377,4378,4379,4380,4381,4382,4383,4384,4385,4386],{"id":650,"depth":163,"text":651},{"id":871,"depth":163,"text":872},{"id":937,"depth":163,"text":938},{"id":1011,"depth":163,"text":1012},{"id":1099,"depth":163,"text":1100},{"id":1251,"depth":163,"text":1252},{"id":1333,"depth":163,"text":1334},{"id":1411,"depth":163,"text":1412},{"id":1462,"depth":163,"text":1463},{"id":1480,"depth":163,"text":1481},{"id":1605,"depth":163,"text":1606},{"id":1640,"depth":143,"text":43,"children":4388},[4389,4390,4391,4392,4393,4394],{"id":1666,"depth":163,"text":365},{"id":1708,"depth":163,"text":647},{"id":2497,"depth":163,"text":2498},{"id":2563,"depth":163,"text":2564},{"id":2591,"depth":163,"text":2592},{"id":2907,"depth":163,"text":2908},{"id":2983,"depth":143,"text":49,"children":4396},[4397,4398,4399,4400,4401,4402],{"id":3002,"depth":163,"text":365},{"id":3039,"depth":163,"text":3040},{"id":3168,"depth":163,"text":647},{"id":4085,"depth":163,"text":4086},{"id":4205,"depth":163,"text":4206},{"id":4274,"depth":163,"text":4275},{"id":4296,"depth":143,"text":4297},{"id":4316,"depth":143,"text":4317},{"id":4330,"depth":143,"text":4331},"Install, bundle, and use Nord Web Components across frameworks or plain HTML.",false,"md","generic-module",{},"\u002Fdocs\u002Fdeveloper\u002Fweb-components",{"title":5,"description":4406},{"loc":4411},"docs\u002F01.developer\u002F02.web-components","e_03M-W64e5MAuMywfZX5ehN0_sZrLKptiveyxdrmR4",[4417,4604,4720,4738],{"title":4418,"children":4419,"path":4602,"stem":4603,"page":4407},"Docs",[4420,4514],{"path":4421,"title":4422,"icon":4423,"keywords":4424,"children":4425},"\u002Fdocs\u002Fdeveloper","Developer","file-code","docs developer start install setup web components ai faq",[4426,4430,4432,4437,4441,4444,4482,4504,4509],{"path":4421,"title":4427,"icon":4428,"keywords":4429},"Getting started","navigation-dashboard","docs start install setup npm",{"path":4411,"title":5,"icon":4409,"keywords":4431},"web components setup install usage custom elements",{"path":4433,"title":4434,"icon":4435,"keywords":4436},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts","Webfonts","interface-content-book","fonts typography webfonts",{"path":4438,"title":4439,"icon":4409,"keywords":4440},"\u002Fdocs\u002Fdeveloper\u002Fcdn","CDN","cdn package delivery script link",{"path":4442,"title":1606,"icon":4435,"keywords":4443},"\u002Fdocs\u002Fdeveloper\u002Flocalization","localization translation rtl ltr",{"path":4445,"title":92,"icon":4423,"keywords":4446,"badge":4447,"children":4448},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework","css framework legacy utilities","legacy",[4449,4451,4453,4455,4458,4461,4464,4467,4470,4473,4476,4479],{"path":4450,"title":365},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#installation",{"path":4452,"title":647},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#usage",{"path":4095,"title":4454},"Utilities",{"path":4456,"title":4457},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#reset-utility","Reset Utility",{"path":4459,"title":4460},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#typographic-utilities","Typographic Utilities",{"path":4462,"title":4463},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#font-size-utilities","Font Size Utilities",{"path":4465,"title":4466},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#color-utilities","Color Utilities",{"path":4468,"title":4469},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#border-utilities","Border Utilities",{"path":4471,"title":4472},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#box-shadow-utilities","Box Shadow Utilities",{"path":4474,"title":4475},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#grid-and-container-utilities","Grid & Container Utilities",{"path":4477,"title":4478},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#spacing-utilities","Spacing Utilities",{"path":4480,"title":4481},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#css-custom-properties","CSS Custom Properties",{"path":4483,"title":4484,"icon":4485,"keywords":4486,"children":4487},"\u002Fdocs\u002Fdeveloper\u002Feslint","ESLint Plugin","interface-checked","eslint lint rules css tailwind",[4488,4490,4492,4495,4498,4501],{"path":4489,"title":365},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#installation",{"path":4491,"title":647},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#usage",{"path":4493,"title":4494},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#nord-rules","Nord Rules",{"path":4496,"title":4497},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#tailwind-rules","Tailwind Rules",{"path":4499,"title":4500},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#custom-configuration","Custom Configuration",{"path":4502,"title":4503},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#class-detection","Class Detection",{"path":4505,"title":4506,"icon":4507,"keywords":4508},"\u002Fdocs\u002Fdeveloper\u002Fworking-with-ai","Working with AI","interface-ai","ai llms skills agents",{"path":4510,"title":4511,"icon":4512,"keywords":4513},"\u002Fdocs\u002Fdeveloper\u002Ffaq","FAQ","interface-help","questions answers support",{"path":4515,"title":4516,"icon":4435,"keywords":4517,"children":4518},"\u002Fdesign","Design","design foundations themes brand tools figma",[4519,4521,4555,4592,4597],{"path":4515,"title":4427,"icon":4428,"keywords":4520},"design start foundations figma",{"path":4522,"title":4523,"icon":4435,"keywords":4524,"children":4525},"\u002Fdesign\u002Ffoundations","Foundations","principles accessibility colors typography grid naming",[4526,4529,4532,4534,4537,4540,4543,4546,4549,4552],{"path":4527,"title":4528},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist","Accessibility",{"path":4530,"title":4531},"\u002Fdesign\u002Ffoundations\u002Fcolors","Color System",{"path":4533,"title":4466},"\u002Fdesign\u002Ffoundations\u002Fcolor-utilities",{"path":4535,"title":4536},"\u002Fdesign\u002Ffoundations\u002Fprinciples","Principles",{"path":4538,"title":4539},"\u002Fdesign\u002Ffoundations\u002Ffigma","Figma Toolkit",{"path":4541,"title":4542},"\u002Fdesign\u002Ffoundations\u002Fgrid","Grid",{"path":4544,"title":4545},"\u002Fdesign\u002Ffoundations\u002Ficonography","Iconography",{"path":4547,"title":4548},"\u002Fdesign\u002Ffoundations\u002Fnaming","Naming",{"path":4550,"title":4551},"\u002Fdesign\u002Ffoundations\u002Fbrand","Nordhealth Brand",{"path":4553,"title":4554},"\u002Fdesign\u002Ffoundations\u002Ftypography","Typography",{"path":4556,"title":1334,"icon":4557,"keywords":4558,"children":4559},"\u002Fdesign\u002Fthemes","interface-mode-light","themes brand dark light contrast",[4560,4563,4565,4568,4571,4574,4577,4580,4583,4586,4589],{"path":4561,"title":4562},"#top","Overview",{"path":4564,"title":365},"#installation",{"path":4566,"title":4567},"#available-themes","Available Themes",{"path":4569,"title":4570},"#examples","Examples",{"path":4572,"title":4573},"#dark-mode","Dark Mode",{"path":4575,"title":4576},"#creating-themes","Creating Themes",{"path":4578,"title":4579},"#accent-color","Accent Color",{"path":4581,"title":4582},"#top-bar-theming","Top Bar theming",{"path":4584,"title":4585},"#logo-usage","Logo Usage",{"path":4587,"title":4588},"#theming-in-figma","Theming in Figma",{"path":4590,"title":4591},"#theme-builder","Theme Builder",{"path":4593,"title":4594,"icon":4595,"keywords":4596},"\u002Fdesign\u002Fassets","Brand assets","interface-attachment","assets downloads logo brand figma",{"path":4598,"title":4599,"icon":4600,"keywords":4601},"\u002Fdesign\u002Ftools","Tools","navigation-settings","tools color generator theme builder accessibility checklist","\u002Fdocs","docs",{"title":4605,"children":4606,"path":4718,"stem":4719},"Core",[4607,4612,4650,4698,4703,4708,4713],{"path":4608,"title":4609,"icon":4610,"keywords":4611},"\u002Fcomponents","Components","interface-grid","components web components reference api examples",{"path":4613,"title":4614,"icon":4615,"keywords":4616,"children":4617},"\u002Fcore\u002Ftokens","Design Tokens","interface-tag","tokens variables color space typography",[4618,4621,4624,4627,4630,4633,4636,4639,4642,4645,4648],{"path":4619,"title":4620},"#color","Color",{"path":4622,"title":4623},"#border-radius","Border Radius",{"path":4625,"title":4626},"#box-shadow","Box Shadow",{"path":4628,"title":4629},"#font-size","Font Size",{"path":4631,"title":4632},"#font","Font",{"path":4634,"title":4635},"#line-height","Line Height",{"path":4637,"title":4638},"#size","Size",{"path":4640,"title":4641},"#space","Space",{"path":4643,"title":4644},"#transition","Transition",{"path":4646,"title":4647},"#z-index","Z-index",{"path":4649,"title":647},"#usage",{"path":4651,"title":4652,"icon":4653,"keywords":4654,"children":4655},"\u002Fcore\u002Fcss\u002Ftailwind","Tailwind CSS","interface-edit","tailwind utilities css tokens",[4656,4658,4660,4663,4666,4669,4672,4675,4678,4681,4684,4687,4690,4692,4695],{"path":4657,"title":365},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#installation",{"path":4659,"title":647},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#usage",{"path":4661,"title":4662},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#peer-dependencies","Peer Dependencies",{"path":4664,"title":4665},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#theme-variables","Theme Variables",{"path":4667,"title":4668},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#logical-properties","Logical Properties",{"path":4670,"title":4671},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#typography-examples","Typography Examples",{"path":4673,"title":4674},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#color-examples","Color Examples",{"path":4676,"title":4677},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#border-examples","Border Examples",{"path":4679,"title":4680},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#shadow-examples","Shadow Examples",{"path":4682,"title":4683},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#miscellaneous-utilities","Miscellaneous Utilities",{"path":4685,"title":4686},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#nord-components","Nord Components",{"path":4688,"title":4689},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#form-utilities","Form Utilities",{"path":4691,"title":4542},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#grid",{"path":4693,"title":4694},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":4696,"title":4697},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#extending-the-theme","Extending the Theme",{"path":4699,"title":4700,"icon":4701,"keywords":4702},"\u002Fblocks","Blocks","interface-table","blocks patterns sections examples",{"path":4704,"title":4705,"icon":4706,"keywords":4707},"\u002Ftemplates","Templates","navigation-catalog","templates pages layouts examples",{"path":4709,"title":4710,"icon":4711,"keywords":4712},"\u002Ficons","Icons","interface-bookmark","icons nordicons symbols",{"path":4714,"title":4715,"icon":4716,"native":478,"keywords":4717},"\u002Fstorybook","Playground","interface-play","playground storybook examples","\u002Fcore","core",{"title":4721,"path":4722,"stem":4723,"children":4724},"Updates","\u002Fupdates","updates\u002Findex",[4725,4729,4734],{"path":4722,"title":4726,"icon":4727,"keywords":4728},"Latest Updates","file-notes","latest updates blog announcements news",{"path":4730,"title":4731,"icon":4732,"keywords":4733},"\u002Fchangelogs","Changelog","text-list","changelog releases packages versions",{"path":4735,"title":4736,"icon":4423,"keywords":4737},"\u002Fmigrations","Migration guides","migrations upgrade guides breaking changes",{"title":4739,"children":4740,"path":4769,"stem":4770},"Resources",[4741,4746,4749,4753,4757,4761,4765],{"path":4742,"title":4743,"icon":4744,"keywords":4745},"\u002Fresources\u002Fabout","About the design system","interface-info","about nord design system team goals",{"path":4747,"title":4317,"icon":4512,"keywords":4748},"\u002Fresources\u002Fsupport","help feedback support slack office hours status",{"path":4750,"title":4751,"icon":4653,"keywords":4752},"\u002Fresources\u002Fcontributing","Contributing","contributing contribution proposal process",{"path":4754,"title":4755,"icon":4732,"keywords":4756},"\u002Fresources\u002Fbacklog-prioritization","Backlog prioritization","backlog prioritization roadmap requests",{"path":4758,"title":4759,"icon":4512,"keywords":4760},"\u002Fresources\u002Faccessibility-statement","Accessibility statement","accessibility statement wcag website",{"path":4762,"title":4763,"icon":4744,"keywords":4764},"\u002Fresources\u002Fcareers","Careers","careers jobs team",{"path":4766,"title":4767,"icon":4727,"keywords":4768},"\u002Fresources\u002Fterms","Terms of use","terms legal license usage","\u002Fresources","resources",[4772,4835,4872,4877],{"title":4418,"children":4773,"path":4602,"stem":4603,"page":4407},[4774,4805],{"path":4421,"title":4422,"icon":4423,"keywords":4424,"children":4775},[4776,4777,4778,4779,4780,4781,4795,4803,4804],{"path":4421,"title":4427,"icon":4428,"keywords":4429},{"path":4411,"title":5,"icon":4409,"keywords":4431},{"path":4433,"title":4434,"icon":4435,"keywords":4436},{"path":4438,"title":4439,"icon":4409,"keywords":4440},{"path":4442,"title":1606,"icon":4435,"keywords":4443},{"path":4445,"title":92,"icon":4423,"keywords":4446,"badge":4447,"children":4782},[4783,4784,4785,4786,4787,4788,4789,4790,4791,4792,4793,4794],{"path":4450,"title":365},{"path":4452,"title":647},{"path":4095,"title":4454},{"path":4456,"title":4457},{"path":4459,"title":4460},{"path":4462,"title":4463},{"path":4465,"title":4466},{"path":4468,"title":4469},{"path":4471,"title":4472},{"path":4474,"title":4475},{"path":4477,"title":4478},{"path":4480,"title":4481},{"path":4483,"title":4484,"icon":4485,"keywords":4486,"children":4796},[4797,4798,4799,4800,4801,4802],{"path":4489,"title":365},{"path":4491,"title":647},{"path":4493,"title":4494},{"path":4496,"title":4497},{"path":4499,"title":4500},{"path":4502,"title":4503},{"path":4505,"title":4506,"icon":4507,"keywords":4508},{"path":4510,"title":4511,"icon":4512,"keywords":4513},{"path":4515,"title":4516,"icon":4435,"keywords":4517,"children":4806},[4807,4808,4820,4833,4834],{"path":4515,"title":4427,"icon":4428,"keywords":4520},{"path":4522,"title":4523,"icon":4435,"keywords":4524,"children":4809},[4810,4811,4812,4813,4814,4815,4816,4817,4818,4819],{"path":4527,"title":4528},{"path":4530,"title":4531},{"path":4533,"title":4466},{"path":4535,"title":4536},{"path":4538,"title":4539},{"path":4541,"title":4542},{"path":4544,"title":4545},{"path":4547,"title":4548},{"path":4550,"title":4551},{"path":4553,"title":4554},{"path":4556,"title":1334,"icon":4557,"keywords":4558,"children":4821},[4822,4823,4824,4825,4826,4827,4828,4829,4830,4831,4832],{"path":4561,"title":4562},{"path":4564,"title":365},{"path":4566,"title":4567},{"path":4569,"title":4570},{"path":4572,"title":4573},{"path":4575,"title":4576},{"path":4578,"title":4579},{"path":4581,"title":4582},{"path":4584,"title":4585},{"path":4587,"title":4588},{"path":4590,"title":4591},{"path":4593,"title":4594,"icon":4595,"keywords":4596},{"path":4598,"title":4599,"icon":4600,"keywords":4601},{"title":4605,"children":4836,"path":4718,"stem":4719},[4837,4838,4851,4868,4869,4870,4871],{"path":4608,"title":4609,"icon":4610,"keywords":4611},{"path":4613,"title":4614,"icon":4615,"keywords":4616,"children":4839},[4840,4841,4842,4843,4844,4845,4846,4847,4848,4849,4850],{"path":4619,"title":4620},{"path":4622,"title":4623},{"path":4625,"title":4626},{"path":4628,"title":4629},{"path":4631,"title":4632},{"path":4634,"title":4635},{"path":4637,"title":4638},{"path":4640,"title":4641},{"path":4643,"title":4644},{"path":4646,"title":4647},{"path":4649,"title":647},{"path":4651,"title":4652,"icon":4653,"keywords":4654,"children":4852},[4853,4854,4855,4856,4857,4858,4859,4860,4861,4862,4863,4864,4865,4866,4867],{"path":4657,"title":365},{"path":4659,"title":647},{"path":4661,"title":4662},{"path":4664,"title":4665},{"path":4667,"title":4668},{"path":4670,"title":4671},{"path":4673,"title":4674},{"path":4676,"title":4677},{"path":4679,"title":4680},{"path":4682,"title":4683},{"path":4685,"title":4686},{"path":4688,"title":4689},{"path":4691,"title":4542},{"path":4693,"title":4694},{"path":4696,"title":4697},{"path":4699,"title":4700,"icon":4701,"keywords":4702},{"path":4704,"title":4705,"icon":4706,"keywords":4707},{"path":4709,"title":4710,"icon":4711,"keywords":4712},{"path":4714,"title":4715,"icon":4716,"native":478,"keywords":4717},{"title":4721,"path":4722,"stem":4723,"children":4873},[4874,4875,4876],{"path":4722,"title":4726,"icon":4727,"keywords":4728},{"path":4730,"title":4731,"icon":4732,"keywords":4733},{"path":4735,"title":4736,"icon":4423,"keywords":4737},{"title":4739,"children":4878,"path":4769,"stem":4770},[4879,4880,4881,4882,4883,4884,4885],{"path":4742,"title":4743,"icon":4744,"keywords":4745},{"path":4747,"title":4317,"icon":4512,"keywords":4748},{"path":4750,"title":4751,"icon":4653,"keywords":4752},{"path":4754,"title":4755,"icon":4732,"keywords":4756},{"path":4758,"title":4759,"icon":4512,"keywords":4760},{"path":4762,"title":4763,"icon":4744,"keywords":4764},{"path":4766,"title":4767,"icon":4727,"keywords":4768},[4887,4909,4923,4927,4932,4936,4938,4941,4945,4947,4949,4951,4964,4977,4986,4989,4993,4997,5001,5019,5023,5063,5067,5096,5100,5104,5107,5109,5144,5153,5157,5161,5165,5169,5187,5196,5200,5204,5213,5241,5245,5249,5253,5257,5261,5265,5269,5278,5281,5285,5289,5292,5305,5309,5317,5321,5325,5334,5337,5341,5345,5349],{"name":1107,"tagName":4888,"description":4889,"category":4890,"status":4891,"isNew":4407,"lightDom":478,"parts":4892},"nord-accordion","Accordion is a set of collapsible sections, each with a header that toggles\nthe visibility of its content. It coordinates a group of\nAccordion Item elements, keyboard focus\nmovement between them, and which items are open.","container","ready",[4893,4897,4901,4905],{"name":4894,"tagName":4895,"description":4896},"AccordionHeader","nord-accordion-header","Accordion Header is the heading that labels an\nAccordion Panel. Following the WAI-ARIA\naccordion pattern, its Accordion Trigger\nbutton is wrapped in a heading element.",{"name":4898,"tagName":4899,"description":4900},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":4902,"tagName":4903,"description":4904},"AccordionPanel","nord-accordion-panel","Accordion Panel holds the content revealed by its\nAccordion Trigger. It must be placed inside\nan Accordion Item and animates its height as it\nopens and closes.",{"name":4906,"tagName":4907,"description":4908},"AccordionTrigger","nord-accordion-trigger","Accordion Trigger is the button that opens and closes its\nAccordion Panel. It must be placed inside an\nAccordion Header.",{"name":4910,"tagName":4911,"description":4912,"category":4913,"status":4891,"isNew":4407,"lightDom":4407,"parts":4914},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.","layout",[4915,4919],{"name":4916,"tagName":4917,"description":4918},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":4920,"tagName":4921,"description":4922},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":4924,"tagName":4925,"description":4926,"category":1516,"status":4891,"isNew":4407,"lightDom":478},"Autocomplete","nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.",{"name":4928,"tagName":4929,"description":4930,"category":4931,"status":4891,"isNew":4407,"lightDom":4407},"Avatar","nord-avatar","Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.","content",{"name":4933,"tagName":4126,"description":4934,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"Badge","Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.","feedback",{"name":1270,"tagName":351,"description":4937,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",{"name":948,"tagName":71,"description":4939,"category":4940,"status":4891,"isNew":4407,"lightDom":4407},"Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.","action",{"name":4942,"tagName":4943,"description":4944,"category":4940,"status":4891,"isNew":4407,"lightDom":4407},"ButtonGroup","nord-button-group","Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",{"name":1625,"tagName":676,"description":4946,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",{"name":1044,"tagName":1050,"description":4948,"category":4890,"status":4891,"isNew":4407,"lightDom":4407},"Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",{"name":3593,"tagName":3693,"description":4950,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",{"name":4952,"tagName":4953,"description":4954,"category":4890,"status":4891,"isNew":4407,"lightDom":478,"parts":4955},"Collapsible","nord-collapsible","Collapsible is a disclosure that shows or hides a section of content. It wires\ntogether a Collapsible Trigger and a\nCollapsible Panel, animating the panel\nheight as it opens and closes.",[4956,4960],{"name":4957,"tagName":4958,"description":4959},"CollapsiblePanel","nord-collapsible-panel","Collapsible Panel holds the content revealed by its\nCollapsible Trigger. It must be placed\ninside a Collapsible and animates its height as it\nopens and closes.",{"name":4961,"tagName":4962,"description":4963},"CollapsibleTrigger","nord-collapsible-trigger","Collapsible Trigger is the interactive control that opens and closes its\nCollapsible panel. It must be placed inside a\nCollapsible.",{"name":4965,"tagName":4966,"description":4967,"category":1516,"status":4891,"isNew":4407,"lightDom":478,"parts":4968},"Combobox","nord-combobox","Combobox lets users choose one option (or several) from a list by typing to\nfilter, then picking with the keyboard or pointer. Use it when a Select\nwould be unwieldy because there are many options to scan.\n\nCombobox is a control only — it has no built-in label, hint or error. Compose\nit inside a Field to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed value is an option's value (or an array of them with\nmultiple); the input is a filter\u002Fsearch field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[4969,4973],{"name":4970,"tagName":4971,"description":4972},"ComboboxGroup","nord-combobox-group","Groups declarative \u003Cnord-combobox-option> children under a heading inside a\nCombobox:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-group label=\"Frameworks\">\n    \u003Cnord-combobox-option value=\"next\">Next.js\u003C\u002Fnord-combobox-option>\n  \u003C\u002Fnord-combobox-group>\n\u003C\u002Fnord-combobox>\n`\n\nContained options inherit this label as their group. The element renders\nnothing itself and is hidden with display: none`.",{"name":4974,"tagName":4975,"description":4976},"ComboboxOption","nord-combobox-option","A declarative option for a Combobox. Place these as\nchildren of \u003Cnord-combobox> instead of (or as an alternative to) setting the\n.options property:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-option value=\"bug\">Bug\u003C\u002Fnord-combobox-option>\n  \u003Cnord-combobox-option value=\"feature\">Feature\u003C\u002Fnord-combobox-option>\n\u003C\u002Fnord-combobox>\n`\n\nThe option's child markup becomes the rendered row, so you can author custom\nitems (e.g. an avatar + text) without an html string or a render function.\nSet the label attribute when the visible markup isn't plain text, so\nfiltering and the accessible name have something to match on.\n\nThe element renders nothing itself — it is a data source the combobox reads via\ncontext and is hidden with display: none`.",{"name":4978,"tagName":4979,"description":4980,"category":4940,"status":4891,"isNew":4407,"lightDom":4407,"parts":4981},"CommandMenu","nord-command-menu","Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",[4982],{"name":4983,"tagName":4984,"description":4985},"CommandMenuAction","nord-command-menu-action","Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",{"name":4987,"tagName":984,"description":4988,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"DatePicker","\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",{"name":4990,"tagName":4991,"description":4992,"category":1516,"status":4891,"isNew":4407,"lightDom":478},"DateRangePicker","nord-date-range-picker","Date Range Picker lets people choose a start and end date as a single range,\neither from a built-in list of presets (Today, Last 7 days, This month, …) or\nfrom a range calendar. It is a control only — compose it inside a\nField for a label, hint or error, like a native input.\n\nThe committed value is an ISO-8601 interval string YYYY-MM-DD\u002FYYYY-MM-DD;\nthe convenience start-date \u002F end-date props and the valueAsDateRange\ngetter\u002Fsetter stay in sync with it. Selecting in the popout builds a *pending*\nrange; **Apply** commits it (firing change), **Cancel** reverts to the last\ncommitted value, and **Clear** empties it.",{"name":4994,"tagName":4995,"description":4996,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Divider","nord-divider","Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",{"name":4998,"tagName":4999,"description":5000,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Drawer","nord-drawer","Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",{"name":5002,"tagName":5003,"description":5004,"category":5005,"status":4891,"isNew":4407,"lightDom":4407,"parts":5006},"Dropdown","nord-dropdown","Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.","overlay",[5007,5011,5015],{"name":5008,"tagName":5009,"description":5010},"DropdownGroup","nord-dropdown-group","Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",{"name":5012,"tagName":5013,"description":5014},"DropdownItem","nord-dropdown-item","Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",{"name":5016,"tagName":5017,"description":5018},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":5020,"tagName":5021,"description":5022,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"EmptyState","nord-empty-state","Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",{"name":1507,"tagName":5024,"description":5025,"category":1516,"status":4891,"isNew":4407,"lightDom":478,"parts":5026},"nord-field","Field is the wrapper for a single form control. It lays out a\nField Label, a control (such as an\nInput), an optional\nField Description and a\nField Error with consistent spacing.\n\nCombine several together in a Field Group and\ngroup related groups with a Field Set.\n\nThe Field shares its state with the control through context: a Nord control\nplaced inside a Field suppresses its own built-in label\u002Fhint\u002Ferror and takes\nits accessible name, description and invalid\u002Fdisabled state from the Field.",[5027,5031,5035,5039,5043,5047,5051,5055,5059],{"name":5028,"tagName":5029,"description":5030},"FieldContent","nord-field-content","Field Content wraps a Field Label and\nField Description so they stay aligned as a\nsingle text block, which is especially useful in horizontal\nField layouts.",{"name":5032,"tagName":5033,"description":5034},"FieldDescription","nord-field-description","Field Description is the helper or hint text for a Field.\nIt is styled to match the hint text used by Nord form controls such as\nInput.",{"name":5036,"tagName":5037,"description":5038},"FieldError","nord-field-error","Field Error displays validation error text for a Field.\nIt is styled to match the error text used by Nord form controls such as\nInput.\n\nExposes itself as a live region (role=\"alert\", aria-live=\"polite\") so the\nmessage is announced when it appears. The message is supplied as the\nelement's children.",{"name":5040,"tagName":5041,"description":5042},"FieldGroup","nord-field-group","Field Group stacks a set of Field controls vertically\nwith consistent spacing. Separate sections with a\nField Separator when needed.",{"name":5044,"tagName":5045,"description":5046},"FieldLabel","nord-field-label","Field Label is the label for a control inside a Field.\nIt is styled to match the labels used by Nord form controls such as\nInput.\n\nThe enclosing Field shares this label's id and text with the control through\ncontext, so the control names itself (aria-labelledby for light-DOM controls,\naria-label for shadow-DOM ones) — no wiring needed. Set the for attribute to\na control's id to additionally get native-style click-to-focus.\n\nThe required indicator is driven by the control: mark the control required\nand the Field toggles this label's required attribute automatically.",{"name":5048,"tagName":5049,"description":5050},"FieldLegend","nord-field-legend","Field Legend labels a Field Set, naming the group of\nfields for assistive technology. Place it as the first child of a Field Set.",{"name":5052,"tagName":5053,"description":5054},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":5056,"tagName":5057,"description":5058},"FieldSet","nord-field-set","Field Set groups related fields under a Field Legend\nfor semantic, accessible grouping. It exposes role=\"group\" named by its\nlegend; wrap a Field Group inside.",{"name":5060,"tagName":5061,"description":5062},"FieldTitle","nord-field-title","Field Title is an emphasized inline title used inside choice-card style\nField layouts, where a Field Label\nwraps a whole selectable field.",{"name":5064,"tagName":5065,"description":5066,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Fieldset","nord-fieldset","Deprecated: for new code, group related controls with the composable Field\nfamily — see grouping fields with Field.\nnord-fieldset remains supported for backwards compatibility and is not\nscheduled for removal.\n\nFieldset is used for grouping sets of input components. It is necessary to use a\nfieldset with radio and checkbox components, and can also be useful for logically\ngrouping other types of inputs.",{"name":5068,"tagName":5069,"description":5070,"category":1516,"status":4891,"isNew":4407,"lightDom":478,"parts":5071},"FilterBar","nord-filter-bar","Filter Bar is a layout wrapper for a row of filter controls. It lays its\nchildren out in a wrapping flex row with a consistent gap, so you can drop in\nFilter Field, Filter Input,\nFilter Add Button and\nFilter Reset Button (or any controls) and\nhave them align without extra styling.\n\nLike Pagination, it is composition-first: it owns no\nfilter state and emits no events. Your app owns the active filters and any URL\nor query-string syncing; the filter primitives only emit intent.",[5072,5076,5080,5084,5088,5092],{"name":5073,"tagName":5074,"description":5075},"FilterAddButton","nord-filter-add-button","Filter Add Button opens a popout of available filters and emits the chosen one\nso your app can add it to the bar. Pass a flat list of options, or group them\nunder headings; selecting one fires a select event with the option's id\nand closes the popout.\n\nLike the other filter primitives it is intent-only: it does not track which\nfilters are active. Your app owns the active filters and decides what to do on\nselect (typically render a new Filter Field).\nMirrors the Provet Cloud filter add button.",{"name":5077,"tagName":5078,"description":5079},"FilterDateRange","nord-filter-date-range","Filter Date Range is a self-contained date-range **filter**: a chip that opens\na popout containing an inline Date Range Picker\n(presets + two-month calendar + Apply). It is the date-range counterpart to\nFilter Dropdown and renders the shared filter\nchip via Filter Field.\n\nComposition-first: it emits change\u002Fclear\u002Fremove and leaves the active\nfilters and any URL\u002Fquery state to your app.",{"name":5081,"tagName":5082,"description":5083},"FilterDropdown","nord-filter-dropdown","Filter Dropdown is a full-featured filter control: a chip trigger that opens a\npopout list of options. It owns its selection and tracks value, unlike the\ncomposition-first Filter Field — pass it options\nand listen for change. It ports the Provet Cloud filter dropdown.\n\nOptions come in three shapes: a flat list ({ value, label }), groups\n({ heading, children }) rendered with dividers, and tree-style options\n(a selectable option with children) where the parent stays selectable and the\nchildren render indented. Single mode tracks a string value and closes on\nselect; multiple tracks an array, shows checkboxes and keeps the popout open.",{"name":5085,"tagName":5086,"description":5087},"FilterField","nord-filter-field","Filter Field is the presentation-only filter **chip**: a joined pill showing a\nleading icon, the filter's label, the active selection summary (value) and\na clear or remove affordance, dashed while inactive. It is the shared chip used\nacross the filter family and the building block for custom filters.\n\nIt owns no popout and tracks no value — drop it into a popout-owning control as\nits slot=\"trigger\" (the host opens\u002Fpositions the popout and sets\naria-controls\u002Faria-haspopup\u002Faria-expanded on this element). Show the\nactive selection with value, reset it in response to clear, and remove the\nwhole field in response to remove. Your app owns the active filters and any\nURL\u002Fquery state.",{"name":5089,"tagName":5090,"description":5091},"FilterInput","nord-filter-input","Filter Input is a compact search\u002Ftext field for filtering a collection. It\nreplaces the small ad-hoc search inputs that sit in toolbars and table\nheaders. By default it renders inline as a small search field with a leading\nsearch icon; set mode=\"chip\" to collapse it behind a chip button that opens\nthe input in a popout, which is handy in a crowded Filter Bar.\n\nIt emits intent only: input as the user types and change when the value is\ncommitted. Your app owns the active filters and any URL\u002Fquery state — read the\nvalue from the event target (or bind value) and filter accordingly.\n\nIt is a control only, like Combobox: compose it inside\na Field for a visible label, or set label for an\naccessible name when used standalone.",{"name":5093,"tagName":5094,"description":5095},"FilterResetButton","nord-filter-reset-button","Filter Reset Button clears every active filter at once. It is a thin,\nintent-only control: it renders a plain button and dispatches a reset event\nwhen pressed. Your app owns the active filters and is responsible for clearing\nthem (and any URL\u002Fquery state) in the handler — the button holds no state of\nits own.\n\nDisable it while there is nothing to reset by binding disabled to whether any\nfilter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud\nfilter reset button.",{"name":5097,"tagName":5098,"description":5099,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Footer","nord-footer","The footer is a block of designated space for providing additional information or actions that are positioned below the main content.",{"name":5101,"tagName":5102,"description":5103,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":5105,"tagName":1078,"description":5106,"category":4931,"status":4891,"isNew":4407,"lightDom":4407},"Icon","Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",{"name":886,"tagName":846,"description":5108,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",{"name":1112,"tagName":1130,"description":5110,"category":5111,"status":4891,"isNew":4407,"lightDom":478,"parts":5112},"Item is a flexible, composable row used to display a piece of content such as\na person, a file or a setting. Combine it with Item Media,\nItem Content, Item Title,\nItem Description and Item Actions\nto build rich list rows. Stack several together with Item Group.\n\nTo make a whole Item act as a link, wrap it in an \u003Ca> element. The row\nhighlights on hover when wrapped this way.","list",[5113,5116,5119,5122,5126,5130,5134,5137,5141],{"name":5114,"tagName":1220,"description":5115},"ItemActions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":5117,"tagName":1175,"description":5118},"ItemContent","Item Content holds the textual content of an Item,\ntypically an Item Title and an\nItem Description. It grows to fill the\navailable space.",{"name":5120,"tagName":1198,"description":5121},"ItemDescription","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":5123,"tagName":5124,"description":5125},"ItemFooter","nord-item-footer","Item Footer spans the full width at the bottom of an Item,\nuseful for a row of metadata or trailing actions.",{"name":5127,"tagName":5128,"description":5129},"ItemGroup","nord-item-group","Item Group stacks a set of Item rows vertically and\nexposes them to assistive technology as a list. Separate individual items\nwith Item Separator.",{"name":5131,"tagName":5132,"description":5133},"ItemHeader","nord-item-header","Item Header spans the full width at the top of an Item,\nuseful for a leading image or a row of metadata.",{"name":5135,"tagName":1146,"description":5136},"ItemMedia","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":5138,"tagName":5139,"description":5140},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":5142,"tagName":1184,"description":5143},"ItemTitle","Item Title is the primary line of text in an Item.",{"name":5145,"tagName":5146,"description":5147,"category":4931,"status":4891,"isNew":4407,"lightDom":478,"parts":5148},"Kbd","nord-kbd","Kbd is used to display a keyboard key, such as a shortcut or a key the user\nshould press. Group related keys together with Kbd Group.",[5149],{"name":5150,"tagName":5151,"description":5152},"KbdGroup","nord-kbd-group","Kbd Group lays out a set of Kbd keys together, for example\nto represent a multi-key shortcut such as \u003Ckbd>Ctrl\u003C\u002Fkbd> \u003Ckbd>K\u003C\u002Fkbd>.",{"name":5154,"tagName":5155,"description":5156,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Layout","nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":5158,"tagName":5159,"description":5160,"category":4940,"status":4891,"isNew":4407,"lightDom":4407},"Message","nord-message","Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",{"name":5162,"tagName":5163,"description":5164,"category":4935,"status":4891,"isNew":4407,"lightDom":478},"Meter","nord-meter","Meter is a graphical display of a numeric value within a known range,\nsuch as disk usage, a battery level or a score. Unlike Progress Bar, it\nrepresents a static measurement rather than the completion of a task.",{"name":5166,"tagName":5167,"description":5168,"category":5005,"status":4891,"isNew":4407,"lightDom":4407},"Modal","nord-modal","Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",{"name":5170,"tagName":5171,"description":5172,"category":5173,"status":4891,"isNew":4407,"lightDom":4407,"parts":5174},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.","navigation",[5175,5179,5183],{"name":5176,"tagName":5177,"description":5178},"NavGroup","nord-nav-group","Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",{"name":5180,"tagName":5181,"description":5182},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":5184,"tagName":5185,"description":5186},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":5188,"tagName":5189,"description":5190,"category":4935,"status":4891,"isNew":4407,"lightDom":4407,"parts":5191},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[5192],{"name":5193,"tagName":5194,"description":5195},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":5197,"tagName":5198,"description":5199,"category":1516,"status":4891,"isNew":4407,"lightDom":478},"NumberField","nord-number-field","Number Field is a control for entering a numeric value, with decrement and\nincrement stepper buttons, optional drag-to-scrub, and locale-aware\nformatting. It ports the behaviour of Base UI's Number Field: arrow\u002FPage\nstepping, Home\u002FEnd to the bounds, press-and-hold auto-repeat, optional\nwheel\u002Fscrub, clamping, and Intl.NumberFormat formatting.\n\nNumber Field is a control only — it has no built-in label, hint or error.\nCompose it inside a Field with a\nField Label to give it a label, hint and error,\nthe same way you would a native input.\n\nFORM PARTICIPATION: the value is submitted as the raw numeric string under the\nhost name via FormDataController (the inner input has no name, avoiding a\ndouble submit). Unlike Base UI there is no hidden native number input, and —\nlike the other new Nord controls — Number Field does NOT use\nElementInternals, so it performs no native constraint validation: required,\nmin, max and step are NOT enforced as form-blocking validity. min\u002Fmax\ngovern interactive stepping and (unless allow-out-of-range is set) clamp the\nvalue; required only surfaces as required\u002Faria-required on the inner input\nfor assistive technology. Authors must validate constraints themselves and\nreflect failures via invalid and a nord-field-error.\n\nACCESSIBILITY NOTE: the inner control is a text input (with inputmode) and\naria-roledescription=\"Number field\", NOT role=\"spinbutton\" and NOT a\nnative type=\"number\". A text input lets us show locale-formatted text\n(currency, percent, grouping) while keeping full text editing — assistive tech\nreads the formatted value from the input's text. We do NOT add\naria-valuenow\u002Fvaluemin\u002Fvaluemax\u002Fvaluetext: those are only valid on a\nrange role (e.g. spinbutton\u002Fslider) and would fail aria-allowed-attr\nvalidation on a text input. This mirrors what Base UI's NumberFieldInput\nactually ships (only aria-roledescription).",{"name":5201,"tagName":5202,"description":5203,"category":1516,"status":4891,"isNew":4407,"lightDom":478},"OtpField","nord-otp-field","OTP Field is a segmented one-time-code input: it renders length individual\ncharacter cells plus a visually-hidden input that holds the full value, enabling\nSMS \u002F keychain autofill and native pattern\u002Frequired validation. Typing fills\nand auto-advances, Backspace clears and moves back, the arrow keys navigate, and\npasting a code distributes its characters across the cells.\n\nOTP Field is a control only — it has no built-in label, hint or error. Compose\nit inside a Field with a Field Label\n(connected with for) to give it an accessible name, helper text and an error\nmessage, exactly like a native input.",{"name":5205,"tagName":5206,"description":5207,"category":5173,"status":4891,"isNew":4407,"lightDom":4407,"parts":5208},"Outline","nord-outline","Outline is an in-page table of contents that lists a page's headings and\nhighlights the section currently in view as you scroll.\n\nProvide Outline Item children, or point for at\na container to build the list from its headings.",[5209],{"name":5210,"tagName":5211,"description":5212},"OutlineItem","nord-outline-item","Outline Item is a single link within an Outline. It\npoints at an in-page heading via its href and indents according to its\nlevel. Its active state is managed by the parent Outline — you normally\ndon't set it yourself.",{"name":1117,"tagName":5214,"description":5215,"category":5173,"status":4891,"isNew":4407,"lightDom":478,"parts":5216},"nord-pagination","Pagination is the navigation root for a paginated collection. It is\ncomposition-first: it owns no page state, renders no controls, and emits no\nevents. Your app owns the page state, URL\u002Fquery syncing, cursors and any data\nfetching; Nord supplies the semantic\u002Flayout primitives, the styling and the\npaginate() math utility for building the page window.\n\nAs a root it is a navigation landmark — it sets role=\"navigation\" and a\ndefault accessible label so screen-reader users can jump to it. Compose the\nlower-level primitives inside it:\n\n- Pagination Content — the list row.\n- Pagination Item — a slot in the row.\n- Pagination Link — a page link (set current).\n- Pagination Previous — the previous control.\n- Pagination Next — the next control.\n- Pagination Ellipsis — the collapsed-pages marker.\n\nBring your own interactive element — an \u003Ca> (e.g. a framework \u003CLink> \u002F\n\u003CNuxtLink>) or a nord-button — and own its href, navigation and\ndisabled state. See the framework adapters in the docs.",[5217,5221,5225,5229,5233,5237],{"name":5218,"tagName":5219,"description":5220},"PaginationContent","nord-pagination-content","The list container for composed Pagination controls.\nLays its Pagination Item children out in a row.\n\nPlace it inside Pagination, which is already the\nnavigation landmark (it sets role=\"navigation\" and an accessible label).\nDo not add your own \u003Cnav> wrapper — a second landmark around the same\ncontrols would be a duplicate that screen-reader users have to wade through.",{"name":5222,"tagName":5223,"description":5224},"PaginationEllipsis","nord-pagination-ellipsis","The collapsed-pages marker (…) in a composed Pagination.\nThe glyph is decorative; a visually-hidden label gives it meaning for\nassistive tech. Set label to localise it.",{"name":5226,"tagName":5227,"description":5228},"PaginationItem","nord-pagination-item","A single slot in a composed Pagination Content\nrow. Wrap each control — a Pagination Link,\nPagination Previous, Pagination Next\nor Pagination Ellipsis — in its own item.",{"name":5230,"tagName":5231,"description":5232},"PaginationLink","nord-pagination-link","A page link in a composed Pagination. A layout\nwrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink> for crawlable, SSR-friendly links) or a nord-button. Set\ncurrent on the link for the active page; it mirrors aria-current=\"page\"\nonto the interactive child so assistive tech announces it.",{"name":5234,"tagName":5235,"description":5236},"PaginationNext","nord-pagination-next","The \"next page\" control in a composed Pagination. A\nlayout wrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no next page.",{"name":5238,"tagName":5239,"description":5240},"PaginationPrevious","nord-pagination-previous","The \"previous page\" control in a composed Pagination.\nA layout wrapper around your own interactive element — provide an \u003Ca>\n(e.g. a framework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no previous page.",{"name":5242,"tagName":5243,"description":5244,"category":5005,"status":4891,"isNew":4407,"lightDom":4407},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":5246,"tagName":5247,"description":5248,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"Progress","nord-progress","Progress component is used to display a circular pie-chart style progress indicator.\nYou can customize the size and color of the progress indicator with the\nprovided properties.",{"name":5250,"tagName":5251,"description":5252,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"ProgressBar","nord-progress-bar","Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",{"name":5254,"tagName":5255,"description":5256,"category":4931,"status":4891,"isNew":4407,"lightDom":4407},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":5258,"tagName":5259,"description":5260,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Radio","nord-radio","Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",{"name":5262,"tagName":5263,"description":5264,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Range","nord-range","Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",{"name":5266,"tagName":5267,"description":5268,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"ScrollArea","nord-scroll-area","Scroll Area is a container that wraps overflowing content in a custom scroll\nviewport with consistently-styled scrollbars. Native scrollbars are hidden and\nreplaced with a thin overlay thumb that appears on hover or while scrolling.\n\nIt also exposes the distance from each edge as CSS custom properties\n(--scroll-area-overflow-*), which can drive an edge-fade mask on\n::part(viewport) — see the docs example.\n\nThe scroll machinery lives in shadow DOM; slot your content directly inside.",{"name":5270,"tagName":5271,"description":5272,"category":4940,"status":4891,"isNew":4407,"lightDom":4407,"parts":5273},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[5274],{"name":5275,"tagName":5276,"description":5277},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":5279,"tagName":928,"description":5280,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Select","Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",{"name":5282,"tagName":5283,"description":5284,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"Skeleton","nord-skeleton","Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",{"name":5286,"tagName":5287,"description":5288,"category":4935,"status":4891,"isNew":4407,"lightDom":4407},"Spinner","nord-spinner","Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",{"name":5290,"tagName":977,"description":5291,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"Stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":5293,"tagName":5294,"description":5295,"category":5173,"status":4891,"isNew":4407,"lightDom":4407,"parts":5296},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[5297,5301],{"name":5298,"tagName":5299,"description":5300},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":5302,"tagName":5303,"description":5304},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":5306,"tagName":5307,"description":5308,"category":5111,"status":4891,"isNew":4407,"lightDom":4407},"Table","nord-table","Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",{"name":3601,"tagName":5310,"description":5311,"category":4931,"status":4891,"isNew":4407,"lightDom":4407,"parts":5312},"nord-tag","Tags represent a set of keywords that help label, categorize,\nand organize objects. Commonly used to signify the attributes of an object.",[5313],{"name":5314,"tagName":5315,"description":5316},"TagGroup","nord-tag-group","Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",{"name":5318,"tagName":5319,"description":5320,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"Textarea","nord-textarea","Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",{"name":5322,"tagName":5323,"description":5324,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"TimePicker","nord-time-picker","Time Picker pairs the browser's native time field with a dropdown of quick\noptions, generated at a configurable interval between start and end.\nThe native field handles typing, locale-aware display and validation; the\ndropdown is a shortcut for common times.\n\nThe value is held in ISO HH:mm format.\n\nLike a native input, Time Picker is a control only — it has no built-in\nlabel, hint or error. Compose it inside a Field (with a\nField Label, Field Description\nand Field Error) to label it and add help or error text.",{"name":5326,"tagName":5327,"description":5328,"category":4935,"status":4891,"isNew":4407,"lightDom":4407,"parts":5329},"Toast","nord-toast","Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",[5330],{"name":5331,"tagName":5332,"description":5333},"ToastGroup","nord-toast-group","Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",{"name":3597,"tagName":5335,"description":5336,"category":1516,"status":4891,"isNew":4407,"lightDom":4407},"nord-toggle","Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",{"name":5338,"tagName":5339,"description":5340,"category":5005,"status":4891,"isNew":4407,"lightDom":4407},"Tooltip","nord-tooltip","Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",{"name":5342,"tagName":5343,"description":5344,"category":4913,"status":4891,"isNew":4407,"lightDom":4407},"TopBar","nord-top-bar","Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",{"name":5346,"tagName":5347,"description":5348,"category":4931,"status":4891,"isNew":4407,"lightDom":4407},"Truncate","nord-truncate","Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.",{"name":5350,"tagName":5351,"description":5352,"category":4931,"status":4891,"isNew":4407,"lightDom":4407},"VisuallyHidden","nord-visually-hidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"stylesheet\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F5.2.0\u002Fnord.min.css\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> integrity\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"sha384-1QZZLXO6H3XMIwxgdtR6ryCeueSTyFtyfQEp6ijhaPA1wmp+psPo2CK8k6g68Lwt\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> crossorigin\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"anonymous\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"stylesheet\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord-dark.css\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> integrity\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"sha384-4mfQkitA1YUssjHukrfVhopnhPw9eM2tX8Z05rZ\u002F5NJRmDJN1fQp2gGfwydx2SzL\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> crossorigin\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"anonymous\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"module\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F5.0.0\u002Findex.js\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> integrity\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"sha384-M9tJ\u002FoXCOP8I0FhpxlyBA5sKzbrAWDC+b7AlBgeDMOVGfiesm4gK6ldRcCRN2FOo\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> crossorigin\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"anonymous\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"components":5357,"css":5360,"themes":5363},{"url":5358,"version":5359},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F5.0.0\u002Findex.js","5.0.0",{"url":5361,"version":5362},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F5.2.0\u002Fnord.min.css","5.2.0",{"nord":5364,"nordDark":5366,"vet":5368,"vetDark":5370},{"url":5365},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord.css",{"url":5367},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord-dark.css",{"url":5369},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet.css",{"url":5371},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet-dark.css",[5373,5375,5377,5380,5382,5384,5386,5388,5390,5392,5394,5396,5398,5400,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420,5422,5424,5426,5428,5430,5432,5434,5436,5438,5440,5442,5444,5446,5448,5450,5452,5454,5456,5458,5460,5462,5464,5466,5468,5470,5472,5474,5476,5478,5480,5482,5484,5486,5488,5490,5492,5494,5496,5498,5500],{"path":5374,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Faccordion",{"path":5376,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Faside",{"path":5378,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Fautocomplete","2026-07-06",{"path":5381,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Favatar",{"path":5383,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fbadge",{"path":5385,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fbanner",{"path":5387,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fbutton",{"path":5389,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fbutton-group",{"path":5391,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fcalendar",{"path":5393,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fcard",{"path":5395,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fcheckbox",{"path":5397,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fcollapsible",{"path":5399,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Fcombobox",{"path":5401,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fcommand-menu",{"path":5403,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fdate-picker",{"path":5405,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Fdate-range-picker",{"path":5407,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fdivider",{"path":5409,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fdrawer",{"path":5411,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fdropdown",{"path":5413,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fempty-state",{"path":5415,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Ffield",{"path":5417,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ffieldset",{"path":5419,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Ffilter-bar",{"path":5421,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ffilter-date-range",{"path":5423,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ffilter-dropdown",{"path":5425,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ffooter",{"path":5427,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fheader",{"path":5429,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ficon",{"path":5431,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Finput",{"path":5433,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fitem",{"path":5435,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fkbd",{"path":5437,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Flayout",{"path":5439,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fmessage",{"path":5441,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fmeter",{"path":5443,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fmodal",{"path":5445,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fnavigation",{"path":5447,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fnotification",{"path":5449,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Fnumber-field",{"path":5451,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Fotp-field",{"path":5453,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Foutline",{"path":5455,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fpagination",{"path":5457,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fpopout",{"path":5459,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fprogress",{"path":5461,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fprogress-bar",{"path":5463,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fqrcode",{"path":5465,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fradio",{"path":5467,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Frange",{"path":5469,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Fscroll-area",{"path":5471,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fsegmented-control",{"path":5473,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Fselect",{"path":5475,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fskeleton",{"path":5477,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fspinner",{"path":5479,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fstack",{"path":5481,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftab",{"path":5483,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftable",{"path":5485,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftag",{"path":5487,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Ftextarea",{"path":5489,"isNew":478,"updated":5379},"\u002Fcomponent-docs\u002Ftime-picker",{"path":5491,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftoast",{"path":5493,"isNew":4407,"updated":5379},"\u002Fcomponent-docs\u002Ftoggle",{"path":5495,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftooltip",{"path":5497,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Ftop-bar",{"path":5499,"isNew":478,"updated":6},"\u002Fcomponent-docs\u002Ftruncate",{"path":5501,"isNew":4407,"updated":6},"\u002Fcomponent-docs\u002Fvisually-hidden",1783350309032]